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 +1071 -933
35 changed files with 1071 additions and 933 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 13d1b584c2 - Show all commits

BIN
public/Digiev.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
public/Publica Sans Round/PublicaSansRound-Bd.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-BdIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-Lt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-LtIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-Md.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-MdIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-Rg.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-RgIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-ThIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-Thin.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-UlLt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-UlLtIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-XBd.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-XBdIt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-XLt.otf Normal file
View file

Binary file not shown.

BIN
public/Publica Sans Round/PublicaSansRound-XLtIt.otf Normal file
View file

Binary file not shown.

BIN
public/fonts/PublicaSansRound-Md.otf Normal file
View file

Binary file not shown.

10
src/App.css
View file

@ -22,6 +22,16 @@ html, body {
} }
} }
@font-face {
font-family: 'Publica Sans Round Medium';
src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
font-weight: 500;
font-display: swap;
}
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;

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

@ -46,7 +46,7 @@ export default function Header() {
// height: "84px", // height: "84px",
minHeight: "70px", 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",
@ -59,10 +59,10 @@ export default function Header() {
boxSizing: "border-box", boxSizing: "border-box",
overflowX: "hidden", overflowX: "hidden",
flex: "0 0 84px", flex: "0 0 84px",
position: "fixed", // position: "fixed",
top: "0", // top: "0",
left: "0", // left: "0",
zIndex: 1000, // zIndex: 1000,
}} }}
> >
<Stack <Stack
@ -135,7 +135,7 @@ export default function Header() {
/> />
{/* Username */} {/* Username */}
<Typography variant="body1" sx={{ color: "#FFFFFF" }}> <Typography variant="body1">
{user?.name || "No Adminsss"} {user?.name || "No Adminsss"}
</Typography> </Typography>

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

@ -12,6 +12,7 @@ import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice"; import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
function AreaGradient({ color, id }: { color: string; id: string }) { function AreaGradient({ color, id }: { color: string; id: string }) {
return ( return (
<defs> <defs>
@ -22,7 +23,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
</defs> </defs>
); );
} }
const chartColor = " #111111";
export default function LineChartCard() { export default function LineChartCard() {
const theme = useTheme(); const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
@ -67,9 +68,7 @@ export default function LineChartCard() {
minHeight: { xs: "360px", sm: "400px", md: "444px" }, minHeight: { xs: "360px", sm: "400px", md: "444px" },
borderRadius: "16px", borderRadius: "16px",
border: "none", border: "none",
"*:where([data-mui-color-scheme='dark']) &": { background: "#D0E1E9",
backgroundColor: "#202020",
},
}} }}
> >
<CardContent <CardContent
@ -83,16 +82,15 @@ export default function LineChartCard() {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexDirection: isXsScreen ? "column" : "row", flexDirection: isXsScreen ? "column" : "row",
color: "#F2F2F2",
marginBottom: isXsScreen ? 16 : 0, marginBottom: isXsScreen ? 16 : 0,
}} }}
> >
<Typography <Typography
variant="h6" variant="h6"
align={isXsScreen ? "center" : "left"} align={isXsScreen ? "center" : "left"}
color="#F2F2F2"
sx={{ sx={{
fontWeight: 500, fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" }, fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px", lineHeight: "24px",
marginBottom: isXsScreen ? 2 : 0, marginBottom: isXsScreen ? 2 : 0,
@ -121,11 +119,9 @@ export default function LineChartCard() {
value={startDateBookings} value={startDateBookings}
onChange={(e) => setStartDateBookings(e.target.value)} onChange={(e) => setStartDateBookings(e.target.value)}
sx={{ sx={{
backgroundColor: "#202020", backgroundColor: "#DFECF1",
border: "1px solid rgba(87, 85, 85, 0.53)",
borderRadius: "8px", borderRadius: "8px",
"& .MuiInputBase-input": {
color: "#F2F2F2",
},
}} }}
/> />
<TextField <TextField
@ -137,22 +133,20 @@ export default function LineChartCard() {
value={endDateBookings} value={endDateBookings}
onChange={(e) => setEndDateBookings(e.target.value)} onChange={(e) => setEndDateBookings(e.target.value)}
sx={{ sx={{
backgroundColor: "#202020", backgroundColor: "#DFECF1",
border: "1px solid rgba(87, 85, 85, 0.53)",
borderRadius: "8px", borderRadius: "8px",
"& .MuiInputBase-input": {
color: "#F2F2F2",
},
}} }}
/> />
<Button <Button
onClick={handleFetchData} onClick={handleFetchData}
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#000000",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
padding: "10px 20px", width: "117px",
"&:hover": { backgroundColor: "#3A94C0" }, "&:hover": { backgroundColor: "#000000" },
}} }}
> >
Apply Apply
@ -161,38 +155,35 @@ export default function LineChartCard() {
{/* Line Chart */} {/* Line Chart */}
<Box sx={{ mt: 7.5 }}> <Box sx={{ mt: 7.5 }}>
<LineChart <LineChart
colors={[theme.palette.primary.main]} colors={[theme.palette.primary.main]}
xAxis={[ xAxis={[
{ {
scaleType: "point", scaleType: "point",
data: chartData.map((data) => data.label), data: chartData.map((data) => data.label),
}, },
]} ]}
series={[ series={[
{ {
id: "totalBookings", id: "totalBookings",
showMark: false, showMark: false,
curve: "linear", curve: "linear",
area: true, area: true,
data: chartData.map((data) => data.value), data: chartData.map((data) => data.value),
color: theme.palette.primary.main, color: theme.palette.primary.main,
}, },
]} ]}
height={getChartHeight()} height={getChartHeight()}
margin={getChartMargin()} margin={getChartMargin()}
grid={{ horizontal: true }} grid={{ horizontal: true }}
sx={{ sx={{
"& .MuiAreaElement-series-totalBookings": { "& .MuiAreaElement-series-totalBookings": {
fill: "url('#totalBookings')", fill: "url('#totalBookings')",
}, },
}} }}
> >
<AreaGradient <AreaGradient color={chartColor} id="totalBookings" />
color={theme.palette.primary.main} </LineChart>
id="totalBookings"
/>
</LineChart>
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>

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

@ -1,15 +1,16 @@
import React, { useEffect } from "react";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import SessionsChart from "../SessionsChart/sessionChart"; import SessionsChart from "../SessionsChart/sessionChart";
import StatCard, { StatCardProps } from "../StatCard/statCard";
import ResourcesPieChart from "../ResourcePieChart/resourcePieChart"; import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
import RoundedBarChart from "../barChartCard/barChartCard"; import RoundedBarChart from "../barChartCard/barChartCard";
import LineChartCard from "../LineChartCard/lineChartCard"; import LineChartCard from "../LineChartCard/lineChartCard";
import { AppDispatch, RootState } from "../../redux/store/store"; import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice"; import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { useEffect } from "react"; import AppTheme from "../../shared-theme/AppTheme"; // Import the custom theme
import StatCard from "../StatCard/statCard"; // Adjusted import for consistency
export default function MainGrid() { export default function MainGrid() {
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
@ -22,18 +23,17 @@ export default function MainGrid() {
error, error,
} = useSelector((state: RootState) => state.dashboardReducer); } = useSelector((state: RootState) => state.dashboardReducer);
const staticData = {
totalAdmins: 86,
totalManagers: 12,
totalUsers: 24,
totalStations: 8,
};
useEffect(() => { useEffect(() => {
dispatch(fetchDashboardData()); dispatch(fetchDashboardData());
}, [dispatch]); }, [dispatch]);
const data = { totalAdmins, totalManagers, totalUsers, totalStations }; // Use fetched data if available, otherwise fall back to static data
const data = {
totalAdmins: totalAdmins || 86,
totalManagers: totalManagers || 12,
totalUsers: totalUsers || 24,
totalStations: totalStations || 8,
};
const statCards = [ const statCards = [
{ title: "Total Admins", value: data.totalAdmins }, { title: "Total Admins", value: data.totalAdmins },
@ -43,48 +43,53 @@ export default function MainGrid() {
]; ];
return ( return (
<Box <AppTheme>
sx={{ <Box
width: "100%", sx={{
maxWidth: "1800px", width: "100%",
mx: "auto", maxWidth: "1800px",
px: { xs: 2, sm: 1, md: 0 }, mx: "auto",
// background: "#DFECF1", px: { xs: 2, sm: 1, md: 0 },
background: (theme) => theme.palette.background.default, // #DFECF1 from theme
}} }}
>
{/* Dashboard Header */}
<Typography
component="h2"
variant="h6"
sx={{ mb: 2, fontSize: "30px", fontWeight: "600" }}
> >
Dashboard {/* Dashboard Header */}
</Typography> <Typography
component="h2"
variant="h4" // Use h4 to match the "Good morning, James!" size and weight
sx={{
mb: 3,
{/* Grid Layout */}
<Grid container spacing={3} columns={12}> }}
{/* Statistic Cards */} >
{statCards.map((card, index) => ( Dashboard
<Grid key={index} item xs={12} sm={6} md={3} lg={3}> </Typography>
<StatCard {...card} />
{/* Grid Layout */}
<Grid container spacing={3} columns={12}>
{/* Statistic Cards */}
{statCards.map((card, index) => (
<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
<StatCard {...card} />
</Grid>
))}
{/* Charts */}
<Grid item xs={12} sm={12} md={6} lg={6}>
<SessionsChart />
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<ResourcesPieChart />
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<RoundedBarChart />
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<LineChartCard />
</Grid> </Grid>
))}
{/* Charts */}
<Grid item xs={12} sm={12} md={6} lg={6}>
<SessionsChart />
</Grid> </Grid>
<Grid item xs={12} sm={12} md={6} lg={6}> </Box>
<ResourcesPieChart /> </AppTheme>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<RoundedBarChart />
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
<LineChartCard />
</Grid>
</Grid>
</Box>
); );
} }

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

@ -111,7 +111,7 @@ export default function MenuContent({ hidden }: PropType) {
flexGrow: 1, flexGrow: 1,
// p: 1, // p: 1,
justifyContent: "space-between", justifyContent: "space-between",
backgroundColor: "#202020", backgroundColor: "#000000",
}} }}
> >
<List dense> <List dense>
@ -150,7 +150,7 @@ export default function MenuContent({ hidden }: PropType) {
letterSpacing: "0%", letterSpacing: "0%",
lineHeight: "100%", lineHeight: "100%",
whiteSpace: "pre", whiteSpace: "pre",
color: "#FAFAFA", color: "#FFFFFF",
// marginTop: "5px", // marginTop: "5px",
}, },
}} }}

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

