feat: enhance ModeToggle component with system theme option and improve button styling

Author: ErwanDecoster

src/components/ModeToggle.tsx

@@ -1,23 +1,45 @@
-import { Moon, Sun } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from '@/components/themeProvider';
 import { Button } from '@/components/ui/button';
 
 export function ModeToggle() {
-  const { setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
   return (
-    <div>
-      <Button onClick={() => setTheme('light')}>
+    <div className="rounded-full border p-1">
+      <Button
+        variant={'link'}
+        size={'none'}
+        className={cn(
+          'text-foreground hover:bg-muted border p-1',
+          theme === 'dark' ? 'border' : 'border-transparent'
+        )}
+        onClick={() => setTheme('dark')}
+      >
         <Moon />
-        Light
       </Button>
-      <Button onClick={() => setTheme('dark')}>
+      <Button
+        variant={'link'}
+        size={'none'}
+        className={cn(
+          'text-foreground hover:bg-muted border p-1',
+          theme === 'light' ? 'border' : 'border-transparent'
+        )}
+        onClick={() => setTheme('light')}
+      >
         <Sun />
-        Dark
       </Button>
-      <Button onClick={() => setTheme('system')}>
-        <Sun />
-        System
+      <Button
+        variant={'link'}
+        size={'none'}
+        className={cn(
+          'text-foreground hover:bg-muted border p-1',
+          theme === 'system' ? 'border' : 'border-transparent'
+        )}
+        onClick={() => setTheme('system')}
+      >
+        <Monitor />
       </Button>
     </div>
   );

src/components/navbar/NavBar.tsx

@@ -32,7 +32,7 @@ export function Navbar() {
             <span className="border-secondary border-l" />
           </div>
         )}
-        <div className="content hidden md:flex">
+        <div className="content hidden gap-4 md:flex">
           <ModeToggle />
           <ChainSelector />
         </div>

src/components/ui/button.tsx

@@ -29,6 +29,7 @@ const buttonVariants = cva(
         default: 'h-9 px-4 py-2 has-[>svg]:px-3 rounded-full',
         lg: 'h-11 rounded-full px-6 has-[>svg]:px-4 text-md',
         icon: 'size-9 rounded-md',
+        none: 'p-0 rounded-full',
       },
     },
     defaultVariants: {