theme of app changes in dashboard
This commit is contained in:
jaanvi
parent
5f9f4960b1
commit
13d1b584c2
BIN
public/Digiev.png
Normal file
BIN
public/Digiev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
public/Publica Sans Round/PublicaSansRound-Bd.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-Bd.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-BdIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-BdIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-Lt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-Lt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-LtIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-LtIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-Md.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-Md.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-MdIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-MdIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-Rg.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-Rg.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-RgIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-RgIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-ThIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-ThIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-Thin.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-Thin.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-UlLt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-UlLt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-UlLtIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-UlLtIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-XBd.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-XBd.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-XBdIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-XBdIt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-XLt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-XLt.otf
Normal file
Binary file not shown.
BIN
public/Publica Sans Round/PublicaSansRound-XLtIt.otf
Normal file
BIN
public/Publica Sans Round/PublicaSansRound-XLtIt.otf
Normal file
Binary file not shown.
BIN
public/fonts/PublicaSansRound-Md.otf
Normal file
BIN
public/fonts/PublicaSansRound-Md.otf
Normal file
Binary file not shown.
10
src/App.css
10
src/App.css
|
|
@ -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 {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default function Header() {
|
|||
// height: "84px",
|
||||
minHeight: "70px",
|
||||
maxHeight: "84px",
|
||||
backgroundColor: "#1C1C1C",
|
||||
// backgroundColor: "#1C1C1C",
|
||||
padding: { xs: "20px 12px", sm: "20px 24px" },
|
||||
display: {
|
||||
xs: "none",
|
||||
|
|
@ -59,10 +59,10 @@ export default function Header() {
|
|||
boxSizing: "border-box",
|
||||
overflowX: "hidden",
|
||||
flex: "0 0 84px",
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
zIndex: 1000,
|
||||
// position: "fixed",
|
||||
// top: "0",
|
||||
// left: "0",
|
||||
// zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
|
|
@ -102,7 +102,7 @@ export default function Header() {
|
|||
}}
|
||||
/>
|
||||
</Box> */}
|
||||
|
||||
|
||||
{/* Notification and Profile Section */}
|
||||
<Stack
|
||||
direction="row"
|
||||
|
|
@ -135,7 +135,7 @@ export default function Header() {
|
|||
/>
|
||||
|
||||
{/* Username */}
|
||||
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
||||
<Typography variant="body1">
|
||||
{user?.name || "No Adminsss"}
|
||||
</Typography>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { AppDispatch, RootState } from "../../redux/store/store";
|
|||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
|
||||
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||
return (
|
||||
<defs>
|
||||
|
|
@ -22,7 +23,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
|
|||
</defs>
|
||||
);
|
||||
}
|
||||
|
||||
const chartColor = " #111111";
|
||||
export default function LineChartCard() {
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
|
|
@ -32,7 +33,7 @@ export default function LineChartCard() {
|
|||
const { totalBookings, loading } = useSelector(
|
||||
(state: RootState) => state.dashboardReducer
|
||||
);
|
||||
|
||||
|
||||
// States for date range inputs
|
||||
const [startDateBookings, setStartDateBookings] = React.useState("");
|
||||
const [endDateBookings, setEndDateBookings] = React.useState("");
|
||||
|
|
@ -67,9 +68,7 @@ export default function LineChartCard() {
|
|||
minHeight: { xs: "360px", sm: "400px", md: "444px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
background: "#D0E1E9",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
|
|
@ -83,16 +82,15 @@ export default function LineChartCard() {
|
|||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: isXsScreen ? "column" : "row",
|
||||
color: "#F2F2F2",
|
||||
|
||||
marginBottom: isXsScreen ? 16 : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align={isXsScreen ? "center" : "left"}
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
|
|
@ -121,11 +119,9 @@ export default function LineChartCard() {
|
|||
value={startDateBookings}
|
||||
onChange={(e) => setStartDateBookings(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
backgroundColor: "#DFECF1",
|
||||
border: "1px solid rgba(87, 85, 85, 0.53)",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
|
|
@ -137,22 +133,20 @@ export default function LineChartCard() {
|
|||
value={endDateBookings}
|
||||
onChange={(e) => setEndDateBookings(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
backgroundColor: "#DFECF1",
|
||||
border: "1px solid rgba(87, 85, 85, 0.53)",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleFetchData}
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
backgroundColor: "#000000",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 20px",
|
||||
width: "117px",
|
||||
|
||||
"&:hover": { backgroundColor: "#3A94C0" },
|
||||
"&:hover": { backgroundColor: "#000000" },
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
|
|
@ -161,38 +155,35 @@ export default function LineChartCard() {
|
|||
|
||||
{/* Line Chart */}
|
||||
<Box sx={{ mt: 7.5 }}>
|
||||
<LineChart
|
||||
colors={[theme.palette.primary.main]}
|
||||
xAxis={[
|
||||
{
|
||||
scaleType: "point",
|
||||
data: chartData.map((data) => data.label),
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "totalBookings",
|
||||
showMark: false,
|
||||
curve: "linear",
|
||||
area: true,
|
||||
data: chartData.map((data) => data.value),
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
]}
|
||||
height={getChartHeight()}
|
||||
margin={getChartMargin()}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
"& .MuiAreaElement-series-totalBookings": {
|
||||
fill: "url('#totalBookings')",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient
|
||||
color={theme.palette.primary.main}
|
||||
id="totalBookings"
|
||||
/>
|
||||
</LineChart>
|
||||
<LineChart
|
||||
colors={[theme.palette.primary.main]}
|
||||
xAxis={[
|
||||
{
|
||||
scaleType: "point",
|
||||
data: chartData.map((data) => data.label),
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "totalBookings",
|
||||
showMark: false,
|
||||
curve: "linear",
|
||||
area: true,
|
||||
data: chartData.map((data) => data.value),
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
]}
|
||||
height={getChartHeight()}
|
||||
margin={getChartMargin()}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
"& .MuiAreaElement-series-totalBookings": {
|
||||
fill: "url('#totalBookings')",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient color={chartColor} id="totalBookings" />
|
||||
</LineChart>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import React, { useEffect } from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import SessionsChart from "../SessionsChart/sessionChart";
|
||||
import StatCard, { StatCardProps } from "../StatCard/statCard";
|
||||
import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
|
||||
import RoundedBarChart from "../barChartCard/barChartCard";
|
||||
import LineChartCard from "../LineChartCard/lineChartCard";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
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() {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
|
@ -22,18 +23,17 @@ export default function MainGrid() {
|
|||
error,
|
||||
} = useSelector((state: RootState) => state.dashboardReducer);
|
||||
|
||||
const staticData = {
|
||||
totalAdmins: 86,
|
||||
totalManagers: 12,
|
||||
totalUsers: 24,
|
||||
totalStations: 8,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchDashboardData());
|
||||
}, [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 = [
|
||||
{ title: "Total Admins", value: data.totalAdmins },
|
||||
|
|
@ -43,48 +43,53 @@ export default function MainGrid() {
|
|||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "1800px",
|
||||
mx: "auto",
|
||||
px: { xs: 2, sm: 1, md: 0 },
|
||||
// background: "#DFECF1",
|
||||
|
||||
}}
|
||||
>
|
||||
{/* Dashboard Header */}
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{ mb: 2, fontSize: "30px", fontWeight: "600" }}
|
||||
<AppTheme>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "1800px",
|
||||
mx: "auto",
|
||||
px: { xs: 2, sm: 1, md: 0 },
|
||||
background: (theme) => theme.palette.background.default, // #DFECF1 from theme
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Typography>
|
||||
{/* Dashboard Header */}
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h4" // Use h4 to match the "Good morning, James!" size and weight
|
||||
sx={{
|
||||
mb: 3,
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Typography>
|
||||
|
||||
{/* 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 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>
|
||||
))}
|
||||
|
||||
{/* 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>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppTheme>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
flexGrow: 1,
|
||||
// p: 1,
|
||||
justifyContent: "space-between",
|
||||
backgroundColor: "#202020",
|
||||
backgroundColor: "#000000",
|
||||
}}
|
||||
>
|
||||
<List dense>
|
||||
|
|
@ -150,7 +150,7 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
letterSpacing: "0%",
|
||||
lineHeight: "100%",
|
||||
whiteSpace: "pre",
|
||||
color: "#FAFAFA",
|
||||
color: "#FFFFFF",
|
||||
// marginTop: "5px",
|
||||
},
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@ export default function OptionsMenu({
|
|||
mt: 1.5,
|
||||
|
||||
"& .MuiList-root": {
|
||||
background: "#272727",
|
||||
background: "#D0E1E9",
|
||||
|
||||
},
|
||||
"& .MuiMenuItem-root": {
|
||||
borderBottom: "none", // Remove any divider under menu items
|
||||
|
|
@ -75,10 +76,7 @@ export default function OptionsMenu({
|
|||
>
|
||||
<MenuItem onClick={onClose}>Profile</MenuItem>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={onClose}
|
||||
sx={{ color: "#E8533B" }}
|
||||
>
|
||||
<MenuItem onClick={onClose} sx={{ color: "#E8533B" }}>
|
||||
<ListItemText
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -102,9 +102,10 @@ export default function ResourcePieChart() {
|
|||
padding: { xs: "12px", sm: "14px", md: "16px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
// "*:where([data-mui-color-scheme='dark']) &": {
|
||||
// backgroundColor: "#202020",
|
||||
// },
|
||||
background: "#D0E1E9",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
|
|
@ -113,12 +114,12 @@ export default function ResourcePieChart() {
|
|||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
// color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
lineHeight: "24px",
|
||||
color: "#FFFFFF",
|
||||
// color: "#FFFFFF",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
|
|
@ -167,7 +168,9 @@ export default function ResourcePieChart() {
|
|||
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) => (
|
||||
<Stack
|
||||
|
|
@ -195,7 +198,8 @@ export default function ResourcePieChart() {
|
|||
sm: "14px",
|
||||
md: "16px",
|
||||
},
|
||||
color: "#FFFFFF",
|
||||
// color: "#FFFFFF",
|
||||
color: "#111111",
|
||||
}}
|
||||
>
|
||||
{entry.carPort}
|
||||
|
|
|
|||
|
|
@ -30,9 +30,10 @@ export default function SessionsChart() {
|
|||
borderRadius: "16px",
|
||||
padding: { xs: "12px", sm: "16px", md: "20px" },
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
// "*:where([data-mui-color-scheme='dark']) &": {
|
||||
// backgroundColor: "#202020",
|
||||
// },
|
||||
background: "#D0E1E9",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
|
|
@ -41,14 +42,14 @@ export default function SessionsChart() {
|
|||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#F2F2F2"
|
||||
// color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
color: "#FAFAFA",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
// color: "#FAFAFA",
|
||||
marginBottom: { xs: 1, sm: 0.7, md: 1 },
|
||||
}}
|
||||
>
|
||||
Charging prices
|
||||
|
|
@ -60,7 +61,7 @@ export default function SessionsChart() {
|
|||
mt: { xs: 1, sm: 1.5, md: 2 },
|
||||
mb: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
border: "none",
|
||||
border: "1px solid rgba(87, 85, 85, 0.53)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -69,13 +70,12 @@ export default function SessionsChart() {
|
|||
onChange={handleChange}
|
||||
label="Select Station"
|
||||
sx={{
|
||||
color: "#D9D8D8",
|
||||
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
|
||||
color: "#000000",
|
||||
"& .MuiSvgIcon-root": { color: "#000000" },
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
}}
|
||||
IconComponent={ExpandMoreIcon}
|
||||
>
|
||||
|
||||
<MenuItem value="Delhi NCR EV Station">
|
||||
Delhi NCR EV Station
|
||||
</MenuItem>
|
||||
|
|
@ -115,8 +115,9 @@ export default function SessionsChart() {
|
|||
},
|
||||
borderRadius: "8px",
|
||||
p: { xs: "10px", sm: "12px", md: "14px" },
|
||||
backgroundColor: "#272727",
|
||||
color: "#D9D8D8",
|
||||
// backgroundColor: "#272727",
|
||||
// color: "#D9D8D8",
|
||||
backgroundColor: "#D9E7ED",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
|
|
@ -125,7 +126,7 @@ export default function SessionsChart() {
|
|||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
fontSize: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
|
|
@ -133,6 +134,7 @@ export default function SessionsChart() {
|
|||
},
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
marginBottom: "4px",
|
||||
color: "#111111",
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
|
|
@ -141,7 +143,6 @@ export default function SessionsChart() {
|
|||
<Box display="flex" gap={1} alignItems="center">
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
color="#FFFFFF"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const Drawer = styled(MuiDrawer)({
|
|||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
boxSizing: "border-box",
|
||||
|
||||
|
||||
[`& .${drawerClasses.paper}`]: {
|
||||
width: drawerWidth,
|
||||
boxSizing: "border-box",
|
||||
|
|
@ -52,9 +52,11 @@ export default function SideMenu() {
|
|||
transition: "all 0.5s ease",
|
||||
},
|
||||
[`& .${drawerClasses.paper}`]: {
|
||||
backgroundColor: "background.paper",
|
||||
backgroundColor: "#000000",
|
||||
width: open ? 250 : 80,
|
||||
transition: "all 0.5s ease",
|
||||
borderTopRightRadius: 16,
|
||||
borderBottomRightRadius: 16,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -68,15 +70,24 @@ export default function SideMenu() {
|
|||
}}
|
||||
>
|
||||
<img
|
||||
src="/evLogo.png"
|
||||
src={open ? "/evLogo.png" : "/Digiev.png"}
|
||||
alt="Logo"
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
width: open ? "120px" : "60px", // Adjust width depending on open state
|
||||
width: open ? "120px" : "60px",
|
||||
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
|
||||
alt="Logo"
|
||||
src="/evLogo.png"
|
||||
|
|
@ -127,19 +138,24 @@ export default function SideMenu() {
|
|||
<MenuContent hidden={open} />
|
||||
</Drawer>
|
||||
<Button
|
||||
|
||||
onClick={() => setOpen(!open)}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 20,
|
||||
left: open ? 250 : 80,
|
||||
top: 50,
|
||||
left: open ? 235 : 65, // Slight overlap on edge
|
||||
minWidth: 0,
|
||||
width: 32,
|
||||
height: 35,
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
|
||||
backgroundColor: "#FFFFFF",
|
||||
color: "#000000",
|
||||
zIndex: 1301,
|
||||
// boxShadow: 2,
|
||||
boxShadow: 3,
|
||||
border: "1px solid #e0e0e0",
|
||||
transition: "all 0.3s ease-in-out",
|
||||
"&:hover": {
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{open ? (
|
||||
|
|
|
|||
|
|
@ -16,91 +16,88 @@ export default function StatCard({ title, value }: StatCardProps) {
|
|||
const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
padding: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
md: "10px"
|
||||
},
|
||||
borderRadius: "12px",
|
||||
border: "none",
|
||||
gap: "24px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
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
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="body1"
|
||||
color="#D9D8D8"
|
||||
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>
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
padding: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
md: "10px",
|
||||
},
|
||||
borderRadius: "12px",
|
||||
border: "none",
|
||||
gap: "24px",
|
||||
background: "#D0E1E9",
|
||||
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
padding: {
|
||||
xs: "8px",
|
||||
sm: "12px",
|
||||
md: "16px",
|
||||
},
|
||||
"&:last-child": {
|
||||
paddingBottom: {
|
||||
xs: "8px",
|
||||
sm: "12px",
|
||||
md: "16px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
|
||||
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
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ import { axisClasses } from "@mui/x-charts/ChartsAxis";
|
|||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
|
||||
export default function RoundedBarChart() {
|
||||
const theme = useTheme();
|
||||
|
|
@ -33,11 +33,7 @@ export default function RoundedBarChart() {
|
|||
|
||||
// Handle fetching data with date filters
|
||||
const handleFetchData = () => {
|
||||
|
||||
dispatch(
|
||||
fetchDashboardData({ startDateStations, endDateStations })
|
||||
);
|
||||
|
||||
dispatch(fetchDashboardData({ startDateStations, endDateStations }));
|
||||
};
|
||||
|
||||
// Responsive chart settings
|
||||
|
|
@ -53,7 +49,6 @@ export default function RoundedBarChart() {
|
|||
{
|
||||
dataKey: "name",
|
||||
scaleType: "band" as const,
|
||||
|
||||
},
|
||||
],
|
||||
sx: {
|
||||
|
|
@ -102,9 +97,10 @@ export default function RoundedBarChart() {
|
|||
minHeight: { xs: "360px", sm: "400px", md: "444px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
// "*:where([data-mui-color-scheme='dark']) &": {
|
||||
// backgroundColor: "#202020",
|
||||
// },
|
||||
background: "#D0E1E9",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
|
|
@ -123,10 +119,11 @@ export default function RoundedBarChart() {
|
|||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="#F2F2F2"
|
||||
// color="#F2F2F2"
|
||||
color="#000000"
|
||||
align={isXsScreen ? "center" : "left"}
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
|
|
@ -153,11 +150,13 @@ export default function RoundedBarChart() {
|
|||
value={startDateStations}
|
||||
onChange={(e) => setStartDateStations(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
// backgroundColor: "#202020",
|
||||
backgroundColor: "#D9E7ED",
|
||||
border: "1px solid rgba(87, 85, 85, 0.53)",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
// "& .MuiInputBase-input": {
|
||||
// color: "#F2F2F2",
|
||||
// },
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
|
|
@ -171,22 +170,25 @@ export default function RoundedBarChart() {
|
|||
value={endDateStations}
|
||||
onChange={(e) => setEndDateStations(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
// backgroundColor: "#202020",
|
||||
backgroundColor: "#D9E7ED",
|
||||
border: "1px solid rgba(87, 85, 85, 0.53)",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
|
||||
// "& .MuiInputBase-input": {
|
||||
// color: "#F2F2F2",
|
||||
// },
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleFetchData}
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
// backgroundColor: "#52ACDF",
|
||||
backgroundColor: "#000000",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
width: "117px",
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
// "&:hover": { backgroundColor: "#439BC1" },
|
||||
"&:hover": { backgroundColor: "#000000" },
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
|
|
|
|||
|
|
@ -22,3 +22,11 @@ code {
|
|||
rx: 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;
|
||||
}
|
||||
|
|
@ -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 { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
|
||||
import type { ThemeOptions } from "@mui/material/styles";
|
||||
|
|
@ -21,26 +85,49 @@ export default function AppTheme(props: AppThemeProps) {
|
|||
? {}
|
||||
: createTheme({
|
||||
palette: {
|
||||
mode: "dark",
|
||||
mode: "light", // Set to light mode to match the UI
|
||||
background: {
|
||||
// default: "#ECF4FA",
|
||||
default: "#111111",
|
||||
paper: "#1e1e1e",
|
||||
default: "#DFECF1", // Matches the background in the image
|
||||
paper: "#D0E1E9", // Dark cards
|
||||
},
|
||||
text: {
|
||||
primary: "#ffffff",
|
||||
secondary: "#b0b0b0",
|
||||
primary: "#000000", // Already matches the image
|
||||
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: {
|
||||
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: {
|
||||
colorSchemeSelector: "data-mui-color-scheme",
|
||||
cssVarPrefix: "template",
|
||||
},
|
||||
shadows,
|
||||
shape,
|
||||
shape: {
|
||||
borderRadius: 8, // Matches the rounded corners in the image
|
||||
},
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
|
|
|
|||
|
|
@ -8,229 +8,230 @@ import { gray, red, green } from '../themePrimitives';
|
|||
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export const dataDisplayCustomizations = {
|
||||
MuiList: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
// padding: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
MuiList: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
// padding: '8px',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
|
||||
gap: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItem: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
width: '1rem',
|
||||
height: '1rem',
|
||||
color: (theme.vars || theme).palette.text.secondary,
|
||||
},
|
||||
[`& .${typographyClasses.root}`]: {
|
||||
fontWeight: 500,
|
||||
fontSize:"16px"
|
||||
},
|
||||
[`& .${buttonBaseClasses.root}`]: {
|
||||
display: 'flex',
|
||||
// gap: 8,
|
||||
// padding: '2px 8px',
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
opacity: 0.7,
|
||||
'&.Mui-selected': {
|
||||
opacity: 1,
|
||||
backgroundColor: alpha(theme.palette.action.selected, 0.3),
|
||||
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
},
|
||||
'&:focus-visible': {
|
||||
backgroundColor: alpha(theme.palette.action.selected, 0.3),
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(theme.palette.action.selected, 0.5),
|
||||
},
|
||||
},
|
||||
'&:focus-visible': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListItemText: {
|
||||
styleOverrides: {
|
||||
primary: ({ theme }) => ({
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
lineHeight: theme.typography.body2.lineHeight,
|
||||
}),
|
||||
secondary: ({ theme }) => ({
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
lineHeight: theme.typography.caption.lineHeight,
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListSubheader: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundColor: 'transparent',
|
||||
// padding: '4px 8px',
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
lineHeight: theme.typography.caption.lineHeight,
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListItemIcon: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
defaultProps: {
|
||||
size: 'small',
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
border: '1px solid',
|
||||
borderRadius: '999px',
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
color: 'default',
|
||||
},
|
||||
style: {
|
||||
borderColor: gray[200],
|
||||
backgroundColor: gray[100],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: gray[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: gray[500],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: gray[700],
|
||||
backgroundColor: gray[800],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: gray[300],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: gray[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'success',
|
||||
},
|
||||
style: {
|
||||
borderColor: green[200],
|
||||
backgroundColor: green[50],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: green[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: green[500],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: green[800],
|
||||
backgroundColor: green[900],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: green[300],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: green[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'error',
|
||||
},
|
||||
style: {
|
||||
borderColor: red[100],
|
||||
backgroundColor: red[50],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: red[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: red[500],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: red[800],
|
||||
backgroundColor: red[900],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: red[200],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: red[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: { size: 'small' },
|
||||
style: {
|
||||
maxHeight: 20,
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
props: { size: 'medium' },
|
||||
style: {
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiTablePagination: {
|
||||
styleOverrides: {
|
||||
actions: {
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
marginRight: 6,
|
||||
[`& .${iconButtonClasses.root}`]: {
|
||||
minWidth: 0,
|
||||
width: 36,
|
||||
height: 36,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiIcon: {
|
||||
defaultProps: {
|
||||
fontSize: 'small',
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
fontSize: 'small',
|
||||
},
|
||||
style: {
|
||||
fontSize: '1rem',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
gap: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItem: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
width: "3rem",
|
||||
height: "2rem",
|
||||
color: (theme.vars || theme).palette.text.secondary,
|
||||
},
|
||||
[`& .${typographyClasses.root}`]: {
|
||||
fontWeight: 500,
|
||||
fontSize: "16px",
|
||||
},
|
||||
[`& .${buttonBaseClasses.root}`]: {
|
||||
display: "flex",
|
||||
// gap: 8,
|
||||
// padding: '2px 8px',
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
opacity: 0.7,
|
||||
"&.Mui-selected": {
|
||||
opacity: 2,
|
||||
// backgroundColor: "rgb(66, 64, 64)",
|
||||
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
//color: (theme.vars || theme).palette.text.primary,
|
||||
color: " #FFFFFF",
|
||||
},
|
||||
"&:focus-visible": {
|
||||
// backgroundColor: alpha(theme.palette.action.selected, 0.3),
|
||||
},
|
||||
"&:hover": {
|
||||
//backgroundColor: alpha(theme.palette.action.selected, 0.5),
|
||||
},
|
||||
},
|
||||
// "&:focus-visible": {
|
||||
// backgroundColor: "transparent",
|
||||
// },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListItemText: {
|
||||
styleOverrides: {
|
||||
primary: ({ theme }) => ({
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
lineHeight: theme.typography.body2.lineHeight,
|
||||
}),
|
||||
secondary: ({ theme }) => ({
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
lineHeight: theme.typography.caption.lineHeight,
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListSubheader: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundColor: "transparent",
|
||||
// padding: '4px 8px',
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
lineHeight: theme.typography.caption.lineHeight,
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiListItemIcon: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
defaultProps: {
|
||||
size: "small",
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
border: "1px solid",
|
||||
borderRadius: "999px",
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
color: "default",
|
||||
},
|
||||
style: {
|
||||
borderColor: gray[200],
|
||||
backgroundColor: gray[100],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: gray[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: gray[500],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
borderColor: gray[700],
|
||||
backgroundColor: gray[800],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: gray[300],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: gray[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "success",
|
||||
},
|
||||
style: {
|
||||
borderColor: green[200],
|
||||
backgroundColor: green[50],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: green[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: green[500],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
borderColor: green[800],
|
||||
backgroundColor: green[900],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: green[300],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: green[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "error",
|
||||
},
|
||||
style: {
|
||||
borderColor: red[100],
|
||||
backgroundColor: red[50],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: red[500],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: red[500],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
borderColor: red[800],
|
||||
backgroundColor: red[900],
|
||||
[`& .${chipClasses.label}`]: {
|
||||
color: red[200],
|
||||
},
|
||||
[`& .${chipClasses.icon}`]: {
|
||||
color: red[300],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: { size: "small" },
|
||||
style: {
|
||||
maxHeight: 20,
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
props: { size: "medium" },
|
||||
style: {
|
||||
[`& .${chipClasses.label}`]: {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiTablePagination: {
|
||||
styleOverrides: {
|
||||
actions: {
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
marginRight: 6,
|
||||
[`& .${iconButtonClasses.root}`]: {
|
||||
minWidth: 0,
|
||||
width: 36,
|
||||
height: 36,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiIcon: {
|
||||
defaultProps: {
|
||||
fontSize: "small",
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
fontSize: "small",
|
||||
},
|
||||
style: {
|
||||
fontSize: "1rem",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
|
|||
MuiListItem: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
width: '1rem',
|
||||
height: '1rem',
|
||||
|
|
@ -41,7 +42,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
|
|||
backgroundColor: alpha(theme.palette.action.selected, 0.3),
|
||||
|
||||
[`& .${svgIconClasses.root}`]: {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
},
|
||||
'&:focus-visible': {
|
||||
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),
|
||||
},
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,435 +12,449 @@ import {autofillFix} from './autoFill';
|
|||
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export const inputsCustomizations = {
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableTouchRipple: true,
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
boxSizing: 'border-box',
|
||||
transition: 'all 100ms ease-in',
|
||||
'&:focus-visible': {
|
||||
outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
textTransform: 'none',
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: 'small',
|
||||
},
|
||||
style: {
|
||||
height: '2.25rem',
|
||||
padding: '8px 12px',
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: 'medium',
|
||||
},
|
||||
style: {
|
||||
height: '2.5rem', // 40px
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'primary',
|
||||
variant: 'contained',
|
||||
},
|
||||
style: {
|
||||
color: 'white',
|
||||
backgroundColor: gray[900],
|
||||
backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
|
||||
boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
|
||||
border: `1px solid ${gray[700]}`,
|
||||
'&:hover': {
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: gray[700],
|
||||
boxShadow: 'none',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[800],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
color: 'black',
|
||||
backgroundColor: gray[50],
|
||||
backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
|
||||
boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)',
|
||||
border: `1px solid ${gray[50]}`,
|
||||
'&:hover': {
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: gray[300],
|
||||
boxShadow: 'none',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[400],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'secondary',
|
||||
variant: 'contained',
|
||||
},
|
||||
style: {
|
||||
color: 'white',
|
||||
backgroundColor: brand[300],
|
||||
backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
|
||||
boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
|
||||
border: `1px solid ${brand[500]}`,
|
||||
'&:hover': {
|
||||
backgroundColor: brand[700],
|
||||
boxShadow: 'none',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: brand[700],
|
||||
backgroundImage: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
variant: 'outlined',
|
||||
},
|
||||
style: {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
border: '1px solid',
|
||||
borderColor: gray[200],
|
||||
backgroundColor: alpha(gray[50], 0.3),
|
||||
'&:hover': {
|
||||
backgroundColor: gray[100],
|
||||
borderColor: gray[300],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
'&:hover': {
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'secondary',
|
||||
variant: 'outlined',
|
||||
},
|
||||
style: {
|
||||
color: brand[700],
|
||||
border: '1px solid',
|
||||
borderColor: brand[200],
|
||||
backgroundColor: brand[50],
|
||||
'&:hover': {
|
||||
backgroundColor: brand[100],
|
||||
borderColor: brand[400],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(brand[200], 0.7),
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
color: brand[50],
|
||||
border: '1px solid',
|
||||
borderColor: brand[900],
|
||||
backgroundColor: alpha(brand[900], 0.3),
|
||||
'&:hover': {
|
||||
borderColor: brand[700],
|
||||
backgroundColor: alpha(brand[900], 0.6),
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(brand[900], 0.5),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
variant: 'text',
|
||||
},
|
||||
style: {
|
||||
color: gray[600],
|
||||
'&:hover': {
|
||||
backgroundColor: gray[100],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
color: gray[50],
|
||||
'&:hover': {
|
||||
backgroundColor: gray[700],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(gray[700], 0.7),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: 'secondary',
|
||||
variant: 'text',
|
||||
},
|
||||
style: {
|
||||
color: brand[700],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[100], 0.5),
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(brand[200], 0.7),
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
color: brand[100],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[900], 0.5),
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: alpha(brand[900], 0.3),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
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 ',
|
||||
borderColor: gray[200],
|
||||
backgroundColor: alpha(gray[50], 0.3),
|
||||
'&:hover': {
|
||||
backgroundColor: gray[100],
|
||||
borderColor: gray[300],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
'&:hover': {
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: 'small',
|
||||
},
|
||||
style: {
|
||||
width: '2.25rem',
|
||||
height: '2.25rem',
|
||||
padding: '0.25rem',
|
||||
[`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: 'medium',
|
||||
},
|
||||
style: {
|
||||
width: '2.5rem',
|
||||
height: '2.5rem',
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiToggleButtonGroup: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
borderRadius: '10px',
|
||||
boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
|
||||
[`& .${toggleButtonGroupClasses.selected}`]: {
|
||||
color: brand[500],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
[`& .${toggleButtonGroupClasses.selected}`]: {
|
||||
color: '#fff',
|
||||
},
|
||||
boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiToggleButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
padding: '12px 16px',
|
||||
textTransform: 'none',
|
||||
borderRadius: '10px',
|
||||
fontWeight: 500,
|
||||
...theme.applyStyles('dark', {
|
||||
color: gray[400],
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
|
||||
[`&.${toggleButtonClasses.selected}`]: {
|
||||
color: brand[300],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
icon: (
|
||||
<CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
|
||||
),
|
||||
checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
|
||||
indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
margin: 10,
|
||||
height: 16,
|
||||
width: 16,
|
||||
borderRadius: 5,
|
||||
border: '1px solid ',
|
||||
borderColor: alpha(gray[300], 0.8),
|
||||
boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
|
||||
backgroundColor: alpha(gray[100], 0.4),
|
||||
transition: 'border-color, background-color, 120ms ease-in',
|
||||
'&:hover': {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
'&.Mui-focusVisible': {
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
outlineOffset: '2px',
|
||||
borderColor: brand[400],
|
||||
},
|
||||
'&.Mui-checked': {
|
||||
color: 'white',
|
||||
backgroundColor: brand[500],
|
||||
borderColor: brand[500],
|
||||
boxShadow: `none`,
|
||||
'&:hover': {
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: alpha(gray[700], 0.8),
|
||||
boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
|
||||
backgroundColor: alpha(gray[900], 0.8),
|
||||
'&:hover': {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
'&.Mui-focusVisible': {
|
||||
borderColor: brand[400],
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiInputBase: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
border: 'none',
|
||||
},
|
||||
input: {
|
||||
'&::placeholder': {
|
||||
opacity: 0.7,
|
||||
color: gray[500],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
input: {
|
||||
padding: 0,
|
||||
...autofillFix,
|
||||
},
|
||||
root: ({ theme }) => ({
|
||||
padding: '8px 12px',
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
backgroundColor: "#272727",
|
||||
transition: 'border 120ms ease-in',
|
||||
'&:hover': {
|
||||
borderColor: gray[400],
|
||||
},
|
||||
[`&.${outlinedInputClasses.focused}`]: {
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
borderColor: brand[400],
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
'&:hover': {
|
||||
borderColor: gray[500],
|
||||
},
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: 'small',
|
||||
},
|
||||
style: {
|
||||
height: '2.25rem',
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: 'medium',
|
||||
},
|
||||
style: {
|
||||
height: '2.5rem',
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
notchedOutline: {
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
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,
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableTouchRipple: true,
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
boxSizing: "border-box",
|
||||
transition: "all 100ms ease-in",
|
||||
"&:focus-visible": {
|
||||
outline: `3px solid ${alpha(
|
||||
theme.palette.primary.main,
|
||||
0.5
|
||||
)}`,
|
||||
outlineOffset: "2px",
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
boxShadow: "none",
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
textTransform: "none",
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
height: "2.25rem",
|
||||
padding: "8px 12px",
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: "medium",
|
||||
},
|
||||
style: {
|
||||
height: "2.5rem", // 40px
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "primary",
|
||||
variant: "contained",
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
backgroundColor: gray[900],
|
||||
backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
|
||||
boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
|
||||
border: `1px solid ${gray[700]}`,
|
||||
"&:hover": {
|
||||
backgroundImage: "none",
|
||||
backgroundColor: gray[700],
|
||||
boxShadow: "none",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[800],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
color: "black",
|
||||
backgroundColor: gray[50],
|
||||
backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
|
||||
boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)",
|
||||
border: `1px solid ${gray[50]}`,
|
||||
"&:hover": {
|
||||
backgroundImage: "none",
|
||||
backgroundColor: gray[300],
|
||||
boxShadow: "none",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[400],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "secondary",
|
||||
variant: "contained",
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
backgroundColor: brand[300],
|
||||
backgroundImage: `linear-gradient(to bottom, ${alpha(
|
||||
brand[400],
|
||||
0.8
|
||||
)}, ${brand[500]})`,
|
||||
boxShadow: `inset 0 2px 0 ${alpha(
|
||||
brand[200],
|
||||
0.2
|
||||
)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
|
||||
border: `1px solid ${brand[500]}`,
|
||||
"&:hover": {
|
||||
backgroundColor: brand[700],
|
||||
boxShadow: "none",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: brand[700],
|
||||
backgroundImage: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
variant: "outlined",
|
||||
},
|
||||
style: {
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
border: "1px solid",
|
||||
borderColor: gray[200],
|
||||
backgroundColor: alpha(gray[50], 0.3),
|
||||
"&:hover": {
|
||||
backgroundColor: gray[100],
|
||||
borderColor: gray[300],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
"&:hover": {
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "secondary",
|
||||
variant: "outlined",
|
||||
},
|
||||
style: {
|
||||
color: brand[700],
|
||||
border: "1px solid",
|
||||
borderColor: brand[200],
|
||||
backgroundColor: brand[50],
|
||||
"&:hover": {
|
||||
backgroundColor: brand[100],
|
||||
borderColor: brand[400],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: alpha(brand[200], 0.7),
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
color: brand[50],
|
||||
border: "1px solid",
|
||||
borderColor: brand[900],
|
||||
backgroundColor: alpha(brand[900], 0.3),
|
||||
"&:hover": {
|
||||
borderColor: brand[700],
|
||||
backgroundColor: alpha(brand[900], 0.6),
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: alpha(brand[900], 0.5),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
variant: "text",
|
||||
},
|
||||
style: {
|
||||
color: gray[600],
|
||||
"&:hover": {
|
||||
backgroundColor: gray[100],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
color: gray[50],
|
||||
"&:hover": {
|
||||
backgroundColor: gray[700],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: alpha(gray[700], 0.7),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
color: "secondary",
|
||||
variant: "text",
|
||||
},
|
||||
style: {
|
||||
color: brand[700],
|
||||
"&:hover": {
|
||||
backgroundColor: alpha(brand[100], 0.5),
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: alpha(brand[200], 0.7),
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
color: brand[100],
|
||||
"&:hover": {
|
||||
backgroundColor: alpha(brand[900], 0.5),
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: alpha(brand[900], 0.3),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
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 ",
|
||||
borderColor: gray[200],
|
||||
backgroundColor: alpha(gray[50], 0.3),
|
||||
"&:hover": {
|
||||
backgroundColor: gray[100],
|
||||
borderColor: gray[300],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[200],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: gray[800],
|
||||
borderColor: gray[700],
|
||||
"&:hover": {
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[600],
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: gray[900],
|
||||
},
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
width: "2.25rem",
|
||||
height: "2.25rem",
|
||||
padding: "0.25rem",
|
||||
[`& .${svgIconClasses.root}`]: { fontSize: "1rem" },
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: "medium",
|
||||
},
|
||||
style: {
|
||||
width: "2.5rem",
|
||||
height: "2.5rem",
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiToggleButtonGroup: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
borderRadius: "10px",
|
||||
boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
|
||||
[`& .${toggleButtonGroupClasses.selected}`]: {
|
||||
color: brand[500],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
[`& .${toggleButtonGroupClasses.selected}`]: {
|
||||
color: "#fff",
|
||||
},
|
||||
boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiToggleButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
padding: "12px 16px",
|
||||
textTransform: "none",
|
||||
borderRadius: "10px",
|
||||
fontWeight: 500,
|
||||
...theme.applyStyles("dark", {
|
||||
color: gray[400],
|
||||
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
|
||||
[`&.${toggleButtonClasses.selected}`]: {
|
||||
color: brand[300],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiCheckbox: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
icon: (
|
||||
<CheckBoxOutlineBlankRoundedIcon
|
||||
sx={{ color: "hsla(210, 0%, 0%, 0.0)" }}
|
||||
/>
|
||||
),
|
||||
checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
|
||||
indeterminateIcon: (
|
||||
<RemoveRoundedIcon sx={{ height: 14, width: 14 }} />
|
||||
),
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
margin: 10,
|
||||
height: 16,
|
||||
width: 16,
|
||||
borderRadius: 5,
|
||||
border: "1px solid ",
|
||||
borderColor: alpha(gray[300], 0.8),
|
||||
boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
|
||||
backgroundColor: alpha(gray[100], 0.4),
|
||||
transition: "border-color, background-color, 120ms ease-in",
|
||||
"&:hover": {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
outlineOffset: "2px",
|
||||
borderColor: brand[400],
|
||||
},
|
||||
"&.Mui-checked": {
|
||||
color: "white",
|
||||
backgroundColor: brand[500],
|
||||
borderColor: brand[500],
|
||||
boxShadow: `none`,
|
||||
"&:hover": {
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
borderColor: alpha(gray[700], 0.8),
|
||||
boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
|
||||
backgroundColor: alpha(gray[900], 0.8),
|
||||
"&:hover": {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
"&.Mui-focusVisible": {
|
||||
borderColor: brand[400],
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
outlineOffset: "2px",
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiInputBase: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
border: "none",
|
||||
},
|
||||
input: {
|
||||
"&::placeholder": {
|
||||
opacity: 0.7,
|
||||
color: gray[500],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
input: {
|
||||
padding: 0,
|
||||
...autofillFix,
|
||||
},
|
||||
root: ({ theme }) => ({
|
||||
padding: "8px 12px",
|
||||
color: (theme.vars || theme).palette.text.primary,
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
||||
// backgroundColor: "#272727",
|
||||
backgroundColor: "#D9E7ED",
|
||||
transition: "border 120ms ease-in",
|
||||
"&:hover": {
|
||||
borderColor: gray[400],
|
||||
},
|
||||
[`&.${outlinedInputClasses.focused}`]: {
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
borderColor: brand[400],
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
"&:hover": {
|
||||
borderColor: gray[500],
|
||||
},
|
||||
}),
|
||||
variants: [
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
height: "2.25rem",
|
||||
},
|
||||
},
|
||||
{
|
||||
props: {
|
||||
size: "medium",
|
||||
},
|
||||
style: {
|
||||
height: "2.5rem",
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
notchedOutline: {
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
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,
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@ export const navigationCustomizations = {
|
|||
},
|
||||
[`&.${menuItemClasses.selected}`]: {
|
||||
[`&.${menuItemClasses.focusVisible}`]: {
|
||||
backgroundColor: alpha(
|
||||
theme.palette.action.selected,
|
||||
0.3
|
||||
),
|
||||
// backgroundColor: alpha(
|
||||
// theme.palette.action.selected,
|
||||
// 0.3
|
||||
// ),
|
||||
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
|
@ -41,17 +43,17 @@ export const navigationCustomizations = {
|
|||
paper: ({ theme }) => ({
|
||||
marginTop: "4px",
|
||||
borderRadius: (theme.vars || theme).shape.borderRadius,
|
||||
border: `1px solid #272727`,
|
||||
border: `1px solidrgb(141, 135, 135)`,
|
||||
backgroundImage: "none",
|
||||
//background: "hsl(0, 0%, 100%)",
|
||||
background: "#D9E7ED",
|
||||
boxShadow:
|
||||
"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
|
||||
[`& .${buttonBaseClasses.root}`]: {
|
||||
"&.Mui-selected": {
|
||||
backgroundColor: alpha(
|
||||
theme.palette.action.selected,
|
||||
0.3
|
||||
),
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"&.Mui-selected:hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
|
|
|
|||
Loading…
Reference in a new issue