egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: UX dark/light fixes. Still blue

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-26 20:28:24 -06:00
parent 09410c3c3f
commit 780949cd62
9 changed files with 155 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/PROMPTS.md
View File

@@ -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.
- We need to put a background shape or static color to make the logo visible
- Currently the onboarding drop downs are washed out when using the light theme. See image.
- 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
- 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.
- The URL is here. https://motovaultpro.com/onboarding

13
frontend/src/components/Layout.tsx
View File

@@ -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={{
bgcolor: 'background.paper',
borderRadius: 0,
p: 0,
sx={{
borderRadius: 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>
);
};

14
frontend/src/features/onboarding/components/AddVehicleStep.tsx
View File

@@ -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>
<p className="text-slate-600 mb-6">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-2">Add Your First Vehicle</h2>
<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>
<p className="text-sm text-slate-600 mb-4">
<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 dark:text-gray-300 mb-4">
Fill in the details below. You can always edit this later.
</p>
</div>

20
frontend/src/features/onboarding/components/CompleteStep.tsx
View File

@@ -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>
<p className="text-slate-600 max-w-md mx-auto">
<h2 className="text-2xl font-bold text-slate-800 dark:text-white mb-2">You're All Set!</h2>
<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">
<h3 className="font-semibold text-primary-900 mb-2">What's Next?</h3>
<ul className="text-left space-y-2 text-sm text-primary-800">
<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 dark:text-primary-200 mb-2">What's Next?</h3>
<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>

36
frontend/src/features/onboarding/components/PreferencesStep.tsx
View File

@@ -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>
<p className="text-slate-600 mb-6">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">Set Your Preferences</h2>
<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-gray-300 bg-white text-gray-700 hover:border-gray-400'
? '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 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-gray-300 bg-white text-gray-700 hover:border-gray-400'
? '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 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>

16
frontend/src/features/onboarding/mobile/OnboardingMobileScreen.tsx
View File

@@ -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>
<p className="text-slate-600 text-sm">Let's set up your account</p>
<h1 className="text-2xl font-bold text-slate-800 dark:text-white mb-2">Welcome to MotoVault Pro</h1>
<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-gray-200 text-gray-500'
? 'bg-primary-600 text-white dark:bg-primary-700 dark:text-white'
: '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-gray-500'
? 'text-primary-600 dark:text-primary-400'
: '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-gray-200'
? 'bg-primary-600 dark:bg-primary-700'
: 'bg-gray-200 dark:bg-gray-700'
}`}
/>
)}

18
frontend/src/features/onboarding/pages/OnboardingPage.tsx
View File

@@ -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-gray-200 text-gray-500'
? 'bg-primary-600 text-white dark:bg-primary-700 dark:text-white'
: '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-gray-500'
? 'text-primary-600 dark:text-primary-400'
: '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-gray-200'
? 'bg-primary-600 dark:bg-primary-700'
: '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}

6
frontend/src/features/vehicles/components/VehicleImage.tsx
View File

@@ -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',

100
frontend/src/shared-minimal/theme/md3Theme.ts
View File

@@ -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
},
},
},
},
});