dev-jaanvi #1
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
||||
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 }),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}`]: {
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export const surfacesCustomizations = {
|
|||
MuiPaper: {
|
||||
defaultProps: {
|
||||
elevation: 0,
|
||||
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue