fix: replace emojis with MUI icons and use theme colors in dashboard (refs #2)

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>

frontend/src/features/dashboard/components/VehicleAttention.tsx

@@ -3,6 +3,11 @@
  */
 
 import React from 'react';
+import { Box, SvgIconProps } from '@mui/material';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import ScheduleRoundedIcon from '@mui/icons-material/ScheduleRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { VehicleNeedingAttention } from '../types';
 
@@ -16,11 +21,13 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
     return (
       <GlassCard padding="md">
         <div className="text-center py-8">
-          <div className="text-4xl mb-3">✅</div>
-          <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+          <Box sx={{ color: 'success.main', mb: 1.5 }}>
+            <CheckCircleRoundedIcon sx={{ fontSize: 48 }} />
+          </Box>
+          <h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-2">
             All Caught Up!
           </h3>
-          <p className="text-sm text-slate-500 dark:text-slate-400">
+          <p className="text-sm text-slate-500 dark:text-titanio">
             No vehicles need immediate attention
           </p>
         </div>
@@ -28,34 +35,28 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
     );
   }
 
-  const priorityConfig = {
+  const priorityConfig: Record<string, { color: string; icon: React.ComponentType<SvgIconProps> }> = {
     high: {
-      color: 'text-red-600',
-      bgColor: 'bg-red-50',
-      borderColor: 'border-red-200',
-      icon: '🚨',
+      color: 'error.main',
+      icon: ErrorRoundedIcon,
     },
     medium: {
-      color: 'text-orange-600',
-      bgColor: 'bg-orange-50',
-      borderColor: 'border-orange-200',
-      icon: '⚠️',
+      color: 'warning.main',
+      icon: WarningAmberRoundedIcon,
     },
     low: {
-      color: 'text-yellow-600',
-      bgColor: 'bg-yellow-50',
-      borderColor: 'border-yellow-200',
-      icon: '⏰',
+      color: 'info.main',
+      icon: ScheduleRoundedIcon,
     },
   };
 
   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">
           Needs Attention
         </h3>
-        <p className="text-sm text-slate-500 dark:text-slate-400">
+        <p className="text-sm text-slate-500 dark:text-titanio">
           Vehicles with overdue maintenance
         </p>
       </div>
@@ -63,41 +64,70 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
       <div className="space-y-3">
         {vehicles.map((vehicle) => {
           const config = priorityConfig[vehicle.priority];
+          const IconComponent = config.icon;
           return (
-            <div
+            <Box
               key={vehicle.id}
-              className={`p-4 rounded-2xl border ${config.borderColor} ${config.bgColor} dark:bg-opacity-10 ${
-                onVehicleClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''
-              }`}
               onClick={() => onVehicleClick?.(vehicle.id)}
               role={onVehicleClick ? 'button' : undefined}
               tabIndex={onVehicleClick ? 0 : undefined}
-              onKeyDown={(e) => {
+              onKeyDown={(e: React.KeyboardEvent) => {
                 if (onVehicleClick && (e.key === 'Enter' || e.key === ' ')) {
                   e.preventDefault();
                   onVehicleClick(vehicle.id);
                 }
               }}
+              sx={{
+                p: 2,
+                borderRadius: 3,
+                bgcolor: 'action.hover',
+                border: '1px solid',
+                borderColor: 'divider',
+                cursor: onVehicleClick ? 'pointer' : 'default',
+                transition: 'all 0.2s',
+                '&:hover': onVehicleClick ? {
+                  bgcolor: 'action.selected',
+                } : {},
+              }}
             >
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 text-2xl">
-                  {config.icon}
-                </div>
+                <Box sx={{ flexShrink: 0, color: config.color }}>
+                  <IconComponent sx={{ fontSize: 24 }} />
+                </Box>
                 <div className="flex-1 min-w-0">
-                  <h4 className={`font-semibold ${config.color} dark:opacity-90 text-base mb-1`}>
+                  <Box
+                    component="h4"
+                    sx={{
+                      fontWeight: 600,
+                      color: 'text.primary',
+                      fontSize: '1rem',
+                      mb: 0.5,
+                    }}
+                  >
                     {vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
-                  </h4>
-                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                  </Box>
+                  <p className="text-sm text-slate-600 dark:text-titanio">
                     {vehicle.reason}
                   </p>
-                  <div className="flex items-center gap-2 mt-2">
-                    <span className={`text-xs font-medium px-2 py-1 rounded-full ${config.bgColor} ${config.color} dark:bg-opacity-20`}>
-                      {vehicle.priority.toUpperCase()} PRIORITY
-                    </span>
-                  </div>
+                  <Box
+                    component="span"
+                    sx={{
+                      display: 'inline-block',
+                      mt: 1,
+                      px: 1.5,
+                      py: 0.5,
+                      borderRadius: 2,
+                      fontSize: '0.75rem',
+                      fontWeight: 500,
+                      bgcolor: 'action.selected',
+                      color: config.color,
+                    }}
+                  >
+                    {vehicle.priority.toUpperCase()} PRIORITY
+                  </Box>
                 </div>
               </div>
-            </div>
+            </Box>
           );
         })}
       </div>
@@ -114,7 +144,7 @@ export const VehicleAttentionSkeleton: React.FC = () => {
       </div>
       <div className="space-y-3">
         {[1, 2].map((i) => (
-          <div key={i} className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800">
+          <div key={i} className="p-4 rounded-xl bg-slate-50 dark:bg-slate-800">
             <div className="flex items-start gap-3">
               <div className="flex-shrink-0 w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse" />
               <div className="flex-1 space-y-2">