feat: dark / light theme almost complete

frontend/src/components/Layout.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Link, useLocation } from 'react-router-dom';
 import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
@@ -28,7 +27,6 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   const { user, logout } = useAuth0();
   const { sidebarOpen, toggleSidebar, setSidebarOpen } = useAppStore();
   const location = useLocation();
-  const theme = useTheme();
 
   // Ensure desktop has a visible navigation by default (only on mount)
   React.useEffect(() => {
@@ -67,7 +65,11 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           {/* App header */}
           <div className="px-5 pt-5 pb-3">
             <div className="flex items-center justify-between">
-              <div className="text-lg font-semibold tracking-tight">MotoVaultPro</div>
+              <img
+                  src="/images/logos/motovaultpro-title-slogan.png"
+                  alt="MotoVaultPro"
+                  className="h-6 w-auto"
+                />
               <div className="flex items-center gap-2">
                 <NotificationBell />
                 <div className="text-xs text-slate-500">v1.0</div>
@@ -107,31 +109,31 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           flexDirection: 'column'
         }}
       >
-        <Paper
-          elevation={0}
-          square
-          sx={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'space-between', 
-            height: 64, 
-            px: 3, 
-            borderBottom: 1, 
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 64,
+            px: 2,
+            borderBottom: 1,
             borderColor: 'divider',
-            borderRadius: 0
+            gap: 1
           }}
         >
-          <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
-            MotoVaultPro
-          </Typography>
+          <img
+            src="/images/logos/motovaultpro-title-slogan.png"
+            alt="MotoVaultPro"
+            style={{ height: 24, width: 'auto', maxWidth: 180 }}
+          />
           <IconButton
             onClick={toggleSidebar}
             size="small"
-            sx={{ color: 'text.secondary' }}
+            sx={{ color: 'text.secondary', flexShrink: 0 }}
           >
             <CloseIcon />
           </IconButton>
-        </Paper>
+        </Box>
 
         <Box sx={{ mt: 3, px: 2, flex: 1 }}>
           {navigation.map((item) => {
@@ -151,15 +153,15 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
                     mb: 0.5,
                     borderRadius: 2,
                     transition: 'all 0.2s',
-                    backgroundColor: isActive 
-                      ? theme.palette.primary.main + '12' 
+                    backgroundColor: isActive
+                      ? 'primary.main'
                       : 'transparent',
-                    color: isActive 
-                      ? 'primary.main' 
+                    color: isActive
+                      ? '#FFFFFF'
                       : 'text.primary',
                     '&:hover': {
-                      backgroundColor: isActive 
-                        ? theme.palette.primary.main + '18'
+                      backgroundColor: isActive
+                        ? 'primary.dark'
                         : 'action.hover',
                     }
                   }}