@ -53,7 +53,8 @@ export default function OptionsMenu({
mt: 1.5, mt: 1.5,
"& .MuiList-root": { "& .MuiList-root": {
background: "#272727", background: "#D0E1E9",
}, },
"& .MuiMenuItem-root": { "& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items borderBottom: "none", // Remove any divider under menu items
@ -75,10 +76,7 @@ export default function OptionsMenu({
> >
<MenuItem onClick={onClose}>Profile</MenuItem> <MenuItem onClick={onClose}>Profile</MenuItem>
</Link> </Link>
<MenuItem <MenuItem onClick={onClose} sx={{ color: "#E8533B" }}>
onClick={onClose}
sx={{ color: "#E8533B" }}
>
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

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

@ -102,9 +102,10 @@ export default function ResourcePieChart() {
padding: { xs: "12px", sm: "14px", md: "16px" }, padding: { xs: "12px", sm: "14px", md: "16px" },
borderRadius: "16px", borderRadius: "16px",
border: "none", border: "none",
"*:where([data-mui-color-scheme='dark']) &": { // "*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020", // backgroundColor: "#202020",
}, // },
background: "#D0E1E9",
}} }}
> >
<CardContent <CardContent
@ -113,12 +114,12 @@ export default function ResourcePieChart() {
<Typography <Typography
component="h2" component="h2"
variant="subtitle2" variant="subtitle2"
color="#F2F2F2" // color="#F2F2F2"
sx={{ sx={{
fontWeight: 500, fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" }, 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 },
}} }}
> >
@ -167,7 +168,9 @@ export default function ResourcePieChart() {
ml: { xs: 0, sm: 2 }, ml: { xs: 0, sm: 2 },
}} }}
> >
<Typography sx={{whiteSpace: "pre"}}>Car Port Types:</Typography> <Typography sx={{ whiteSpace: "pre" ,fontWeight:500}}>
Car Port Types:
</Typography>
{dataToDisplay.map((entry, index) => ( {dataToDisplay.map((entry, index) => (
<Stack <Stack
@ -195,7 +198,8 @@ export default function ResourcePieChart() {
sm: "14px", sm: "14px",
md: "16px", md: "16px",
}, },
color: "#FFFFFF", // color: "#FFFFFF",
color: "#111111",
}} }}
> >
{entry.carPort} {entry.carPort}

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

@ -30,9 +30,10 @@ export default function SessionsChart() {
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",
}, // },
background: "#D0E1E9",
}} }}
> >
<CardContent <CardContent
@ -41,14 +42,14 @@ export default function SessionsChart() {
<Typography <Typography
variant="h6" variant="h6"
align="left" align="left"
color="#F2F2F2" // color="#F2F2F2"
sx={{ sx={{
fontWeight: 500, fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" }, fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px", lineHeight: "24px",
letterSpacing: "0%", letterSpacing: "0%",
color: "#FAFAFA", // color: "#FAFAFA",
marginBottom: { xs: 1, sm: 1.5, md: 2 }, marginBottom: { xs: 1, sm: 0.7, md: 1 },
}} }}
> >
Charging prices Charging prices
@ -60,7 +61,7 @@ export default function SessionsChart() {
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: "1px solid rgba(87, 85, 85, 0.53)",
borderRadius: "8px", borderRadius: "8px",
}} }}
> >
@ -69,13 +70,12 @@ export default function SessionsChart() {
onChange={handleChange} onChange={handleChange}
label="Select Station" label="Select Station"
sx={{ sx={{
color: "#D9D8D8", color: "#000000",
"& .MuiSvgIcon-root": { color: "#F2F2F2" }, "& .MuiSvgIcon-root": { color: "#000000" },
fontSize: { xs: "14px", md: "16px" }, fontSize: { xs: "14px", md: "16px" },
}} }}
IconComponent={ExpandMoreIcon} IconComponent={ExpandMoreIcon}
> >
<MenuItem value="Delhi NCR EV Station"> <MenuItem value="Delhi NCR EV Station">
Delhi NCR EV Station Delhi NCR EV Station
</MenuItem> </MenuItem>
@ -115,8 +115,9 @@ export default function SessionsChart() {
}, },
borderRadius: "8px", borderRadius: "8px",
p: { xs: "10px", sm: "12px", md: "14px" }, p: { xs: "10px", sm: "12px", md: "14px" },
backgroundColor: "#272727", // backgroundColor: "#272727",
color: "#D9D8D8", // color: "#D9D8D8",
backgroundColor: "#D9E7ED",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
@ -125,7 +126,7 @@ export default function SessionsChart() {
<Typography <Typography
variant="body2" variant="body2"
sx={{ sx={{
fontWeight: 500, fontWeight: 600,
fontSize: { fontSize: {
xs: "12px", xs: "12px",
sm: "14px", sm: "14px",
@ -133,6 +134,7 @@ export default function SessionsChart() {
}, },
lineHeight: { xs: "20px", md: "24px" }, lineHeight: { xs: "20px", md: "24px" },
marginBottom: "4px", marginBottom: "4px",
color: "#111111",
}} }}
gutterBottom gutterBottom
> >
@ -141,7 +143,6 @@ export default function SessionsChart() {
<Box display="flex" gap={1} alignItems="center"> <Box display="flex" gap={1} alignItems="center">
<Typography <Typography
variant="subtitle2" variant="subtitle2"
color="#FFFFFF"
sx={{ sx={{
fontWeight: 500, fontWeight: 500,
fontSize: { fontSize: {

40
src/components/SideMenu/sideMenu.tsx
View file

@ -52,9 +52,11 @@ export default function SideMenu() {
transition: "all 0.5s ease", transition: "all 0.5s ease",
}, },
[`& .${drawerClasses.paper}`]: { [`& .${drawerClasses.paper}`]: {
backgroundColor: "background.paper", backgroundColor: "#000000",
width: open ? 250 : 80, width: open ? 250 : 80,
transition: "all 0.5s ease", transition: "all 0.5s ease",
borderTopRightRadius: 16,
borderBottomRightRadius: 16,
}, },
}} }}
> >
@ -68,15 +70,24 @@ export default function SideMenu() {
}} }}
> >
<img <img
src="/evLogo.png" src={open ? "/evLogo.png" : "/Digiev.png"}
alt="Logo" alt="Logo"
style={{ style={{
justifyContent: "center", width: open ? "120px" : "60px",
width: open ? "120px" : "60px", // Adjust width depending on open state
height: "auto", height: "auto",
transition: "width 0.5s ease", // Smooth transition for width change transition: "all 0.3s ease",
}} }}
/> />
{/* <img
src={open ? "/evLogo.png" : "/evIcon.png"}
alt="Logo"
style={{
width: open ? "120px" : "60px",
height: "auto",
transition: "all 0.3s ease",
}}
/> */}
{/* <Avatar {/* <Avatar
alt="Logo" alt="Logo"
src="/evLogo.png" src="/evLogo.png"
@ -127,19 +138,24 @@ export default function SideMenu() {
<MenuContent hidden={open} /> <MenuContent hidden={open} />
</Drawer> </Drawer>
<Button <Button
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
sx={{ sx={{
position: "absolute", position: "absolute",
top: 20, top: 50,
left: open ? 250 : 80, left: open ? 235 : 65, // Slight overlap on edge
minWidth: 0, minWidth: 0,
width: 32, width: 36,
height: 35, height: 36,
borderRadius: "50%", borderRadius: "50%",
backgroundColor: "#FFFFFF",
color: "#000000",
zIndex: 1301, zIndex: 1301,
// boxShadow: 2, boxShadow: 3,
border: "1px solid #e0e0e0",
transition: "all 0.3s ease-in-out",
"&:hover": {
backgroundColor: "#f5f5f5",
},
}} }}
> >
{open ? ( {open ? (

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

@ -16,91 +16,88 @@ export default function StatCard({ title, value }: StatCardProps) {
const isMdScreen = useMediaQuery(theme.breakpoints.only("md")); const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
return ( return (
<Card <Card
variant="outlined" variant="outlined"
sx={{ sx={{
width: "100%", width: "100%",
height: "100px", height: "100px",
padding: { padding: {
xs: "12px", xs: "12px",
sm: "14px", sm: "14px",
md: "10px" md: "10px",
}, },
borderRadius: "12px", borderRadius: "12px",
border: "none", border: "none",
gap: "24px", gap: "24px",
"*:where([data-mui-color-scheme='dark']) &": { background: "#D0E1E9",
backgroundColor: "#202020",
},
}}
>
<CardContent
sx={{
padding: {
xs: "8px",
sm: "12px",
md: "16px"
},
"&:last-child": {
paddingBottom: {
xs: "8px",
sm: "12px",
md: "16px"
}
}
}}
>
<Typography
component="h2"
variant="subtitle2"
color="#F2F2F2"
sx={{
fontWeight: 400,
fontSize: {
xs: "12px",
sm: "14px",
md: "16px"
},
lineHeight: {
xs: "12px",
sm: "13px",
md: "14px"
},
letterSpacing: "0%",
width: "auto",
height: "auto",
marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
}} }}
gutterBottom >
> <CardContent
{title} sx={{
</Typography> padding: {
<Typography xs: "8px",
component="h1" sm: "12px",
variant="body1" md: "16px",
color="#D9D8D8" },
sx={{ "&:last-child": {
fontWeight: 600, paddingBottom: {
fontSize: { xs: "8px",
xs: "24px", sm: "12px",
sm: "28px", md: "16px",
md: "30px" },
}, },
lineHeight: { }}
xs: "28px", >
sm: "32px", <Typography
md: "36px" component="h2"
}, variant="subtitle2"
letterSpacing: "0%", sx={{
width: "auto", fontWeight: 600,
height: "auto",
}} fontSize: {
gutterBottom xs: "12px",
> sm: "14px",
{value} md: "16px",
</Typography> },
</CardContent> lineHeight: {
</Card> xs: "12px",
sm: "13px",
md: "14px",
},
letterSpacing: "0%",
width: "auto",
height: "auto",
marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
}}
gutterBottom
>
{title}
</Typography>
<Typography
component="h1"
variant="body1"
sx={{
fontWeight: 600,
fontSize: {
xs: "24px",
sm: "28px",
md: "30px",
},
lineHeight: {
xs: "28px",
sm: "32px",
md: "36px",
},
letterSpacing: "0%",
width: "auto",
height: "auto",
}}
gutterBottom
>
{value}
</Typography>
</CardContent>
</Card>
); );
} }

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

@ -33,11 +33,7 @@ export default function RoundedBarChart() {
// Handle fetching data with date filters // Handle fetching data with date filters
const handleFetchData = () => { const handleFetchData = () => {
dispatch(fetchDashboardData({ startDateStations, endDateStations }));
dispatch(
fetchDashboardData({ startDateStations, endDateStations })
);
}; };
// Responsive chart settings // Responsive chart settings
@ -53,7 +49,6 @@ export default function RoundedBarChart() {
{ {
dataKey: "name", dataKey: "name",
scaleType: "band" as const, scaleType: "band" as const,
}, },
], ],
sx: { sx: {
@ -102,9 +97,10 @@ export default function RoundedBarChart() {
minHeight: { xs: "360px", sm: "400px", md: "444px" }, minHeight: { xs: "360px", sm: "400px", md: "444px" },
borderRadius: "16px", borderRadius: "16px",
border: "none", border: "none",
"*:where([data-mui-color-scheme='dark']) &": { // "*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020", // backgroundColor: "#202020",
}, // },
background: "#D0E1E9",
}} }}
> >
<CardContent <CardContent
@ -123,10 +119,11 @@ export default function RoundedBarChart() {
> >
<Typography <Typography
variant="h6" variant="h6"
color="#F2F2F2" // color="#F2F2F2"
color="#000000"
align={isXsScreen ? "center" : "left"} align={isXsScreen ? "center" : "left"}
sx={{ sx={{
fontWeight: 500, fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" }, fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px", lineHeight: "24px",
marginBottom: isXsScreen ? 2 : 0, marginBottom: isXsScreen ? 2 : 0,
@ -153,11 +150,13 @@ export default function RoundedBarChart() {
value={startDateStations} value={startDateStations}
onChange={(e) => setStartDateStations(e.target.value)} onChange={(e) => setStartDateStations(e.target.value)}
sx={{ sx={{
backgroundColor: "#202020", // backgroundColor: "#202020",
backgroundColor: "#D9E7ED",
border: "1px solid rgba(87, 85, 85, 0.53)",
borderRadius: "8px", borderRadius: "8px",
"& .MuiInputBase-input": { // "& .MuiInputBase-input": {
color: "#F2F2F2", // color: "#F2F2F2",
}, // },
}} }}
/> />
<TextField <TextField
@ -171,22 +170,25 @@ export default function RoundedBarChart() {
value={endDateStations} value={endDateStations}
onChange={(e) => setEndDateStations(e.target.value)} onChange={(e) => setEndDateStations(e.target.value)}
sx={{ sx={{
backgroundColor: "#202020", // backgroundColor: "#202020",
backgroundColor: "#D9E7ED",
border: "1px solid rgba(87, 85, 85, 0.53)",
borderRadius: "8px", borderRadius: "8px",
"& .MuiInputBase-input": { // "& .MuiInputBase-input": {
color: "#F2F2F2", // color: "#F2F2F2",
}, // },
}} }}
/> />
<Button <Button
onClick={handleFetchData} onClick={handleFetchData}
sx={{ sx={{
backgroundColor: "#52ACDF", // backgroundColor: "#52ACDF",
backgroundColor: "#000000",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, // "&:hover": { backgroundColor: "#439BC1" },
"&:hover": { backgroundColor: "#000000" },
}} }}
> >
Apply Apply

8
src/index.css
View file

@ -22,3 +22,11 @@ code {
rx: 8; rx: 8;
ry: 8 ry: 8
} }
@font-face {
font-family: 'Publica Sans Round Medium';
src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
font-weight: 500;
font-style: normal;
font-display: swap;
}

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

@ -1,3 +1,67 @@
// import * as React from "react";
// import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
// import type { ThemeOptions } from "@mui/material/styles";
// import { inputsCustomizations } from "./customizations/inputs";
// import { dataDisplayCustomizations } from "./customizations/dataDisplay";
// import { feedbackCustomizations } from "./customizations/feedback";
// import { navigationCustomizations } from "./customizations/navigation";
// import { surfacesCustomizations } from "./customizations/surfaces";
// import { colorSchemes, shadows, shape } from "./themePrimitives";
// interface AppThemeProps {
// children: React.ReactNode;
// disableCustomTheme?: boolean;
// themeComponents?: ThemeOptions["components"];
// }
// export default function AppTheme(props: AppThemeProps) {
// const { children, disableCustomTheme, themeComponents } = props;
// const theme = React.useMemo(() => {
// return disableCustomTheme
// ? {}
// : createTheme({
// palette: {
// mode: "dark",
// background: {
// // default: "#ECF4FA",
// default: "#DFECF1",
// paper: "#1e1e1e",
// },
// text: {
// primary: "#111111",
// secondary: "#b0b0b0",
// },
// },
// typography: {
// fontFamily: "Gilroy",
// },
// cssVariables: {
// colorSchemeSelector: "data-mui-color-scheme",
// cssVarPrefix: "template",
// },
// shadows,
// shape,
// components: {
// ...inputsCustomizations,
// ...dataDisplayCustomizations,
// ...feedbackCustomizations,
// ...navigationCustomizations,
// ...surfacesCustomizations,
// ...themeComponents,
// },
// });
// }, [disableCustomTheme, themeComponents]);
// if (disableCustomTheme) {
// return <React.Fragment>{children}</React.Fragment>;
// }
// return (
// <ThemeProvider theme={theme} disableTransitionOnChange>
// {children}
// </ThemeProvider>
// );
// }
import * as React from "react"; import * as React from "react";
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles"; import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from "@mui/material/styles"; import type { ThemeOptions } from "@mui/material/styles";
@ -21,26 +85,49 @@ export default function AppTheme(props: AppThemeProps) {
? {} ? {}
: createTheme({ : createTheme({
palette: { palette: {
mode: "dark", mode: "light", // Set to light mode to match the UI
background: { background: {
// default: "#ECF4FA", default: "#DFECF1", // Matches the background in the image
default: "#111111", paper: "#D0E1E9", // Dark cards
paper: "#1e1e1e",
}, },
text: { text: {
primary: "#ffffff", primary: "#000000", // Already matches the image
secondary: "#b0b0b0", secondary: "#272727", // Already matches the image
}, },
success: {
main: "#00C853", // For positive percentages (e.g., +18.7%)
},
error: {
main: "#F44336", // For negative percentages (e.g., +2.7%)
},
divider: "#E0E0E0", // Light divider for cards
}, },
typography: { typography: {
fontFamily: "Gilroy", fontFamily: '"Publica Sans Round Medium", sans-serif',
h4: {
fontSize: "2rem", // Matches the "Good morning, James!" heading
fontWeight: 600,
},
h6: {
fontSize: "16px", // For card titles
fontWeight: 500,
},
body1: {
fontSize: "1rem",
},
body2: {
fontSize: "0.875rem",
color: "#b0b0b0",
},
}, },
cssVariables: { cssVariables: {
colorSchemeSelector: "data-mui-color-scheme", colorSchemeSelector: "data-mui-color-scheme",
cssVarPrefix: "template", cssVarPrefix: "template",
}, },
shadows, shadows,
shape, shape: {
borderRadius: 8, // Matches the rounded corners in the image
},
components: { components: {
...inputsCustomizations, ...inputsCustomizations,
...dataDisplayCustomizations, ...dataDisplayCustomizations,

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

@ -8,229 +8,230 @@ import { gray, red, green } from '../themePrimitives';
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export */
export const dataDisplayCustomizations = { export const dataDisplayCustomizations = {
MuiList: { MuiList: {
styleOverrides: { styleOverrides: {
root: { root: {
// padding: '8px', // padding: '8px',
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
gap: 0, gap: 0,
}, },
}, },
}, },
MuiListItem: { MuiListItem: {
styleOverrides: { styleOverrides: {
root: ({ theme }) => ({ root: ({ theme }) => ({
[`& .${svgIconClasses.root}`]: { [`& .${svgIconClasses.root}`]: {
width: '1rem', width: "3rem",
height: '1rem', height: "2rem",
color: (theme.vars || theme).palette.text.secondary, color: (theme.vars || theme).palette.text.secondary,
}, },
[`& .${typographyClasses.root}`]: { [`& .${typographyClasses.root}`]: {
fontWeight: 500, fontWeight: 500,
fontSize:"16px" fontSize: "16px",
}, },
[`& .${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": {
opacity: 1, opacity: 2,
backgroundColor: alpha(theme.palette.action.selected, 0.3), // backgroundColor: "rgb(66, 64, 64)",
[`& .${svgIconClasses.root}`]: { [`& .${svgIconClasses.root}`]: {
color: (theme.vars || theme).palette.text.primary, //color: (theme.vars || theme).palette.text.primary,
}, color: " #FFFFFF",
'&:focus-visible': { },
backgroundColor: alpha(theme.palette.action.selected, 0.3), "&:focus-visible": {
}, // backgroundColor: alpha(theme.palette.action.selected, 0.3),
'&:hover': { },
backgroundColor: alpha(theme.palette.action.selected, 0.5), "&:hover": {
}, //backgroundColor: alpha(theme.palette.action.selected, 0.5),
}, },
'&:focus-visible': { },
backgroundColor: 'transparent', // "&:focus-visible": {
}, // backgroundColor: "transparent",
}, // },
}), },
}, }),
}, },
MuiListItemText: { },
styleOverrides: { MuiListItemText: {
primary: ({ theme }) => ({ styleOverrides: {
fontSize: "16px", primary: ({ theme }) => ({
fontWeight: 500, fontSize: "16px",
lineHeight: theme.typography.body2.lineHeight, fontWeight: 500,
}), lineHeight: theme.typography.body2.lineHeight,
secondary: ({ theme }) => ({ }),
fontSize: theme.typography.caption.fontSize, secondary: ({ theme }) => ({
lineHeight: theme.typography.caption.lineHeight, fontSize: theme.typography.caption.fontSize,
}), lineHeight: theme.typography.caption.lineHeight,
}, }),
}, },
MuiListSubheader: { },
styleOverrides: { MuiListSubheader: {
root: ({ theme }) => ({ styleOverrides: {
backgroundColor: 'transparent', root: ({ theme }) => ({
// padding: '4px 8px', backgroundColor: "transparent",
fontSize: theme.typography.caption.fontSize, // padding: '4px 8px',
fontWeight: 500, fontSize: theme.typography.caption.fontSize,
lineHeight: theme.typography.caption.lineHeight, fontWeight: 500,
}), lineHeight: theme.typography.caption.lineHeight,
}, }),
}, },
MuiListItemIcon: { },
styleOverrides: { MuiListItemIcon: {
root: { styleOverrides: {
minWidth: 0, root: {
}, minWidth: 0,
}, },
}, },
MuiChip: { },
defaultProps: { MuiChip: {
size: 'small', defaultProps: {
}, size: "small",
styleOverrides: { },
root: ({ theme }) => ({ styleOverrides: {
border: '1px solid', root: ({ theme }) => ({
borderRadius: '999px', border: "1px solid",
[`& .${chipClasses.label}`]: { borderRadius: "999px",
fontWeight: 600, [`& .${chipClasses.label}`]: {
}, fontWeight: 600,
variants: [ },
{ variants: [
props: { {
color: 'default', props: {
}, color: "default",
style: { },
borderColor: gray[200], style: {
backgroundColor: gray[100], borderColor: gray[200],
[`& .${chipClasses.label}`]: { backgroundColor: gray[100],
color: gray[500], [`& .${chipClasses.label}`]: {
}, color: gray[500],
[`& .${chipClasses.icon}`]: { },
color: gray[500], [`& .${chipClasses.icon}`]: {
}, color: gray[500],
...theme.applyStyles('dark', { },
borderColor: gray[700], ...theme.applyStyles("dark", {
backgroundColor: gray[800], borderColor: gray[700],
[`& .${chipClasses.label}`]: { backgroundColor: gray[800],
color: gray[300], [`& .${chipClasses.label}`]: {
}, color: gray[300],
[`& .${chipClasses.icon}`]: { },
color: gray[300], [`& .${chipClasses.icon}`]: {
}, color: gray[300],
}), },
}, }),
}, },
{ },
props: { {
color: 'success', props: {
}, color: "success",
style: { },
borderColor: green[200], style: {
backgroundColor: green[50], borderColor: green[200],
[`& .${chipClasses.label}`]: { backgroundColor: green[50],
color: green[500], [`& .${chipClasses.label}`]: {
}, color: green[500],
[`& .${chipClasses.icon}`]: { },
color: green[500], [`& .${chipClasses.icon}`]: {
}, color: green[500],
...theme.applyStyles('dark', { },
borderColor: green[800], ...theme.applyStyles("dark", {
backgroundColor: green[900], borderColor: green[800],
[`& .${chipClasses.label}`]: { backgroundColor: green[900],
color: green[300], [`& .${chipClasses.label}`]: {
}, color: green[300],
[`& .${chipClasses.icon}`]: { },
color: green[300], [`& .${chipClasses.icon}`]: {
}, color: green[300],
}), },
}, }),
}, },
{ },
props: { {
color: 'error', props: {
}, color: "error",
style: { },
borderColor: red[100], style: {
backgroundColor: red[50], borderColor: red[100],
[`& .${chipClasses.label}`]: { backgroundColor: red[50],
color: red[500], [`& .${chipClasses.label}`]: {
}, color: red[500],
[`& .${chipClasses.icon}`]: { },
color: red[500], [`& .${chipClasses.icon}`]: {
}, color: red[500],
...theme.applyStyles('dark', { },
borderColor: red[800], ...theme.applyStyles("dark", {
backgroundColor: red[900], borderColor: red[800],
[`& .${chipClasses.label}`]: { backgroundColor: red[900],
color: red[200], [`& .${chipClasses.label}`]: {
}, color: red[200],
[`& .${chipClasses.icon}`]: { },
color: red[300], [`& .${chipClasses.icon}`]: {
}, color: red[300],
}), },
}, }),
}, },
{ },
props: { size: 'small' }, {
style: { props: { size: "small" },
maxHeight: 20, style: {
[`& .${chipClasses.label}`]: { maxHeight: 20,
fontSize: theme.typography.caption.fontSize, [`& .${chipClasses.label}`]: {
}, fontSize: theme.typography.caption.fontSize,
[`& .${svgIconClasses.root}`]: { },
fontSize: theme.typography.caption.fontSize, [`& .${svgIconClasses.root}`]: {
}, fontSize: theme.typography.caption.fontSize,
}, },
}, },
{ },
props: { size: 'medium' }, {
style: { props: { size: "medium" },
[`& .${chipClasses.label}`]: { style: {
fontSize: theme.typography.caption.fontSize, [`& .${chipClasses.label}`]: {
}, fontSize: theme.typography.caption.fontSize,
}, },
}, },
], },
}), ],
}, }),
}, },
MuiTablePagination: { },
styleOverrides: { MuiTablePagination: {
actions: { styleOverrides: {
display: 'flex', actions: {
gap: 8, display: "flex",
marginRight: 6, gap: 8,
[`& .${iconButtonClasses.root}`]: { marginRight: 6,
minWidth: 0, [`& .${iconButtonClasses.root}`]: {
width: 36, minWidth: 0,
height: 36, width: 36,
}, height: 36,
}, },
}, },
}, },
MuiIcon: { },
defaultProps: { MuiIcon: {
fontSize: 'small', defaultProps: {
}, fontSize: "small",
styleOverrides: { },
root: { styleOverrides: {
variants: [ root: {
{ variants: [
props: { {
fontSize: 'small', props: {
}, fontSize: "small",
style: { },
fontSize: '1rem', style: {
}, fontSize: "1rem",
}, },
], },
}, ],
}, },
}, },
},
}; };

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

@ -21,6 +21,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
MuiListItem: { MuiListItem: {
styleOverrides: { styleOverrides: {
root: ({ theme }) => ({ root: ({ theme }) => ({
[`& .${svgIconClasses.root}`]: { [`& .${svgIconClasses.root}`]: {
width: '1rem', width: '1rem',
height: '1rem', height: '1rem',
@ -41,7 +42,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
backgroundColor: alpha(theme.palette.action.selected, 0.3), backgroundColor: alpha(theme.palette.action.selected, 0.3),
[`& .${svgIconClasses.root}`]: { [`& .${svgIconClasses.root}`]: {
color: (theme.vars || theme).palette.text.primary, color: (theme.vars || theme).palette.text.primary,
}, },
'&:focus-visible': { '&:focus-visible': {
backgroundColor: alpha(theme.palette.action.selected, 0.3), backgroundColor: alpha(theme.palette.action.selected, 0.3),
@ -50,6 +51,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
backgroundColor: alpha(theme.palette.action.selected, 0.5), backgroundColor: alpha(theme.palette.action.selected, 0.5),
}, },
}, },
'&:focus-visible': { '&:focus-visible': {
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },

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

@ -12,435 +12,449 @@ import {autofillFix} from './autoFill';
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export */
export const inputsCustomizations = { export const inputsCustomizations = {
MuiButtonBase: { MuiButtonBase: {
defaultProps: { defaultProps: {
disableTouchRipple: true, disableTouchRipple: true,
disableRipple: true, disableRipple: true,
}, },
styleOverrides: { styleOverrides: {
root: ({ theme }) => ({ root: ({ theme }) => ({
boxSizing: 'border-box', boxSizing: "border-box",
transition: 'all 100ms ease-in', transition: "all 100ms ease-in",
'&:focus-visible': { "&:focus-visible": {
outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, outline: `3px solid ${alpha(
outlineOffset: '2px', theme.palette.primary.main,
}, 0.5
}), )}`,
}, outlineOffset: "2px",
}, },
MuiButton: { }),
styleOverrides: { },
root: ({ theme }) => ({ },
boxShadow: 'none', MuiButton: {
borderRadius: (theme.vars || theme).shape.borderRadius, styleOverrides: {
textTransform: 'none', root: ({ theme }) => ({
variants: [ boxShadow: "none",
{ borderRadius: (theme.vars || theme).shape.borderRadius,
props: { textTransform: "none",
size: 'small', variants: [
}, {
style: { props: {
height: '2.25rem', size: "small",
padding: '8px 12px', },
}, style: {
}, height: "2.25rem",
{ padding: "8px 12px",
props: { },
size: 'medium', },
}, {
style: { props: {
height: '2.5rem', // 40px size: "medium",
}, },
}, style: {
{ height: "2.5rem", // 40px
props: { },
color: 'primary', },
variant: 'contained', {
}, props: {
style: { color: "primary",
color: 'white', variant: "contained",
backgroundColor: gray[900], },
backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, style: {
boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, color: "white",
border: `1px solid ${gray[700]}`, backgroundColor: gray[900],
'&:hover': { backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
backgroundImage: 'none', boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
backgroundColor: gray[700], border: `1px solid ${gray[700]}`,
boxShadow: 'none', "&:hover": {
}, backgroundImage: "none",
'&:active': { backgroundColor: gray[700],
backgroundColor: gray[800], boxShadow: "none",
}, },
...theme.applyStyles('dark', { "&:active": {
color: 'black', backgroundColor: gray[800],
backgroundColor: gray[50], },
backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, ...theme.applyStyles("dark", {
boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', color: "black",
border: `1px solid ${gray[50]}`, backgroundColor: gray[50],
'&:hover': { backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
backgroundImage: 'none', boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)",
backgroundColor: gray[300], border: `1px solid ${gray[50]}`,
boxShadow: 'none', "&:hover": {
}, backgroundImage: "none",
'&:active': { backgroundColor: gray[300],
backgroundColor: gray[400], boxShadow: "none",
}, },
}), "&:active": {
}, backgroundColor: gray[400],
}, },
{ }),
props: { },
color: 'secondary', },
variant: 'contained', {
}, props: {
style: { color: "secondary",
color: 'white', variant: "contained",
backgroundColor: brand[300], },
backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, style: {
boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, color: "white",
border: `1px solid ${brand[500]}`, backgroundColor: brand[300],
'&:hover': { backgroundImage: `linear-gradient(to bottom, ${alpha(
backgroundColor: brand[700], brand[400],
boxShadow: 'none', 0.8
}, )}, ${brand[500]})`,
'&:active': { boxShadow: `inset 0 2px 0 ${alpha(
backgroundColor: brand[700], brand[200],
backgroundImage: 'none', 0.2
}, )}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
}, border: `1px solid ${brand[500]}`,
}, "&:hover": {
{ backgroundColor: brand[700],
props: { boxShadow: "none",
variant: 'outlined', },
}, "&:active": {
style: { backgroundColor: brand[700],
color: (theme.vars || theme).palette.text.primary, backgroundImage: "none",
border: '1px solid', },
borderColor: gray[200], },
backgroundColor: alpha(gray[50], 0.3), },
'&:hover': { {
backgroundColor: gray[100], props: {
borderColor: gray[300], variant: "outlined",
}, },
'&:active': { style: {
backgroundColor: gray[200], color: (theme.vars || theme).palette.text.primary,
}, border: "1px solid",
...theme.applyStyles('dark', { borderColor: gray[200],
backgroundColor: gray[800], backgroundColor: alpha(gray[50], 0.3),
borderColor: gray[700], "&:hover": {
'&:hover': { backgroundColor: gray[100],
backgroundColor: gray[900], borderColor: gray[300],
borderColor: gray[600], },
}, "&:active": {
'&:active': { backgroundColor: gray[200],
backgroundColor: gray[900], },
}, ...theme.applyStyles("dark", {
}), backgroundColor: gray[800],
}, borderColor: gray[700],
}, "&:hover": {
{ backgroundColor: gray[900],
props: { borderColor: gray[600],
color: 'secondary', },
variant: 'outlined', "&:active": {
}, backgroundColor: gray[900],
style: { },
color: brand[700], }),
border: '1px solid', },
borderColor: brand[200], },
backgroundColor: brand[50], {
'&:hover': { props: {
backgroundColor: brand[100], color: "secondary",
borderColor: brand[400], variant: "outlined",
}, },
'&:active': { style: {
backgroundColor: alpha(brand[200], 0.7), color: brand[700],
}, border: "1px solid",
...theme.applyStyles('dark', { borderColor: brand[200],
color: brand[50], backgroundColor: brand[50],
border: '1px solid', "&:hover": {
borderColor: brand[900], backgroundColor: brand[100],
backgroundColor: alpha(brand[900], 0.3), borderColor: brand[400],
'&:hover': { },
borderColor: brand[700], "&:active": {
backgroundColor: alpha(brand[900], 0.6), backgroundColor: alpha(brand[200], 0.7),
}, },
'&:active': { ...theme.applyStyles("dark", {
backgroundColor: alpha(brand[900], 0.5), color: brand[50],
}, border: "1px solid",
}), borderColor: brand[900],
}, backgroundColor: alpha(brand[900], 0.3),
}, "&:hover": {
{ borderColor: brand[700],
props: { backgroundColor: alpha(brand[900], 0.6),
variant: 'text', },
}, "&:active": {
style: { backgroundColor: alpha(brand[900], 0.5),
color: gray[600], },
'&:hover': { }),
backgroundColor: gray[100], },
}, },
'&:active': { {
backgroundColor: gray[200], props: {
}, variant: "text",
...theme.applyStyles('dark', { },
color: gray[50], style: {
'&:hover': { color: gray[600],
backgroundColor: gray[700], "&:hover": {
}, backgroundColor: gray[100],
'&:active': { },
backgroundColor: alpha(gray[700], 0.7), "&:active": {
}, backgroundColor: gray[200],
}), },
}, ...theme.applyStyles("dark", {
}, color: gray[50],
{ "&:hover": {
props: { backgroundColor: gray[700],
color: 'secondary', },
variant: 'text', "&:active": {
}, backgroundColor: alpha(gray[700], 0.7),
style: { },
color: brand[700], }),
'&:hover': { },
backgroundColor: alpha(brand[100], 0.5), },
}, {
'&:active': { props: {
backgroundColor: alpha(brand[200], 0.7), color: "secondary",
}, variant: "text",
...theme.applyStyles('dark', { },
color: brand[100], style: {
'&:hover': { color: brand[700],
backgroundColor: alpha(brand[900], 0.5), "&:hover": {
}, backgroundColor: alpha(brand[100], 0.5),
'&:active': { },
backgroundColor: alpha(brand[900], 0.3), "&:active": {
}, backgroundColor: alpha(brand[200], 0.7),
}), },
}, ...theme.applyStyles("dark", {
}, color: brand[100],
], "&:hover": {
}), backgroundColor: alpha(brand[900], 0.5),
}, },
}, "&:active": {
MuiIconButton: { backgroundColor: alpha(brand[900], 0.3),
styleOverrides: { },
root: ({ theme }) => ({ }),
boxShadow: 'none', },
borderRadius: (theme.vars || theme).shape.borderRadius, },
textTransform: 'none', ],
fontWeight: theme.typography.fontWeightMedium, }),
letterSpacing: 0, },
color: (theme.vars || theme).palette.text.primary, },
border: '1px solid ', MuiIconButton: {
borderColor: gray[200], styleOverrides: {
backgroundColor: alpha(gray[50], 0.3), root: ({ theme }) => ({
'&:hover': { boxShadow: "none",
backgroundColor: gray[100], borderRadius: (theme.vars || theme).shape.borderRadius,
borderColor: gray[300], textTransform: "none",
}, fontWeight: theme.typography.fontWeightMedium,
'&:active': { letterSpacing: 0,
backgroundColor: gray[200], color: (theme.vars || theme).palette.text.primary,
}, border: "1px solid ",
...theme.applyStyles('dark', { borderColor: gray[200],
backgroundColor: gray[800], backgroundColor: alpha(gray[50], 0.3),
borderColor: gray[700], "&:hover": {
'&:hover': { backgroundColor: gray[100],
backgroundColor: gray[900], borderColor: gray[300],
borderColor: gray[600], },
}, "&:active": {
'&:active': { backgroundColor: gray[200],
backgroundColor: gray[900], },
}, ...theme.applyStyles("dark", {
}), backgroundColor: gray[800],
variants: [ borderColor: gray[700],
{ "&:hover": {
props: { backgroundColor: gray[900],
size: 'small', borderColor: gray[600],
}, },
style: { "&:active": {
width: '2.25rem', backgroundColor: gray[900],
height: '2.25rem', },
padding: '0.25rem', }),
[`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, variants: [
}, {
}, props: {
{ size: "small",
props: { },
size: 'medium', style: {
}, width: "2.25rem",
style: { height: "2.25rem",
width: '2.5rem', padding: "0.25rem",
height: '2.5rem', [`& .${svgIconClasses.root}`]: { fontSize: "1rem" },
}, },
}, },
], {
}), props: {
}, size: "medium",
}, },
MuiToggleButtonGroup: { style: {
styleOverrides: { width: "2.5rem",
root: ({ theme }) => ({ height: "2.5rem",
borderRadius: '10px', },
boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, },
[`& .${toggleButtonGroupClasses.selected}`]: { ],
color: brand[500], }),
}, },
...theme.applyStyles('dark', { },
[`& .${toggleButtonGroupClasses.selected}`]: { MuiToggleButtonGroup: {
color: '#fff', styleOverrides: {
}, root: ({ theme }) => ({
boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, borderRadius: "10px",
}), boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
}), [`& .${toggleButtonGroupClasses.selected}`]: {
}, color: brand[500],
}, },
MuiToggleButton: { ...theme.applyStyles("dark", {
styleOverrides: { [`& .${toggleButtonGroupClasses.selected}`]: {
root: ({ theme }) => ({ color: "#fff",
padding: '12px 16px', },
textTransform: 'none', boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
borderRadius: '10px', }),
fontWeight: 500, }),
...theme.applyStyles('dark', { },
color: gray[400], },
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', MuiToggleButton: {
[`&.${toggleButtonClasses.selected}`]: { styleOverrides: {
color: brand[300], root: ({ theme }) => ({
}, padding: "12px 16px",
}), textTransform: "none",
}), borderRadius: "10px",
}, fontWeight: 500,
}, ...theme.applyStyles("dark", {
MuiCheckbox: { color: gray[400],
defaultProps: { boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
disableRipple: true, [`&.${toggleButtonClasses.selected}`]: {
icon: ( color: brand[300],
<CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} /> },
), }),
checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />, }),
indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />, },
}, },
styleOverrides: { MuiCheckbox: {
root: ({ theme }) => ({ defaultProps: {
margin: 10, disableRipple: true,
height: 16, icon: (
width: 16, <CheckBoxOutlineBlankRoundedIcon
borderRadius: 5, sx={{ color: "hsla(210, 0%, 0%, 0.0)" }}
border: '1px solid ', />
borderColor: alpha(gray[300], 0.8), ),
boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
backgroundColor: alpha(gray[100], 0.4), indeterminateIcon: (
transition: 'border-color, background-color, 120ms ease-in', <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />
'&:hover': { ),
borderColor: brand[300], },
}, styleOverrides: {
'&.Mui-focusVisible': { root: ({ theme }) => ({
outline: `3px solid ${alpha(brand[500], 0.5)}`, margin: 10,
outlineOffset: '2px', height: 16,
borderColor: brand[400], width: 16,
}, borderRadius: 5,
'&.Mui-checked': { border: "1px solid ",
color: 'white', borderColor: alpha(gray[300], 0.8),
backgroundColor: brand[500], boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
borderColor: brand[500], backgroundColor: alpha(gray[100], 0.4),
boxShadow: `none`, transition: "border-color, background-color, 120ms ease-in",
'&:hover': { "&:hover": {
backgroundColor: brand[600], borderColor: brand[300],
}, },
}, "&.Mui-focusVisible": {
...theme.applyStyles('dark', { outline: `3px solid ${alpha(brand[500], 0.5)}`,
borderColor: alpha(gray[700], 0.8), outlineOffset: "2px",
boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', borderColor: brand[400],
backgroundColor: alpha(gray[900], 0.8), },
'&:hover': { "&.Mui-checked": {
borderColor: brand[300], color: "white",
}, backgroundColor: brand[500],
'&.Mui-focusVisible': { borderColor: brand[500],
borderColor: brand[400], boxShadow: `none`,
outline: `3px solid ${alpha(brand[500], 0.5)}`, "&:hover": {
outlineOffset: '2px', backgroundColor: brand[600],
}, },
}), },
}), ...theme.applyStyles("dark", {
}, borderColor: alpha(gray[700], 0.8),
}, boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
MuiInputBase: { backgroundColor: alpha(gray[900], 0.8),
styleOverrides: { "&:hover": {
root: { borderColor: brand[300],
border: 'none', },
}, "&.Mui-focusVisible": {
input: { borderColor: brand[400],
'&::placeholder': { outline: `3px solid ${alpha(brand[500], 0.5)}`,
opacity: 0.7, outlineOffset: "2px",
color: gray[500], },
}, }),
}, }),
}, },
}, },
MuiOutlinedInput: { MuiInputBase: {
styleOverrides: { styleOverrides: {
input: { root: {
padding: 0, border: "none",
...autofillFix, },
}, input: {
root: ({ theme }) => ({ "&::placeholder": {
padding: '8px 12px', opacity: 0.7,
color: (theme.vars || theme).palette.text.primary, color: gray[500],
borderRadius: (theme.vars || theme).shape.borderRadius, },
border: `1px solid ${(theme.vars || theme).palette.divider}`, },
backgroundColor: "#272727", },
transition: 'border 120ms ease-in', },
'&:hover': { MuiOutlinedInput: {
borderColor: gray[400], styleOverrides: {
}, input: {
[`&.${outlinedInputClasses.focused}`]: { padding: 0,
outline: `3px solid ${alpha(brand[500], 0.5)}`, ...autofillFix,
borderColor: brand[400], },
}, root: ({ theme }) => ({
...theme.applyStyles('dark', { padding: "8px 12px",
'&:hover': { color: (theme.vars || theme).palette.text.primary,
borderColor: gray[500], borderRadius: (theme.vars || theme).shape.borderRadius,
}, border: `1px solid ${(theme.vars || theme).palette.divider}`,
}), // backgroundColor: "#272727",
variants: [ backgroundColor: "#D9E7ED",
{ transition: "border 120ms ease-in",
props: { "&:hover": {
size: 'small', borderColor: gray[400],
}, },
style: { [`&.${outlinedInputClasses.focused}`]: {
height: '2.25rem', outline: `3px solid ${alpha(brand[500], 0.5)}`,
}, borderColor: brand[400],
}, },
{ ...theme.applyStyles("dark", {
props: { "&:hover": {
size: 'medium', borderColor: gray[500],
}, },
style: { }),
height: '2.5rem', variants: [
}, {
}, props: {
], size: "small",
}), },
notchedOutline: { style: {
border: 'none', height: "2.25rem",
}, },
}, },
}, {
MuiInputAdornment: { props: {
styleOverrides: { size: "medium",
root: ({ theme }) => ({ },
color: (theme.vars || theme).palette.grey[500], style: {
...theme.applyStyles('dark', { height: "2.5rem",
color: (theme.vars || theme).palette.grey[400], },
}), },
}), ],
}, }),
}, notchedOutline: {
MuiFormLabel: { border: "none",
styleOverrides: { },
root: ({ theme }) => ({ },
typography: theme.typography.caption, },
marginBottom: 8, MuiInputAdornment: {
}), styleOverrides: {
}, root: ({ theme }) => ({
}, color: (theme.vars || theme).palette.grey[500],
...theme.applyStyles("dark", {
color: (theme.vars || theme).palette.grey[400],
}),
}),
},
},
MuiFormLabel: {
styleOverrides: {
root: ({ theme }) => ({
typography: theme.typography.caption,
marginBottom: 8,
}),
},
},
}; };

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

@ -21,10 +21,12 @@ export const navigationCustomizations = {
}, },
[`&.${menuItemClasses.selected}`]: { [`&.${menuItemClasses.selected}`]: {
[`&.${menuItemClasses.focusVisible}`]: { [`&.${menuItemClasses.focusVisible}`]: {
backgroundColor: alpha( // backgroundColor: alpha(
theme.palette.action.selected, // theme.palette.action.selected,
0.3 // 0.3
), // ),
backgroundColor: "transparent",
}, },
}, },
}), }),
@ -41,17 +43,17 @@ export const navigationCustomizations = {
paper: ({ theme }) => ({ paper: ({ theme }) => ({
marginTop: "4px", marginTop: "4px",
borderRadius: (theme.vars || theme).shape.borderRadius, borderRadius: (theme.vars || theme).shape.borderRadius,
border: `1px solid #272727`, border: `1px solidrgb(141, 135, 135)`,
backgroundImage: "none", backgroundImage: "none",
//background: "hsl(0, 0%, 100%)", background: "#D9E7ED",
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}`]: {
"&.Mui-selected": { "&.Mui-selected": {
backgroundColor: alpha( backgroundColor: "transparent",
theme.palette.action.selected, },
0.3 "&.Mui-selected:hover": {
), backgroundColor: "transparent",
}, },
}, },
...theme.applyStyles("dark", { ...theme.applyStyles("dark", {