From 5e045526d631f3b5b510b57746f600fc4ec897d2 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 18 Jan 2026 11:51:29 -0600
Subject: [PATCH 1/3] fix: standardize card/list action buttons and hover
 states (refs #51)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Documents page: Convert from text buttons to icon buttons (Eye for
  View Details, Trash for Delete), add card hover shadow effect,
  convert to MUI components for consistency
- Fuel Logs: Add row hover background effect on list items
- Maintenance Records: Add card hover shadow effect
- Maintenance Schedules: Add card hover shadow effect

All changes follow the VehicleCard pattern with:
- Light gray shadow/elevation on hover with 0.2s transition
- Consistent icon button styling with mobile-responsive touch targets
- Proper MUI component usage throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../documents/pages/DocumentsPage.tsx         | 259 ++++++++++++------
 .../fuel-logs/components/FuelLogsList.tsx     |   7 +-
 .../components/MaintenanceRecordsList.tsx     |  11 +-
 .../components/MaintenanceSchedulesList.tsx   |  11 +-
 4 files changed, 203 insertions(+), 85 deletions(-)

diff --git a/frontend/src/features/documents/pages/DocumentsPage.tsx b/frontend/src/features/documents/pages/DocumentsPage.tsx
index f45464c..0848216 100644
--- a/frontend/src/features/documents/pages/DocumentsPage.tsx
+++ b/frontend/src/features/documents/pages/DocumentsPage.tsx
@@ -1,8 +1,18 @@
 import React, { useMemo } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useDocumentsList, useDeleteDocument } from '../hooks/useDocuments';
