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

admin panel ui changes as per feedback

Browse source
This commit is contained in:
jaanvi 2025-04-14 14:17:02 +05:30
parent 62777a67de
commit 1ddae7164f
17 changed files with 613 additions and 479 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/CustomTable/customTable.tsx
View file

@ -457,6 +457,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
"-5px 0 5px -2px rgba(0,0,0,0.15)",
borderBottom: "1px solid #454545",
}),
fontSize: "16px",
}}
>
{column.label}
@ -609,6 +610,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
"& .MuiPaginationItem-page.Mui-selected": {
backgroundColor: "transparent",
fontWeight: "bold",
fontSize:"16px",
color: "#FFFFFF",
},
}}
@ -635,7 +637,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
},
}}
>
<div style={{ display: "flex", flexDirection: "column" }}>
<div
style={{
display: "flex",
flexDirection: "column",
width: "80px",
}}
>
<Button
variant="text"
onClick={(e) => {
@ -644,10 +652,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
}}
color="primary"
sx={{
justifyContent: "flex-start",
py: 0,
justifyContent: "center",
py: 1,
fontWeight: "bold",
color: "#52ACDF",
fontSize: "16px",
}}
>
View
@ -719,9 +728,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
}}
color="primary"
sx={{
justifyContent: "flex-start",
py: 0,
justifyContent: "center",
py: 1,
fontWeight: "bold",
textTransform: "capitalize",
fontSize: "16px",
}}
>
Edit
@ -770,16 +781,18 @@ const CustomTable: React.FC<CustomTableProps> = ({
{/* Delete Button */}
<Button
variant="text"
// color="error"
onClick={(e) => {
e.stopPropagation();
setDeleteModal(true);
handleClose();
}}
color="error"
sx={{
justifyContent: "flex-start",
py: 0,
justifyContent: "center",
py: 1,
fontWeight: "bold",
fontSize: "16px",
color: "red !important",
}}
>
Delete

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

@ -10,41 +10,56 @@ import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import OptionsMenu from "../OptionsMenu";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useRef, useState } from "react";
export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false);
const toggleNotifications = () => {
setShowNotifications((prev) => !prev);
};
const [open, setOpen] = React.useState(true);
// const [open, setOpen] = React.useState(true);
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
// Use a ref to make the full click area act as anchor
const menuAnchorRef = useRef<HTMLDivElement | null>(null);
const [menuOpen, setMenuOpen] = useState(false);
const handleClick = () => {
setMenuOpen((prev) => !prev);
};
const handleClose = () => {
setMenuOpen(false);
};
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return (
<Box
sx={{
width: "100%",
height: "84px",
minHeight: "84px",
maxHeight: "84px",
backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" },
display: {
xs: "none",
md: "flex",
},
marginTop: { xs: "0px", sm: "0px" },
alignItems: "center",
justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
boxSizing: "border-box",
overflowX: "hidden",
flex: "0 0 84px",
}}
sx={{
width: "100%",
// height: "84px",
minHeight: "70px",
maxHeight: "84px",
backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" },
display: {
xs: "none",
md: "flex",
},
marginTop: { xs: "0px", sm: "0px" },
alignItems: "center",
justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
boxSizing: "border-box",
overflowX: "hidden",
flex: "0 0 84px",
}}
>
<Stack
direction="row"
@ -98,16 +113,39 @@ export default function Header() {
sx={{ cursor: "pointer" }}
onClick={toggleNotifications}
/> */}
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Adminsss"}
</Typography>
<Box
ref={menuAnchorRef}
onClick={handleClick}
sx={{
display: "flex",
alignItems: "center",
gap: 1,
cursor: "pointer",
}}
>
{/* Avatar */}
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<OptionsMenu />
{/* Username */}
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Adminsss"}
</Typography>
{/* Options Menu */}
<ExpandMoreIcon
// onClick={handleClick}
sx={{ cursor: "pointer" }}
/>
</Box>
<OptionsMenu
anchorEl={menuAnchorRef.current}
open={menuOpen}
onClose={handleClose}
/>
</Stack>
{/* {showNotifications && (

4
src/components/LineChartCard/lineChartCard.tsx
View file

@ -93,7 +93,7 @@ export default function LineChartCard() {
color="#F2F2F2"
sx={{
fontWeight: 500,
fontSize: { xs: "16px", sm: "17px", md: "18px" },
fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px",
marginBottom: isXsScreen ? 2 : 0,
width: isXsScreen ? "100%" : "auto",
@ -155,7 +155,7 @@ export default function LineChartCard() {
"&:hover": { backgroundColor: "#3A94C0" },
}}
>
Fetch
Apply
</Button>
</div>

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

@ -115,7 +115,7 @@ export default function MenuContent({ hidden }: PropType) {
<ListItem
key={index}
disablePadding
sx={{ display: "block", py: 1, px: 0.9 }}
sx={{ display: "block", }}
>
<ListItemButton
component={Link}
@ -140,14 +140,14 @@ export default function MenuContent({ hidden }: PropType) {
transition: "all 0.5s ease",
".MuiListItemText-primary": {
width: "118px",
height: "19px",
// width: "118px",
// height: "19px",
fontSize: "16px",
letterSpacing: "0%",
lineHeight: "100%",
whiteSpace: "pre",
color: "#FAFAFA",
marginTop: "5px",
// marginTop: "5px",
},
}}
primary={item.text}

49
src/components/OptionsMenu/index.tsx
View file

@ -8,40 +8,52 @@ import Logout from "../LogOutFunction/LogOutFunction";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({
margin: "2px 0",
margin: "2px 10px",
borderBottom: "none",
"& .MuiButtonBase-root-MuiButton-root":{
fontSize:"16px",
}
});
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
export default function OptionsMenu({
anchorEl,
open,
onClose,
}: {
avatar?: boolean;
anchorEl: HTMLElement | null;
open: boolean;
onClose: () => void;
}) {
// const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
// const open = Boolean(anchorEl);
// const handleClick = (event: React.MouseEvent<HTMLElement>) => {
// setAnchorEl(event?.currentTarget);
// };
// const handleClose = () => {
// setAnchorEl(null);
// };
return (
<React.Fragment>
<ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} />
{/* <ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} /> */}
<Menu
anchorEl={anchorEl}
id="top-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
onClose={onClose}
slotProps={{
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
//filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiList-root": {
background: "#272727", // Remove any divider under menu items
background: "#272727",
},
"& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items
@ -61,9 +73,12 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
},
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={onClose}>Profile</MenuItem>
</Link>
<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
<MenuItem
onClick={onClose}
sx={{ color: "#E8533B" }}
>
<ListItemText
onClick={(e) => {
e.stopPropagation();

6
src/components/ResourcePieChart/resourcePieChart.tsx
View file

@ -116,7 +116,7 @@ export default function ResourcePieChart() {
color="#F2F2F2"
sx={{
fontWeight: 500,
fontSize: { xs: "16px", sm: "17px", md: "18px" },
fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px",
color: "#FFFFFF",
marginBottom: { xs: 1, sm: 1.5, md: 2 },
@ -192,8 +192,8 @@ export default function ResourcePieChart() {
sx={{
fontSize: {
xs: "12px",
sm: "13px",
md: "14px",
sm: "14px",
md: "16px",
},
color: "#FFFFFF",
}}

5
src/components/SelectContent/index.tsx
View file

@ -46,13 +46,14 @@ export default function SelectContent() {
maxHeight: 56,
width: 215,
'&.MuiList-root': {
p: '8px',
// p: '8px',
},
[`& .${selectClasses.select}`]: {
display: 'flex',
alignItems: 'center',
gap: '2px',
pl: 1,
},
}}
>

277
src/components/SessionsChart/sessionChart.tsx
View file

@ -20,132 +20,159 @@ export default function SessionsChart() {
};
return (
<Card
variant="outlined"
sx={{
width: "100%",
height: "auto",
minHeight: { xs: "260px", sm: "270px", md: "290px" },
gap: "16px",
borderRadius: "16px",
padding: { xs: "12px", sm: "16px", md: "20px" },
border: "none",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}>
<Typography
variant="h6"
align="left"
color="#F2F2F2"
sx={{
fontWeight: 500,
fontSize: { xs: "16px", sm: "17px", md: "18px" },
lineHeight: "24px",
letterSpacing: "0%",
color: "#FAFAFA",
marginBottom: { xs: 1, sm: 1.5, md: 2 },
}}
>
Charging prices
</Typography>
<Card
variant="outlined"
sx={{
width: "100%",
height: "auto",
minHeight: { xs: "260px", sm: "270px", md: "290px" },
gap: "16px",
borderRadius: "16px",
padding: { xs: "12px", sm: "16px", md: "20px" },
border: "none",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent
sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
>
<Typography
variant="h6"
align="left"
color="#F2F2F2"
sx={{
fontWeight: 500,
fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px",
letterSpacing: "0%",
color: "#FAFAFA",
marginBottom: { xs: 1, sm: 1.5, md: 2 },
}}
>
Charging prices
</Typography>
{/* Dropdown button */}
<FormControl
sx={{
mt: { xs: 1, sm: 1.5, md: 2 },
mb: { xs: 1, sm: 1.5, md: 2 },
width: "100%",
border: "none",
borderRadius: "8px",
}}
>
<Select
value={selectedStation}
onChange={handleChange}
label="Select Station"
sx={{
color: "#D9D8D8",
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
fontSize: { xs: "14px", md: "16px" },
}}
IconComponent={ExpandMoreIcon}
>
<MenuItem value="Delhi NCR EV Station">Delhi NCR EV Station</MenuItem>
<MenuItem value="Mumbai EV Station">Mumbai EV Station</MenuItem>
<MenuItem value="Bangalore EV Station">Bangalore EV Station</MenuItem>
<MenuItem value="Pune EV Station">Pune EV Station</MenuItem>
</Select>
</FormControl>
{/* Dropdown button */}
<FormControl
sx={{
mt: { xs: 1, sm: 1.5, md: 2 },
mb: { xs: 1, sm: 1.5, md: 2 },
width: "100%",
border: "none",
borderRadius: "8px",
}}
>
<Select
value={selectedStation}
onChange={handleChange}
label="Select Station"
sx={{
color: "#D9D8D8",
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
fontSize: { xs: "14px", md: "16px" },
}}
IconComponent={ExpandMoreIcon}
>
<MenuItem value="Delhi NCR EV Station">
Delhi NCR EV Station
</MenuItem>
<MenuItem value="Mumbai EV Station">
Mumbai EV Station
</MenuItem>
<MenuItem value="Bangalore EV Station">
Bangalore EV Station
</MenuItem>
<MenuItem value="Pune EV Station">
Pune EV Station
</MenuItem>
</Select>
</FormControl>
{/* Grid container for the four boxes */}
<Box
sx={{
display: "grid",
gridTemplateColumns: {
xs: "repeat(1, 1fr)", // 1 column on mobile
sm: "repeat(2, 1fr)", // 2 columns on tablets
md: "repeat(2, 1fr)", // 2x2 grid on desktop
},
gap: { xs: 1, sm: 1.5, md: 2 },
width: "100%",
}}
>
{[1, 2, 3, 4].map((item) => (
<Box
key={item}
sx={{
height: { xs: "105px", sm: "115px", md: "128px" },
borderRadius: "8px",
p: { xs: "10px", sm: "12px", md: "14px" },
backgroundColor: "#272727",
color: "#D9D8D8",
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<Typography
variant="body2"
sx={{
fontWeight: 400,
fontSize: { xs: "12px", sm: "13px", md: "14px" },
lineHeight: { xs: "20px", md: "24px" },
marginBottom: "4px",
}}
gutterBottom
>
Basic Charging
</Typography>
<Box display="flex" gap={1} alignItems="center">
<Typography
variant="subtitle2"
color="#FFFFFF"
sx={{
fontWeight: 500,
fontSize: { xs: "16px", sm: "17px", md: "18px" },
lineHeight: { xs: "20px", md: "24px" },
}}
gutterBottom
>
16.83
</Typography>
<Typography
sx={{
fontWeight: 400,
fontSize: { xs: "12px", sm: "13px", md: "14px" },
lineHeight: { xs: "20px", md: "24px" },
}}
>
cents/kWh
</Typography>
</Box>
</Box>
))}
</Box>
</CardContent>
</Card>
{/* Grid container for the four boxes */}
<Box
sx={{
display: "grid",
gridTemplateColumns: {
xs: "repeat(1, 1fr)", // 1 column on mobile
sm: "repeat(2, 1fr)", // 2 columns on tablets
md: "repeat(2, 1fr)", // 2x2 grid on desktop
},
gap: { xs: 1, sm: 1.5, md: 2 },
width: "100%",
}}
>
{[1, 2, 3, 4].map((item) => (
<Box
key={item}
sx={{
height: {
xs: "105px",
sm: "115px",
md: "128px",
},
borderRadius: "8px",
p: { xs: "10px", sm: "12px", md: "14px" },
backgroundColor: "#272727",
color: "#D9D8D8",
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<Typography
variant="body2"
sx={{
fontWeight: 500,
fontSize: {
xs: "12px",
sm: "14px",
md: "16px",
},
lineHeight: { xs: "20px", md: "24px" },
marginBottom: "4px",
}}
gutterBottom
>
Basic Charging
</Typography>
<Box display="flex" gap={1} alignItems="center">
<Typography
variant="subtitle2"
color="#FFFFFF"
sx={{
fontWeight: 500,
fontSize: {
xs: "12px",
sm: "14px",
md: "16px",
},
lineHeight: { xs: "20px", md: "24px" },
}}
gutterBottom
>
16.83
</Typography>
<Typography
sx={{
fontWeight: 500,
fontSize: {
xs: "12px",
sm: "14px",
md: "16px",
},
lineHeight: { xs: "20px", md: "24px" },
}}
>
cents/kWh
</Typography>
</Box>
</Box>
))}
</Box>
</CardContent>
</Card>
);
}

8
src/components/StatCard/statCard.tsx
View file

@ -57,9 +57,9 @@ export default function StatCard({ title, value }: StatCardProps) {
sx={{
fontWeight: 400,
fontSize: {
xs: "10px",
sm: "11px",
md: "12px"
xs: "12px",
sm: "14px",
md: "16px"
},
lineHeight: {
xs: "12px",
@ -85,7 +85,7 @@ export default function StatCard({ title, value }: StatCardProps) {
fontSize: {
xs: "24px",
sm: "28px",
md: "32px"
md: "30px"
},
lineHeight: {
xs: "28px",

8
src/components/barChartCard/barChartCard.tsx
View file

@ -127,7 +127,7 @@ export default function RoundedBarChart() {
align={isXsScreen ? "center" : "left"}
sx={{
fontWeight: 500,
fontSize: { xs: "16px", sm: "17px", md: "18px" },
fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px",
marginBottom: isXsScreen ? 2 : 0,
width: isXsScreen ? "100%" : "auto",
@ -165,7 +165,9 @@ export default function RoundedBarChart() {
label="End Date"
variant="outlined"
fullWidth
InputLabelProps={{ shrink: true }}
InputLabelProps={{
shrink: true, // ensures the label always stays above
}}
value={endDateStations}
onChange={(e) => setEndDateStations(e.target.value)}
sx={{
@ -174,10 +176,10 @@ export default function RoundedBarChart() {
"& .MuiInputBase-input": {
color: "#F2F2F2",
},
}}
/>
<Button
onClick={handleFetchData}
sx={{
backgroundColor: "#52ACDF",

36
src/pages/ProfilePage/index.tsx
View file

@ -47,7 +47,11 @@ const ProfilePage = () => {
py: 4,
}}
>
<Typography variant="h4" gutterBottom>
<Typography
variant="h4"
gutterBottom
sx={{ fontSize: "30px", fontWeight: 500 }}
>
Account Info
</Typography>
<Card
@ -103,7 +107,11 @@ const ProfilePage = () => {
>
<Typography
variant="body1"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "16px",
}}
>
Personal Information
</Typography>
@ -120,7 +128,11 @@ const ProfilePage = () => {
<Grid item xs={12} sm={4}>
<Typography
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "16px",
}}
>
Full Name:
</Typography>
@ -131,7 +143,11 @@ const ProfilePage = () => {
<Grid item xs={12} sm={4}>
<Typography
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "16px",
}}
>
Phone:
</Typography>
@ -142,7 +158,11 @@ const ProfilePage = () => {
<Grid item xs={12} sm={4}>
<Typography
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "16px",
}}
>
Email:
</Typography>
@ -153,7 +173,11 @@ const ProfilePage = () => {
<Grid item xs={12} sm={4}>
<Typography
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
sx={{
color: "#FFFFFF",
fontWeight: 500,
fontSize: "16px",
}}
>
Bio:
</Typography>

3
src/shared-theme/AppTheme.tsx
View file

@ -8,8 +8,6 @@ import { navigationCustomizations } from "./customizations/navigation";
import { surfacesCustomizations } from "./customizations/surfaces";
import { colorSchemes, shadows, shape } from "./themePrimitives";
interface AppThemeProps {
children: React.ReactNode;
disableCustomTheme?: boolean;
@ -50,6 +48,7 @@ export default function AppTheme(props: AppThemeProps) {
...surfacesCustomizations,
...themeComponents,
},
});
}, [disableCustomTheme, themeComponents]);

8
src/shared-theme/customizations/dataDisplay.js
View file

@ -11,7 +11,7 @@ export const dataDisplayCustomizations = {
MuiList: {
styleOverrides: {
root: {
padding: '8px',
// padding: '8px',
display: 'flex',
flexDirection: 'column',
@ -32,8 +32,8 @@ export const dataDisplayCustomizations = {
},
[`& .${buttonBaseClasses.root}`]: {
display: 'flex',
gap: 8,
padding: '2px 8px',
// gap: 8,
// padding: '2px 8px',
borderRadius: (theme.vars || theme).shape.borderRadius,
opacity: 0.7,
'&.Mui-selected': {
@ -73,7 +73,7 @@ export const dataDisplayCustomizations = {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: 'transparent',
padding: '4px 8px',
// padding: '4px 8px',
fontSize: theme.typography.caption.fontSize,
fontWeight: 500,
lineHeight: theme.typography.caption.lineHeight,

6
src/shared-theme/customizations/dataDisplay.tsx
View file

@ -11,7 +11,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
MuiList: {
styleOverrides: {
root: {
padding: '8px',
display: 'flex',
flexDirection: 'column',
gap: 0,
@ -32,7 +32,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
[`& .${buttonBaseClasses.root}`]: {
display: 'flex',
gap: 8,
padding: '2px 8px',
borderRadius: (theme.vars || theme).shape.borderRadius,
opacity: 0.7,
'&.Mui-selected': {
@ -72,7 +72,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: 'transparent',
padding: '4px 8px',
// padding: '4px 8px',
fontSize: theme.typography.caption.fontSize,
fontWeight: 500,
lineHeight: theme.typography.caption.lineHeight,

542
src/shared-theme/customizations/navigation.js
View file

@ -11,268 +11,282 @@ import { gray, brand } from '../themePrimitives';
/* eslint-disable import/prefer-default-export */
export const navigationCustomizations = {
MuiMenuItem: {
styleOverrides: {
root: ({ theme }) => ({
borderRadius: (theme.vars || theme).shape.borderRadius,
padding: '6px 8px',
[`&.${menuItemClasses.focusVisible}`]: {
backgroundColor: 'transparent',
},
[`&.${menuItemClasses.selected}`]: {
[`&.${menuItemClasses.focusVisible}`]: {
backgroundColor: alpha(theme.palette.action.selected, 0.3),
},
},
}),
},
},
MuiMenu: {
styleOverrides: {
list: {
gap: '0px',
[`&.${dividerClasses.root}`]: {
margin: '0 -8px',
},
},
paper: ({ theme }) => ({
marginTop: '4px',
borderRadius: (theme.vars || theme).shape.borderRadius,
border: `1px solid ${(theme.vars || theme).palette.divider}`,
backgroundImage: 'none',
background: 'hsl(0, 0%, 100%)',
boxShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
[`& .${buttonBaseClasses.root}`]: {
'&.Mui-selected': {
backgroundColor: alpha(theme.palette.action.selected, 0.3),
},
},
...theme.applyStyles('dark', {
background: gray[900],
boxShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
}),
}),
},
},
MuiSelect: {
defaultProps: {
IconComponent: React.forwardRef((props, ref) => (
<UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
)),
},
styleOverrides: {
root: ({ theme }) => ({
borderRadius: (theme.vars || theme).shape.borderRadius,
border: '1px solid',
borderColor: gray[200],
backgroundColor: (theme.vars || theme).palette.background.paper,
boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
'&:hover': {
borderColor: gray[300],
backgroundColor: (theme.vars || theme).palette.background.paper,
boxShadow: 'none',
},
[`&.${selectClasses.focused}`]: {
outlineOffset: 0,
borderColor: gray[400],
},
'&:before, &:after': {
display: 'none',
},
...theme.applyStyles('dark', {
borderRadius: (theme.vars || theme).shape.borderRadius,
borderColor: gray[700],
backgroundColor: (theme.vars || theme).palette.background.paper,
boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
'&:hover': {
borderColor: alpha(gray[700], 0.7),
backgroundColor: (theme.vars || theme).palette.background.paper,
boxShadow: 'none',
},
[`&.${selectClasses.focused}`]: {
outlineOffset: 0,
borderColor: gray[900],
},
'&:before, &:after': {
display: 'none',
},
}),
}),
select: ({ theme }) => ({
display: 'flex',
alignItems: 'center',
...theme.applyStyles('dark', {
display: 'flex',
alignItems: 'center',
'&:focus-visible': {
backgroundColor: gray[900],
},
}),
}),
},
},
MuiLink: {
defaultProps: {
underline: 'none',
},
styleOverrides: {
root: ({ theme }) => ({
color: (theme.vars || theme).palette.text.primary,
fontWeight: 500,
position: 'relative',
textDecoration: 'none',
width: 'fit-content',
'&::before': {
content: '""',
position: 'absolute',
width: '100%',
height: '1px',
bottom: 0,
left: 0,
backgroundColor: (theme.vars || theme).palette.text.secondary,
opacity: 0.3,
transition: 'width 0.3s ease, opacity 0.3s ease',
},
'&:hover::before': {
width: 0,
},
'&:focus-visible': {
outline: `3px solid ${alpha(brand[500], 0.5)}`,
outlineOffset: '4px',
borderRadius: '2px',
},
}),
},
},
MuiDrawer: {
styleOverrides: {
paper: ({ theme }) => ({
backgroundColor: (theme.vars || theme).palette.background.default,
}),
},
},
MuiPaginationItem: {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-selected': {
color: 'white',
backgroundColor: (theme.vars || theme).palette.grey[900],
},
...theme.applyStyles('dark', {
'&.Mui-selected': {
color: 'black',
backgroundColor: (theme.vars || theme).palette.grey[50],
},
}),
}),
},
},
MuiTabs: {
styleOverrides: {
root: { minHeight: 'fit-content' },
indicator: ({ theme }) => ({
backgroundColor: (theme.vars || theme).palette.grey[800],
...theme.applyStyles('dark', {
backgroundColor: (theme.vars || theme).palette.grey[200],
}),
}),
},
},
MuiTab: {
styleOverrides: {
root: ({ theme }) => ({
padding: '6px 8px',
marginBottom: '8px',
textTransform: 'none',
minWidth: 'fit-content',
minHeight: 'fit-content',
color: (theme.vars || theme).palette.text.secondary,
borderRadius: (theme.vars || theme).shape.borderRadius,
border: '1px solid',
borderColor: 'transparent',
':hover': {
color: (theme.vars || theme).palette.text.primary,
backgroundColor: gray[100],
borderColor: gray[200],
},
[`&.${tabClasses.selected}`]: {
color: gray[900],
},
...theme.applyStyles('dark', {
':hover': {
color: (theme.vars || theme).palette.text.primary,
backgroundColor: gray[800],
borderColor: gray[700],
},
[`&.${tabClasses.selected}`]: {
color: '#fff',
},
}),
}),
},
},
MuiStepConnector: {
styleOverrides: {
line: ({ theme }) => ({
borderTop: '1px solid',
borderColor: (theme.vars || theme).palette.divider,
flex: 1,
borderRadius: '99px',
}),
},
},
MuiStepIcon: {
styleOverrides: {
root: ({ theme }) => ({
color: 'transparent',
border: `1px solid ${gray[400]}`,
width: 12,
height: 12,
borderRadius: '50%',
'& text': {
display: 'none',
},
'&.Mui-active': {
border: 'none',
color: (theme.vars || theme).palette.primary.main,
},
'&.Mui-completed': {
border: 'none',
color: (theme.vars || theme).palette.success.main,
},
...theme.applyStyles('dark', {
border: `1px solid ${gray[700]}`,
'&.Mui-active': {
border: 'none',
color: (theme.vars || theme).palette.primary.light,
},
'&.Mui-completed': {
border: 'none',
color: (theme.vars || theme).palette.success.light,
},
}),
variants: [
{
props: { completed: true },
style: {
width: 12,
height: 12,
},
},
],
}),
},
},
MuiStepLabel: {
styleOverrides: {
label: ({ theme }) => ({
'&.Mui-completed': {
opacity: 0.6,
...theme.applyStyles('dark', { opacity: 0.5 }),
},
}),
},
},
MuiMenuItem: {
styleOverrides: {
root: ({ theme }) => ({
borderRadius: (theme.vars || theme).shape.borderRadius,
// padding: '6px 8px',
[`&.${menuItemClasses.focusVisible}`]: {
backgroundColor: "transparent",
},
[`&.${menuItemClasses.selected}`]: {
[`&.${menuItemClasses.focusVisible}`]: {
backgroundColor: alpha(
theme.palette.action.selected,
0.3
),
},
},
}),
},
},
MuiMenu: {
styleOverrides: {
list: {
gap: "0px",
[`&.${dividerClasses.root}`]: {
margin: "0 -8px",
},
},
paper: ({ theme }) => ({
marginTop: "4px",
borderRadius: (theme.vars || theme).shape.borderRadius,
border: `1px solid #272727`,
backgroundImage: "none",
//background: "hsl(0, 0%, 100%)",
boxShadow:
"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
[`& .${buttonBaseClasses.root}`]: {
"&.Mui-selected": {
backgroundColor: alpha(
theme.palette.action.selected,
0.3
),
},
},
...theme.applyStyles("dark", {
background: "#272727",
boxShadow:
"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
}),
}),
},
},
MuiSelect: {
defaultProps: {
IconComponent: React.forwardRef((props, ref) => (
<UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
)),
},
styleOverrides: {
root: ({ theme }) => ({
borderRadius: (theme.vars || theme).shape.borderRadius,
border: "1px solid",
borderColor: gray[200],
backgroundColor: (theme.vars || theme).palette.background.paper,
boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
"&:hover": {
borderColor: gray[300],
backgroundColor: (theme.vars || theme).palette.background
.paper,
boxShadow: "none",
},
[`&.${selectClasses.focused}`]: {
outlineOffset: 0,
borderColor: gray[400],
},
"&:before, &:after": {
display: "none",
},
...theme.applyStyles("dark", {
borderRadius: (theme.vars || theme).shape.borderRadius,
borderColor: gray[700],
backgroundColor: (theme.vars || theme).palette.background
.paper,
boxShadow: `inset 0 1px 0 1px ${alpha(
gray[700],
0.15
)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
"&:hover": {
borderColor: alpha(gray[700], 0.7),
backgroundColor: (theme.vars || theme).palette
.background.paper,
boxShadow: "none",
},
[`&.${selectClasses.focused}`]: {
outlineOffset: 0,
borderColor: gray[900],
},
"&:before, &:after": {
display: "none",
},
}),
}),
select: ({ theme }) => ({
display: "flex",
alignItems: "center",
...theme.applyStyles("dark", {
display: "flex",
alignItems: "center",
"&:focus-visible": {
backgroundColor: gray[900],
},
}),
}),
},
},
MuiLink: {
defaultProps: {
underline: "none",
},
styleOverrides: {
root: ({ theme }) => ({
color: (theme.vars || theme).palette.text.primary,
fontWeight: 500,
position: "relative",
textDecoration: "none",
width: "fit-content",
"&::before": {
content: '""',
position: "absolute",
width: "100%",
height: "1px",
bottom: 0,
left: 0,
backgroundColor: (theme.vars || theme).palette.text
.secondary,
opacity: 0.3,
transition: "width 0.3s ease, opacity 0.3s ease",
},
"&:hover::before": {
width: 0,
},
"&:focus-visible": {
outline: `3px solid ${alpha(brand[500], 0.5)}`,
outlineOffset: "4px",
borderRadius: "2px",
},
}),
},
},
MuiDrawer: {
styleOverrides: {
paper: ({ theme }) => ({
backgroundColor: (theme.vars || theme).palette.background
.default,
}),
},
},
MuiPaginationItem: {
styleOverrides: {
root: ({ theme }) => ({
"&.Mui-selected": {
color: "white",
backgroundColor: (theme.vars || theme).palette.grey[900],
},
...theme.applyStyles("dark", {
"&.Mui-selected": {
color: "black",
backgroundColor: (theme.vars || theme).palette.grey[50],
},
}),
}),
},
},
MuiTabs: {
styleOverrides: {
root: { minHeight: "fit-content" },
indicator: ({ theme }) => ({
backgroundColor: (theme.vars || theme).palette.grey[800],
...theme.applyStyles("dark", {
backgroundColor: (theme.vars || theme).palette.grey[200],
}),
}),
},
},
MuiTab: {
styleOverrides: {
root: ({ theme }) => ({
padding: "6px 8px",
marginBottom: "8px",
textTransform: "none",
minWidth: "fit-content",
minHeight: "fit-content",
color: (theme.vars || theme).palette.text.secondary,
borderRadius: (theme.vars || theme).shape.borderRadius,
border: "1px solid",
borderColor: "transparent",
":hover": {
color: (theme.vars || theme).palette.text.primary,
backgroundColor: gray[100],
borderColor: gray[200],
},
[`&.${tabClasses.selected}`]: {
color: gray[900],
},
...theme.applyStyles("dark", {
":hover": {
color: (theme.vars || theme).palette.text.primary,
backgroundColor: gray[800],
borderColor: gray[700],
},
[`&.${tabClasses.selected}`]: {
color: "#fff",
},
}),
}),
},
},
MuiStepConnector: {
styleOverrides: {
line: ({ theme }) => ({
borderTop: "1px solid",
borderColor: (theme.vars || theme).palette.divider,
flex: 1,
borderRadius: "99px",
}),
},
},
MuiStepIcon: {
styleOverrides: {
root: ({ theme }) => ({
color: "transparent",
border: `1px solid ${gray[400]}`,
width: 12,
height: 12,
borderRadius: "50%",
"& text": {
display: "none",
},
"&.Mui-active": {
border: "none",
color: (theme.vars || theme).palette.primary.main,
},
"&.Mui-completed": {
border: "none",
color: (theme.vars || theme).palette.success.main,
},
...theme.applyStyles("dark", {
border: `1px solid ${gray[700]}`,
"&.Mui-active": {
border: "none",
color: (theme.vars || theme).palette.primary.light,
},
"&.Mui-completed": {
border: "none",
color: (theme.vars || theme).palette.success.light,
},
}),
variants: [
{
props: { completed: true },
style: {
width: 12,
height: 12,
},
},
],
}),
},
},
MuiStepLabel: {
styleOverrides: {
label: ({ theme }) => ({
"&.Mui-completed": {
opacity: 0.6,
...theme.applyStyles("dark", { opacity: 0.5 }),
},
}),
},
},
};

4
src/shared-theme/customizations/navigation.tsx
View file

@ -38,9 +38,9 @@ export const navigationCustomizations: Components<Theme> = {
paper: ({ theme }) => ({
marginTop: '4px',
borderRadius: (theme.vars || theme).shape.borderRadius,
border: `1px solid ${(theme.vars || theme).palette.divider}`,
// border: `1px solid ${(theme.vars || theme).palette.divider}`,
backgroundImage: 'none',
background: 'hsl(0, 0%, 100%)',
// background: 'hsl(0, 0%, 100%)',
boxShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
[`& .${buttonBaseClasses.root}`]: {

1
src/shared-theme/customizations/surfaces.js
View file

@ -53,6 +53,7 @@ export const surfacesCustomizations = {
MuiPaper: {
defaultProps: {
elevation: 0,
},
},
MuiCard: {