fix: UX dark/light fixes. Still blue
This commit is contained in:
Eric Gullickson
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user