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

fix: replace emojis with MUI icons and use theme colors in dashboard (refs #2)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m39s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 37s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 5s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details

Browse Source 
Visual consistency fixes:
- Replace all emojis with MUI Rounded icons
- Use theme colors (primary.main, warning.main, success.main, error.main)
- Use MUI Box with sx prop for consistent styling
- Use shared Button component instead of custom styled buttons
- Use theme tokens for dark mode (avus, titanio, canna)

Components updated:
- SummaryCards: DirectionsCarRoundedIcon, BuildRoundedIcon, LocalGasStationRoundedIcon
- QuickActions: MUI icons with primary.main color
- VehicleAttention: ErrorRoundedIcon, WarningAmberRoundedIcon, ScheduleRoundedIcon
- DashboardScreen: Proper icons for error/empty states, shared Button component

🤖 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-02 21:57:53 -06:00
parent 7b00dc7631
commit d3c8d377f8
4 changed files with 220 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/features/dashboard/components/QuickActions.tsx
View File

@@ -3,15 +3,18 @@
*/
import React from 'react';
import { Box, SvgIconProps } from '@mui/material';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
interface QuickAction {
id: string;
title: string;
description: string;
icon: string;
color: string;
bgColor: string;
icon: React.ComponentType<SvgIconProps>;
onClick: () => void;
}
@@ -33,36 +36,28 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
id: 'add-vehicle',
title: 'Add Vehicle',
description: 'Register a new vehicle',
icon: '🚗',
color: 'text-blue-600',
bgColor: 'bg-blue-50',
icon: DirectionsCarRoundedIcon,
onClick: onAddVehicle,
},
{
id: 'log-fuel',
title: 'Log Fuel',
description: 'Record a fuel purchase',
icon: '⛽',
color: 'text-green-600',
bgColor: 'bg-green-50',
icon: LocalGasStationRoundedIcon,
onClick: onLogFuel,
},
{
id: 'view-maintenance',
title: 'Maintenance',
description: 'View maintenance records',
icon: '🔧',
color: 'text-orange-600',
bgColor: 'bg-orange-50',
icon: BuildRoundedIcon,
onClick: onViewMaintenance,
},
{
id: 'view-vehicles',
title: 'My Vehicles',
description: 'View all vehicles',
icon: '📋',
color: 'text-purple-600',
bgColor: 'bg-purple-50',
icon: FormatListBulletedRoundedIcon,
onClick: onViewVehicles,
},
];
@@ -70,33 +65,79 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
return (
<GlassCard padding="md">
<div className="mb-4">
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
<h3 className="text-lg font-semibold text-slate-800 dark:text-avus">
Quick Actions
</h3>
<p className="text-sm text-slate-500 dark:text-slate-400">
<p className="text-sm text-slate-500 dark:text-titanio">
Common tasks and navigation
</p>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
{actions.map((action) => (
<button
key={action.id}
onClick={action.onClick}
className={`p-4 rounded-2xl ${action.bgColor} dark:bg-opacity-10 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 hover:shadow-md transition-all duration-200 text-left min-h-[100px] sm:min-h-[120px] flex flex-col`}
style={{ minHeight: '44px' }} // Ensure touch target size
>
<div className="text-3xl mb-2">{action.icon}</div>
<div className="flex-1">
<h4 className={`font-semibold ${action.color} dark:opacity-90 text-sm mb-1`}>
{action.title}
</h4>
<p className="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
{action.description}
</p>
</div>
</button>
))}
{actions.map((action) => {
const IconComponent = action.icon;
return (
<Box
key={action.id}
component="button"
onClick={action.onClick}
sx={{
p: 2,
borderRadius: 3,
bgcolor: 'action.hover',
border: '1px solid transparent',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
textAlign: 'left',
minHeight: { xs: 100, sm: 120 },
transition: 'all 0.2s',
cursor: 'pointer',
'&:hover': {
bgcolor: 'action.selected',
borderColor: 'divider',
},
'&:focus': {
outline: 'none',
borderColor: 'primary.main',
},
}}
>
<Box
sx={{
color: 'primary.main',
mb: 1.5,
}}
>
<IconComponent sx={{ fontSize: 28 }} />
</Box>
<Box sx={{ flex: 1 }}>
<Box
component="span"
sx={{
display: 'block',
fontWeight: 600,
fontSize: '0.875rem',
color: 'text.primary',
mb: 0.5,
}}
>
{action.title}
</Box>
<Box
component="span"
sx={{
display: { xs: 'none', sm: 'block' },
fontSize: '0.75rem',
color: 'text.secondary',
}}
>
{action.description}
</Box>
</Box>
</Box>
);
})}
</div>
</GlassCard>
);
@@ -113,9 +154,9 @@ export const QuickActionsSkeleton: React.FC = () => {
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
className="p-4 rounded-xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
>
<div className="w-8 h-8 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-2" />
<div className="w-7 h-7 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-3" />
<div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-20 mb-2" />
<div className="h-3 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-full hidden sm:block" />
</div>