Merge pull request #836 from bluewave-labs/feat/theme-default-font-sizes

Feat/theme default font sizes

Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx

@@ -11,9 +11,9 @@ import {
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useMemo } from "react";
-import "./index.css";
 import { useSelector } from "react-redux";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
+import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
   const uiTimezone = useSelector((state) => state.ui.timezone);
@@ -97,7 +97,7 @@ const CustomTick = ({ x, y, payload, index }) => {
       fontSize={11}
       fontWeight={400}
     >
-      {formatDateWithTz(payload?.value, "HH:mm:ss", uiTimezone)}
+      {formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
     </Text>
   );
 };

Client/src/Components/Inputs/Field/index.jsx

@@ -121,8 +121,9 @@ const Field = forwardRef(
             sx: {
               color: theme.palette.text.secondary,
               "&:-webkit-autofill": {
-                WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.fill} inset`,
+                WebkitBoxShadow: `0 0 0 100px ${theme.palette.other.autofill} inset`,
                 WebkitTextFillColor: theme.palette.text.secondary,
+                borderRadius: "0 5px 5px 0",
               },
             },
           }}

Client/src/Pages/Monitors/Configure/index.css

@@ -1,6 +1,3 @@
-.configure-monitor h1.MuiTypography-root + span.MuiTypography-root {
-  font-size: var(--env-var-font-size-small-plus);
-}
 .configure-monitor button.MuiButtonBase-root {
   height: var(--env-var-height-2);
 }

Client/src/Pages/Monitors/Configure/index.jsx

@@ -223,12 +223,7 @@ const Configure = () => {
           >
             <Stack direction="row" gap={theme.spacing(2)}>
               <Box>
-                <Typography
-                  component="h1"
-                  fontSize={22}
-                  fontWeight={500}
-                  color={theme.palette.text.primary}
-                >
+                <Typography component="h1" variant="h1">
                   {monitor.name}
                 </Typography>
                 <Stack
@@ -259,17 +254,12 @@ const Configure = () => {
                       />
                     </Box>
                   </Tooltip>
-                  <Typography
-                    component="h2"
-                    fontSize={14.5}
-                    color={theme.palette.text.secondary}
-                  >
+                  <Typography component="h2" variant="h2">
                     {monitor.url?.replace(/^https?:\/\//, "") || "..."}
                   </Typography>
                   <Typography
                     position="relative"
-                    fontSize={12}
-                    color={theme.palette.text.tertiary}
+                    variant="body2"
                     ml={theme.spacing(6)}
                     mt={theme.spacing(1)}
                     sx={{

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -1,7 +1,3 @@
-.create-monitor h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large-plus);
-  font-weight: 500;
-}
 .create-monitor p.MuiTypography-root,
 .create-monitor button.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -177,14 +177,7 @@ const CreateMonitor = () => {
   ];
 
   return (
-    <Box
-      className="create-monitor"
-      sx={{
-        "& h1": {
-          color: theme.palette.text.primary,
-        },
-      }}
-    >
+    <Box className="create-monitor">
       <Breadcrumbs
         list={[
           { name: "monitors", path: "/monitors" },
@@ -200,15 +193,16 @@ const CreateMonitor = () => {
         gap={theme.spacing(12)}
         mt={theme.spacing(6)}
       >
-        <Typography component="h1">
-          <Typography
-            component="span"
-            fontSize="inherit"
-            color={theme.palette.text.secondary}
-          >
+        <Typography component="h1" variant="h1">
+          <Typography component="span" fontSize="inherit">
             Create your{" "}
           </Typography>
-          <Typography component="span" fontSize="inherit" fontWeight="inherit">
+          <Typography
+            component="span"
+            variant="h2"
+            fontSize="inherit"
+            fontWeight="inherit"
+          >
             monitor
           </Typography>
         </Typography>
@@ -262,7 +256,7 @@ const CreateMonitor = () => {
                 onChange={(event) => handleChange(event)}
               />
               {monitor.type === "http" ? (
-                <ButtonGroup sx={{ ml: "32px" }}>
+                <ButtonGroup sx={{ ml: theme.spacing(16) }}>
                   <Button
                     variant="group"
                     filled={https.toString()}

Client/src/Pages/Monitors/Details/index.jsx

@@ -139,12 +139,7 @@ const DetailsPage = ({ isAdmin }) => {
           <Stack gap={theme.spacing(10)} mt={theme.spacing(10)}>
             <Stack direction="row" gap={theme.spacing(2)}>
               <Box>
-                <Typography
-                  component="h1"
-                  fontSize={22}
-                  fontWeight={500}
-                  color={theme.palette.text.primary}
-                >
+                <Typography component="h1" variant="h1">
                   {monitor.name}
                 </Typography>
                 <Stack
@@ -173,19 +168,14 @@ const DetailsPage = ({ isAdmin }) => {
                       <PulseDot color={statusColor[determineState(monitor)]} />
                     </Box>
                   </Tooltip>
-                  <Typography
-                    component="h2"
-                    fontSize={14.5}
-                    color={theme.palette.text.secondary}
-                  >
+                  <Typography component="h2" variant="h2">
                     {monitor.url?.replace(/^https?:\/\//, "") || "..."}
                   </Typography>
                   <Typography
+                    position="relative"
+                    variant="body2"
                     mt={theme.spacing(1)}
                     ml={theme.spacing(6)}
-                    fontSize={12}
-                    position="relative"
-                    color={theme.palette.text.tertiary}
                     sx={{
                       "&:before": {
                         position: "absolute",
@@ -254,9 +244,7 @@ const DetailsPage = ({ isAdmin }) => {
                     },
                   }}
                 >
-                  <Typography fontSize={12} color={theme.palette.text.tertiary}>
-                    Certificate Expiry
-                  </Typography>
+                  <Typography variant="body2">Certificate Expiry</Typography>
                   <Typography
                     component="span"
                     fontSize={13}
@@ -315,7 +303,7 @@ const DetailsPage = ({ isAdmin }) => {
                 gap={theme.spacing(4)}
                 mb={theme.spacing(8)}
               >
-                <Typography fontSize={12} color={theme.palette.text.tertiary}>
+                <Typography variant="body2">
                   Showing statistics for past{" "}
                   {dateRange === "day"
                     ? "24 hours"

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -272,13 +272,8 @@ const MonitorTable = ({ isAdmin }) => {
         alignItems="center"
         justifyContent="space-between"
         px={theme.spacing(4)}
-        sx={{
-          "& p": {
-            color: theme.palette.text.tertiary,
-          },
-        }}
       >
-        <Typography px={theme.spacing(2)} fontSize={12} sx={{ opacity: 0.7 }}>
+        <Typography px={theme.spacing(2)} variant="body2" sx={{ opacity: 0.7 }}>
           Showing {getRange()} of {monitorCount} monitor(s)
         </Typography>
         <TablePagination

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -91,6 +91,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={(e) => closeMenu(e)}
+        disableScrollLock
         slotProps={{
           paper: {
             sx: {
@@ -176,7 +177,6 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
       >
         <Stack
           gap={theme.spacing(2)}
-          color={theme.palette.text.secondary}
           sx={{
             position: "absolute",
             top: "50%",
@@ -194,10 +194,10 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
             },
           }}
         >
-          <Typography id="modal-delete-monitor" component="h2" fontWeight={600}>
+          <Typography id="modal-delete-monitor" component="h2" variant="h2">
             Do you really want to delete this monitor?
           </Typography>
-          <Typography id="delete-monitor-confirmation" fontSize={13}>
+          <Typography id="delete-monitor-confirmation" variant="body1">
             Once deleted, this monitor cannot be retrieved.
           </Typography>
           <Stack

Client/src/Pages/Monitors/Home/fallback.jsx

@@ -18,8 +18,10 @@ const Fallback = ({ isAdmin }) => {
       borderColor={theme.palette.border.light}
       color={theme.palette.text.secondary}
     >
-      <Typography component="h2">No monitors found</Typography>
-      <Typography>
+      <Typography component="h2" variant="h2" fontWeight={500}>
+        No monitors found
+      </Typography>
+      <Typography variant="body1">
         It looks like you don’t have any monitors set up yet.
       </Typography>
       {isAdmin && (

Client/src/Pages/Monitors/Home/index.css

@@ -1,14 +1,3 @@
-.monitors h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large-plus);
-  font-weight: 500;
-}
-.monitors h2.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  font-weight: 500;
-}
-.monitors h1.MuiTypography-root + p.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium-plus);
-}
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);

Client/src/Pages/Monitors/Home/index.jsx

@@ -96,11 +96,7 @@ const Monitors = ({ isAdmin }) => {
                   alignItems="center"
                   mb={theme.spacing(8)}
                 >
-                  <Typography
-                    component="h2"
-                    color={theme.palette.text.secondary}
-                    letterSpacing={-0.5}
-                  >
+                  <Typography component="h2" variant="h2" letterSpacing={-0.5}>
                     Actively monitoring
                   </Typography>
                   <Box

Client/src/Pages/Monitors/Home/skeleton.jsx

@@ -24,15 +24,7 @@ const SkeletonLayout = () => {
         <Skeleton variant="rounded" width="100%" height={100} />
         <Skeleton variant="rounded" width="100%" height={100} />
       </Stack>
-      <Stack
-        gap={theme.spacing(12)}
-        p={theme.spacing(20)}
-        backgroundColor="#f9fafb"
-      >
-        <Skeleton variant="rounded" width="50%" height={25} />
-        <Skeleton variant="rounded" width="100%" height={300} />
-        <Skeleton variant="rounded" width="100%" height={100} />
-      </Stack>
+      <Skeleton variant="rounded" width="100%" height="100%" flex={1} />
     </>
   );
 };

Client/src/Pages/NotFound/index.jsx

@@ -36,16 +36,12 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
 
   return (
     <Stack height="100vh" justifyContent="center">
-      <Stack
-        gap={theme.spacing(2)}
-        alignItems="center"
-        color={theme.palette.text.secondary}
-      >
+      <Stack gap={theme.spacing(2)} alignItems="center">
         <img src={NotFoundSvg} alt="404" style={{ maxHeight: "25rem" }} />
-        <Typography component="h1" fontSize={16} fontWeight={600}>
+        <Typography component="h1" variant="h1" fontSize={16}>
           {title}
         </Typography>
-        <Typography fontSize={13}>{desc}</Typography>
+        <Typography variant="body1">{desc}</Typography>
         <Button
           variant="contained"
           color="primary"

Client/src/Pages/PageSpeed/Configure/index.css

@@ -1,18 +1,8 @@
-.configure-pagespeed h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large-plus);
-}
 .configure-pagespeed span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
 }
-.configure-pagespeed h1.MuiTypography-root,
-.configure-pagespeed h3.MuiTypography-root,
-.configure-pagespeed h2.MuiTypography-root {
-  font-weight: 600;
-}
-.configure-pagespeed p.MuiTypography-root,
-.configure-pagespeed h3.MuiTypography-root,
-.configure-pagespeed h3.MuiTypography-root > span.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
+.configure-pagespeed h3.MuiTypography-root {
+  font-weight: 500;
 }
 .configure-pagespeed .MuiBox-root > .field + p.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -151,12 +151,7 @@ const PageSpeedConfigure = () => {
             <Stack direction="row" gap={theme.spacing(2)}>
               <PulseDot color={statusColor[determineState(monitor)]} />
               <Box>
-                <Typography
-                  component="h1"
-                  mb={theme.spacing(2)}
-                  sx={{ lineHeight: 1 }}
-                  color={theme.palette.text.primary}
-                >
+                <Typography component="h1" variant="h1" mb={theme.spacing(2)}>
                   {monitor?.url}
                 </Typography>
                 <Typography
@@ -351,13 +346,13 @@ const PageSpeedConfigure = () => {
           <Typography
             id="modal-delete-pagespeed-monitor"
             component="h2"
-            color={theme.palette.text.secondary}
+            variant="h2"
           >
             Do you really want to delete this monitor?
           </Typography>
           <Typography
             id="delete-pagespeed-monitor-confirmation"
-            color={theme.palette.text.tertiary}
+            variant="body1"
           >
             Once deleted, this monitor cannot be retrieved.
           </Typography>

Client/src/Pages/PageSpeed/CreatePageSpeed/index.css

@@ -1,43 +0,0 @@
-.create-page-speed h1.MuiTypography-root,
-.create-page-speed h3.MuiTypography-root {
-  font-weight: 600;
-}
-.create-page-speed p.MuiTypography-root,
-.create-page-speed h3.MuiTypography-root,
-.create-page-speed h3.MuiTypography-root > span.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-}
-.create-page-speed .MuiBox-root > .field + p.MuiTypography-root {
-  font-size: var(--env-var-font-size-small-plus);
-}
-.create-page-speed .MuiBox-root > .field + p.MuiTypography-root,
-.create-page-speed h3.MuiTypography-root > span.MuiTypography-root {
-  opacity: 0.6;
-}
-.create-page-speed .checkbox-wrapper {
-  margin-bottom: 1px;
-}
-
-/* to be removed */
-.create-page-speed .section-disabled {
-  opacity: 0.4;
-  padding: 10px;
-  margin-right: -5px;
-  border-radius: 8px;
-  user-select: none;
-  pointer-events: none;
-}
-
-.create-page-speed button {
-  height: var(--env-var-height-2);
-}
-
-.create-page-speed h3.MuiTypography-root {
-  flex: 0.7;
-}
-
-.create-page-speed .field,
-.create-page-speed .section-disabled,
-.create-page-speed .select-wrapper {
-  flex: 1;
-}

Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx

@@ -164,16 +164,17 @@ const CreatePageSpeed = () => {
         gap={theme.spacing(12)}
         mt={theme.spacing(6)}
       >
-        <Typography component="h1">
+        <Typography component="h1" variant="h1">
+          <Typography component="span" fontSize="inherit">
+            Create your{" "}
+          </Typography>
           <Typography
             component="span"
             fontSize="inherit"
+            fontWeight="inherit"
             color={theme.palette.text.secondary}
           >
-            Create your{" "}
-          </Typography>
-          <Typography component="span" fontSize="inherit" fontWeight="inherit">
-            Pagespeed monitor
+            pagespeed monitor
           </Typography>
         </Typography>
         <ConfigBox>

Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx

@@ -11,7 +11,8 @@ import {
 import { useTheme } from "@emotion/react";
 import { useMemo } from "react";
 import { Box, Stack, Typography } from "@mui/material";
-import { formatDate } from "../../../../Utils/timeUtils";
+import { formatDateWithTz } from "../../../../Utils/timeUtils";
+import { useSelector } from "react-redux";
 
 const config = {
   seo: {
@@ -47,7 +48,8 @@ const config = {
 
 const CustomToolTip = ({ active, payload, label, config }) => {
   const theme = useTheme();
-  console.log(payload);
+  const uiTimezone = useSelector((state) => state.ui.timezone);
+
   if (active && payload && payload.length) {
     return (
       <Box
@@ -67,7 +69,7 @@ const CustomToolTip = ({ active, payload, label, config }) => {
             fontWeight: 500,
           }}
         >
-          {formatDate(new Date(label))}
+          {formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
         </Typography>
         {Object.keys(config)
           .reverse()
@@ -176,6 +178,7 @@ const processDataWithGaps = (data, interval) => {
  */
 const CustomTick = ({ x, y, payload, index }) => {
   const theme = useTheme();
+  const uiTimezone = useSelector((state) => state.ui.timezone);
 
   // Render nothing for the first tick
   if (index === 0) return null;
@@ -189,11 +192,7 @@ const CustomTick = ({ x, y, payload, index }) => {
       fontSize={11}
       fontWeight={400}
     >
-      {formatDate(new Date(payload.value), {
-        year: undefined,
-        month: undefined,
-        day: undefined,
-      })}
+      {formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
     </Text>
   );
 };

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -99,12 +99,7 @@ const PageSpeedDetails = () => {
           />
           <Stack direction="row" gap={theme.spacing(2)}>
             <Box>
-              <Typography
-                component="h1"
-                fontSize={22}
-                fontWeight={500}
-                color={theme.palette.text.primary}
-              >
+              <Typography component="h1" variant="h1">
                 {monitor.name}
               </Typography>
               <Stack
@@ -143,19 +138,14 @@ const PageSpeedDetails = () => {
                     />
                   </Box>
                 </Tooltip>
-                <Typography
-                  component="h2"
-                  fontSize={14.5}
-                  color={theme.palette.text.secondary}
-                >
+                <Typography component="h2" variant="h2">
                   {monitor?.url}
                 </Typography>
                 <Typography
+                  position="relative"
+                  variant="body2"
                   mt={theme.spacing(1)}
                   ml={theme.spacing(6)}
-                  fontSize={12}
-                  position="relative"
-                  color={theme.palette.text.tertiary}
                   sx={{
                     "&:before": {
                       position: "absolute",
@@ -212,11 +202,7 @@ const PageSpeedDetails = () => {
             </StatBox>
           </Stack>
           <Box>
-            <Typography
-              fontSize={12}
-              color={theme.palette.text.tertiary}
-              my={theme.spacing(8)}
-            >
+            <Typography variant="body2" my={theme.spacing(8)}>
               Showing statistics for past 24 hours.
             </Typography>
             <ChartBox sx={{ gridTemplateColumns: "75% 25%" }}>
@@ -308,7 +294,7 @@ const PageSpeedDetails = () => {
               pb={theme.spacing(12)}
             >
               <PieChart audits={audits} />
-              <Typography fontSize={13} mt="auto">
+              <Typography variant="body1" mt="auto">
                 Values are estimated and may vary.{" "}
                 <Typography
                   component="span"
@@ -393,14 +379,10 @@ const PageSpeedDetails = () => {
                           component="span"
                           fontSize={14}
                           fontWeight={500}
+                          color={theme.palette.text.primary}
                         >
                           {value}
-                          <Typography
-                            component="span"
-                            fontSize={12}
-                            color={theme.palette.text.tertiary}
-                            ml={2}
-                          >
+                          <Typography component="span" variant="body2" ml={2}>
                             {unit}
                           </Typography>
                         </Typography>

Client/src/Pages/PageSpeed/card.jsx

@@ -3,6 +3,8 @@ import { StatusLabel } from "../../Components/Label";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
+import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
+import { getLastChecked } from "../../Utils/monitorUtils";
 import useUtils from "../Monitors/utils";
 import PropTypes from "prop-types";
 
@@ -44,6 +46,7 @@ const Card = ({ monitor }) => {
             <Typography
               component="h2"
               mb={theme.spacing(2)}
+              fontSize={16}
               color={theme.palette.primary.main}
             >
               {monitor.name}
@@ -54,8 +57,15 @@ const Card = ({ monitor }) => {
               customStyles={{ textTransform: "capitalize" }}
             />
           </Stack>
-          <Typography fontSize={13}>
-            {monitor.url.replace(/^https?:\/\//, "")}
+          <Typography>{monitor.url.replace(/^https?:\/\//, "")}</Typography>
+          <Typography mt={theme.spacing(12)}>
+            <Typography component="span" variant="body2" fontWeight={600}>
+              Last checked:{" "}
+            </Typography>
+            {formatDate(getLastChecked(monitor.checks, false))}{" "}
+            <Typography component="span" variant="body2" fontStyle="italic">
+              ({formatDurationRounded(getLastChecked(monitor.checks))} ago)
+            </Typography>
           </Typography>
         </Box>
       </Stack>

Client/src/Pages/PageSpeed/index.css

@@ -1,17 +1,6 @@
 .page-speed h2.MuiTypography-root {
   line-height: 1.1;
 }
-.page-speed:not(:has([class*="fallback__"])) h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large-plus);
-}
-.page-speed h2.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  font-weight: 600;
-}
-.page-speed p:has(> span.MuiTypography-root),
-.page-speed p.MuiTypography-root > span.MuiTypography-root {
-  font-size: var(--env-var-font-size-small-plus);
-}
 .page-speed .label {
   padding: 7px;
   height: 22px;

Client/src/Utils/Theme/darkTheme.js

@@ -21,7 +21,14 @@ const shadow =
   "0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
 
 const darkTheme = createTheme({
-  typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
+  typography: {
+    fontFamily: fontFamilyDefault,
+    fontSize: 13,
+    h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
+    h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 },
+    body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
+    body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
+  },
   palette: {
     mode: "dark",
     primary: { main: "#1570ef" },
@@ -70,6 +77,7 @@ const darkTheme = createTheme({
       line: "#27272a",
       fill: "#18181a",
       grid: "#454546",
+      autofill: "#2d2d33",
     },
   },
   spacing: 2,

Client/src/Utils/Theme/lightTheme.js

@@ -20,7 +20,14 @@ const shadow =
   "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
 
 const lightTheme = createTheme({
-  typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
+  typography: {
+    fontFamily: fontFamilyDefault,
+    fontSize: 13,
+    h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
+    h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 },
+    body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
+    body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
+  },
   palette: {
     primary: { main: "#1570EF" },
     secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
@@ -67,6 +74,7 @@ const lightTheme = createTheme({
       line: "#d6d9dd",
       fill: "#e3e3e3",
       grid: "#a2a3a3",
+      autofill: "#e8f0fe",
     },
   },
   spacing: 2,

Client/src/Utils/greeting.jsx

@@ -155,30 +155,20 @@ const Greeting = ({ type = "" }) => {
 
   return (
     <Box>
-      <Typography
-        component="h1"
-        lineHeight={1}
-        fontWeight={500}
-        color={theme.palette.text.primary}
-        mb={theme.spacing(1)}
-      >
+      <Typography component="h1" variant="h1" mb={theme.spacing(1)}>
+        <Typography component="span" fontSize="inherit">
+          {prepend},{" "}
+        </Typography>
         <Typography
           component="span"
           fontSize="inherit"
+          fontWeight="inherit"
           color={theme.palette.text.secondary}
         >
-          {prepend},{" "}
-        </Typography>
-        <Typography component="span" fontSize="inherit" fontWeight="inherit">
           {firstName} {emoji}
         </Typography>
       </Typography>
-      <Typography
-        lineHeight={1}
-        fontSize={14}
-        fontWeight={400}
-        color={theme.palette.text.accent}
-      >
+      <Typography variant="h2" lineHeight={1} color={theme.palette.text.accent}>
         {append} — Here’s an overview of your {type} monitors.
       </Typography>
     </Box>

Client/src/index.css

@@ -9,8 +9,6 @@ html {
 }
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-weight: 400;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;