Merge pull request 'fix: Standardize card/list action buttons and hover states (#51)' (#52) from issue-51-standardize-action-buttons into main

Reviewed-on: #52

frontend/src/features/documents/pages/DocumentsPage.tsx

@@ -1,11 +1,24 @@
 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 {
-import { Button } from '../../../shared-minimal/components/Button';
+  Card,
+  CardContent,
+  Box,
+  Typography,
+  IconButton,
+  Button,
+  useTheme,
+  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';
@@ -17,41 +30,44 @@ 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'));
 
   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">
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
-        <h1 className="text-2xl font-semibold">Documents</h1>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
-        <div className="flex items-center justify-center py-12">
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <div className="text-slate-500">Checking authentication...</div>
+          <Typography color="text.secondary">Checking authentication...</Typography>
-        </div>
+        </Box>
-      </div>
+      </Box>
     );
   }
 
   // Show login prompt when not authenticated
   if (!isAuthenticated) {
     return (
-      <div className="container mx-auto p-4 space-y-4">
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
-        <h1 className="text-2xl font-semibold">Documents</h1>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
-        <Card>
+        <Card variant="outlined">
-          <div className="p-8 text-center">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
-            <div className="mb-4">
+            <Box sx={{ mb: 2 }}>
-              <svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            </Box>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Authentication Required</h3>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Authentication Required</Typography>
-            <p className="text-slate-600 mb-6">Please log in to view your documents</p>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Please log in to view your documents</Typography>
-            <Button onClick={() => loginWithRedirect()}>
+            <Button variant="contained" onClick={() => loginWithRedirect()}>
               Login to Continue
             </Button>
-          </div>
+          </CardContent>
         </Card>
-      </div>
+      </Box>
     );
   }
 
@@ -59,115 +75,199 @@ 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">
+      <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
-        <h1 className="text-2xl font-semibold">Documents</h1>
+        <Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
-        <Card>
+        <Card variant="outlined">
-          <div className="p-8 text-center">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
-            <div className="mb-4">
+            <Box sx={{ mb: 2 }}>
-              <svg className="mx-auto w-16 h-16 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            </Box>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Session Expired</h3>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Session Expired</Typography>
-            <p className="text-slate-600 mb-6">Your session has expired. Please log in again to continue.</p>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Your session has expired. Please log in again to continue.</Typography>
-            <Button onClick={() => loginWithRedirect()}>
+            <Button variant="contained" onClick={() => loginWithRedirect()}>
               Login Again
             </Button>
-          </div>
+          </CardContent>
         </Card>
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div className="container mx-auto p-4 space-y-4">
+    <Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
-      <div className="flex items-center justify-between gap-2 flex-wrap">
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 2 }}>
-        <h1 className="text-2xl font-semibold">Documents</h1>
+        <Typography variant="h5" fontWeight={600}>Documents</Typography>
-        <div className="flex gap-2">
+        <Button variant="contained" onClick={() => setIsAddOpen(true)} sx={{ minHeight: 44 }}>
-          <Button onClick={() => setIsAddOpen(true)} className="min-h-[44px]">Add Document</Button>
+          Add Document
-        </div>
+        </Button>
-      </div>
+      </Box>
       <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
+      {editingDoc && (
+        <EditDocumentDialog
+          open={!!editingDoc}
+          onClose={() => setEditingDoc(null)}
+          document={editingDoc}
+        />
+      )}
 
       {isLoading && (
-        <div className="flex items-center justify-center py-12">
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <div className="text-slate-500">Loading documents...</div>
+          <Typography color="text.secondary">Loading documents...</Typography>
-        </div>
+        </Box>
       )}
 
       {error && !isAuthError && (
-        <Card>
+        <Card variant="outlined">
-          <div className="p-8 text-center">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
-            <div className="mb-4">
+            <Box sx={{ mb: 2 }}>
-              <svg className="mx-auto w-16 h-16 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            </Box>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">Error Loading Documents</h3>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Error Loading Documents</Typography>
-            <p className="text-slate-600 mb-6">Failed to load documents. Please try again.</p>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>Failed to load documents. Please try again.</Typography>
-            <Button onClick={() => window.location.reload()}>
+            <Button variant="contained" onClick={() => window.location.reload()}>
               Retry
             </Button>
-          </div>
+          </CardContent>
         </Card>
       )}
 
       {!isLoading && !error && data && data.length === 0 && (
-        <Card>
+        <Card variant="outlined">
-          <div className="p-8 text-center">
+          <CardContent sx={{ p: 4, textAlign: 'center' }}>
-            <div className="mb-4">
+            <Box sx={{ mb: 2 }}>
-              <svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            </Box>
-            <h3 className="text-lg font-semibold text-slate-800 mb-2">No Documents Yet</h3>
+            <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>No Documents Yet</Typography>
-            <p className="text-slate-600 mb-6">You haven't added any documents yet. Documents will appear here once you create them.</p>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>You haven't added any documents yet. Documents will appear here once you create them.</Typography>
-            <Button onClick={() => navigate('/garage/vehicles')}>
+            <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}>
+              <Card
-                <div className="p-4 space-y-2">
+                key={doc.id}
-                  <div className="flex items-center gap-2 flex-wrap">
+                variant="outlined"
-                    <span className="font-medium">{doc.title}</span>
+                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>
+                  </Box>
-                  <div className="text-sm text-slate-500">Type: {doc.documentType}</div>
+                  <Typography variant="body2" color="text.secondary">Type: {doc.documentType}</Typography>
                   <DocumentCardMetadata doc={doc} variant="card" />
-                  <div className="text-sm">
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                    <span className="text-slate-500">Vehicle: </span>
+                    <Typography variant="body2" color="text.secondary">Vehicle:</Typography>
-                    <button
+                    <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>
+                    </Typography>
-                  </div>
+                  </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">
+                </CardContent>
-                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
+                <Box
-                    <Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
+                  sx={{
-                  </div>
+                    display: 'flex',
-                </div>
+                    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',
+                    }}
+                    title="View Details"
+                  >
+                    <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',
+                    }}
+                    title="Edit"
+                  >
+                    <EditIcon 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',
+                    }}
+                    title="Delete"
+                  >
+                    <DeleteIcon fontSize={isMobile ? 'medium' : 'small'} />
+                  </IconButton>
+                </Box>
               </Card>
             );
           })}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 };
 

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={{
@@ -203,15 +208,9 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
                       size={isMobile ? 'medium' : 'small'}
                       onClick={() => onEdit(log)}
                       sx={{
-                        color: 'primary.main',
+                        color: 'text.secondary',
-                        '&:hover': { backgroundColor: 'primary.main', color: 'white' },
                         minWidth: isMobile ? 48 : 'auto',
                         minHeight: isMobile ? 48 : 'auto',
-                        ...(isMobile && {
-                          border: '1px solid',
-                          borderColor: 'primary.main',
-                          borderRadius: 2
-                        })
                       }}
                     >
                       <Edit fontSize={isMobile ? 'medium' : 'small'} />
@@ -223,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'} />

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={{
@@ -148,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'} />
@@ -173,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'} />

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={{
@@ -248,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'} />
@@ -273,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'} />