feat: user export service. bug and UX fixes. Complete minus outstanding email template fixes.

frontend/src/components/Layout.tsx

@@ -5,7 +5,7 @@
 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 { Container, Paper, Typography, Box, IconButton, Avatar, useTheme } from '@mui/material';
 import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
@@ -28,6 +28,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   const { user, logout } = useAuth0();
   const { sidebarOpen, toggleSidebar, setSidebarOpen } = useAppStore();
   const location = useLocation();
+  const theme = useTheme();
 
   // Sync theme preference with backend
   useThemeSync();
@@ -69,11 +70,13 @@ 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">
-              <img
+              <div className="bg-primary-500 dark:bg-transparent rounded px-2 py-1 inline-flex items-center">
+                <img
                   src="/images/logos/motovaultpro-title-slogan.png"
                   alt="MotoVaultPro"
                   className="h-6 w-auto"
                 />
+              </div>
               <div className="flex items-center gap-2">
                 <NotificationBell />
                 <div className="text-xs text-slate-500 dark:text-titanio">v1.0</div>
@@ -125,11 +128,22 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
             gap: 1
           }}
         >
-          <img
-            src="/images/logos/motovaultpro-title-slogan.png"
-            alt="MotoVaultPro"
-            style={{ height: 24, width: 'auto', maxWidth: 180 }}
-          />
+          <Box
+            sx={{
+              backgroundColor: theme.palette.mode === 'light' ? 'primary.main' : 'transparent',
+              borderRadius: 1,
+              px: 1,
+              py: 0.5,
+              display: 'inline-flex',
+              alignItems: 'center'
+            }}
+          >
+            <img
+              src="/images/logos/motovaultpro-title-slogan.png"
+              alt="MotoVaultPro"
+              style={{ height: 24, width: 'auto', maxWidth: 180 }}
+            />
+          </Box>
           <IconButton
             onClick={toggleSidebar}
             size="small"