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

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +613 -479
17 changed files with 613 additions and 479 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1ddae7164f - Show all commits

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)", "-5px 0 5px -2px rgba(0,0,0,0.15)",
borderBottom: "1px solid #454545", borderBottom: "1px solid #454545",
}), }),
fontSize: "16px",
}} }}
> >
{column.label} {column.label}
@ -609,6 +610,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
"& .MuiPaginationItem-page.Mui-selected": { "& .MuiPaginationItem-page.Mui-selected": {
backgroundColor: "transparent", backgroundColor: "transparent",
fontWeight: "bold", fontWeight: "bold",
fontSize:"16px",
color: "#FFFFFF", 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 <Button
variant="text" variant="text"
onClick={(e) => { onClick={(e) => {
@ -644,10 +652,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
}} }}
color="primary" color="primary"
sx={{ sx={{
justifyContent: "flex-start", justifyContent: "center",
py: 0, py: 1,
fontWeight: "bold", fontWeight: "bold",
color: "#52ACDF", color: "#52ACDF",
fontSize: "16px",
}} }}
> >
View View
@ -719,9 +728,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
}} }}
color="primary" color="primary"
sx={{ sx={{
justifyContent: "flex-start", justifyContent: "center",
py: 0, py: 1,
fontWeight: "bold",
textTransform: "capitalize", textTransform: "capitalize",
fontSize: "16px",
}} }}
> >
Edit Edit
@ -770,16 +781,18 @@ const CustomTable: React.FC<CustomTableProps> = ({
{/* Delete Button */} {/* Delete Button */}
<Button <Button
variant="text" variant="text"
// color="error"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setDeleteModal(true); setDeleteModal(true);
handleClose(); handleClose();
}} }}
color="error"
sx={{ sx={{
justifyContent: "flex-start", justifyContent: "center",
py: 0, py: 1,
fontWeight: "bold", fontWeight: "bold",
fontSize: "16px",
color: "red !important",
}} }}
> >
Delete 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 { fetchAdminProfile } from "../../redux/slices/profileSlice";
import OptionsMenu from "../OptionsMenu"; import OptionsMenu from "../OptionsMenu";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone"; import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useRef, useState } from "react";
export default function Header() { export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false); const [showNotifications, setShowNotifications] = React.useState(false);
const toggleNotifications = () => { const toggleNotifications = () => {
setShowNotifications((prev) => !prev); setShowNotifications((prev) => !prev);
}; };
const [open, setOpen] = React.useState(true); // const [open, setOpen] = React.useState(true);
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer); 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(() => { React.useEffect(() => {
dispatch(fetchAdminProfile()); dispatch(fetchAdminProfile());
}, [dispatch]); }, [dispatch]);
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
height: "84px", // height: "84px",
minHeight: "84px", minHeight: "70px",
maxHeight: "84px", maxHeight: "84px",
backgroundColor: "#1C1C1C", backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" }, padding: { xs: "20px 12px", sm: "20px 24px" },
display: { display: {
xs: "none", xs: "none",
md: "flex", md: "flex",
}, },
marginTop: { xs: "0px", sm: "0px" }, marginTop: { xs: "0px", sm: "0px" },
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" }, flexDirection: { xs: "column", sm: "row" },
boxSizing: "border-box", boxSizing: "border-box",
overflowX: "hidden", overflowX: "hidden",
flex: "0 0 84px", flex: "0 0 84px",
}} }}
> >
<Stack <Stack
direction="row" direction="row"
@ -98,16 +113,39 @@ export default function Header() {
sx={{ cursor: "pointer" }} sx={{ cursor: "pointer" }}
onClick={toggleNotifications} onClick={toggleNotifications}
/> */} /> */}
<Avatar <Box
alt="User Avatar" ref={menuAnchorRef}
src="/avatar.png" onClick={handleClick}
sx={{ width: 36, height: 36 }} sx={{
/> display: "flex",
<Typography variant="body1" sx={{ color: "#FFFFFF" }}> alignItems: "center",
{user?.name || "No Adminsss"} gap: 1,
</Typography> 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> </Stack>
{/* {showNotifications && ( {/* {showNotifications && (

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

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

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

@ -115,7 +115,7 @@ export default function MenuContent({ hidden }: PropType) {
<ListItem <ListItem
key={index} key={index}
disablePadding disablePadding
sx={{ display: "block", py: 1, px: 0.9 }} sx={{ display: "block", }}
> >
<ListItemButton <ListItemButton
component={Link} component={Link}
@ -140,14 +140,14 @@ export default function MenuContent({ hidden }: PropType) {
transition: "all 0.5s ease", transition: "all 0.5s ease",
".MuiListItemText-primary": { ".MuiListItemText-primary": {
width: "118px", // width: "118px",
height: "19px", // height: "19px",
fontSize: "16px", fontSize: "16px",
letterSpacing: "0%", letterSpacing: "0%",
lineHeight: "100%", lineHeight: "100%",
whiteSpace: "pre", whiteSpace: "pre",
color: "#FAFAFA", color: "#FAFAFA",
marginTop: "5px", // marginTop: "5px",
}, },
}} }}
primary={item.text} 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 ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material"; import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 10px",
borderBottom: "none", borderBottom: "none",
"& .MuiButtonBase-root-MuiButton-root":{
fontSize:"16px",
}
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); 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 [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl); // const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => { // const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget); // setAnchorEl(event?.currentTarget);
}; // };
const handleClose = () => { // const handleClose = () => {
setAnchorEl(null); // setAnchorEl(null);
}; // };
return ( return (
<React.Fragment> <React.Fragment>
<ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} /> {/* <ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} /> */}
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
id="top-menu" id="top-menu"
open={open} open={open}
onClose={handleClose} onClose={onClose}
onClick={handleClose}
slotProps={{ slotProps={{
paper: { paper: {
elevation: 0, elevation: 0,
sx: { sx: {
overflow: "visible", 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, mt: 1.5,
"& .MuiList-root": { "& .MuiList-root": {
background: "#272727", // Remove any divider under menu items background: "#272727",
}, },
"& .MuiMenuItem-root": { "& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items 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> </Link>
<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}> <MenuItem
onClick={onClose}
sx={{ color: "#E8533B" }}
>
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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