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

fix: remove colored hover fills from icon buttons (refs #51)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m53s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 38s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details

Browse Source 
Changed icon button hover behavior to match VehicleCard pattern:
- Removed background color fills on hover (was primary.main/error.main)
- Icons now use default MUI IconButton gray ripple on hover
- Edit icons use text.secondary color (matches VehicleCard)
- Delete icons use error.main color (matches VehicleCard)

Affected files:
- DocumentsPage.tsx
- FuelLogsList.tsx
- MaintenanceRecordsList.tsx
- MaintenanceSchedulesList.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-01-18 12:21:44 -06:00
parent 5ad5ea12e6
commit 48aea409d8
4 changed files with 3 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/features/documents/pages/DocumentsPage.tsx
View File

@@ -232,15 +232,6 @@ export const DocumentsPage: React.FC = () => {
color: 'text.secondary', color: 'text.secondary',
minWidth: isMobile ? 48 : 'auto', minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto', minHeight: isMobile ? 48 : 'auto',
'&:hover': {
backgroundColor: 'primary.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
}),
}} }}
title="View Details" title="View Details"
> >
@@ -253,15 +244,6 @@ export const DocumentsPage: React.FC = () => {
color: 'text.secondary', color: 'text.secondary',
minWidth: isMobile ? 48 : 'auto', minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto', minHeight: isMobile ? 48 : 'auto',
'&:hover': {
backgroundColor: 'primary.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
}),
}} }}
title="Edit" title="Edit"
> >
@@ -274,15 +256,6 @@ export const DocumentsPage: React.FC = () => {
color: 'error.main', color: 'error.main',
minWidth: isMobile ? 48 : 'auto', minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto', minHeight: isMobile ? 48 : 'auto',
'&:hover': {
backgroundColor: 'error.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'error.main',
borderRadius: 2,
}),
}} }}
title="Delete" title="Delete"
> >

14
frontend/src/features/fuel-logs/components/FuelLogsList.tsx
View File

@@ -208,15 +208,9 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
size={isMobile ? 'medium' : 'small'} size={isMobile ? 'medium' : 'small'}
onClick={() => onEdit(log)} onClick={() => onEdit(log)}
sx={{ sx={{
color: 'primary.main', color: 'text.secondary',
'&:hover': { backgroundColor: 'primary.main', color: 'white' },
minWidth: isMobile ? 48 : 'auto', minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto', minHeight: isMobile ? 48 : 'auto',
...(isMobile && {
border: '1px solid',
borderColor: 'primary.main',
borderRadius: 2
})
}} }}
> >
<Edit fontSize={isMobile ? 'medium' : 'small'} /> <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -228,14 +222,8 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
onClick={() => handleDeleteClick(log)} onClick={() => handleDeleteClick(log)}
sx={{ sx={{
color: 'error.main', color: 'error.main',
'&:hover': { backgroundColor: 'error.main', color: 'white' },
minWidth: isMobile ? 48 : 'auto', minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto', minHeight: isMobile ? 48 : 'auto',
...(isMobile && {
border: '1px solid',
borderColor: 'error.main',
borderRadius: 2
})
}} }}
> >
<Delete fontSize={isMobile ? 'medium' : 'small'} /> <Delete fontSize={isMobile ? 'medium' : 'small'} />

20
frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
View File

@@ -157,18 +157,9 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
size={isMobile ? 'medium' : 'small'} size={isMobile ? 'medium' : 'small'}
onClick={() => onEdit(record)} onClick={() => onEdit(record)}
sx={{ sx={{
color: 'primary.main', color: 'text.secondary',
minWidth: 44, minWidth: 44,
minHeight: 44, minHeight: 44,
'&:hover': {
backgroundColor: 'primary.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'primary.main',
borderRadius: 2,
}),
}} }}
> >
<Edit fontSize={isMobile ? 'medium' : 'small'} /> <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -182,15 +173,6 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
color: 'error.main', color: 'error.main',
minWidth: 44, minWidth: 44,
minHeight: 44, minHeight: 44,
'&:hover': {
backgroundColor: 'error.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'error.main',
borderRadius: 2,
}),
}} }}
> >
<Delete fontSize={isMobile ? 'medium' : 'small'} /> <Delete fontSize={isMobile ? 'medium' : 'small'} />

20
frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
View File

@@ -257,18 +257,9 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
size={isMobile ? 'medium' : 'small'} size={isMobile ? 'medium' : 'small'}
onClick={() => onEdit(schedule)} onClick={() => onEdit(schedule)}
sx={{ sx={{
color: 'primary.main', color: 'text.secondary',
minWidth: 44, minWidth: 44,
minHeight: 44, minHeight: 44,
'&:hover': {
backgroundColor: 'primary.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'primary.main',
borderRadius: 2,
}),
}} }}
> >
<Edit fontSize={isMobile ? 'medium' : 'small'} /> <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -282,15 +273,6 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
color: 'error.main', color: 'error.main',
minWidth: 44, minWidth: 44,
minHeight: 44, minHeight: 44,
'&:hover': {
backgroundColor: 'error.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'error.main',
borderRadius: 2,
}),
}} }}
> >
<Delete fontSize={isMobile ? 'medium' : 'small'} /> <Delete fontSize={isMobile ? 'medium' : 'small'} />