jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'bugfixes' (#30) from bugfixes into develop

Browse source 
Reviewed-on: DigiMantra/digiev_frontend#30
This commit is contained in:
Mohit kalshan 2025-04-08 05:45:46 +00:00
parent 195559d0f4 c90f422423
commit 276d1c4616
18 changed files with 6918 additions and 3019 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9509
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
src/components/AddBookingModal/addBookingModal.tsx
View file

@ -373,4 +373,4 @@ export default function AddBookingModal({
</Box>
</Modal>
);
}
}

5
src/components/AddEditAdminModal/addEditAdminModal.tsx
View file

@ -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"

7
src/components/AddManagerModal/addManagerModal.tsx
View file

@ -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"

164
src/components/AddStationModal/addStationModal.tsx
View file

@ -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>
<InputLabel>Choose Brands</InputLabel>
<FormControl fullWidth size="small">
<Select
multiple
displayEmpty
value={selectedBrands}
onChange={handleBrandChange}
renderValue={(selected) => {
const selectedArray =
selected as string[];
const displayNames =
selectedArray.slice(0, 1); // First 2 brands
if (selected.length === 0) {
return (
<Typography color="text.secondary">
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",
gap: 1,
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map(
(id, index) => {
const brand =
vehicleBrands.find(
(b) =>
b.id ===
id
);
return (
<Typography
key={index}
variant="body2"
>
{brand
? brand.name
: ""}
</Typography>
{displayNames.map((id) => {
const brand =
vehicleBrands.find(
(b) =>
b.id === id
);
}
)}
return brand ? (
<Chip
key={id}
label={
brand.name
}
size="small"
sx={{
height: 24,
}}
/>
) : null;
})}
{moreCount > 0 && (
<Typography
variant="body2"
color="textSecondary"
>
+{moreCount} more
</Typography>
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
</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>
<InputLabel>Choose Vehicles</InputLabel>
<FormControl
fullWidth
size="small"
disabled={selectedBrands.length === 0}
>
<Select
multiple
displayEmpty
value={selectedVehicles}
onChange={handleVehicleChange}
renderValue={(selected) => {
const selectedArray =
selected as string[];
const displayNames =
selectedArray.slice(0, 1); // First 2 vehicles
if (selected.length === 0) {
return (
<Typography color="text.secondary">
{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",
gap: 1,
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map(
(name, index) => (
<Typography
key={index}
variant="body2"
>
{name}
</Typography>
(name) => (
<Chip
key={name}
label={name}
size="small"
sx={{
height: 24,
}}
/>
)
)}
{moreCount > 0 && (
<Typography
variant="body2"
color="textSecondary"
>
+{moreCount} more
</Typography>
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
</Box>
);
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
>
{filteredVehicles.length > 0 ? (
filteredVehicles.map((vehicle) => (

7
src/components/AddUserModal/addUserModal.tsx
View file

@ -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"
}

83
src/components/EditStationModal/editSationModal.tsx
View file

@ -20,10 +20,7 @@ import {
fetchVehicleBrands,
vehicleList,
} from "../../redux/slices/VehicleSlice";
import {
CustomIconButton,
CustomTextField,
} from "../AddUserModal/styled.css"; // Assuming custom styled components
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
interface FormData {
name: string;
@ -81,11 +78,33 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
useEffect(() => {
dispatch(fetchVehicleBrands());
dispatch(vehicleList()); // Fetch vehicles when the component mounts
dispatch(vehicleList());
}, [dispatch]);
useEffect(() => {
if (editRow) {
// Determine the brand based on the first vehicle's company
const firstVehicle = vehicles.find(
(vehicle) =>
editRow.allowedCarIds &&
editRow.allowedCarIds.includes(vehicle.name)
);
const brandId = firstVehicle ? firstVehicle.company : "";
setSelectedBrands(brandId);
// Populate selected vehicles
const vehicleNames = vehicles
.filter(
(vehicle) =>
editRow.allowedCarIds &&
editRow.allowedCarIds.includes(vehicle.name)
)
.map((vehicle) => vehicle.name);
setSelectedVehicles(vehicleNames);
// Set form values
setValue("name", editRow.name);
setValue("registeredAddress", editRow.registeredAddress);
setValue("totalSlots", editRow.totalSlots);
@ -94,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
? vehicles
.filter((vehicle) =>
editRow.allowedCarIds.includes(vehicle.id)
)
.map((vehicle) => vehicle.company)
: [];
const brands = editRow?.allowedCarIds
? vehicles
.filter((vehicle) =>
editRow.allowedCarIds.includes(vehicle.id)
)
.map((vehicle) => vehicle.company)
: [];
setSelectedBrands(brands);
} else {
@ -112,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 }>
@ -133,37 +148,35 @@ 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 }>
) => {
const value = event.target.value as string[];
setSelectedVehicles(value);
setValue("allowedCarIds", value); // Update allowedCarIds in form state
setValue("allowedCarIds", value);
};
const onSubmit = (data: FormData) => {
const vehicleIds = vehicles
.filter((vehicle) => selectedVehicles.includes(vehicle.name))
.map((vehicle) => Number(vehicle.id));
const onSubmit = (data: FormData) => {
const vehicleIds = vehicles
.filter((vehicle) => selectedVehicles.includes(vehicle.name))
.map((vehicle) => Number(vehicle.id));
handleUpdate(
editRow.id,
data.name,
data.registeredAddress,
data.totalSlots,
vehicleIds
);
handleClose();
reset();
setSelectedBrands([]); // Reset brands after submit
setSelectedVehicles([]); // Reset selected vehicles
};
handleUpdate(
editRow.id,
data.name,
data.registeredAddress,
data.totalSlots,
vehicleIds
);
handleClose();
reset();
setSelectedBrands([]); // Reset brands after submit
setSelectedVehicles([]); // Reset selected vehicles
};
console.log("editRow:", editRow);
return (
<Modal
open={open}

10
src/components/Header/index.tsx
View file

@ -30,7 +30,7 @@ export default function Header() {
width: "100%",
height: "84px",
backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" },
padding: { xs: "20px 12px", sm: "20px 24px" },
display: "flex",
alignItems: "center",
justifyContent: "space-between",
@ -78,17 +78,21 @@ 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"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Admin"}
{user?.name || "No Adminsss"}
</Typography>
<OptionsMenu />

30
src/components/MainGrid/mainGrid.tsx
View file

@ -12,43 +12,37 @@ import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { useEffect } from "react";
export default function MainGrid() {
const dispatch = useDispatch<AppDispatch>();
const {
const dispatch = useDispatch<AppDispatch>();
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 =
{ totalAdmins, totalManagers, totalUsers, totalStations }
const data = { 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>
);
);
}

2
src/components/MenuButton/index.tsx
View file

@ -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>
);
}

4
src/components/MenuContent/index.tsx
View file

@ -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}

74
src/pages/Auth/Login/index.tsx
View file

@ -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;
@ -50,14 +51,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
};
const togglePasswordVisibility = (e: React.MouseEvent) => {
e.preventDefault();
e.preventDefault();
setShowPassword((prev) => !prev);
};
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
const isValid = await trigger();
const isValid = await trigger();
if (!isValid) {
return;
return;
}
try {
const response = await dispatch(loginUser(data)).unwrap();
@ -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}
@ -82,11 +82,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{
background: `url('/Login.svg') center/cover no-repeat`,
backgroundSize: "cover",
display: { xs: "none", md: "block" },
position: "relative",
display: { xs: "none", md: "block" },
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,15 +377,20 @@ 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
aria-label="toggle password visibility"
onClick={
togglePasswordVisibility
}
} // Only the button triggers visibility toggle
edge="end"
>
{showPassword ? (
@ -392,7 +407,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
{
backgroundColor:
"#1E1F1F",
borderRadius: "4px",
borderRadius: "8px",
"& fieldset": {
borderColor:
"#4b5255",
@ -468,11 +483,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
label={
<Typography
sx={{
fontSize: {
xs: "0.75rem",
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem"
}
md: "1rem",
},
}}
>
Remember me
@ -489,21 +504,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
alignSelf: "center",
color: "#01579b",
textDecoration: "none",
fontSize: {
xs: "0.75rem",
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem"
md: "1rem",
},
}}
>
Forgot password?
</Link>
</Box>
<ForgotPassword
{/* <ForgotPassword
open={open}
handleClose={handleClose}
/>
/> */}
{/* Login Button */}
<Button
type="submit"
@ -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
@ -530,4 +548,4 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
</SignInContainer>
</AppTheme>
);
}
}

3
src/redux/slices/bookSlice.ts
View file

@ -64,6 +64,7 @@ export const getCarPorts = createAsyncThunk<
const response = await http.get("/get-vehicle-port-dropdown");
return response.data.data; // Adjust based on actual API response
} catch (error: any) {
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
@ -214,4 +215,4 @@ const bookSlice = createSlice({
},
});
export default bookSlice.reducer;
export default bookSlice.reducer;

4
src/redux/slices/stationSlice.ts
View file

@ -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";
@ -384,4 +384,4 @@ const stationSlice = createSlice({
},
});
export default stationSlice.reducer;
export default stationSlice.reducer;

2
src/redux/slices/userSlice.ts
View file

@ -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";

27
src/shared-theme/customizations/autoFill.tsx Normal file
View file

@ -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",
},
};

2
src/shared-theme/customizations/inputs.js
View file

@ -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',

2
src/shared-theme/customizations/inputs.tsx
View file

@ -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",