Merge pull request #562 from vitessio/refactor-navbar

Refactor navbar

website/package.json

@@ -36,7 +36,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.14.9",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.0.0",

website/src/assets/styles/tailwind.css

@@ -18,71 +18,73 @@ limitations under the License.
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 10%;
+    --foreground: 20 14.3% 4.1%;
 
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 20 14.3% 4.1%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-
-    --primary: 29 98% 46%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
+    --popover-foreground: 20 14.3% 4.1%;
+  
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+  
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+  
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+  
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+  
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
 
     --front: 0 0% 10%;
     --back: 0 0% 100%;
 
-    --radius: 0.5rem;
     --theme: 48 100% 50%;
   }
 
   .dark {
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
-
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 29 98% 46%;
-    --primary-foreground: 0 0% 9%;
-
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --radius: 0.5rem;
 
     --front: 0 0% 100%;
     --back: 0 0% 10%;
@@ -91,6 +93,7 @@ limitations under the License.
   }
 }
 
+
 @layer base {
   /* setting default background, text color and font */
   html {

website/src/common/Navbar.tsx

@@ -35,10 +35,10 @@ import {
  * @param {string} title - The title of the navigation link.
  */
 
-type NavItem = {  
+type NavItem = {
   to: string;
   title: string;
- }
+};
 
 const navItems: NavItem[] = [
   { to: "/status", title: "Status" },
@@ -48,43 +48,45 @@ const navItems: NavItem[] = [
   { to: "/macro", title: "Macro" },
   { to: "/fk", title: "Foreign Keys" },
   { to: "/pr", title: "PR" },
+  { to: "/history", title: "History" },
 ];
 
 export default function Navbar(): JSX.Element {
   return (
     <nav className="flex flex-col relative">
       <div
         className={twMerge(
-          "w-full bg-background z-[49] flex justify-between md:justify-center p-page py-4 border-b border-border"
+          "w-full bg-background z-[49] flex justify-between lg:justify-center p-4 border-b border-border"
         )}
       >
         <Link to="/" className="flex flex-1 gap-x-2 items-center">
-          <img src="/logo.png" className="h-[2em]" alt="logo" />
-          <h1 className="font-semilight text-lg md:text-2xl">arewefastyet</h1>
+          <img src="/logo.png" className="h-[2em] shrink-0" alt="logo" />
+          <h1 className="font-semilight text-lg md:hidden lg:block">
+            arewefastyet
+          </h1>
         </Link>
 
-        <div className="hidden md:flex gap-x-10 items-center">
-          {navItems.map((item, key) => (
-            <NavLink
-              key={key}
-              to={item.to}
-              className={({ isActive, isPending }) =>
-                twMerge(
-                  "text-lg",
-                  isPending
-                    ? "pointer-events-none opacity-50"
-                    : isActive
-                    ? "text-primary"
-                    : ""
-                )
-              }
-            >
-              {item.title}
-            </NavLink>
-          ))}
-        </div>
-
-        <div className="flex-1 flex gap-3 justify-end items-center">
+        <div className="flex justify-end items-center gap-x-4 lg:justify-end lg:flex-shrink-0 ml-8">
+          <div className="hidden md:flex md:gap-x-3 gap-x-4 justify-center items-center">
+            {navItems.map((item, key) => (
+              <NavLink
+                key={key}
+                to={item.to}
+                className={({ isActive, isPending }) =>
+                  twMerge(
+                    "text-lg text-foreground/80 hover:text-primary/80",
+                    isPending
+                      ? "pointer-events-none opacity-50"
+                      : isActive
+                        ? "text-primary"
+                        : ""
+                  )
+                }
+              >
+                {item.title}
+              </NavLink>
+            ))}
+          </div>
           <ModeToggle />
 
           <Sheet>
@@ -124,12 +126,12 @@ export default function Navbar(): JSX.Element {
                       to={"/"}
                       className={({ isActive, isPending }) =>
                         twMerge(
-                          "text-xl text-left font-medium py-3 w-full",
+                          "text-xl text-left font-medium py-3 w-full text-foreground/80 hover:text-primary/80",
                           isPending
                             ? "pointer-events-none "
                             : isActive
-                            ? "text-foreground"
-                            : ""
+                              ? "text-primary"
+                              : ""
                         )
                       }
                     >
@@ -141,12 +143,12 @@ export default function Navbar(): JSX.Element {
                         to={item.to}
                         className={({ isActive, isPending }) =>
                           twMerge(
-                            "text-xl text-left font-medium py-3 w-full",
+                            "text-xl text-left font-medium py-3 w-full text-foreground/80 hover:text-primary/80",
                             isPending
                               ? "pointer-events-none "
                               : isActive
-                              ? "text-foreground"
-                              : ""
+                                ? "text-primary"
+                                : ""
                           )
                         }
                       >

website/src/pages/HistoryPage/HistoryPage.tsx

@@ -0,0 +1,25 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Hero from "./components/Hero";
+
+export default function HistoryPage() {
+  return (
+    <>
+      <Hero />
+    </>
+  );
+}

website/src/pages/HistoryPage/components/Hero.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export default function Hero() {
+  return (
+    <section className="flex h-[60vh] pt-[8vh] items-center p-page">
+      <div className="flex flex-col justify-start items-start gap-5 max-w-screen-md">
+        <h2 className="text-8xl text-primary">History</h2>
+        <p className="md:my-6 leading-loose">
+          Comming soon...
+        </p>
+      </div>
+    </section>
+  );
+}

website/src/pages/PublicRoute.tsx

@@ -30,6 +30,7 @@ import PRPage from "./PRPage/PRPage";
 import MacroQueriesComparePage from "./MacroQueriesComparePage/MacroQueriesComparePage";
 import MicroPage from "./MicroPage/MicroPage";
 import ForeignKeysPage from "./ForeignKeysPage/ForeignKeysPage";
+import HistoryPage from "./HistoryPage/HistoryPage";
 
 const PublicRoute = () => {
   return (
@@ -48,6 +49,7 @@ const PublicRoute = () => {
         <Route path="/pr" element={<PRsPage />} />
         <Route path="/pr/:pull_nb" element={<PRPage />} />
         <Route path="/fk" element={<ForeignKeysPage />} />
+        <Route path="/history" element={<HistoryPage />} />
 
         <Route path="*" element={<Error />} />
       </Route>