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/DashboardScreen.tsx

@@ -3,11 +3,15 @@
  */
 
 import React from 'react';
+import { Box } from '@mui/material';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import { SummaryCards, SummaryCardsSkeleton } from './SummaryCards';
 import { VehicleAttention, VehicleAttentionSkeleton } from './VehicleAttention';
 import { QuickActions, QuickActionsSkeleton } from './QuickActions';
 import { useDashboardSummary, useVehiclesNeedingAttention } from '../hooks/useDashboardData';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { Button } from '../../../shared-minimal/components/Button';
 
 import { MobileScreen } from '../../../core/store';
 import { Vehicle } from '../../vehicles/types/vehicles.types';
@@ -30,20 +34,22 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <div className="space-y-4">
         <GlassCard>
           <div className="text-center py-12">
-            <div className="text-4xl mb-3">⚠️</div>
-            <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+            <Box sx={{ color: 'warning.main', mb: 1.5 }}>
+              <WarningAmberRoundedIcon sx={{ fontSize: 48 }} />
+            </Box>
+            <h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-2">
               Unable to Load Dashboard
             </h2>
-            <p className="text-slate-500 dark:text-slate-400 mb-4">
+            <p className="text-slate-500 dark:text-titanio mb-4">
               There was an error loading your dashboard data
             </p>
-            <button
+            <Button
+              variant="primary"
+              size="md"
               onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-              style={{ minHeight: '44px' }} // Touch target size
             >
               Retry
-            </button>
+            </Button>
           </div>
         </GlassCard>
       </div>
@@ -67,20 +73,22 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <div className="space-y-6">
         <GlassCard>
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🚗</div>
-            <h2 className="text-xl font-semibold text-slate-800 dark:text-slate-200 mb-3">
+            <Box sx={{ color: 'primary.main', mb: 2 }}>
+              <DirectionsCarRoundedIcon sx={{ fontSize: 64 }} />
+            </Box>
+            <h2 className="text-xl font-semibold text-slate-800 dark:text-avus mb-3">
               Welcome to MotoVaultPro
             </h2>
-            <p className="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">
+            <p className="text-slate-500 dark:text-titanio mb-6 max-w-md mx-auto">
               Get started by adding your first vehicle to track fuel logs, maintenance, and more
             </p>
-            <button
+            <Button
+              variant="primary"
+              size="lg"
               onClick={() => onNavigate?.('Vehicles')}
-              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
-              style={{ minHeight: '44px' }} // Touch target size
             >
               Add Your First Vehicle
-            </button>
+            </Button>
           </div>
         </GlassCard>
       </div>
@@ -116,7 +124,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
 
       {/* Footer Hint */}
       <div className="text-center py-4">
-        <p className="text-xs text-slate-400 dark:text-slate-500">
+        <p className="text-xs text-slate-400 dark:text-canna">
           Dashboard updates every 2 minutes
         </p>
       </div>