egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: standardize checkboxes to use MUI Checkbox component (refs #35)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m41s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 38s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 7s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details

Browse Source 
Replace raw HTML checkboxes with MUI Checkbox wrapped in FormControlLabel
for consistent styling and theme integration across:
- DocumentForm.tsx (shared vehicles + scan maintenance checkboxes)
- VehicleForm.tsx (TCO enabled checkbox)
- SignupForm.tsx (terms acceptance checkbox)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-01-14 21:01:00 -06:00
parent ec8e6ee5d2
commit 8c570288f9
3 changed files with 116 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/features/documents/components/DocumentForm.tsx
View File

@@ -4,6 +4,7 @@ import { UpgradeRequiredDialog } from '../../../shared-minimal/components/Upgrad
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Checkbox, FormControlLabel } from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import dayjs from 'dayjs';
import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
@@ -426,22 +427,34 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-2">
Share with other vehicles
</label>
<div className="space-y-2 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
<div className="space-y-1 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
{sharedVehicleOptions.map((v) => (
<label
<FormControlLabel
key={v.id}
className="flex items-center cursor-pointer min-h-[44px] py-2 px-2 hover:bg-slate-100 dark:hover:bg-scuro rounded"
>
<input
type="checkbox"
checked={selectedSharedVehicles.includes(v.id)}
onChange={() => handleSharedVehicleToggle(v.id)}
className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
/>
<span className="ml-3 text-sm text-slate-700 dark:text-avus">
{vehicleLabel(v)}
</span>
</label>
control={
<Checkbox
checked={selectedSharedVehicles.includes(v.id)}
onChange={() => handleSharedVehicleToggle(v.id)}
color="primary"
sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
/>
}
label={vehicleLabel(v)}
sx={{
width: '100%',
minHeight: 44,
mx: 0,
px: 1,
borderRadius: 1,
'&:hover': {
bgcolor: 'action.hover',
},
'& .MuiFormControlLabel-label': {
fontSize: '0.875rem',
color: 'text.primary',
},
}}
/>
))}
</div>
</div>
@@ -494,30 +507,39 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
{documentType === 'manual' && (
<div className="flex items-center md:col-span-2">
<label className={`flex items-center ${canScanMaintenance ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'}`}>
<input
type="checkbox"
checked={canScanMaintenance ? scanForMaintenance : false}
onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
disabled={!canScanMaintenance}
className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi disabled:opacity-50"
/>
<span className="ml-2 text-sm font-medium text-slate-700 dark:text-avus">
Scan for Maintenance Schedule
</span>
</label>
<FormControlLabel
control={
<Checkbox
checked={canScanMaintenance ? scanForMaintenance : false}
onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
disabled={!canScanMaintenance}
color="primary"
sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
/>
}
label="Scan for Maintenance Schedule"
sx={{
opacity: canScanMaintenance ? 1 : 0.6,
cursor: canScanMaintenance ? 'pointer' : 'not-allowed',
'& .MuiFormControlLabel-label': {
fontSize: '0.875rem',
fontWeight: 500,
color: 'text.primary',
},
}}
/>
{!canScanMaintenance && (
<button
type="button"
onClick={() => setUpgradeDialogOpen(true)}
className="ml-2 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
className="ml-1 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
title="Upgrade to Pro to unlock this feature"
>
<LockOutlinedIcon fontSize="small" />
</button>
)}
{canScanMaintenance && (
<span className="ml-2 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
<span className="ml-1 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
)}
</div>
)}