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

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