From ba2f4936958e58885ee3815b04ec7473a4da1c1a Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Wed, 25 Dec 2024 19:03:01 +0100
Subject: [PATCH] feat: navbar redesign

---
 src/app/(protected)/project/[id]/page.tsx     |  2 +-
 src/app/(public)/page.tsx                     |  8 +-
 src/app/globals.css                           | 86 +++++++++--------
 src/components/app/NavBar/NavBar.tsx          | 92 +++++++++++--------
 .../app/ProjectSettings/ProjectSettings.tsx   |  2 +-
 tailwind.config.ts                            |  9 ++
 6 files changed, 119 insertions(+), 80 deletions(-)

diff --git a/src/app/(protected)/project/[id]/page.tsx b/src/app/(protected)/project/[id]/page.tsx
index 661626f..977fc18 100644
--- a/src/app/(protected)/project/[id]/page.tsx
+++ b/src/app/(protected)/project/[id]/page.tsx
@@ -43,7 +43,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
   // maybe it's not clean enough but who cares
   return (
     <div className="p-4">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-6xl mx-auto">
         <Breadcrumb className="pb-5">
           <BreadcrumbList>
             <BreadcrumbItem>
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 3bfa55c..040a23f 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
                 href="https://cloud-jblc9ujpj-hack-club-bot.vercel.app/0kooha-2024-12-22-23-23-29.mp4"
                 target="_blank"
               >
-                <div className="flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
+                <div className="flex items-center rounded-lg px-3 py-1 text-sm bg-mantle">
                   Now you can add team members! <ArrowRight className="ml-2 w-4 h-4" />
                 </div>
               </Link>
@@ -46,7 +46,7 @@ export default function Home() {
           </div>
         </section>
         <section
-          className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900"
+          className="w-full py-12 md:py-24 lg:py-32 bg-mantle"
           id="features"
         >
           <div className="container px-4 md:px-6">
@@ -56,7 +56,7 @@ export default function Home() {
                   {
                     title: 'Create a project',
                     description:
-                      'Create a project and invite your team members (soon) to start collecting feedback',
+                      'Create a project and invite your team members to start collecting feedback',
                     html: (
                       <Video
                         src="https://cloud-flt5r19p6-hack-club-bot.vercel.app/0kooha-2024-12-15-21-37-18.mp4"
@@ -73,7 +73,7 @@ export default function Home() {
                     html: (
                       // eslint-disable-next-line @next/next/no-img-element
                       <img
-                        src="https://cloud-9x06b7lfe-hack-club-bot.vercel.app/0carbon_2_.png"
+                        src="https://cloud-81pelcjv5-hack-club-bot.vercel.app/0carbon_3_.png"
                         alt="Code example"
                         className="w-full rounded-lg"
                       />
diff --git a/src/app/globals.css b/src/app/globals.css
index 396d1cd..dc3e471 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,67 +4,77 @@
 
 @layer base {
   :root {
-    --background: 220 23.077% 94.902%; /* base */
-    --foreground: 233.793 16.022% 35.49%; /* text */
+    --background: 220 23.077% 94.902%;
+    --foreground: 233.793 16.022% 35.49%;
 
-    --muted: 222.857 15.909% 82.745%; /* surface0 */
-    --muted-foreground: 233.333 12.796% 41.373%; /* subtext1 */
+    --muted: 222.857 15.909% 82.745%;
+    --muted-foreground: 233.333 12.796% 41.373%;
 
-    --popover: 220 23.077% 94.902%; /* base */
-    --popover-foreground: 233.793 16.022% 35.49%; /* text */
+    --popover: 220 23.077% 94.902%;
+    --popover-foreground: 233.793 16.022% 35.49%;
 
-    --card: 220 23.077% 94.902%; /* base */
-    --card-foreground: 233.793 16.022% 35.49%; /* text */
+    --card: 220 23.077% 94.902%;
+    --card-foreground: 233.793 16.022% 35.49%;
 
-    --border: 225 13.559% 76.863%; /* surface1 */
-    --input: 225 13.559% 76.863%; /* surface1 */
+    --border: 225 13.559% 76.863%;
+    --input: 225 13.559% 76.863%;
 
-    --primary: 219.907 91.489% 53.922%; /* blue */
-    --primary-foreground: 220 23.077% 94.902%; /* base */
+    --primary: 219.907 91.489% 53.922%;
+    --primary-foreground: 220 23.077% 94.902%;
 
-    --secondary: 222.857 15.909% 82.745%; /* surface0 */
-    --secondary-foreground: 233.793 16.022% 35.49%; /* text */
+    --secondary: 222.857 15.909% 82.745%;
+    --secondary-foreground: 233.793 16.022% 35.49%;
 
-    --accent: 222.857 15.909% 82.745%; /* surface0 */
-    --accent-foreground: 233.793 16.022% 35.49%; /* text */
+    --accent: 222.857 15.909% 82.745%;
+    --accent-foreground: 233.793 16.022% 35.49%;
 
-    --destructive: 347.077 86.667% 44.118%; /* red */
-    --destructive-foreground: 220 21.951% 91.961%; /* mantle */
+    --destructive: 347.077 86.667% 44.118%;
+    --destructive-foreground: 220 21.951% 91.961%;
 
-    --ring: 233.793 16.022% 35.49%; /* text */
+    --ring: 233.793 16.022% 35.49%;
+
+    --surface-1: 225.0 14.0% 77.0%;
+    --surface-2: 227.0 12.0% 71.0%;
+
+    --mantle: 220.0 22.0% 92.0%;
 
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 240 21.053% 14.902%; /* base */
-    --foreground: 226.154 63.934% 88.039%; /* text */
+    --background: 240 21.053% 14.902%;
+    --foreground: 226.154 63.934% 88.039%;
 
-    --muted: 236.842 16.239% 22.941%; /* surface0 */
-    --muted-foreground: 226.667 35.294% 80%; /* subtext1 */
+    --muted: 236.842 16.239% 22.941%;
+    --muted-foreground: 226.667 35.294% 80%;
 
-    --popover: 240 21.053% 14.902%; /* base */
-    --popover-foreground: 226.154 63.934% 88.039%; /* text */
+    --popover: 240 21.053% 14.902%;
+    --popover-foreground: 226.154 63.934% 88.039%;
 
-    --card: 240 21.053% 14.902%; /* base */
-    --card-foreground: 226.154 63.934% 88.039%; /* text */
+    --card: 240 21.053% 14.902%;
+    --card-foreground: 226.154 63.934% 88.039%;
 
-    --border: 234.286 13.208% 31.176%; /* surface1 */
-    --input: 234.286 13.208% 31.176%; /* surface1 */
+    --border: 234.286 13.208% 31.176%;
+    --input: 234.286 13.208% 31.176%;
 
-    --primary: 217.168 91.87% 75.882%; /* blue */
-    --primary-foreground: 240 21.053% 14.902%; /* base */
+    --primary: 217.168 91.87% 75.882%;
+    --primary-foreground: 240 21.053% 14.902%;
 
-    --secondary: 236.842 16.239% 22.941%; /* surface0 */
-    --secondary-foreground: 226.154 63.934% 88.039%; /* text */
+    --secondary: 236.842 16.239% 22.941%;
+    --secondary-foreground: 226.154 63.934% 88.039%;
 
-    --accent: 236.842 16.239% 22.941%; /* surface0 */
-    --accent-foreground: 226.154 63.934% 88.039%; /* text */
+    --accent: 236.842 16.239% 22.941%;
+    --accent-foreground: 226.154 63.934% 88.039%;
 
-    --destructive: 343.269 81.25% 74.902%; /* red */
-    --destructive-foreground: 240 21.311% 11.961%; /* mantle */
+    --destructive: 343.269 81.25% 74.902%;
+    --destructive-foreground: 240 21.311% 11.961%;
 
-    --ring: 226.154 63.934% 88.039%; /* text */
+    --ring: 226.154 63.934% 88.039%;
+
+    --surface-1: 234.0 13.0% 31.0%;
+    --surface-2: 233.0 12.0% 39.0%;
+
+    --mantle: 240 21.311% 11.961%;
 
     --radius: 0.5rem;
   }
diff --git a/src/components/app/NavBar/NavBar.tsx b/src/components/app/NavBar/NavBar.tsx
index cf6758b..a306bef 100644
--- a/src/components/app/NavBar/NavBar.tsx
+++ b/src/components/app/NavBar/NavBar.tsx
@@ -1,58 +1,75 @@
-"use client"
+'use client';
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 /**
  * v0 by Vercel.
  * @see https://v0.dev/t/igzEEdGqAvH
  * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
  */
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu"
-import { logout } from "@/lib/auth/actions"
-import { useSession } from "@/lib/providers/SessionProvider"
-import Link from "next/link"
-import { useActionState } from "react"
-import MobileNavbarLinks from "../MobileNavbarLinks/MobileNavbarLinks"
-import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import { logout } from '@/lib/auth/actions';
+import { useSession } from '@/lib/providers/SessionProvider';
+import Link from 'next/link';
+import { useActionState } from 'react';
+import MobileNavbarLinks from '../MobileNavbarLinks/MobileNavbarLinks';
+import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';
 
 export const links = [
   { href: '/dashboard', name: 'Dashboard' },
   { href: 'https://github.com/sponsors/SrIzan10', name: '❤️ Donate' },
-]
+];
 
 function NavbarLinks() {
   return (
-    <>
+    <div className="flex gap-8">
       {links.map((link) => (
         <Link key={link.href} href={link.href}>
           <Button variant={'link'}>{link.name}</Button>
         </Link>
       ))}
-    </>
+    </div>
   );
 }
 
 export default function Navbar() {
   const { user } = useSession();
-  const [, logoutAction] = useActionState(logout, null)
+  const [, logoutAction] = useActionState(logout, null);
   return (
     <>
-      <nav className="flex items-center h-16 px-4 border-b gap-3 shrink-0">
-        <Link href="/" className="hidden md:flex">
-          <Button>echospace</Button>
-        </Link>
-        <MobileNavbarLinks />
-        <div className="hidden md:flex">
+      <nav className="flex items-center justify-between h-16 px-4 md:shadow border-b md:border-0 md:rounded-md md:mt-2 gap-3 shrink-0 max-w-6xl mx-auto bg-mantle">
+        {/* Left section */}
+        <div className="flex items-center">
+          <Link href="/" className="hidden md:flex">
+            <Button>echospace</Button>
+          </Link>
+          <MobileNavbarLinks />
+        </div>
+
+        {/* Center section */}
+        <div className="hidden md:flex items-center justify-center">
           <NavbarLinks />
         </div>
-        <div className="flex-1" />
-        <ThemeSwitcher />
-        {user ? (
-          <>
+
+        {/* Right section */}
+        <div className="flex items-center gap-3">
+          <ThemeSwitcher />
+          {user ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="cursor-pointer">
                 <Avatar>
-                  <AvatarImage src={`https://github.com/${user.username}.png`} alt={user.username} />
+                  <AvatarImage
+                    src={`https://github.com/${user.username}.png`}
+                    alt={user.username}
+                  />
                   <AvatarFallback>{user.username}</AvatarFallback>
                 </Avatar>
               </DropdownMenuTrigger>
@@ -60,21 +77,24 @@ export default function Navbar() {
                 <DropdownMenuLabel>My Account</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
-                  <DropdownMenuItem className="cursor-pointer" onClick={() => {
-                    logoutAction()
-                  }}>
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => {
+                      logoutAction();
+                    }}
+                  >
                     Sign out
                   </DropdownMenuItem>
-                  </DropdownMenuGroup>
+                </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
-          </>
-        ) : (
-          <Link href="/auth">
-            <Button variant="outline">Sign in</Button>
-          </Link>
-        )}
+          ) : (
+            <Link href="/auth">
+              <Button variant="outline">Sign in</Button>
+            </Link>
+          )}
+        </div>
       </nav>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/app/ProjectSettings/ProjectSettings.tsx b/src/components/app/ProjectSettings/ProjectSettings.tsx
index af93f8b..8a764fa 100644
--- a/src/components/app/ProjectSettings/ProjectSettings.tsx
+++ b/src/components/app/ProjectSettings/ProjectSettings.tsx
@@ -38,7 +38,7 @@ export default function ProjectSettings(project: ProjectWithUsers) {
   }, [project.github]);
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-4">
+    <div className="w-full max-w-6xl mx-auto p-4">
       <Breadcrumb className="pb-5">
         <BreadcrumbList>
           <BreadcrumbItem>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 73bd5d9..592d72f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,6 +52,15 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        surface1: {
+          DEFAULT: "hsl(var(--surface-1))",
+        },
+        surface2: {
+          DEFAULT: "hsl(var(--surface-2))",
+        },
+        mantle: {
+          DEFAULT: "hsl(var(--mantle))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",