fix: UX dark/light fixes. Still blue

docs/PROMPTS.md

@@ -102,10 +102,9 @@ You are a senior software engineer specializsing in NodeJS, Typescript, front en
 *** CONTEXT ***
 - This is a modern web app for managing a vehicle fleet. It has both a desktop and mobile versions of the site that both need to maintain feature parity. It's currently deployed via docker compose but in the future will be deployed via k8s.
 - Read README.md CLAUDE.md and AI-INDEX.md and follow relevant instructions to understand this code repository in the context of this change. 
-- Currently the log is washed out when using the light theme. See image.
+- Currently the onboarding drop downs are washed out when using the light theme. See image.
-- We need to put a background shape or static color to make the logo visible
+- The colors need to change to have more contrast but retain the MUI theme for drop down. 
 
 *** CHANGES TO IMPLEMENT ***
 - Research this code base and ask iterative questions to compile a complete plan.
-- Give options for how to put a background behind the logo
+- The URL is here. https://motovaultpro.com/onboarding
-- Research if it's possible to put a rounded rectangle behind it similar to the "Settings" button. The rounded ends need to be smaller then the settings button if possible.

frontend/src/components/Layout.tsx

@@ -52,13 +52,12 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   // Mobile layout
   if (mobileMode) {
     return (
-      <div className="w-full min-h-screen bg-background-default">
+      <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
         <Container
           maxWidth={false}
-          sx={{ 
+          sx={{
-            bgcolor: 'background.paper', 
+            borderRadius: 0,
-            borderRadius: 0, 
+            p: 0,
-            p: 0, 
             boxShadow: 0,
             minHeight: '100vh',
             display: 'flex',
@@ -96,7 +95,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
 
   // Desktop layout
   return (
-    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
       {/* Sidebar */}
       <Paper
         elevation={2}
@@ -285,6 +284,6 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           onClick={toggleSidebar}
         />
       )}
-    </Box>
+    </div>
   );
 };

frontend/src/features/onboarding/components/AddVehicleStep.tsx

@@ -34,9 +34,9 @@ export const AddVehicleStep: React.FC<AddVehicleStepProps> = ({
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <div className="mx-auto w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+          <div className="mx-auto w-20 h-20 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center mb-4">
             <svg
-              className="w-10 h-10 text-primary-600"
+              className="w-10 h-10 text-primary-600 dark:text-primary-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -49,8 +49,8 @@ export const AddVehicleStep: React.FC<AddVehicleStepProps> = ({
               />
             </svg>
           </div>
-          <h2 className="text-xl font-semibold text-slate-800 mb-2">Add Your First Vehicle</h2>
+          <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-2">Add Your First Vehicle</h2>
-          <p className="text-slate-600 mb-6">
+          <p className="text-slate-600 dark:text-gray-300 mb-6">
             Add a vehicle now or skip this step and add it later from your garage.
           </p>
         </div>
@@ -71,7 +71,7 @@ export const AddVehicleStep: React.FC<AddVehicleStepProps> = ({
           </Button>
         </div>
 
-        <div className="pt-4 border-t border-gray-200">
+        <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
           <Button
             variant="secondary"
             onClick={onBack}
@@ -87,8 +87,8 @@ export const AddVehicleStep: React.FC<AddVehicleStepProps> = ({
   return (
     <div className="space-y-4">
       <div>
-        <h2 className="text-xl font-semibold text-slate-800 mb-2">Add Your First Vehicle</h2>
+        <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-2">Add Your First Vehicle</h2>
-        <p className="text-sm text-slate-600 mb-4">
+        <p className="text-sm text-slate-600 dark:text-gray-300 mb-4">
           Fill in the details below. You can always edit this later.
         </p>
       </div>

frontend/src/features/onboarding/components/CompleteStep.tsx

@@ -13,9 +13,9 @@ interface CompleteStepProps {
 export const CompleteStep: React.FC<CompleteStepProps> = ({ onComplete, loading }) => {
   return (
     <div className="space-y-6 text-center py-8">
-      <div className="mx-auto w-24 h-24 bg-green-100 rounded-full flex items-center justify-center animate-bounce">
+      <div className="mx-auto w-24 h-24 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center animate-bounce">
         <svg
-          className="w-12 h-12 text-green-600"
+          className="w-12 h-12 text-green-600 dark:text-green-400"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -30,29 +30,29 @@ export const CompleteStep: React.FC<CompleteStepProps> = ({ onComplete, loading
       </div>
 
       <div>
-        <h2 className="text-2xl font-bold text-slate-800 mb-2">You're All Set!</h2>
+        <h2 className="text-2xl font-bold text-slate-800 dark:text-white mb-2">You're All Set!</h2>
-        <p className="text-slate-600 max-w-md mx-auto">
+        <p className="text-slate-600 dark:text-gray-300 max-w-md mx-auto">
           Welcome to MotoVault Pro. Your account is ready and you can now start tracking your vehicles.
         </p>
       </div>
 
-      <div className="bg-primary-50 rounded-lg p-6 max-w-md mx-auto">
+      <div className="bg-primary-50 dark:bg-primary-900 rounded-lg p-6 max-w-md mx-auto">
-        <h3 className="font-semibold text-primary-900 mb-2">What's Next?</h3>
+        <h3 className="font-semibold text-primary-900 dark:text-primary-200 mb-2">What's Next?</h3>
-        <ul className="text-left space-y-2 text-sm text-primary-800">
+        <ul className="text-left space-y-2 text-sm text-primary-800 dark:text-primary-300">
           <li className="flex items-start">
-            <svg className="w-5 h-5 text-primary-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+            <svg className="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
             </svg>
             <span>Add or manage your vehicles in the garage</span>
           </li>
           <li className="flex items-start">
-            <svg className="w-5 h-5 text-primary-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+            <svg className="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
             </svg>
             <span>Track fuel logs and maintenance records</span>
           </li>
           <li className="flex items-start">
-            <svg className="w-5 h-5 text-primary-600 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+            <svg className="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
             </svg>
             <span>Upload important vehicle documents</span>

frontend/src/features/onboarding/components/PreferencesStep.tsx

@@ -42,15 +42,15 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
   return (
     <form onSubmit={handleSubmit(onNext)} className="space-y-6">
       <div>
-        <h2 className="text-xl font-semibold text-slate-800 mb-4">Set Your Preferences</h2>
+        <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">Set Your Preferences</h2>
-        <p className="text-slate-600 mb-6">
+        <p className="text-slate-600 dark:text-gray-300 mb-6">
           Choose your preferred units and settings to personalize your experience.
         </p>
       </div>
 
       {/* Unit System Toggle */}
       <div>
-        <label className="block text-sm font-medium text-slate-700 mb-3">
+        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-3">
           Unit System
         </label>
         <div className="grid grid-cols-2 gap-3">
@@ -59,8 +59,8 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
             onClick={() => setValue('unitSystem', 'imperial')}
             className={`min-h-[44px] py-3 px-4 rounded-lg border-2 font-medium transition-all ${
               unitSystem === 'imperial'
-                ? 'border-primary-600 bg-primary-50 text-primary-700'
+                ? 'border-primary-600 bg-primary-50 text-primary-700 dark:border-primary-500 dark:bg-primary-900 dark:text-primary-300'
-                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
+                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-gray-500'
             }`}
           >
             <div className="text-sm font-semibold">Imperial</div>
@@ -71,8 +71,8 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
             onClick={() => setValue('unitSystem', 'metric')}
             className={`min-h-[44px] py-3 px-4 rounded-lg border-2 font-medium transition-all ${
               unitSystem === 'metric'
-                ? 'border-primary-600 bg-primary-50 text-primary-700'
+                ? 'border-primary-600 bg-primary-50 text-primary-700 dark:border-primary-500 dark:bg-primary-900 dark:text-primary-300'
-                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
+                : 'border-gray-300 bg-white text-gray-700 hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-gray-500'
             }`}
           >
             <div className="text-sm font-semibold">Metric</div>
@@ -86,7 +86,7 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
 
       {/* Currency Dropdown */}
       <div>
-        <label className="block text-sm font-medium text-slate-700 mb-2">
+        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-2">
           Currency
         </label>
         <FormControl fullWidth>
@@ -101,15 +101,6 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
                   minHeight: '44px',
                   fontSize: '16px',
                   borderRadius: '8px',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#d1d5db',
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#9ca3af',
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#7A212A',
-                  },
                 }}
               >
                 <MenuItem value="USD">USD - US Dollar</MenuItem>
@@ -128,7 +119,7 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
 
       {/* Timezone Dropdown */}
       <div>
-        <label className="block text-sm font-medium text-slate-700 mb-2">
+        <label className="block text-sm font-medium text-slate-700 dark:text-gray-200 mb-2">
           Time Zone
         </label>
         <FormControl fullWidth>
@@ -143,15 +134,6 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
                   minHeight: '44px',
                   fontSize: '16px',
                   borderRadius: '8px',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#d1d5db',
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#9ca3af',
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#7A212A',
-                  },
                 }}
               >
                 <MenuItem value="America/New_York">Eastern Time (ET)</MenuItem>

frontend/src/features/onboarding/mobile/OnboardingMobileScreen.tsx

@@ -74,8 +74,8 @@ export const OnboardingMobileScreen: React.FC = () => {
       <div className="flex-1 overflow-y-auto p-4 space-y-6">
         {/* Header */}
         <div className="text-center pt-4">
-          <h1 className="text-2xl font-bold text-slate-800 mb-2">Welcome to MotoVault Pro</h1>
+          <h1 className="text-2xl font-bold text-slate-800 dark:text-white mb-2">Welcome to MotoVault Pro</h1>
-          <p className="text-slate-600 text-sm">Let's set up your account</p>
+          <p className="text-slate-600 dark:text-gray-300 text-sm">Let's set up your account</p>
         </div>
 
         {/* Progress Indicator */}
@@ -86,8 +86,8 @@ export const OnboardingMobileScreen: React.FC = () => {
                 <div
                   className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all ${
                     stepNumbers[currentStep] >= stepNumbers[step]
-                      ? 'bg-primary-600 text-white'
+                      ? 'bg-primary-600 text-white dark:bg-primary-700 dark:text-white'
-                      : 'bg-gray-200 text-gray-500'
+                      : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
                   }`}
                 >
                   {stepNumbers[step]}
@@ -95,8 +95,8 @@ export const OnboardingMobileScreen: React.FC = () => {
                 <span
                   className={`text-xs mt-1 font-medium ${
                     stepNumbers[currentStep] >= stepNumbers[step]
-                      ? 'text-primary-600'
+                      ? 'text-primary-600 dark:text-primary-400'
-                      : 'text-gray-500'
+                      : 'text-gray-500 dark:text-gray-400'
                   }`}
                 >
                   {step === 'preferences' && 'Setup'}
@@ -108,8 +108,8 @@ export const OnboardingMobileScreen: React.FC = () => {
                 <div
                   className={`flex-1 h-1 mx-2 rounded transition-all ${
                     stepNumbers[currentStep] > stepNumbers[step]
-                      ? 'bg-primary-600'
+                      ? 'bg-primary-600 dark:bg-primary-700'
-                      : 'bg-gray-200'
+                      : 'bg-gray-200 dark:bg-gray-700'
                   }`}
                 />
               )}

frontend/src/features/onboarding/pages/OnboardingPage.tsx

@@ -68,7 +68,7 @@ export const OnboardingPage: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center p-4">
       <div className="w-full max-w-2xl">
         {/* Progress Indicator */}
         <div className="mb-8">
@@ -79,8 +79,8 @@ export const OnboardingPage: React.FC = () => {
                   <div
                     className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold transition-all ${
                       stepNumbers[currentStep] >= stepNumbers[step]
-                        ? 'bg-primary-600 text-white'
+                        ? 'bg-primary-600 text-white dark:bg-primary-700 dark:text-white'
-                        : 'bg-gray-200 text-gray-500'
+                        : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
                     }`}
                   >
                     {stepNumbers[step]}
@@ -88,8 +88,8 @@ export const OnboardingPage: React.FC = () => {
                   <span
                     className={`ml-2 text-sm font-medium hidden sm:inline ${
                       stepNumbers[currentStep] >= stepNumbers[step]
-                        ? 'text-primary-600'
+                        ? 'text-primary-600 dark:text-primary-400'
-                        : 'text-gray-500'
+                        : 'text-gray-500 dark:text-gray-400'
                     }`}
                   >
                     {step === 'preferences' && 'Preferences'}
@@ -101,21 +101,21 @@ export const OnboardingPage: React.FC = () => {
                   <div
                     className={`flex-1 h-1 mx-2 rounded transition-all ${
                       stepNumbers[currentStep] > stepNumbers[step]
-                        ? 'bg-primary-600'
+                        ? 'bg-primary-600 dark:bg-primary-700'
-                        : 'bg-gray-200'
+                        : 'bg-gray-200 dark:bg-gray-700'
                     }`}
                   />
                 )}
               </React.Fragment>
             ))}
           </div>
-          <p className="text-sm text-slate-600 text-center mt-4">
+          <p className="text-sm text-slate-600 dark:text-gray-300 text-center mt-4">
             Step {stepNumbers[currentStep]} of 3
           </p>
         </div>
 
         {/* Step Content */}
-        <div className="bg-white rounded-2xl shadow-xl border border-slate-200 p-6 md:p-8">
+        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-slate-200 dark:border-gray-700 p-6 md:p-8">
           {currentStep === 'preferences' && (
             <PreferencesStep
               onNext={handleSavePreferences}

frontend/src/features/vehicles/components/VehicleImage.tsx

@@ -86,7 +86,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
 
   if (vehicle.imageUrl && !imgError && (blobUrl || isLoading)) {
     return (
-      <Box sx={{ height, borderRadius, overflow: 'hidden', mb: 2, bgcolor: isLoading ? 'grey.100' : undefined }}>
+      <Box sx={{ height, borderRadius, overflow: 'hidden', mb: 2, bgcolor: isLoading ? 'action.hover' : undefined }}>
         {blobUrl && (
           <img
             src={blobUrl}
@@ -105,7 +105,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
       <Box sx={{
         height,
         borderRadius,
-        bgcolor: 'grey.100',
+        bgcolor: 'action.hover',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -126,7 +126,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
     <Box
       sx={{
         height,
-        bgcolor: vehicle.color || 'grey.100',
+        bgcolor: vehicle.color || 'action.hover',
         borderRadius,
         display: 'flex',
         alignItems: 'center',

frontend/src/shared-minimal/theme/md3Theme.ts

@@ -113,6 +113,59 @@ export const md3LightTheme = createTheme({
         },
       },
     },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#9ca3af', // gray-400
+            borderWidth: '1px',
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#6b7280', // gray-500 - 4.5:1 contrast
+            borderWidth: '1.5px',
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#7A212A', // primary - 6.3:1 contrast
+            borderWidth: '2px',
+          },
+          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#dc2626', // red-600 - 5.5:1 contrast
+          },
+          '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#e5e7eb', // gray-200
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          minHeight: 44, // Mobile touch target requirement
+          fontSize: '16px', // Prevent iOS zoom on focus
+          '&:hover': {
+            backgroundColor: alpha('#7A212A', 0.08),
+          },
+          '&.Mui-selected': {
+            backgroundColor: alpha('#7A212A', 0.12),
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: alpha('#7A212A', 0.16),
+            },
+          },
+        },
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          minHeight: '44px', // Mobile touch target
+          fontSize: '16px', // Prevent iOS zoom
+        },
+        icon: {
+          color: '#6b7280', // gray-500 for better visibility
+        },
+      },
+    },
   },
 });
 
@@ -153,6 +206,53 @@ export const md3DarkTheme = createTheme({
         },
       },
     },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'rgba(255,255,255,0.23)',
+            borderWidth: '1px',
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'rgba(255,255,255,0.4)',
+            borderWidth: '1.5px',
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#7A212A', // primary
+            borderWidth: '2px',
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          minHeight: 44, // Mobile touch target requirement
+          fontSize: '16px', // Prevent iOS zoom on focus
+          '&:hover': {
+            backgroundColor: alpha('#7A212A', 0.08),
+          },
+          '&.Mui-selected': {
+            backgroundColor: alpha('#7A212A', 0.12),
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: alpha('#7A212A', 0.16),
+            },
+          },
+        },
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          minHeight: '44px', // Mobile touch target
+          fontSize: '16px', // Prevent iOS zoom
+        },
+        icon: {
+          color: titanio, // Grigio Titanio for visibility on dark
+        },
+      },
+    },
   },
 });