-import { Card } from '../../../shared-minimal/components/Card';
-import { Button } from '../../../shared-minimal/components/Button';
+import {
+  Card,
+  CardContent,
+  Box,
+  Typography,
+  IconButton,
+  Button,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { useNavigate } from 'react-router-dom';
 import { AddDocumentDialog } from '../components/AddDocumentDialog';
 import { ExpirationBadge } from '../components/ExpirationBadge';
@@ -17,41 +27,43 @@ export const DocumentsPage: React.FC = () => {
   const navigate = useNavigate();
   const removeDoc = useDeleteDocument();
   const [isAddOpen, setIsAddOpen] = React.useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
 
   // Show loading while auth is initializing
   if (authLoading) {
     return (
-      <div className="container mx-auto p-4 space-y-4">
-        <h1 className="text-2xl font-semibold">Documents</h1>
-        <div className="flex items-center justify-center py-12">
-          <div className="text-slate-500">Checking authentication...</div>
-        </div>
-      </div>
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <Typography color="text.secondary">Checking authentication...</Typography>
+        </Box>
+      </Box>
     );
   }
 
   // Show login prompt when not authenticated
   if (!isAuthenticated) {
     return (
-      <div className="container mx-auto p-4 space-y-4">
-        <h1 className="text-2xl font-semibold">Documents</h1>
-        <Card>
-          <div className="p-8 text-center">
-            <div className="mb-4">
-              <svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
+        <Card variant="outlined">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
+            <Box sx={{ mb: 2 }}>
+              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
               </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Authentication Required</h3>
-            <p className="text-slate-600 mb-6">Please log in to view your documents</p>
-            <Button onClick={() => loginWithRedirect()}>
+            </Box>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Authentication Required</Typography>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Please log in to view your documents</Typography>
+            <Button variant="contained" onClick={() => loginWithRedirect()}>
               Login to Continue
             </Button>
-          </div>
+          </CardContent>
         </Card>
-      </div>
+      </Box>
     );
   }
 
@@ -59,115 +71,198 @@ export const DocumentsPage: React.FC = () => {
   const isAuthError = error && (error as any).response?.status === 401;
   if (isAuthError) {
     return (
-      <div className="container mx-auto p-4 space-y-4">
-        <h1 className="text-2xl font-semibold">Documents</h1>
-        <Card>
-          <div className="p-8 text-center">
-            <div className="mb-4">
-              <svg className="mx-auto w-16 h-16 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
+        <Card variant="outlined">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
+            <Box sx={{ mb: 2 }}>
+              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#fb923c' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Session Expired</h3>
-            <p className="text-slate-600 mb-6">Your session has expired. Please log in again to continue.</p>
-            <Button onClick={() => loginWithRedirect()}>
+            </Box>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Session Expired</Typography>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Your session has expired. Please log in again to continue.</Typography>
+            <Button variant="contained" onClick={() => loginWithRedirect()}>
               Login Again
             </Button>
-          </div>
+          </CardContent>
         </Card>
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div className="container mx-auto p-4 space-y-4">
-      <div className="flex items-center justify-between gap-2 flex-wrap">
-        <h1 className="text-2xl font-semibold">Documents</h1>
-        <div className="flex gap-2">
-          <Button onClick={() => setIsAddOpen(true)} className="min-h-[44px]">Add Document</Button>
-        </div>
-      </div>
+    <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 2 }}>
+        <Typography variant="h5" fontWeight={600}>Documents</Typography>
+        <Button variant="contained" onClick={() => setIsAddOpen(true)} sx={{ minHeight: 44 }}>
+          Add Document
+        </Button>
+      </Box>
       <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
 
       {isLoading && (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-slate-500">Loading documents...</div>
-        </div>
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <Typography color="text.secondary">Loading documents...</Typography>
+        </Box>
       )}
 
       {error && !isAuthError && (
-        <Card>
-          <div className="p-8 text-center">
-            <div className="mb-4">
-              <svg className="mx-auto w-16 h-16 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <Card variant="outlined">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
+            <Box sx={{ mb: 2 }}>
+              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#f87171' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Error Loading Documents</h3>
-            <p className="text-slate-600 mb-6">Failed to load documents. Please try again.</p>
-            <Button onClick={() => window.location.reload()}>
+            </Box>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Error Loading Documents</Typography>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Failed to load documents. Please try again.</Typography>
+            <Button variant="contained" onClick={() => window.location.reload()}>
               Retry
             </Button>
-          </div>
+          </CardContent>
         </Card>
       )}
 
       {!isLoading && !error && data && data.length === 0 && (
-        <Card>
-          <div className="p-8 text-center">
-            <div className="mb-4">
-              <svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <Card variant="outlined">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
+            <Box sx={{ mb: 2 }}>
+              <svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">No Documents Yet</h3>
-            <p className="text-slate-600 mb-6">You haven't added any documents yet. Documents will appear here once you create them.</p>
-            <Button onClick={() => navigate('/garage/vehicles')}>
+            </Box>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>No Documents Yet</Typography>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>You haven't added any documents yet. Documents will appear here once you create them.</Typography>
+            <Button variant="contained" onClick={() => navigate('/garage/vehicles')}>
               Go to Vehicles
             </Button>
-          </div>
+          </CardContent>
         </Card>
       )}
 
       {!isLoading && !error && data && data.length > 0 && (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <Box
+          sx={{
+            display: 'grid',
+            gap: 2,
+            gridTemplateColumns: {
+              xs: '1fr',
+              md: 'repeat(2, 1fr)',
+              lg: 'repeat(3, 1fr)',
+            },
+          }}
+        >
           {data.map((doc) => {
             const vehicle = vehiclesMap.get(doc.vehicleId);
             const vehicleLabel = getVehicleLabel(vehicle);
             return (
-              <Card key={doc.id}>
-                <div className="p-4 space-y-2">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span className="font-medium">{doc.title}</span>
+              <Card
+                key={doc.id}
+                variant="outlined"
+                sx={{
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  '&:hover': {
+                    boxShadow: 3,
+                  },
+                  transition: 'box-shadow 0.2s ease-in-out',
+                }}
+              >
+                <CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+                    <Typography variant="subtitle1" fontWeight={500}>{doc.title}</Typography>
                     <ExpirationBadge expirationDate={doc.expirationDate} />
-                  </div>
-                  <div className="text-sm text-slate-500">Type: {doc.documentType}</div>
+                  </Box>
+                  <Typography variant="body2" color="text.secondary">Type: {doc.documentType}</Typography>
                   <DocumentCardMetadata doc={doc} variant="card" />
-                  <div className="text-sm">
-                    <span className="text-slate-500">Vehicle: </span>
-                    <button
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography variant="body2" color="text.secondary">Vehicle:</Typography>
+                    <Typography
+                      component="button"
+                      variant="body2"
                       onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
-                      className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"
+                      sx={{
+                        color: 'primary.main',
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                        background: 'none',
+                        border: 'none',
+                        p: 0,
+                        minHeight: 44,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        '&:hover': { color: 'primary.dark' },
+                      }}
                     >
                       {vehicleLabel}
-                    </button>
-                  </div>
+                    </Typography>
+                  </Box>
                   {doc.sharedVehicleIds.length > 0 && (
-                    <div className="text-xs text-slate-500">
+                    <Typography variant="caption" color="text.secondary">
                       Shared with {doc.sharedVehicleIds.length} other vehicle{doc.sharedVehicleIds.length > 1 ? 's' : ''}
-                    </div>
+                    </Typography>
                   )}
-                  <div className="flex gap-2 pt-2">
-                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
-                    <Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
-                  </div>
-                </div>
+                </CardContent>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: isMobile ? 1 : 0.5,
+                    p: 2,
+                    pt: 0,
+                  }}
+                >
+                  <IconButton
+                    size={isMobile ? 'medium' : 'small'}
+                    onClick={() => navigate(`/garage/documents/${doc.id}`)}
+                    sx={{
+                      color: 'text.secondary',
+                      minWidth: isMobile ? 48 : 'auto',
+                      minHeight: isMobile ? 48 : 'auto',
+                      '&:hover': {
+                        backgroundColor: 'primary.main',
+                        color: 'white',
+                      },
+                      ...(isMobile && {
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 2,
+                      }),
+                    }}
+                    title="View Details"
+                  >
+                    <VisibilityIcon fontSize={isMobile ? 'medium' : 'small'} />
+                  </IconButton>
+                  <IconButton
+                    size={isMobile ? 'medium' : 'small'}
+                    onClick={() => removeDoc.mutate(doc.id)}
+                    sx={{
+                      color: 'error.main',
+                      minWidth: isMobile ? 48 : 'auto',
+                      minHeight: isMobile ? 48 : 'auto',
+                      '&:hover': {
+                        backgroundColor: 'error.main',
+                        color: 'white',
+                      },
+                      ...(isMobile && {
+                        border: '1px solid',
+                        borderColor: 'error.main',
+                        borderRadius: 2,
+                      }),
+                    }}
+                    title="Delete"
+                  >
+                    <DeleteIcon fontSize={isMobile ? 'medium' : 'small'} />
+                  </IconButton>
+                </Box>
               </Card>
             );
           })}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/features/fuel-logs/components/FuelLogsList.tsx b/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
index 64df06f..6e5a6f5 100644
--- a/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
+++ b/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
@@ -162,7 +162,12 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
                   flexDirection: isMobile ? 'column' : 'row',
                   alignItems: isMobile ? 'stretch' : 'center',
                   gap: isMobile ? 1 : 0,
-                  py: isMobile ? 2 : 1
+                  py: isMobile ? 2 : 1,
+                  '&:hover': {
+                    backgroundColor: 'action.hover',
+                  },
+                  transition: 'background-color 0.2s ease-in-out',
+                  cursor: 'default',
                 }}
               >
                 <Box sx={{
diff --git a/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx b/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
index f3b121b..27efd28 100644
--- a/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
@@ -86,7 +86,16 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
           const subtypeCount = record.subtypeCount || record.subtypes?.length || 0;
 
           return (
-            <Card key={record.id} variant="outlined">
+            <Card
+              key={record.id}
+              variant="outlined"
+              sx={{
+                '&:hover': {
+                  boxShadow: 3,
+                },
+                transition: 'box-shadow 0.2s ease-in-out',
+              }}
+            >
               <CardContent>
                 <Box
                   sx={{
diff --git a/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx b/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
index 04e2ac3..44ea1da 100644
--- a/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
@@ -170,7 +170,16 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
           const reminderDisplay = getReminderDisplay(schedule);
 
           return (
-            <Card key={schedule.id} variant="outlined">
+            <Card
+              key={schedule.id}
+              variant="outlined"
+              sx={{
+                '&:hover': {
+                  boxShadow: 3,
+                },
+                transition: 'box-shadow 0.2s ease-in-out',
+              }}
+            >
               <CardContent>
                 <Box
                   sx={{

From 5ad5ea12e6ae5e0975afc04e3d7b296b8885e964 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 18 Jan 2026 12:10:10 -0600
Subject: [PATCH 2/3] fix: add Edit (pencil) icon to Documents page (refs #51)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added missing Edit icon button between Eye and Trash icons.
Clicking Edit opens EditDocumentDialog to modify the document.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../documents/pages/DocumentsPage.tsx         | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/frontend/src/features/documents/pages/DocumentsPage.tsx b/frontend/src/features/documents/pages/DocumentsPage.tsx
index 0848216..6ee40d4 100644
--- a/frontend/src/features/documents/pages/DocumentsPage.tsx
+++ b/frontend/src/features/documents/pages/DocumentsPage.tsx
@@ -12,10 +12,13 @@ import {
   useMediaQuery,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useNavigate } from 'react-router-dom';
 import { AddDocumentDialog } from '../components/AddDocumentDialog';
+import { EditDocumentDialog } from '../components/EditDocumentDialog';
 import { ExpirationBadge } from '../components/ExpirationBadge';
+import type { DocumentRecord } from '../types/documents.types';
 import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import { getVehicleLabel } from '../utils/vehicleLabel';
@@ -27,6 +30,7 @@ export const DocumentsPage: React.FC = () => {
   const navigate = useNavigate();
   const removeDoc = useDeleteDocument();
   const [isAddOpen, setIsAddOpen] = React.useState(false);
+  const [editingDoc, setEditingDoc] = React.useState<DocumentRecord | null>(null);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -100,6 +104,13 @@ export const DocumentsPage: React.FC = () => {
         </Button>
       </Box>
       <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
+      {editingDoc && (
+        <EditDocumentDialog
+          open={!!editingDoc}
+          onClose={() => setEditingDoc(null)}
+          document={editingDoc}
+        />
+      )}
 
       {isLoading && (
         <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
@@ -235,6 +246,27 @@ export const DocumentsPage: React.FC = () => {
                   >
                     <VisibilityIcon fontSize={isMobile ? 'medium' : 'small'} />
                   </IconButton>
+                  <IconButton
+                    size={isMobile ? 'medium' : 'small'}
+                    onClick={() => setEditingDoc(doc)}
+                    sx={{
+                      color: 'text.secondary',
+                      minWidth: isMobile ? 48 : 'auto',
+                      minHeight: isMobile ? 48 : 'auto',
+                      '&:hover': {
+                        backgroundColor: 'primary.main',
+                        color: 'white',
+                      },
+                      ...(isMobile && {
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 2,
+                      }),
+                    }}
+                    title="Edit"
+                  >
+                    <EditIcon fontSize={isMobile ? 'medium' : 'small'} />
+                  </IconButton>
                   <IconButton
                     size={isMobile ? 'medium' : 'small'}
                     onClick={() => removeDoc.mutate(doc.id)}

From 48aea409d84ff1da74564ec750fe896a16189f09 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 18 Jan 2026 12:21:44 -0600
Subject: [PATCH 3/3] fix: remove colored hover fills from icon buttons (refs
 #51)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed icon button hover behavior to match VehicleCard pattern:
- Removed background color fills on hover (was primary.main/error.main)
- Icons now use default MUI IconButton gray ripple on hover
- Edit icons use text.secondary color (matches VehicleCard)
- Delete icons use error.main color (matches VehicleCard)

Affected files:
- DocumentsPage.tsx
- FuelLogsList.tsx
- MaintenanceRecordsList.tsx
- MaintenanceSchedulesList.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../documents/pages/DocumentsPage.tsx         | 27 -------------------
 .../fuel-logs/components/FuelLogsList.tsx     | 14 +---------
 .../components/MaintenanceRecordsList.tsx     | 20 +-------------
 .../components/MaintenanceSchedulesList.tsx   | 20 +-------------
 4 files changed, 3 insertions(+), 78 deletions(-)

diff --git a/frontend/src/features/documents/pages/DocumentsPage.tsx b/frontend/src/features/documents/pages/DocumentsPage.tsx
index 6ee40d4..9f44d19 100644
--- a/frontend/src/features/documents/pages/DocumentsPage.tsx
+++ b/frontend/src/features/documents/pages/DocumentsPage.tsx
@@ -232,15 +232,6 @@ export const DocumentsPage: React.FC = () => {
                       color: 'text.secondary',
                       minWidth: isMobile ? 48 : 'auto',
                       minHeight: isMobile ? 48 : 'auto',
-                      '&:hover': {
-                        backgroundColor: 'primary.main',
-                        color: 'white',
-                      },
-                      ...(isMobile && {
-                        border: '1px solid',
-                        borderColor: 'divider',
-                        borderRadius: 2,
-                      }),
                     }}
                     title="View Details"
                   >
@@ -253,15 +244,6 @@ export const DocumentsPage: React.FC = () => {
                       color: 'text.secondary',
                       minWidth: isMobile ? 48 : 'auto',
                       minHeight: isMobile ? 48 : 'auto',
-                      '&:hover': {
-                        backgroundColor: 'primary.main',
-                        color: 'white',
-                      },
-                      ...(isMobile && {
-                        border: '1px solid',
-                        borderColor: 'divider',
-                        borderRadius: 2,
-                      }),
                     }}
                     title="Edit"
                   >
@@ -274,15 +256,6 @@ export const DocumentsPage: React.FC = () => {
                       color: 'error.main',
                       minWidth: isMobile ? 48 : 'auto',
                       minHeight: isMobile ? 48 : 'auto',
-                      '&:hover': {
-                        backgroundColor: 'error.main',
-                        color: 'white',
-                      },
-                      ...(isMobile && {
-                        border: '1px solid',
-                        borderColor: 'error.main',
-                        borderRadius: 2,
-                      }),
                     }}
                     title="Delete"
                   >
diff --git a/frontend/src/features/fuel-logs/components/FuelLogsList.tsx b/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
index 6e5a6f5..5166514 100644
--- a/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
+++ b/frontend/src/features/fuel-logs/components/FuelLogsList.tsx
@@ -208,15 +208,9 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
                       size={isMobile ? 'medium' : 'small'}
                       onClick={() => onEdit(log)}
                       sx={{
-                        color: 'primary.main',
-                        '&:hover': { backgroundColor: 'primary.main', color: 'white' },
+                        color: 'text.secondary',
                         minWidth: isMobile ? 48 : 'auto',
                         minHeight: isMobile ? 48 : 'auto',
-                        ...(isMobile && {
-                          border: '1px solid',
-                          borderColor: 'primary.main',
-                          borderRadius: 2
-                        })
                       }}
                     >
                       <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -228,14 +222,8 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
                       onClick={() => handleDeleteClick(log)}
                       sx={{
                         color: 'error.main',
-                        '&:hover': { backgroundColor: 'error.main', color: 'white' },
                         minWidth: isMobile ? 48 : 'auto',
                         minHeight: isMobile ? 48 : 'auto',
-                        ...(isMobile && {
-                          border: '1px solid',
-                          borderColor: 'error.main',
-                          borderRadius: 2
-                        })
                       }}
                     >
                       <Delete fontSize={isMobile ? 'medium' : 'small'} />
diff --git a/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx b/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
index 27efd28..015029c 100644
--- a/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
@@ -157,18 +157,9 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
                         size={isMobile ? 'medium' : 'small'}
                         onClick={() => onEdit(record)}
                         sx={{
-                          color: 'primary.main',
+                          color: 'text.secondary',
                           minWidth: 44,
                           minHeight: 44,
-                          '&:hover': {
-                            backgroundColor: 'primary.main',
-                            color: 'white',
-                          },
-                          ...(isMobile && {
-                            border: '1px solid',
-                            borderColor: 'primary.main',
-                            borderRadius: 2,
-                          }),
                         }}
                       >
                         <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -182,15 +173,6 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
                           color: 'error.main',
                           minWidth: 44,
                           minHeight: 44,
-                          '&:hover': {
-                            backgroundColor: 'error.main',
-                            color: 'white',
-                          },
-                          ...(isMobile && {
-                            border: '1px solid',
-                            borderColor: 'error.main',
-                            borderRadius: 2,
-                          }),
                         }}
                       >
                         <Delete fontSize={isMobile ? 'medium' : 'small'} />
diff --git a/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx b/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
index 44ea1da..03e7f56 100644
--- a/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
+++ b/frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
@@ -257,18 +257,9 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
                         size={isMobile ? 'medium' : 'small'}
                         onClick={() => onEdit(schedule)}
                         sx={{
-                          color: 'primary.main',
+                          color: 'text.secondary',
                           minWidth: 44,
                           minHeight: 44,
-                          '&:hover': {
-                            backgroundColor: 'primary.main',
-                            color: 'white',
-                          },
-                          ...(isMobile && {
-                            border: '1px solid',
-                            borderColor: 'primary.main',
-                            borderRadius: 2,
-                          }),
                         }}
                       >
                         <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -282,15 +273,6 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
                           color: 'error.main',
                           minWidth: 44,
                           minHeight: 44,
-                          '&:hover': {
-                            backgroundColor: 'error.main',
-                            color: 'white',
-                          },
-                          ...(isMobile && {
-                            border: '1px solid',
-                            borderColor: 'error.main',
-                            borderRadius: 2,
-                          }),
                         }}
                       >
                         <Delete fontSize={isMobile ? 'medium' : 'small'} />