Photos for vehicles

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -10,8 +10,7 @@ import { useFuelLogs } from '../../fuel-logs/hooks/useFuelLogs';
 import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fuel-logs.types';
 import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog';
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
-
-// Theme colors now defined in Tailwind config
+import { VehicleImage } from '../components/VehicleImage';
 
 interface VehicleDetailMobileProps {
   vehicle: Vehicle;
@@ -31,19 +30,6 @@ const Section: React.FC<{ title: string; children: React.ReactNode }> = ({
   </Box>
 );
 
-const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
-  <Box 
-    sx={{ 
-      height: 96, 
-      bgcolor: color, 
-      borderRadius: 3,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  />
-);
-
 export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
   vehicle,
   onBack,
@@ -167,7 +153,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
       
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 3 }}>
         <Box sx={{ width: 112 }}>
-          <CarThumb color={vehicle.color || "#F2EAEA"} />
+          <VehicleImage vehicle={vehicle} height={96} />
         </Box>
         <Box>
           <Typography variant="h5" sx={{ fontWeight: 600 }}>