ManagerDashboard Ui changes and fontFamily updation
This commit is contained in:
jaanvi
parent
156925abfa
commit
e717d6c58c
69
src/App.css
69
src/App.css
|
|
@ -1,57 +1,50 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevents scrolling */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap"); */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevents scrolling */
|
||||
font-family: "Fredoka";
|
||||
}
|
||||
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: '"Publica Sans Round Medium", sans-serif';
|
||||
|
||||
src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
|
||||
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { useDispatch } from "react-redux";
|
|||
import { addStationDetails } from "../../redux/slices/managerStationSlice"; // Updated import
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { CustomIconButton } from "../AddUserModal/styled.css";
|
||||
import { autofillFix } from "../../shared-theme/customizations/autoFill";
|
||||
|
||||
const AddManagerStationModal = ({ open, handleClose }: any) => {
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -110,6 +111,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
|
|||
fullWidth
|
||||
error={!!errors.connectorType}
|
||||
helperText={errors.connectorType?.message}
|
||||
sx={{ ...autofillFix }}
|
||||
/>
|
||||
|
||||
{/* Power */}
|
||||
|
|
@ -130,6 +132,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
|
|||
fullWidth
|
||||
error={!!errors.power}
|
||||
helperText={errors.power?.message}
|
||||
sx={{ ...autofillFix }}
|
||||
/>
|
||||
|
||||
{/* Price */}
|
||||
|
|
@ -154,6 +157,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
|
|||
fullWidth
|
||||
error={!!errors.price}
|
||||
helperText={errors.price?.message}
|
||||
sx={{ ...autofillFix }}
|
||||
/>
|
||||
|
||||
{/* Availability Switch */}
|
||||
|
|
|
|||
|
|
@ -126,10 +126,10 @@ export default function AppNavbar() {
|
|||
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
|
||||
}}
|
||||
>
|
||||
<NotificationsNoneIcon
|
||||
{/* <NotificationsNoneIcon
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={toggleNotifications}
|
||||
/>
|
||||
/> */}
|
||||
<Avatar
|
||||
alt="User Avatar"
|
||||
src="/avatar.png"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from "@mui/icons-material/AutoAwesomeRounded";
|
|||
|
||||
export default function CardAlert() {
|
||||
return (
|
||||
<Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
|
||||
<Card variant="outlined" sx={{ m: 1.5, p: 1.5, background: "#DFECF1" }}>
|
||||
<CardContent>
|
||||
<AutoAwesomeRoundedIcon fontSize="small" />
|
||||
<Typography gutterBottom sx={{ fontWeight: 600 }}>
|
||||
|
|
@ -15,11 +15,22 @@ export default function CardAlert() {
|
|||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 2, color: "text.secondary" }}
|
||||
sx={{
|
||||
mb: 2,
|
||||
color: "text.secondary",
|
||||
}}
|
||||
>
|
||||
Enjoy 10% off when renewing your plan today.
|
||||
</Typography>
|
||||
<Button variant="contained" size="small" fullWidth>
|
||||
<Button
|
||||
sx={{
|
||||
background: "#000000",
|
||||
"&:hover": { backgroundColor: "#454545" },
|
||||
color: "#DFECF1",
|
||||
}}
|
||||
size="small"
|
||||
fullWidth
|
||||
>
|
||||
Get the discount
|
||||
</Button>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
|||
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
color: "#333333",
|
||||
transition: "background-color 0.2s ease",
|
||||
fontWeight:500,
|
||||
// Make the "Action" body cell sticky
|
||||
"&.action-cell": {
|
||||
position: "sticky",
|
||||
|
|
@ -497,7 +498,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
backgroundColor: "#000000",
|
||||
color: "#FFFFFF",
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
fontSize: "16px",
|
||||
padding: "8px 16px",
|
||||
borderRadius: "8px",
|
||||
textTransform: "none",
|
||||
|
|
@ -583,6 +584,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
sx={{
|
||||
color: "#6B7280",
|
||||
fontSize: "16px",
|
||||
|
||||
}}
|
||||
>
|
||||
{getEmptyMessage(tableType)}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default function LineChartCard() {
|
|||
align={isXsScreen ? "center" : "left"}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
width: isXsScreen ? "100%" : "auto",
|
||||
|
|
|
|||
|
|
@ -1,120 +1,4 @@
|
|||
// 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 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 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>();
|
||||
// const {
|
||||
// totalAdmins,
|
||||
// totalManagers,
|
||||
// totalUsers,
|
||||
// totalStations,
|
||||
|
||||
// } = useSelector((state: RootState) => state.dashboardReducer);
|
||||
// const userType = useSelector(
|
||||
// (state: RootState) => state.profileReducer.user?.userType
|
||||
// );
|
||||
// useEffect(() => {
|
||||
// dispatch(fetchDashboardData());
|
||||
// }, [dispatch]);
|
||||
|
||||
// const data = {
|
||||
// totalAdmins: totalAdmins ?? 86,
|
||||
// totalManagers: totalManagers ?? 12,
|
||||
// totalUsers: totalUsers ?? 24,
|
||||
// totalStations: totalStations ?? 8,
|
||||
// };
|
||||
|
||||
// const getStatCards = () => {
|
||||
// switch (userType) {
|
||||
// case "superadmin":
|
||||
// return [
|
||||
// { title: "Total Admins", value: data.totalAdmins },
|
||||
// { title: "Total Managers", value: data.totalManagers },
|
||||
// { title: "Total Users", value: data.totalUsers },
|
||||
// { title: "Total Stations", value: data.totalStations },
|
||||
// ];
|
||||
// case "admin":
|
||||
// return [
|
||||
// { title: "Total Managers", value: data.totalManagers },
|
||||
// { title: "Total Users", value: data.totalUsers },
|
||||
// { title: "Total Stations", value: data.totalStations },
|
||||
// ];
|
||||
// case "manager":
|
||||
// return [
|
||||
// { title: "Total Users", value: data.totalUsers },
|
||||
|
||||
// ];
|
||||
|
||||
// default:
|
||||
// return [];
|
||||
// }
|
||||
// };
|
||||
// return (
|
||||
// <AppTheme>
|
||||
// <Box
|
||||
// sx={{
|
||||
// width: "100%",
|
||||
// maxWidth: "1800px",
|
||||
// mx: "auto",
|
||||
// px: { xs: 2, sm: 1, md: 0 },
|
||||
// background: (theme) => theme.palette.background.default,
|
||||
// }}
|
||||
// >
|
||||
// {/* Dashboard Header */}
|
||||
// <Typography
|
||||
// component="h2"
|
||||
// variant="h4"
|
||||
// sx={{
|
||||
// mb: 3,
|
||||
// }}
|
||||
// >
|
||||
// Dashboard
|
||||
// </Typography>
|
||||
|
||||
// {/* Grid Layout */}
|
||||
// <Grid container spacing={3} columns={12}>
|
||||
// {/* Statistic Cards */}
|
||||
// {getStatCards().map((card, index) => (
|
||||
// <Grid key={index} item xs={12} sm={6} md={3} lg={3}>
|
||||
// <StatCard {...card} />
|
||||
// </Grid>
|
||||
// ))}
|
||||
|
||||
// {/* Charts */}
|
||||
// {userType !== "user" && (
|
||||
// <>
|
||||
// <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>
|
||||
// </AppTheme>
|
||||
// );
|
||||
// }
|
||||
import React, { useEffect } from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ import { useDispatch, useSelector } from "react-redux";
|
|||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
import AppTheme from "../../shared-theme/AppTheme";
|
||||
import StatCard from "../StatCard/statCard";
|
||||
import StaticLineChartCard from "../StaticLineChartCard/staticLineChartCard";
|
||||
import StaticResourcePieChart from "../StaticResourcePieChart/staticResourceChart";
|
||||
import UtilizationGaugeChart from "../UtilizationGaugeChart/utilizationGaugeChart";
|
||||
|
||||
export default function ManagerGrid() {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
|
@ -53,23 +56,32 @@ export default function ManagerGrid() {
|
|||
sx={{ mb: 1 }}
|
||||
>
|
||||
{statCards.map((card, index) => (
|
||||
<Grid key={index} item xs={12} sm={8} md={4} lg={3}>
|
||||
<Grid key={index} item xs={12} sm={12} md={6} lg={6}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
{/* Add the Utilization Chart */}
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<UtilizationGaugeChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Charts */}
|
||||
<Grid container spacing={3} mt={1}>
|
||||
{/* <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}>
|
||||
<StaticLineChartCard />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<LineChartCard />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<StaticResourcePieChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</AppTheme>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as React from "react";
|
||||
import Badge, { badgeClasses } from "@mui/material/Badge";
|
||||
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
|
||||
import { CustomIconButton } from "../AddUserModal/styled.css";
|
||||
|
||||
export interface MenuButtonProps extends IconButtonProps {
|
||||
showBadge?: boolean;
|
||||
|
|
@ -17,7 +18,7 @@ export default function MenuButton({
|
|||
invisible={!showBadge}
|
||||
sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
|
||||
>
|
||||
<IconButton sx={{ marginRight: "60px" }} size="small" {...props} />
|
||||
<CustomIconButton sx={{ marginRight: "60px" }} size="medium" {...props} />
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const style = {
|
|||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "#000000",
|
||||
fontFamily: "Fredoka",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
|
|
@ -24,6 +25,7 @@ const btnStyle = {
|
|||
py: 1,
|
||||
px: 5,
|
||||
width: "50%",
|
||||
fontFamily:"Fredoka",
|
||||
textTransform: "capitalize",
|
||||
backgroundColor: "#D0E1E9",
|
||||
color: "#000000",
|
||||
|
|
@ -40,7 +42,6 @@ export default function LogoutModal({
|
|||
setLogoutModal,
|
||||
handlelogout,
|
||||
}: Props) {
|
||||
// Function to prevent closing the modal when clicking outside
|
||||
const handleClose = (event: React.SyntheticEvent) => {
|
||||
// Close only when clicking the close button, not the backdrop
|
||||
setLogoutModal(false);
|
||||
|
|
@ -53,6 +54,7 @@ export default function LogoutModal({
|
|||
if (reason !== "backdropClick") {
|
||||
setLogoutModal(false);
|
||||
}
|
||||
handleClose();
|
||||
}}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const style = {
|
|||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 450,
|
||||
width: 400,
|
||||
borderRadius: 2,
|
||||
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
|
||||
p: 0,
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ export default function ResourcePieChart() {
|
|||
variant="subtitle2"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function SessionsChart() {
|
|||
// Set default station when basicPrice loads
|
||||
React.useEffect(() => {
|
||||
if (stationNames.length > 0 && !selectedStation) {
|
||||
setSelectedStation(stationNames[0]);
|
||||
setSelectedStation(stationNames[0]);
|
||||
}
|
||||
}, [basicPrice, stationNames, selectedStation]);
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ export default function SessionsChart() {
|
|||
align="left"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
marginBottom: { xs: 1, sm: 0.7, md: 1 },
|
||||
|
|
@ -127,11 +127,10 @@ export default function SessionsChart() {
|
|||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "repeat(1, 1fr)",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(2, 1fr)",
|
||||
},
|
||||
gridTemplateColumns:
|
||||
selectedBasePrices.length === 1
|
||||
? "1fr"
|
||||
: "repeat(2, 1fr)",
|
||||
gap: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
}}
|
||||
|
|
@ -206,7 +205,6 @@ export default function SessionsChart() {
|
|||
gutterBottom
|
||||
>
|
||||
{price.price.toFixed(2)}{" "}
|
||||
{/* Ensure consistent decimal places */}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
|
|
@ -223,7 +221,7 @@ export default function SessionsChart() {
|
|||
}}
|
||||
color="#454545"
|
||||
>
|
||||
cents/kWh
|
||||
(₹)/kWh
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ export default function SideMenuMobile({
|
|||
sx={{
|
||||
maxWidth: "70dvw",
|
||||
height: "100%",
|
||||
background: "#000000",
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
|
||||
|
|
@ -62,7 +63,11 @@ export default function SideMenuMobile({
|
|||
src="/static/images/avatar/7.jpg"
|
||||
sx={{ width: 24, height: 24 }}
|
||||
/>
|
||||
<Typography component="p" variant="h6">
|
||||
<Typography
|
||||
component="p"
|
||||
variant="h6"
|
||||
sx={{ color: "#DFECF1" }}
|
||||
>
|
||||
Super Admin
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
|
@ -78,14 +83,17 @@ export default function SideMenuMobile({
|
|||
<CardAlert />
|
||||
<Stack sx={{ p: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
startIcon={<LogoutRoundedIcon />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLogoutModal(true);
|
||||
}}
|
||||
|
||||
sx={{
|
||||
backgroundColor: "rgb(170, 46, 37)",
|
||||
"&:hover": { backgroundColor: "rgb(163, 85, 79)" },
|
||||
color: "#DFECF1",
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export default function StatCard({ title, value, icon }: StatCardProps) {
|
|||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
height:"100%",
|
||||
width: "100%",
|
||||
borderRadius: "20px",
|
||||
border: "none",
|
||||
|
|
|
|||
72
src/components/StaticLineChartCard/staticLineChartCard.tsx
Normal file
72
src/components/StaticLineChartCard/staticLineChartCard.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import React from "react";
|
||||
import { Card, CardContent, Typography } from "@mui/material";
|
||||
import { LineChart } from "@mui/x-charts/LineChart";
|
||||
|
||||
export default function StaticLineChartCard() {
|
||||
const revenueData = [
|
||||
{ date: "2025-04-01", revenue: 1200 },
|
||||
{ date: "2025-04-02", revenue: 1500 },
|
||||
{ date: "2025-04-03", revenue: 1300 },
|
||||
{ date: "2025-04-04", revenue: 1700 },
|
||||
{ date: "2025-04-05", revenue: 1400 },
|
||||
{ date: "2025-04-06", revenue: 2400 },
|
||||
{ date: "2025-04-08", revenue: 1500 },
|
||||
{ date: "2025-04-09", revenue: 1800 },
|
||||
{ date: "2025-04-10", revenue: 2800 },
|
||||
{ date: "2025-04-11", revenue: 8400 },
|
||||
{ date: "2025-04-13", revenue: 4400 },
|
||||
{ date: "2025-04-15", revenue: 5400 },
|
||||
{ date: "2025-04-16", revenue: 1200 },
|
||||
{ date: "2025-04-17", revenue: 1700 },
|
||||
{ date: "2025-04-19", revenue: 2300 },
|
||||
{ date: "2025-04-20", revenue: 2600 },
|
||||
{ date: "2025-04-21", revenue: 1400 },
|
||||
{ date: "2025-04-22", revenue: 1900 },
|
||||
{ date: "2025-04-23", revenue: 6400 },
|
||||
{ date: "2025-04-24", revenue: 400 },
|
||||
{ date: "2025-04-25", revenue: 7400 },
|
||||
{ date: "2025-04-26", revenue: 4400 },
|
||||
{ date: "2025-04-27", revenue: 1400 },
|
||||
{ date: "2025-04-30", revenue: 1600 },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
height: "100%",
|
||||
p: 2,
|
||||
background: "#D0E1E9",
|
||||
borderRadius: "30px",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
Total Earnings (April 2025)
|
||||
</Typography>
|
||||
<LineChart
|
||||
xAxis={[
|
||||
{
|
||||
data: revenueData.map((d) => d.date),
|
||||
scaleType: "point",
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
data: revenueData.map((d) => d.revenue),
|
||||
label: "Revenue ($)",
|
||||
color: "#000000",
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
169
src/components/StaticResourcePieChart/staticResourceChart.tsx
Normal file
169
src/components/StaticResourcePieChart/staticResourceChart.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import React from "react";
|
||||
import { Card, CardContent, Typography, Box, Stack } from "@mui/material";
|
||||
import { PieChart } from "@mui/x-charts/PieChart";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
|
||||
export default function StaticResourcePieChart() {
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
|
||||
const kwhData = [
|
||||
{ stationId: "Indian Charging Station", kwh: 500 },
|
||||
{ stationId: "Mumbai Charging Station", kwh: 300 },
|
||||
{ stationId: "Delhi Charging Station", kwh: 450 },
|
||||
{ stationId: "Tata Charging Station", kwh: 200 },
|
||||
{ stationId: "PlugIn Charging Station", kwh: 350 },
|
||||
];
|
||||
|
||||
const customColors = [
|
||||
"rgb(11, 13, 14)",
|
||||
"hsl(204, 59.60%, 78.60%)",
|
||||
"hsl(214, 77.50%, 13.90%)",
|
||||
"hsl(222, 4.10%, 52.20%)",
|
||||
"hsl(220, 40.30%, 71.80%)",
|
||||
];
|
||||
|
||||
// Function to determine chart dimensions based on screen size
|
||||
const getChartDimensions = () => {
|
||||
if (isXsScreen) {
|
||||
return {
|
||||
height: 240,
|
||||
width: 240,
|
||||
margin: { left: 20, right: 20, top: 40, bottom: 40 },
|
||||
};
|
||||
} else if (isSmScreen) {
|
||||
return {
|
||||
height: 260,
|
||||
width: 260,
|
||||
margin: { left: 40, right: 40, top: 60, bottom: 60 },
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: 350,
|
||||
width: 350,
|
||||
margin: { left: 60, right: 80, top: 80, bottom: 80 },
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const dimensions = getChartDimensions();
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: { xs: "8px", sm: "10px", md: "12px" },
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "320px", sm: "340px", md: "470px" },
|
||||
padding: { xs: "12px", sm: "14px", md: "16px" },
|
||||
borderRadius: "30px",
|
||||
border: "none",
|
||||
background: "#D0E1E9",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
KWh Consumed by Station
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<PieChart
|
||||
colors={customColors}
|
||||
margin={dimensions.margin}
|
||||
series={[
|
||||
{
|
||||
data: kwhData.map((d, i) => ({
|
||||
id: i,
|
||||
value: d.kwh,
|
||||
label: d.stationId,
|
||||
color: customColors[
|
||||
i % customColors.length
|
||||
],
|
||||
})),
|
||||
|
||||
paddingAngle: 2,
|
||||
cornerRadius: 8,
|
||||
highlightScope: {
|
||||
faded: "global",
|
||||
highlighted: "item",
|
||||
},
|
||||
},
|
||||
]}
|
||||
height={dimensions.height}
|
||||
width={dimensions.width}
|
||||
slotProps={{
|
||||
legend: { hidden: true }, // Hide default legend
|
||||
}}
|
||||
/>
|
||||
<Stack
|
||||
spacing={1}
|
||||
sx={{
|
||||
mt: { xs: 2, sm: 0 },
|
||||
ml: { xs: 0, sm: 2 },
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ whiteSpace: "pre", fontWeight: 500 }}>
|
||||
Charging Stations:
|
||||
</Typography>
|
||||
{kwhData.map((entry, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
direction="row"
|
||||
spacing={1}
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: 12, sm: 14, md: 16 },
|
||||
height: { xs: 12, sm: 14, md: 16 },
|
||||
backgroundColor:
|
||||
customColors[
|
||||
index % customColors.length
|
||||
],
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
md: "16px",
|
||||
},
|
||||
color: "#111111",
|
||||
}}
|
||||
>
|
||||
{entry.stationId}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Box,
|
||||
LinearProgress,
|
||||
} from "@mui/material";
|
||||
|
||||
export default function UtilizationGaugeChart() {
|
||||
const utilization = 65;
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 2,
|
||||
background: "#D0E1E9",
|
||||
borderRadius: "30px",
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
marginRight: 2,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
}}
|
||||
>
|
||||
Charging Station Utilization
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
width: "60%",
|
||||
marginRight: 2,
|
||||
}}
|
||||
>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={utilization}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
|
||||
"& .MuiLinearProgress-bar": {
|
||||
backgroundColor: "#000000",
|
||||
},
|
||||
"& .MuiLinearProgress-root": {
|
||||
backgroundColor: "#DFECF1",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography variant="h5" sx={{ marginLeft: 2 }}>
|
||||
{utilization}%
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@ export default function RoundedBarChart() {
|
|||
align={isXsScreen ? "center" : "left"}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: "12px", sm: "14px", md: "16px" },
|
||||
fontSize: { xs: "14px", sm: "16px", md: "20px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
width: isXsScreen ? "100%" : "auto",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");
|
||||
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap"); */
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: '"Publica Sans Round Medium", sans-serif';
|
||||
font-family: "Fredoka";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -11,7 +15,7 @@ code {
|
|||
}
|
||||
|
||||
.mui-typography {
|
||||
font-family: "Gilroy";
|
||||
font-family: "Fredoka";
|
||||
background-color: rgb(7, 127, 233);
|
||||
}
|
||||
|
||||
|
|
@ -21,11 +25,11 @@ code {
|
|||
rx: 8;
|
||||
ry: 8;
|
||||
}
|
||||
@font-face {
|
||||
/* @font-face {
|
||||
font-family: '"Publica Sans Round Medium", sans-serif';
|
||||
src: url("../public/fonts/PublicaSansRound-Md.otf") format("otf");
|
||||
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -154,8 +154,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
width: "100%",
|
||||
mb: { xs: 2, md: 3 },
|
||||
mt: { xs: 0, md: 0 },
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Welcome Back!
|
||||
|
|
@ -195,8 +194,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
textAlign: "center",
|
||||
color: "#D0E1E9",
|
||||
fontSize: { xs: "20px", md: "24px" },
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
|
|
@ -210,8 +208,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
color: "#D0E1E9", // Use theme's secondary text color (#272727)
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
mb: 1,
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Log in with your email and password
|
||||
|
|
@ -228,8 +225,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
},
|
||||
color: "#D0E1E9",
|
||||
mb: 0.5,
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
...autofillFix,
|
||||
}}
|
||||
>
|
||||
|
|
@ -303,15 +299,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder":
|
||||
{
|
||||
color: "text.secondary",
|
||||
opacity: 1,
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
"Fredoka",
|
||||
},
|
||||
...autofillFix,
|
||||
}}
|
||||
|
|
@ -331,8 +326,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
},
|
||||
color: "#D0E1E9",
|
||||
mb: 0.5,
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Password
|
||||
|
|
@ -397,7 +391,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
togglePasswordVisibility
|
||||
}
|
||||
edge="end"
|
||||
sx={{color:"#000000"}}
|
||||
sx={{
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
{showPassword ? (
|
||||
<VisibilityOff />
|
||||
|
|
@ -432,15 +428,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder":
|
||||
{
|
||||
color: "text.secondary",
|
||||
opacity: 1,
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
"Fredoka",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
|
@ -497,8 +492,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
md: "1rem",
|
||||
},
|
||||
color: "#D0E1E9",
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Remember me
|
||||
|
|
@ -520,8 +514,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
sm: "0.875rem",
|
||||
md: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
|
|
@ -546,8 +539,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
xs: "0.875rem",
|
||||
md: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const LandingPage = () => {
|
|||
xs: " #000000",
|
||||
},
|
||||
color: "white",
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
|
|
@ -79,7 +79,7 @@ const LandingPage = () => {
|
|||
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
|
||||
background: "#141615",
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
|
|
@ -112,8 +112,7 @@ const LandingPage = () => {
|
|||
color: "#FFFFFF",
|
||||
borderRadius: "6px",
|
||||
width: { xs: "90px", sm: "117px" },
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
textTransform: "none",
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
fontWeight: 500,
|
||||
|
|
@ -130,7 +129,7 @@ const LandingPage = () => {
|
|||
sx={{
|
||||
py: 8,
|
||||
justifyContent: "space-between",
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
backgroundImage: {
|
||||
lg: 'url("/bgev.svg")',
|
||||
sm: 'url("/bgev.svg")',
|
||||
|
|
@ -147,7 +146,7 @@ const LandingPage = () => {
|
|||
sx={{
|
||||
py: { xs: 4, sm: 6, md: 8 },
|
||||
justifyContent: "space-between",
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
||||
}}
|
||||
>
|
||||
|
|
@ -177,8 +176,7 @@ const LandingPage = () => {
|
|||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
fontWeight: 600,
|
||||
fontSize: {
|
||||
xs: "28px",
|
||||
|
|
@ -198,8 +196,7 @@ const LandingPage = () => {
|
|||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
color: "#CACACA",
|
||||
marginBottom: "24px",
|
||||
fontWeight: 400,
|
||||
|
|
@ -225,8 +222,7 @@ const LandingPage = () => {
|
|||
width: { xs: "120px", md: "140px" },
|
||||
height: "48px",
|
||||
textTransform: "none",
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
fontWeight: 500,
|
||||
|
|
@ -336,18 +332,14 @@ const LandingPage = () => {
|
|||
sm: "80px",
|
||||
md: "100px",
|
||||
}}
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
>
|
||||
50+
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="#FFFFFF"
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
fontWeight={400}
|
||||
fontSize={{
|
||||
xs: "12px",
|
||||
|
|
@ -387,18 +379,14 @@ const LandingPage = () => {
|
|||
sm: "80px",
|
||||
md: "100px",
|
||||
}}
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
>
|
||||
100%
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="#FFFFFF"
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
fontWeight={400}
|
||||
fontSize={{
|
||||
xs: "12px",
|
||||
|
|
@ -438,18 +426,14 @@ const LandingPage = () => {
|
|||
sm: "80px",
|
||||
md: "100px",
|
||||
}}
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
>
|
||||
20+
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="#FFFFFF"
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
fontWeight={400}
|
||||
fontSize={{
|
||||
xs: "12px",
|
||||
|
|
@ -489,18 +473,14 @@ const LandingPage = () => {
|
|||
sm: "80px",
|
||||
md: "100px",
|
||||
}}
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
>
|
||||
10+
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="#FFFFFF"
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
fontWeight={400}
|
||||
fontSize={{
|
||||
xs: "12px",
|
||||
|
|
@ -532,7 +512,7 @@ const LandingPage = () => {
|
|||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={600}
|
||||
fontFamily={'"Publica Sans Round Medium", sans-serif'}
|
||||
fontFamily={"Fredoka"}
|
||||
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
||||
lineHeight={"100%"}
|
||||
color="#FFFFFF"
|
||||
|
|
@ -557,7 +537,7 @@ const LandingPage = () => {
|
|||
mt={2}
|
||||
maxWidth="600px"
|
||||
mx="auto"
|
||||
fontFamily={'"Publica Sans Round Medium", sans-serif'}
|
||||
fontFamily={"Fredoka"}
|
||||
fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
|
||||
fontWeight={400}
|
||||
lineHeight={"140%"}
|
||||
|
|
@ -646,8 +626,7 @@ const LandingPage = () => {
|
|||
variant="h6"
|
||||
sx={{
|
||||
color: "#52ACDF",
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
fontWeight: 600,
|
||||
fontSize: {
|
||||
xs: "16px",
|
||||
|
|
@ -662,8 +641,7 @@ const LandingPage = () => {
|
|||
variant="body2"
|
||||
sx={{
|
||||
color: "#D9D8D8",
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
fontWeight: 400,
|
||||
fontSize: {
|
||||
xs: "12px",
|
||||
|
|
@ -692,7 +670,7 @@ const LandingPage = () => {
|
|||
borderRadius: "16px",
|
||||
|
||||
mt: { xs: 6, md: 10 },
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
Key Features
|
||||
|
|
@ -712,7 +690,7 @@ const LandingPage = () => {
|
|||
py: { xs: 2, md: 5 },
|
||||
px: { xs: 2, md: 3 },
|
||||
mt: { xs: 6, md: 5 },
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
|
@ -1206,7 +1184,7 @@ const LandingPage = () => {
|
|||
px: { xs: 2, sm: 3, md: 4 },
|
||||
mt: { xs: 6, sm: 8, md: 10 },
|
||||
// height: { xs: "auto", lg: "261px", sm: "208px" },
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -1261,9 +1239,7 @@ const LandingPage = () => {
|
|||
|
||||
{/* Text */}
|
||||
<Typography
|
||||
fontFamily={
|
||||
'"Publica Sans Round Medium", sans-serif'
|
||||
}
|
||||
fontFamily={"Fredoka"}
|
||||
fontWeight={500}
|
||||
fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
|
||||
lineHeight={"130%"}
|
||||
|
|
@ -1295,8 +1271,7 @@ const LandingPage = () => {
|
|||
lg: "54px",
|
||||
md: "44px",
|
||||
},
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
fontSize: {
|
||||
|
|
@ -1331,7 +1306,7 @@ const LandingPage = () => {
|
|||
px: { xs: 2, sm: 3, md: 4 },
|
||||
mt: { xs: 6, sm: 8, md: 10 },
|
||||
mb: { xs: 6, sm: 8, md: 10 },
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
height: "auto",
|
||||
borderRadius: { xs: "8px", lg: "12px" },
|
||||
}}
|
||||
|
|
@ -1342,13 +1317,13 @@ const LandingPage = () => {
|
|||
py: 4,
|
||||
px: 3,
|
||||
mt: 2,
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
fontWeight={600}
|
||||
fontFamily={'"Publica Sans Round Medium", sans-serif'}
|
||||
fontFamily={"Fredoka"}
|
||||
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
||||
lineHeight={"120%"}
|
||||
>
|
||||
|
|
@ -1363,8 +1338,7 @@ const LandingPage = () => {
|
|||
variant="body2"
|
||||
sx={{
|
||||
my: { xs: 2, sm: 3 },
|
||||
fontFamily:
|
||||
'"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: "14px", sm: "18px", md: "20px" },
|
||||
color: "#FFFFFF",
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ const ProfilePage = () => {
|
|||
return (
|
||||
<Container
|
||||
sx={{
|
||||
py:1
|
||||
py:1,
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
|
@ -125,7 +126,7 @@ const ProfilePage = () => {
|
|||
</Link> */}
|
||||
</Stack>
|
||||
|
||||
<Grid container spacing={3} sx={{ overflowX: "auto" }}>
|
||||
<Grid container spacing={3} >
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function AppTheme(props: AppThemeProps) {
|
|||
divider: "#E0E0E0",
|
||||
},
|
||||
typography: {
|
||||
fontFamily: '"Publica Sans Round Medium", sans-serif',
|
||||
fontFamily: "Fredoka",
|
||||
h4: {
|
||||
fontSize: "2rem",
|
||||
fontWeight: 600,
|
||||
|
|
@ -54,7 +54,7 @@ export default function AppTheme(props: AppThemeProps) {
|
|||
body2: {
|
||||
fontSize: "0.875rem",
|
||||
color: "#b0b0b0",
|
||||
fontWeight: 300,
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
cssVariables: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue