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 }}>

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

@@ -5,6 +5,7 @@
 import React from 'react';
 import { Card, CardActionArea, Box, Typography } from '@mui/material';
 import { Vehicle } from '../types/vehicles.types';
+import { VehicleImage } from '../components/VehicleImage';
 
 interface VehicleMobileCardProps {
   vehicle: Vehicle;
@@ -12,20 +13,6 @@ interface VehicleMobileCardProps {
   compact?: boolean;
 }
 
-const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
-  <Box 
-    sx={{ 
-      height: 120, 
-      bgcolor: color, 
-      borderRadius: 2, 
-      mb: 2,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  />
-);
-
 export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
   vehicle,
   onClick,
@@ -46,7 +33,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
     >
       <CardActionArea onClick={() => onClick?.(vehicle)}>
         <Box sx={{ p: 2 }}>
-          <CarThumb color={vehicle.color || "#F2EAEA"} />
+          <VehicleImage vehicle={vehicle} height={120} />
           <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
             {displayName}
           </Typography>