rearage top nav bar

src/app/[orgId]/components/Header.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
-import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
 import {
     DropdownMenu,
@@ -12,7 +11,14 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@app/components/ui/dropdown-menu";
-import { Separator } from "@app/components/ui/separator";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@app/components/ui/select";
 import Link from "next/link";
 
 type HeaderProps = {
@@ -33,41 +39,14 @@ export default function Header({ email, orgName, name }: HeaderProps) {
     return (
         <>
             <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                    <Badge variant="default" className="text-md font-bold">
-                        {orgName}
-                    </Badge>
-
-                    <div className="hidden md:block">
-                        <div className="flex items-center gap-4 ml-4">
-                            <Link
-                                href="/docs"
-                                className="text-primary hover:text-primary"
-                            >
-                                Documentation
-                            </Link>
-                            <Link
-                                href="/support"
-                                className="text-primary hover:text-primary"
-                            >
-                                Support
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-
                 <div className="flex items-center gap-4">
-                    {/* Make the text truncate on smaller screens */}
-                    <span className="text-lg font-medium truncate max-w-[150px] md:max-w-none">
-                        {name || email}
-                    </span>
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button
-                                variant="ghost"
+                                variant="outline"
                                 className="relative h-10 w-10 rounded-full"
                             >
-                                <Avatar className="h-10 w-10">
+                                <Avatar className="h-9 w-9">
                                     <AvatarFallback>
                                         {getInitials()}
                                     </AvatarFallback>
@@ -76,7 +55,7 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                         </DropdownMenuTrigger>
                         <DropdownMenuContent
                             className="w-56"
-                            align="end"
+                            align="start"
                             forceMount
                         >
                             <DropdownMenuLabel className="font-normal">
@@ -93,11 +72,46 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                             </DropdownMenuLabel>
                             <DropdownMenuSeparator />
                             <DropdownMenuGroup>
-                                <Link href="/profile"><DropdownMenuItem>Profile</DropdownMenuItem></Link>
+                                <DropdownMenuItem>Profile</DropdownMenuItem>
                                 <DropdownMenuItem>Log out</DropdownMenuItem>
                             </DropdownMenuGroup>
                         </DropdownMenuContent>
                     </DropdownMenu>
+                    <span className="truncate max-w-[150px] md:max-w-none">
+                        {name || email}
+                    </span>
+                </div>
+
+                <div className="flex items-center">
+                    <div className="hidden md:block">
+                        <div className="flex items-center gap-4 mr-4">
+                            <Link
+                                href="/docs"
+                                className="text-muted-foreground hover:text-black"
+                            >
+                                Documentation
+                            </Link>
+                            <Link
+                                href="/support"
+                                className="text-muted-foreground hover:text-black"
+                            >
+                                Support
+                            </Link>
+                        </div>
+                    </div>
+
+                    <Select defaultValue={orgName}>
+                        <SelectTrigger className="w-[100px] md:w-[180px]">
+                            <SelectValue placeholder="Select an org" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem value={orgName}>
+                                    {orgName}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
                 </div>
             </div>
         </>

src/app/[orgId]/components/TopbarNav.tsx

@@ -40,8 +40,8 @@ export function TopbarNav({
                     className={cn(
                         "px-2 py-3 text-md",
                         pathname.startsWith(item.href.replace("{orgId}", orgId))
-                            ? "border-b-2 border-base-600 text-base-600"
-                            : "hover:text-gray-600 text-base-400",
+                            ? "border-b-2 border-primary text-primary font-medium"
+                            : "hover:text-primary text-muted-foreground font-medium",
                         "whitespace-nowrap",
                         disabled && "cursor-not-allowed",
                     )}

src/app/[orgId]/layout.tsx

@@ -50,8 +50,8 @@ export default async function ConfigurationLaytout({
 
     return (
         <>
-            <div className="w-full bg-secondary border-b border-secondary mb-8 select-none sm:px-0 px-3">
-                <div className="container mx-auto flex flex-col content-between gap-4 pt-2">
+            <div className="w-full bg-neutral-100 border-b border-neutral-200 mb-6 select-none sm:px-0 px-3 pt-3">
+                <div className="container mx-auto flex flex-col content-between gap-4">
                     <Header email={user.email} orgName={params.orgId} />
                     <TopbarNav items={topNavItems} orgId={params.orgId} />
                 </div>

src/app/[orgId]/resources/[resourceId]/layout.tsx

@@ -22,10 +22,6 @@ const sidebarNavItems = [
         title: "Notifications",
         href: "/{orgId}/resources/{resourceId}/notifications",
     },
-    {
-        title: "Display",
-        href: "/{orgId}/resources/{resourceId}/display",
-    },
 ]
 
 interface SettingsLayoutProps {
@@ -36,23 +32,7 @@ interface SettingsLayoutProps {
 export default function SettingsLayout({ children, params }: SettingsLayoutProps) {
     return (
         <>
-            <div className="md:hidden">
-                <Image
-                    src="/configuration/forms-light.png"
-                    width={1280}
-                    height={791}
-                    alt="Forms"
-                    className="block dark:hidden"
-                />
-                <Image
-                    src="/configuration/forms-dark.png"
-                    width={1280}
-                    height={791}
-                    alt="Forms"
-                    className="hidden dark:block"
-                />
-            </div>
-            <div className="hidden space-y-6 p-10 pb-16 md:block">
+            <div>
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
                     <p className="text-muted-foreground">

src/app/[orgId]/sites/[siteId]/layout.tsx

@@ -55,7 +55,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
             return null;
         }
     }
-    
+
     return (
         <>
             <div className="md:hidden">
@@ -74,7 +74,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
                     className="hidden dark:block"
                 />
             </div>
-            <div className="hidden space-y-6 p-10 pb-16 md:block">
+            <div className="hidden space-y-6 0 pb-16 md:block">
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
                     <p className="text-muted-foreground">

src/app/globals.css

@@ -4,48 +4,48 @@
 
 @layer base {
     :root {
-        --background: 37 0% 95%;
-        --foreground: 37 0% 10%;
-        --card: 37 0% 90%;
-        --card-foreground: 37 0% 15%;
-        --popover: 37 0% 95%;
-        --popover-foreground: 37 95% 10%;
-        --primary: 37 31% 25%;
+        --background: 231 0% 100%;
+        --foreground: 231 0% 10%;
+        --card: 231 0% 100%;
+        --card-foreground: 231 0% 15%;
+        --popover: 231 0% 100%;
+        --popover-foreground: 231 95% 10%;
+        --primary: 231 34% 49%;
         --primary-foreground: 0 0% 100%;
-        --secondary: 37 10% 74%;
+        --secondary: 231 10% 90%;
         --secondary-foreground: 0 0% 0%;
-        --muted: -1 10% 85%;
-        --muted-foreground: 37 0% 40%;
-        --accent: -1 10% 80%;
-        --accent-foreground: 37 0% 15%;
+        --muted: 193 10% 95%;
+        --muted-foreground: 231 0% 40%;
+        --accent: 193 10% 90%;
+        --accent-foreground: 231 0% 15%;
         --destructive: 0 50% 50%;
-        --destructive-foreground: 37 0% 90%;
-        --border: 37 20% 74%;
-        --input: 37 20% 50%;
-        --ring: 37 31% 25%;
-        --radius: 0.5rem;
+        --destructive-foreground: 231 0% 100%;
+        --border: 231 20% 82%;
+        --input: 231 20% 50%;
+        --ring: 231 34% 49%;
+        --radius: 0.75rem;
     }
     .dark {
-        --background: 37 10% 10%;
-        --foreground: 37 0% 90%;
-        --card: 37 0% 10%;
-        --card-foreground: 37 0% 90%;
-        --popover: 37 10% 5%;
-        --popover-foreground: 37 0% 90%;
-        --primary: 37 31% 25%;
+        --background: 231 10% 10%;
+        --foreground: 231 0% 100%;
+        --card: 231 0% 10%;
+        --card-foreground: 231 0% 100%;
+        --popover: 231 10% 5%;
+        --popover-foreground: 231 0% 100%;
+        --primary: 231 34% 49%;
         --primary-foreground: 0 0% 100%;
-        --secondary: 37 10% 20%;
+        --secondary: 231 10% 20%;
         --secondary-foreground: 0 0% 100%;
-        --muted: -1 10% 25%;
-        --muted-foreground: 37 0% 65%;
-        --accent: -1 10% 25%;
-        --accent-foreground: 37 0% 90%;
+        --muted: 193 10% 25%;
+        --muted-foreground: 231 0% 65%;
+        --accent: 193 10% 25%;
+        --accent-foreground: 231 0% 95%;
         --destructive: 0 50% 50%;
-        --destructive-foreground: 37 0% 90%;
-        --border: 37 20% 50%;
-        --input: 37 20% 50%;
-        --ring: 37 31% 25%;
-        --radius: 0.5rem;
+        --destructive-foreground: 231 0% 100%;
+        --border: 231 20% 50%;
+        --input: 231 20% 50%;
+        --ring: 231 34% 49%;
+        --radius: 0.75rem;
     }
 }
 

src/app/layout.tsx

@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Roboto } from "next/font/google";
-import { Toaster } from "@/components/ui/toaster"
+import { Inter, Roboto } from "next/font/google";
+import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
     title: process.env.NEXT_PUBLIC_APP_NAME,
     description: "",
 };
 
-const font = Roboto({ subsets: ["latin"], style: "normal", weight: "400" });
+const font = Inter({ subsets: ["latin"] });
 
 export default async function RootLayout({
     children,
@@ -17,7 +17,7 @@ export default async function RootLayout({
 }>) {
     return (
         <html>
-            <body className={`${font.className}`}>
+            <body className={`${font.className} pb-3`}>
                 <main>{children}</main>
                 <Toaster />
             </body>