From 8c570288f9ccf3d36afce51cfbf53b002cf05b9d Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Wed, 14 Jan 2026 21:01:00 -0600 Subject: [PATCH] fix: standardize checkboxes to use MUI Checkbox component (refs #35) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../features/auth/components/SignupForm.tsx | 59 +++++++++----- .../documents/components/DocumentForm.tsx | 78 ++++++++++++------- .../vehicles/components/VehicleForm.tsx | 39 +++++++--- 3 files changed, 116 insertions(+), 60 deletions(-) diff --git a/frontend/src/features/auth/components/SignupForm.tsx b/frontend/src/features/auth/components/SignupForm.tsx index ea05afe..d16bdc4 100644 --- a/frontend/src/features/auth/components/SignupForm.tsx +++ b/frontend/src/features/auth/components/SignupForm.tsx @@ -3,9 +3,10 @@ */ import React, { useState } from 'react'; -import { useForm } from 'react-hook-form'; +import { useForm, Controller } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; +import { Checkbox, FormControlLabel, Link } from '@mui/material'; import { Button } from '../../../shared-minimal/components/Button'; import { SignupRequest } from '../types/auth.types'; @@ -40,6 +41,7 @@ export const SignupForm: React.FC = ({ onSubmit, loading }) => register, handleSubmit, formState: { errors }, + control, } = useForm({ resolver: zodResolver(signupSchema), }); @@ -141,26 +143,41 @@ export const SignupForm: React.FC = ({ onSubmit, loading }) => )} -
- +
+ ( + field.onChange(e.target.checked)} + color="primary" + sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }} + inputProps={{ 'aria-label': 'I agree to the Terms and Conditions' }} + /> + } + label={ + + I agree to the{' '} + + Terms & Conditions + + + } + sx={{ + alignItems: 'flex-start', + '& .MuiCheckbox-root': { pt: 0 }, + }} + /> + )} + />
{errors.termsAccepted && (

{errors.termsAccepted.message}

diff --git a/frontend/src/features/documents/components/DocumentForm.tsx b/frontend/src/features/documents/components/DocumentForm.tsx index 41bfdb8..55947b3 100644 --- a/frontend/src/features/documents/components/DocumentForm.tsx +++ b/frontend/src/features/documents/components/DocumentForm.tsx @@ -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 = ({ -
+
{sharedVehicleOptions.map((v) => ( - + control={ + 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', + }, + }} + /> ))}
@@ -494,30 +507,39 @@ export const DocumentForm: React.FC = ({ {documentType === 'manual' && (
- + 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 && ( )} {canScanMaintenance && ( - (Coming soon) + (Coming soon) )}
)} diff --git a/frontend/src/features/vehicles/components/VehicleForm.tsx b/frontend/src/features/vehicles/components/VehicleForm.tsx index 094becf..4158bda 100644 --- a/frontend/src/features/vehicles/components/VehicleForm.tsx +++ b/frontend/src/features/vehicles/components/VehicleForm.tsx @@ -3,9 +3,10 @@ */ import React, { useState, useEffect, useRef } from 'react'; -import { useForm } from 'react-hook-form'; +import { useForm, Controller } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; +import { Checkbox, FormControlLabel } from '@mui/material'; import { Button } from '../../../shared-minimal/components/Button'; import { CreateVehicleRequest, Vehicle, CostInterval } from '../types/vehicles.types'; import { vehiclesApi } from '../api/vehicles.api'; @@ -136,6 +137,7 @@ export const VehicleForm: React.FC = ({ watch, setValue, reset, + control, } = useForm({ resolver: zodResolver(vehicleSchema), defaultValues: initialData, @@ -948,16 +950,31 @@ export const VehicleForm: React.FC = ({
- + ( + field.onChange(e.target.checked)} + color="primary" + sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }} + /> + } + label="Display Total Cost of Ownership on vehicle details" + sx={{ + minHeight: 44, + '& .MuiFormControlLabel-label': { + fontSize: '0.875rem', + fontWeight: 500, + color: 'text.primary', + }, + }} + /> + )} + />

When enabled, shows lifetime cost and cost per mile/km on the vehicle detail page.