src/components/AddEditAdminModal/addEditAdminModal.tsx

@@ -5,6 +5,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
 import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
+import { autofillFix } from "../../shared-theme/customizations/autoFill";
 
 //By Jaanvi : Edit Model :: 11-feb-25
 interface AddEditCategoryModalProps {
@@ -202,6 +203,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									display: "flex",
 									flexDirection: "column",
 									width: "50%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -226,6 +228,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 											id="email"
 											type="email"
 											placeholder="Email"
+											autoComplete="new-email"
 											required
 											fullWidth
 											color={
@@ -247,6 +250,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 										display: "flex",
 										flexDirection: "column",
 										width: "50%",
+										...autofillFix,
 									}}
 								>
 									<Typography
@@ -276,6 +280,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 												{...field}
 												required
 												placeholder="Enter Password"
+												autoComplete="new-password"
 												type={
 													showPassword
 														? "text"

src/components/AddManagerModal/addManagerModal.tsx

@@ -19,6 +19,7 @@ import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
 import React, { useEffect, useState } from "react";
 import { RootState } from "../../redux/reducers.ts";
 import { stationList } from "../../redux/slices/stationSlice.ts";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 
 export default function AddManagerModal({
 	open,
@@ -197,7 +198,7 @@ export default function AddManagerModal({
 					{/* Email and Password */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						{/* Email */}
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Email
 							</Typography>
@@ -205,6 +206,7 @@ export default function AddManagerModal({
 								fullWidth
 								placeholder="Enter Manager Email"
 								size="small"
+								autoComplete="new-email"
 								error={!!errors.email}
 								helperText={
 									errors.email ? errors.email.message : ""
@@ -220,7 +222,7 @@ export default function AddManagerModal({
 						</Box>
 
 						{/* Password */}
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Password
 							</Typography>
@@ -244,6 +246,7 @@ export default function AddManagerModal({
 									<CustomTextField
 										{...field}
 										required
+										autoComplete="new-password"
 										placeholder="Enter Password"
 										type={
 											showPassword ? "text" : "password"

src/components/AddStationModal/addStationModal.tsx

@@ -11,6 +11,7 @@ import {
 	Checkbox,
 	ListItemText,
 	InputLabel,
+	Chip,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useSelector, useDispatch } from "react-redux";
@@ -20,7 +21,7 @@ import {
 	fetchVehicleBrands,
 	vehicleList,
 } from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly
-import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";// Assuming custom styled components
+import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
 
 export default function AddStationModal({
 	open,
@@ -258,62 +259,79 @@ export default function AddStationModal({
 									width: "100%",
 								}}
 							>
-								<Typography variant="body2" fontWeight={500}>
+								<Typography
+									variant="body2"
+									fontWeight={500}
+									sx={{ mb: 1 }}
+								>
 									Vehicle Brand
 								</Typography>
-								<FormControl fullWidth>
+								<FormControl fullWidth size="small">
-									<InputLabel>Choose Brands</InputLabel>
 									<Select
 										multiple
+										displayEmpty
 										value={selectedBrands}
 										onChange={handleBrandChange}
 										renderValue={(selected) => {
-											const selectedArray =
+											if (selected.length === 0) {
-												selected as string[];
+												return (
-											const displayNames =
+													<Typography color="text.secondary">
-												selectedArray.slice(0, 1); // First 2 brands
+														Choose Brands
+													</Typography>
+												);
+											}
+
+											const displayNames = (
+												selected as string[]
+											).slice(0, 1);
 											const moreCount =
-												selectedArray.length - 1;
+												(selected as string[]).length -
+												1;
 
 											return (
 												<Box
 													sx={{
 														display: "flex",
-														alignItems: "center",
+														flexWrap: "wrap",
-														gap: 1,
+														gap: 0.5,
 													}}
 												>
-													{displayNames.map(
+													{displayNames.map((id) => {
-														(id, index) => {
+														const brand =
-															const brand =
+															vehicleBrands.find(
-																vehicleBrands.find(
+																(b) =>
-																	(b) =>
+																	b.id === id
-																		b.id ===
-																		id
-																);
-															return (
-																<Typography
-																	key={index}
-																	variant="body2"
-																>
-																	{brand
-																		? brand.name
-																		: ""}
-																</Typography>
 															);
-														}
+														return brand ? (
-													)}
+															<Chip
+																key={id}
+																label={
+																	brand.name
+																}
+																size="small"
+																sx={{
+																	height: 24,
+																}}
+															/>
+														) : null;
+													})}
 													{moreCount > 0 && (
-														<Typography
+														<Chip
-															variant="body2"
+															label={`+${moreCount} more`}
-															color="textSecondary"
+															size="small"
-														>
+															sx={{ height: 24 }}
-															+{moreCount} more
+														/>
-														</Typography>
 													)}
 												</Box>
 											);
 										}}
+										MenuProps={{
+											PaperProps: {
+												style: {
+													maxHeight: 224,
+												},
+											},
+										}}
 									>
 										{vehicleBrands.length > 0 ? (
 											vehicleBrands.map((brand) => (
@@ -345,6 +363,7 @@ export default function AddStationModal({
 								</FormControl>
 							</Box>
 
+							{/* Replace the Vehicle Name Dropdown code with this */}
 							<Box
 								sx={{
 									display: "flex",
@@ -352,52 +371,79 @@ export default function AddStationModal({
 									width: "100%",
 								}}
 							>
-								<Typography variant="body2" fontWeight={500}>
+								<Typography
+									variant="body2"
+									fontWeight={500}
+									sx={{ mb: 1 }}
+								>
 									Vehicle Name
 								</Typography>
-								<FormControl fullWidth>
+								<FormControl
-									<InputLabel>Choose Vehicles</InputLabel>
+									fullWidth
+									size="small"
+									disabled={selectedBrands.length === 0}
+								>
 									<Select
 										multiple
+										displayEmpty
 										value={selectedVehicles}
 										onChange={handleVehicleChange}
 										renderValue={(selected) => {
-											const selectedArray =
+											if (selected.length === 0) {
-												selected as string[];
+												return (
-											const displayNames =
+													<Typography color="text.secondary">
-												selectedArray.slice(0, 1); // First 2 vehicles
+														{selectedBrands.length ===
+														0
+															? "Select brand first"
+															: "Choose Vehicles"}
+													</Typography>
+												);
+											}
+
+											const displayNames = (
+												selected as string[]
+											).slice(0, 1);
 											const moreCount =
-												selectedArray.length - 1;
+												(selected as string[]).length -
+												1;
 
 											return (
 												<Box
 													sx={{
 														display: "flex",
-														alignItems: "center",
+														flexWrap: "wrap",
-														gap: 1,
+														gap: 0.5,
 													}}
 												>
 													{displayNames.map(
-														(name, index) => (
+														(name) => (
-															<Typography
+															<Chip
-																key={index}
+																key={name}
-																variant="body2"
+																label={name}
-															>
+																size="small"
-																{name}
+																sx={{
-															</Typography>
+																	height: 24,
+																}}
+															/>
 														)
 													)}
 													{moreCount > 0 && (
-														<Typography
+														<Chip
-															variant="body2"
+															label={`+${moreCount} more`}
-															color="textSecondary"
+															size="small"
-														>
+															sx={{ height: 24 }}
-															+{moreCount} more
+														/>
-														</Typography>
 													)}
 												</Box>
 											);
 										}}
+										MenuProps={{
+											PaperProps: {
+												style: {
+													maxHeight: 224,
+												},
+											},
+										}}
 									>
 										{filteredVehicles.length > 0 ? (
 											filteredVehicles.map((vehicle) => (

src/components/AddUserModal/addUserModal.tsx

@@ -12,6 +12,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
 import { CustomIconButton, CustomTextField } from "./styled.css.tsx";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 
 interface FormData {
 	name: string;
@@ -109,6 +110,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -134,6 +136,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 									<CustomTextField
 										{...field}
 										required
+										autoComplete="username"
 										placeholder="Enter User Name"
 										fullWidth
 										size="small"
@@ -149,6 +152,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -172,6 +176,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										helperText={errors.email?.message}
 										type="email"
 										placeholder="Email"
+										autoComplete="new-email"
 										required
 										fullWidth
 										color={
@@ -190,6 +195,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -211,6 +217,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										{...field}
 										required
 										placeholder="Enter Password"
+										autoComplete="new-password"
 										type={
 											showPassword ? "text" : "password"
 										}

src/components/EditStationModal/editSationModal.tsx

@@ -20,10 +20,7 @@ import {
 	fetchVehicleBrands,
 	vehicleList,
 } from "../../redux/slices/VehicleSlice";
-import {
+import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
-	CustomIconButton,
-	CustomTextField,
-} from "../AddUserModal/styled.css"; // Assuming custom styled components
 
 interface FormData {
 	name: string;
@@ -94,7 +91,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 			);
 
 			const brandId = firstVehicle ? firstVehicle.company : "";
-			setSelectedBrand(brandId);
+			setSelectedBrands(brandId);
 
 			// Populate selected vehicles
 			const vehicleNames = vehicles
@@ -116,15 +113,13 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 			setSelectedVehicles(editRow.allowedCarIds || []);
 
 			// Set selectedBrands based on the vehicles associated with the station
-		const brands = editRow?.allowedCarIds
+			const brands = editRow?.allowedCarIds
-			? vehicles
+				? vehicles
-					.filter((vehicle) =>
+						.filter((vehicle) =>
-						editRow.allowedCarIds.includes(vehicle.id)
+							editRow.allowedCarIds.includes(vehicle.id)
-					)
+						)
-					.map((vehicle) => vehicle.company)
+						.map((vehicle) => vehicle.company)
-			: [];
+				: [];
-
-				
 
 			setSelectedBrands(brands);
 		} else {
@@ -134,13 +129,11 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 		}
 	}, [editRow, setValue, reset, vehicles]);
 
-
 	// Filter vehicles based on selected brands
 	const filteredVehicles = vehicles.filter((vehicle) =>
 		selectedBrands.includes(vehicle.company)
 	);
 
-
 	// Handle changes in vehicle brand selection
 	const handleBrandChange = (
 		event: React.ChangeEvent<{ value: unknown }>
@@ -155,7 +148,6 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 		setSelectedVehicles(filtered.map((v) => v.name)); // Automatically select vehicles for the selected brands
 	};
 
-
 	// Handle changes in vehicle selection
 	const handleCheckboxChange = (
 		event: React.ChangeEvent<{ value: unknown }>
@@ -165,27 +157,26 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 		setValue("allowedCarIds", value);
 	};
 
-const onSubmit = (data: FormData) => {
+	const onSubmit = (data: FormData) => {
-	const vehicleIds = vehicles
+		const vehicleIds = vehicles
-		.filter((vehicle) => selectedVehicles.includes(vehicle.name))
+			.filter((vehicle) => selectedVehicles.includes(vehicle.name))
-		.map((vehicle) => Number(vehicle.id));
+			.map((vehicle) => Number(vehicle.id));
 
-	handleUpdate(
+		handleUpdate(
-		editRow.id,
+			editRow.id,
-		data.name,
+			data.name,
-		data.registeredAddress,
+			data.registeredAddress,
-		data.totalSlots,
+			data.totalSlots,
-		vehicleIds
+			vehicleIds
-	);
+		);
-	handleClose();
+		handleClose();
-	reset();
+		reset();
-	setSelectedBrands([]); // Reset brands after submit
+		setSelectedBrands([]); // Reset brands after submit
-	setSelectedVehicles([]); // Reset selected vehicles
+		setSelectedVehicles([]); // Reset selected vehicles
-};
+	};
 
 	console.log("editRow:", editRow);
 
-
 	return (
 		<Modal
 			open={open}

src/components/Header/index.tsx

@@ -78,10 +78,14 @@ export default function Header() {
 					spacing={2}
 					alignItems="center"
 					sx={{
+						pointer: "cursor",
 						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
 					}}
 				>
-					<NotificationsNoneIcon onClick={toggleNotifications} />
+					<NotificationsNoneIcon
+						sx={{ pointer: "cursor" }}
+						onClick={toggleNotifications}
+					/>
 					<Avatar
 						alt="User Avatar"
 						src="/avatar.png"

src/components/MainGrid/mainGrid.tsx

@@ -12,43 +12,37 @@ import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 import { useEffect } from "react";
 
 export default function MainGrid() {
-  const dispatch = useDispatch<AppDispatch>();
+	const dispatch = useDispatch<AppDispatch>();
-  const {
+	const {
 		totalAdmins,
 		totalManagers,
 		totalUsers,
 		totalStations,
 		loading,
 		error,
-  } = useSelector((state: RootState) => state.dashboardReducer);
+	} = useSelector((state: RootState) => state.dashboardReducer);
 
-
+	const staticData = {
- 
-   const staticData = {
 		totalAdmins: 86,
 		totalManagers: 12,
 		totalUsers: 24,
 		totalStations: 8,
-   };
+	};
-
-    useEffect(() => {
-	
-				dispatch(fetchDashboardData());
 
+	useEffect(() => {
+		dispatch(fetchDashboardData());
 	}, [dispatch]);
 
-   const data =
+	const data = { totalAdmins, totalManagers, totalUsers, totalStations };
-		 { totalAdmins, totalManagers, totalUsers, totalStations }
 
-
+	const statCards = [
-  const statCards = [
 		{ title: "Total Admins", value: data.totalAdmins },
 		{ title: "Total Managers", value: data.totalManagers },
 		{ title: "Total Users", value: data.totalUsers },
 		{ title: "Total Stations", value: data.totalStations },
-  ];
+	];
 
-  return (
+	return (
 		<Box
 			sx={{
 				width: "100%",
@@ -86,5 +80,5 @@ export default function MainGrid() {
 				</Grid>
 			</Grid>
 		</Box>
-  );
+	);
 }

src/components/MenuButton/index.tsx

@@ -17,7 +17,7 @@ export default function MenuButton({
 			invisible={!showBadge}
 			sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
 		>
-			<IconButton size="small" {...props} />
+			<IconButton  sx={{ marginRight: "60px" }} size="small" {...props} />
 		</Badge>
 	);
 }

src/components/MenuContent/index.tsx

@@ -144,7 +144,9 @@ export default function MenuContent({ hidden }: PropType) {
 										fontSize: "16px",
 										letterSpacing: "0%",
 										lineHeight: "100%",
-										color: "#D9D8D8",
+										whiteSpace: "pre",
+										color: "#FAFAFA",
+										marginTop: "5px",
 									},
 								}}
 								primary={item.text}

src/pages/Auth/Login/index.tsx

@@ -22,6 +22,7 @@ import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { Card, SignInContainer } from "./styled.css.tsx";
 import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx";
 import { AppDispatch } from "../../../redux/store/store.ts";
+import { autofillFix } from "../../../shared-theme/customizations/autoFill.tsx";
 
 interface ILoginForm {
 	email: string;
@@ -73,7 +74,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 		<AppTheme {...props}>
 			<SignInContainer direction="column" justifyContent="space-between">
 				<Grid container sx={{ minHeight: "100vh" }}>
-					
 					<Grid
 						item
 						xs={0}
@@ -86,7 +86,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							position: "relative",
 						}}
 					>
-						
 						<Box
 							sx={{
 								position: "absolute",
@@ -122,7 +121,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							position: "relative",
 						}}
 					>
-						
 						<Box
 							sx={{
 								display: { xs: "flex", md: "none" },
@@ -164,7 +162,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						<Card
 							variant="outlined"
 							sx={{
-								width: { xs: "100%", sm: "90%", md: "90%", lg: "408px" },
+								width: {
+									xs: "100%",
+									sm: "90%",
+									md: "90%",
+									lg: "408px",
+								},
 								maxWidth: "408px",
 								minHeight: { xs: "auto", md: "428px" },
 								padding: { xs: "16px", sm: "20px", md: "24px" },
@@ -201,7 +204,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									variant="subtitle2"
 									sx={{
 										textAlign: "center",
-										color: "white",
+										color: "#D9D8D8",
 										fontSize: { xs: "14px", md: "16px" },
 										mb: 1,
 									}}
@@ -214,12 +217,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="email"
 										sx={{
+											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
 											},
 											color: "white",
 											mb: 0.5,
+											...autofillFix,
 										}}
 									>
 										Email
@@ -258,7 +263,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												InputProps={{
 													sx: {
-														height: { xs: "45px", md: "50px" },
+														height: {
+															xs: "45px",
+															md: "50px",
+														},
 														alignItems: "center",
 														backgroundColor:
 															"#1E1F1F",
@@ -269,7 +277,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														{
 															backgroundColor:
 																"#1E1F1F",
-															borderRadius: "4px",
+															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
 																	"#4b5255",
@@ -302,6 +310,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															fontFamily:
 																"Gilroy, sans-serif",
 														},
+													...autofillFix,
 												}}
 											/>
 										)}
@@ -313,6 +322,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="password"
 										sx={{
+											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
@@ -350,13 +360,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												name="password"
 												placeholder="Password"
+												autoComplete="current-password"
 												type={
 													showPassword
 														? "text"
 														: "password"
 												}
 												id="password"
-												autoComplete="current-password"
 												required
 												fullWidth
 												variant="outlined"
@@ -367,8 +377,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												InputProps={{
 													sx: {
-														height: { xs: "45px", md: "50px" },
+														height: {
+															xs: "45px",
+															md: "50px",
+														},
+														...autofillFix,
 													},
+
 													endAdornment: (
 														<InputAdornment position="end">
 															<CustomIconButton
@@ -392,7 +407,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														{
 															backgroundColor:
 																"#1E1F1F",
-															borderRadius: "4px",
+															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
 																	"#4b5255",
@@ -471,8 +486,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 													fontSize: {
 														xs: "0.75rem",
 														sm: "0.875rem",
-														md: "1rem" 
+														md: "1rem",
-													}
+													},
 												}}
 											>
 												Remember me
@@ -492,17 +507,17 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											fontSize: {
 												xs: "0.75rem",
 												sm: "0.875rem",
-												md: "1rem" 
+												md: "1rem",
 											},
 										}}
 									>
 										Forgot password?
 									</Link>
 								</Box>
-								<ForgotPassword
+								{/* <ForgotPassword
 									open={open}
 									handleClose={handleClose}
-								/>
+								/> */}
 
 								{/* Login Button */}
 								<Button
@@ -518,7 +533,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										},
 										padding: { xs: "8px 0", md: "10px 0" },
 										mt: { xs: 2, md: 3 },
-										fontSize: { xs: "0.875rem", md: "1rem" },
+										fontSize: {
+											xs: "0.875rem",
+											md: "1rem",
+										},
 									}}
 								>
 									Login

src/redux/slices/stationSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-import axios from "axios";
+// import axios from "axios";
 import http from "../../lib/https";
 import { toast } from "sonner";
 

src/redux/slices/userSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-import axios from "axios";
+// import axios from "axios";
 import http from "../../lib/https";
 import { toast } from "sonner";
 

src/shared-theme/customizations/autoFill.tsx

@@ -0,0 +1,27 @@
+export const autofillFix = {
+    "& input:-webkit-autofill": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+      WebkitTextFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+    "& input:-webkit-autofill:hover": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-webkit-autofill:focus": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-webkit-autofill:active": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-moz-autofill": {
+      boxShadow: "0 0 0 1000px transparent inset !important",
+      MozTextFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+    "& input:autofill": {
+      boxShadow: "0 0 0 1000px transparent inset !important",
+      textFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+  };
+  

src/shared-theme/customizations/inputs.js

@@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutline
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
 import { gray, brand } from '../themePrimitives';
+import {autofillFix} from './autoFill';
 
 /* eslint-disable import/prefer-default-export */
 export const inputsCustomizations = {
@@ -379,6 +380,7 @@ export const inputsCustomizations = {
     styleOverrides: {
       input: {
         padding: 0,
+        ...autofillFix,
       },
       root: ({ theme }) => ({
         padding: '8px 12px',

src/shared-theme/customizations/inputs.tsx

@@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutline
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
 import { gray, brand } from "../themePrimitives";
+import { autofillFix } from "./autoFill";
 
 /* eslint-disable import/prefer-default-export */
 export const inputsCustomizations: Components<Theme> = {
@@ -393,6 +394,7 @@ export const inputsCustomizations: Components<Theme> = {
 		styleOverrides: {
 			input: {
 				padding: 0,
+				...autofillFix,
 			},
 			root: ({ theme }) => ({
 				padding: "8px 12px",