From d1b6ff74290978687c3ec3beed14c38e2563f42b Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 30 Sep 2025 13:56:04 -0600
Subject: [PATCH] Refactor user navigation and theme button styles for improved
 layout and consistency. Adjusted padding and margins in user dropdown,
 updated button sizes in theme selection.

---
 frontend/src/components/ui/buttonTheme.tsx |  8 ++++----
 frontend/src/components/user-nav.tsx       | 22 ++++++++++------------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ui/buttonTheme.tsx b/frontend/src/components/ui/buttonTheme.tsx
index b23b6a89..62648541 100644
--- a/frontend/src/components/ui/buttonTheme.tsx
+++ b/frontend/src/components/ui/buttonTheme.tsx
@@ -19,10 +19,10 @@ export const ThemeButtons = () => {
   };
 
   return (
-    <div className="flex items-center gap-1 border border-border rounded-full">
+    <div className="flex items-center border border-border rounded-full">
       {/* Light Theme Button */}
       <button
-        className={`h-7 w-7 rounded-full flex items-center justify-center ${
+        className={`h-6 w-6 rounded-full flex items-center justify-center ${
           selectedTheme === "light"
             ? "bg-amber-400 text-primary"
             : "text-foreground hover:bg-amber-400 hover:text-background"
@@ -36,7 +36,7 @@ export const ThemeButtons = () => {
 
       {/* Dark Theme Button */}
       <button
-        className={`h-7 w-7 rounded-full flex items-center justify-center ${
+        className={`h-6 w-6 rounded-full flex items-center justify-center ${
           selectedTheme === "dark"
             ? "bg-purple-500/20 text-purple-500 hover:bg-purple-500/20 hover:text-purple-500"
             : "text-foreground hover:bg-purple-500/20 hover:text-purple-500"
@@ -50,7 +50,7 @@ export const ThemeButtons = () => {
 
       {/* System Theme Button */}
       <button
-        className={`h-7 w-7 rounded-full flex items-center justify-center ${
+        className={`h-6 w-6 rounded-full flex items-center justify-center ${
           selectedTheme === "system"
             ? "bg-foreground text-background"
             : "hover:bg-foreground hover:text-background"
diff --git a/frontend/src/components/user-nav.tsx b/frontend/src/components/user-nav.tsx
index 3adc9fd7..d5e3783f 100644
--- a/frontend/src/components/user-nav.tsx
+++ b/frontend/src/components/user-nav.tsx
@@ -79,30 +79,28 @@ export function UserNav() {
           <ChevronsUpDown size={16} className="text-muted-foreground mx-2" />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="end" forceMount>
+      <DropdownMenuContent className="w-56 p-0" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
-          <div className="flex flex-col space-y-2">
+          <div className="flex flex-col space-y-2 px-1 py-1">
             <p className="text-sm font-medium leading-none">{user?.name}</p>
             <p className="text-xs leading-none text-muted-foreground">
               {user?.email}
             </p>
           </div>
         </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {/* <DropdownMenuItem className="flex items-center justify-between"> */}
-        <div className="flex items-center justify-between px-2 h-8">
+        <DropdownMenuSeparator className="m-0" />
+        <div className="flex items-center justify-between pl-3 pr-2 h-9">
           <span className="text-sm">Theme</span>
           <ThemeButtons />
         </div>
-        {/* </DropdownMenuItem> */}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
+        <DropdownMenuSeparator className="m-0" />
+        <button
           onClick={logout}
-          className="text-red-600 focus:text-red-600"
+          className="flex items-center hover:bg-muted w-full h-9 px-3"
         >
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Log out</span>
-        </DropdownMenuItem>
+          <LogOut className="mr-2 h-4 w-4 text-muted-foreground" />
+          <span className="text-sm">Logout</span>
+        </button>
       </DropdownMenuContent>
     </DropdownMenu>
   );