From e717d6c58c12b658932810c2a49acf03490df9dd Mon Sep 17 00:00:00 2001 From: jaanvi Date: Mon, 28 Apr 2025 18:25:52 +0530 Subject: [PATCH] ManagerDashboard Ui changes and fontFamily updation --- src/App.css | 69 ++++--- .../addmanagerStationModal.tsx | 4 + src/components/AppNavbar/index.tsx | 4 +- src/components/CardAlert/CardAlert.tsx | 17 +- src/components/CustomTable/customTable.tsx | 4 +- .../LineChartCard/lineChartCard.tsx | 2 +- src/components/MainGrid/mainGrid.tsx | 116 ------------ src/components/MainGrid/managerGrid.tsx | 20 ++- src/components/MenuButton/index.tsx | 3 +- src/components/Modals/LogOutModal/index.tsx | 4 +- src/components/Modals/ViewModal/index.tsx | 2 +- .../ResourcePieChart/resourcePieChart.tsx | 2 +- src/components/SessionsChart/sessionChart.tsx | 16 +- src/components/SideMenuMobile/index.tsx | 14 +- src/components/StatCard/statCard.tsx | 1 + .../staticLineChartCard.tsx | 72 ++++++++ .../staticResourceChart.tsx | 169 ++++++++++++++++++ .../utilizationGaugeChart.tsx | 77 ++++++++ src/components/barChartCard/barChartCard.tsx | 2 +- src/index.css | 12 +- src/pages/Auth/Login/index.tsx | 38 ++-- src/pages/LandingPage/index.tsx | 84 +++------ src/pages/ProfilePage/index.tsx | 5 +- src/shared-theme/AppTheme.tsx | 4 +- 24 files changed, 473 insertions(+), 268 deletions(-) create mode 100644 src/components/StaticLineChartCard/staticLineChartCard.tsx create mode 100644 src/components/StaticResourcePieChart/staticResourceChart.tsx create mode 100644 src/components/UtilizationGaugeChart/utilizationGaugeChart.tsx diff --git a/src/App.css b/src/App.css index 51cd48d..0f0c182 100644 --- a/src/App.css +++ b/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); + } } diff --git a/src/components/AddManagerStationModal/addmanagerStationModal.tsx b/src/components/AddManagerStationModal/addmanagerStationModal.tsx index 92ab622..df205ab 100644 --- a/src/components/AddManagerStationModal/addmanagerStationModal.tsx +++ b/src/components/AddManagerStationModal/addmanagerStationModal.tsx @@ -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 */} diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx index 897212a..7414f5f 100644 --- a/src/components/AppNavbar/index.tsx +++ b/src/components/AppNavbar/index.tsx @@ -126,10 +126,10 @@ export default function AppNavbar() { display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens }} > - + /> */} + @@ -15,11 +15,22 @@ export default function CardAlert() { Enjoy 10% off when renewing your plan today. - diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx index e13cebc..d0e86a7 100644 --- a/src/components/CustomTable/customTable.tsx +++ b/src/components/CustomTable/customTable.tsx @@ -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 = ({ 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 = ({ sx={{ color: "#6B7280", fontSize: "16px", + }} > {getEmptyMessage(tableType)} diff --git a/src/components/LineChartCard/lineChartCard.tsx b/src/components/LineChartCard/lineChartCard.tsx index 5ab2825..d8b2e26 100644 --- a/src/components/LineChartCard/lineChartCard.tsx +++ b/src/components/LineChartCard/lineChartCard.tsx @@ -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", diff --git a/src/components/MainGrid/mainGrid.tsx b/src/components/MainGrid/mainGrid.tsx index 49d0a67..a4f930c 100644 --- a/src/components/MainGrid/mainGrid.tsx +++ b/src/components/MainGrid/mainGrid.tsx @@ -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(); -// 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 ( -// -// theme.palette.background.default, -// }} -// > -// {/* Dashboard Header */} -// -// Dashboard -// - -// {/* Grid Layout */} -// -// {/* Statistic Cards */} -// {getStatCards().map((card, index) => ( -// -// -// -// ))} - -// {/* Charts */} -// {userType !== "user" && ( -// <> -// -// -// -// -// -// - -// -// -// - -// -// -// -// -// )} -// -// -// -// ); -// } import React, { useEffect } from "react"; import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; diff --git a/src/components/MainGrid/managerGrid.tsx b/src/components/MainGrid/managerGrid.tsx index 594479c..e0d8ad4 100644 --- a/src/components/MainGrid/managerGrid.tsx +++ b/src/components/MainGrid/managerGrid.tsx @@ -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(); @@ -53,23 +56,32 @@ export default function ManagerGrid() { sx={{ mb: 1 }} > {statCards.map((card, index) => ( - + ))} + + {/* Add the Utilization Chart */} + + + {/* Charts */} - {/* - - */} + + + + + + + diff --git a/src/components/MenuButton/index.tsx b/src/components/MenuButton/index.tsx index ce85178..1e6e99c 100644 --- a/src/components/MenuButton/index.tsx +++ b/src/components/MenuButton/index.tsx @@ -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 } }} > - + ); } diff --git a/src/components/Modals/LogOutModal/index.tsx b/src/components/Modals/LogOutModal/index.tsx index a3685a3..9ea989d 100644 --- a/src/components/Modals/LogOutModal/index.tsx +++ b/src/components/Modals/LogOutModal/index.tsx @@ -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" diff --git a/src/components/Modals/ViewModal/index.tsx b/src/components/Modals/ViewModal/index.tsx index 1a2c5e7..2cff3dc 100644 --- a/src/components/Modals/ViewModal/index.tsx +++ b/src/components/Modals/ViewModal/index.tsx @@ -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, diff --git a/src/components/ResourcePieChart/resourcePieChart.tsx b/src/components/ResourcePieChart/resourcePieChart.tsx index e795aa7..b796f61 100644 --- a/src/components/ResourcePieChart/resourcePieChart.tsx +++ b/src/components/ResourcePieChart/resourcePieChart.tsx @@ -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 }, }} diff --git a/src/components/SessionsChart/sessionChart.tsx b/src/components/SessionsChart/sessionChart.tsx index df2c5be..739de32 100644 --- a/src/components/SessionsChart/sessionChart.tsx +++ b/src/components/SessionsChart/sessionChart.tsx @@ -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() { {price.price.toFixed(2)}{" "} - {/* Ensure consistent decimal places */} - cents/kWh + (₹)/kWh diff --git a/src/components/SideMenuMobile/index.tsx b/src/components/SideMenuMobile/index.tsx index e77a1bf..f98a9f7 100644 --- a/src/components/SideMenuMobile/index.tsx +++ b/src/components/SideMenuMobile/index.tsx @@ -49,6 +49,7 @@ export default function SideMenuMobile({ sx={{ maxWidth: "70dvw", height: "100%", + background: "#000000", }} > @@ -62,7 +63,11 @@ export default function SideMenuMobile({ src="/static/images/avatar/7.jpg" sx={{ width: 24, height: 24 }} /> - + Super Admin @@ -78,14 +83,17 @@ export default function SideMenuMobile({ diff --git a/src/components/StatCard/statCard.tsx b/src/components/StatCard/statCard.tsx index 498bd47..321e8aa 100644 --- a/src/components/StatCard/statCard.tsx +++ b/src/components/StatCard/statCard.tsx @@ -36,6 +36,7 @@ export default function StatCard({ title, value, icon }: StatCardProps) { + + + Total Earnings (April 2025) + + d.date), + scaleType: "point", + }, + ]} + series={[ + { + data: revenueData.map((d) => d.revenue), + label: "Revenue ($)", + color: "#000000", + }, + ]} + height={300} + /> + + + ); +} diff --git a/src/components/StaticResourcePieChart/staticResourceChart.tsx b/src/components/StaticResourcePieChart/staticResourceChart.tsx new file mode 100644 index 0000000..32780e4 --- /dev/null +++ b/src/components/StaticResourcePieChart/staticResourceChart.tsx @@ -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 ( + + + + KWh Consumed by Station + + + ({ + 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 + }} + /> + + + Charging Stations: + + {kwhData.map((entry, index) => ( + + + + {entry.stationId} + + + ))} + + + + + ); +} diff --git a/src/components/UtilizationGaugeChart/utilizationGaugeChart.tsx b/src/components/UtilizationGaugeChart/utilizationGaugeChart.tsx new file mode 100644 index 0000000..9cb1fa1 --- /dev/null +++ b/src/components/UtilizationGaugeChart/utilizationGaugeChart.tsx @@ -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 ( + + + + Charging Station Utilization + + + + + + + + {utilization}% + + + + ); +} diff --git a/src/components/barChartCard/barChartCard.tsx b/src/components/barChartCard/barChartCard.tsx index 689122d..af1344f 100644 --- a/src/components/barChartCard/barChartCard.tsx +++ b/src/components/barChartCard/barChartCard.tsx @@ -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", diff --git a/src/index.css b/src/index.css index 86fdd5c..accdf0a 100644 --- a/src/index.css +++ b/src/index.css @@ -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; -} +} */ diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index 59527ed..03a83f2 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -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 ? ( @@ -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 diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx index ebb9dff..d58bc8b 100644 --- a/src/pages/LandingPage/index.tsx +++ b/src/pages/LandingPage/index.tsx @@ -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", }} > { 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 = () => { > { { 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+ { sm: "80px", md: "100px", }} - fontFamily={ - '"Publica Sans Round Medium", sans-serif' - } + fontFamily={"Fredoka"} > 100% { sm: "80px", md: "100px", }} - fontFamily={ - '"Publica Sans Round Medium", sans-serif' - } + fontFamily={"Fredoka"} > 20+ { sm: "80px", md: "100px", }} - fontFamily={ - '"Publica Sans Round Medium", sans-serif' - } + fontFamily={"Fredoka"} > 10+ { { 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", }} > { 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 */} { 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", }} > @@ -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", diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx index 289fd3b..b18c933 100644 --- a/src/pages/ProfilePage/index.tsx +++ b/src/pages/ProfilePage/index.tsx @@ -44,7 +44,8 @@ const ProfilePage = () => { return ( { */} - +