Refactored pages styling 1/?

2026-01-25 19:29:39 -06:00 · 2024-08-27 20:11:59 -04:00
parent edeaf2ede9
commit e5c19c2744
18 changed files with 404 additions and 207 deletions
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { forwardRef, useState } from "react";
 import { useTheme } from "@emotion/react";
 import {
  IconButton,
@@ -9,10 +10,7 @@ import {
 } from "@mui/material";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Visibility from "@mui/icons-material/Visibility";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import Button from "../../Button";
 import "./index.css";
-import { forwardRef, useState } from "react";

 /**
 * @param {Object} props
@@ -119,6 +117,11 @@ const Field = forwardRef(
          onChange={onChange}
          disabled={disabled}
          inputRef={ref}
+          inputProps={{
+            sx: {
+              color: theme.palette.text.secondary,
+            },
+          }}
          sx={
            type === "url"
              ? {
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -124,8 +124,13 @@ function Sidebar() {
    <Stack
      component="aside"
      className={collapsed ? "collapsed" : "expanded"}
+      py={theme.spacing(6)}
      gap={theme.spacing(6)}
      sx={{
+        border: 1,
+        borderColor: theme.palette.border.light,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.main,
        "& .selected-path, & .MuiListItemButton-root:hover": {
          backgroundColor: theme.palette.background.accent,
        },
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -97,13 +97,20 @@ const PasswordPanel = () => {
  };

  return (
-    <TabPanel value="password">
+    <TabPanel
+      value="password"
+      sx={{
+        "& h1, & input": {
+          color: theme.palette.text.tertiary,
+        },
+      }}
+    >
      <Stack
        component="form"
        onSubmit={handleSubmit}
        noValidate
        spellCheck="false"
-        gap={theme.gap.xl}
+        gap={theme.spacing(20)}
      >
        <Stack direction="row">
          <Box flex={0.9}>
@@ -165,9 +172,9 @@ const PasswordPanel = () => {
            loadingText="Saving..."
            disabled={Object.keys(errors).length !== 0 && true}
            sx={{
-              paddingX: theme.gap.large,
+              paddingX: theme.spacing(12),
              width: "fit-content",
-              mt: theme.gap.xl,
+              mt: theme.spacing(20),
            }}
          />
        </Stack>
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -216,13 +216,20 @@ const ProfilePanel = () => {
  const isModalOpen = (name) => isOpen === name;

  return (
-    <TabPanel value="profile">
+    <TabPanel
+      value="profile"
+      sx={{
+        "& h1, & p, & input": {
+          color: theme.palette.text.tertiary,
+        },
+      }}
+    >
      <Stack
        component="form"
        className="edit-profile-form"
        noValidate
        spellCheck="false"
-        gap={theme.gap.xl}
+        gap={theme.spacing(20)}
      >
        <Stack direction="row">
          <Box flex={0.9}>
@@ -295,7 +302,7 @@ const ProfilePanel = () => {
              label="Update"
              onClick={openPictureModal}
              sx={{
-                color: theme.palette.primary.main,
+                color: theme.palette.common.main,
              }}
            />
          </Stack>
@@ -303,7 +310,9 @@ const ProfilePanel = () => {
        <Divider
          aria-hidden="true"
          width="0"
-          sx={{ marginY: theme.spacing(1) }}
+          sx={{
+            marginY: theme.spacing(1),
+          }}
        />
        <Stack direction="row" justifyContent="flex-end">
          <Box width="fit-content">
@@ -317,18 +326,24 @@ const ProfilePanel = () => {
                Object.keys(errors).length !== 0 && !errors?.picture && true
              }
              sx={{
-                paddingX: theme.gap.large,
+                paddingX: theme.spacing(12),
              }}
            />
          </Box>
        </Stack>
      </Stack>
-      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6) }} />
+      <Divider
+        aria-hidden="true"
+        sx={{
+          marginY: theme.spacing(20),
+          borderColor: theme.palette.border.light,
+        }}
+      />
      <Stack
        component="form"
        noValidate
        spellCheck="false"
-        gap={theme.gap.small}
+        gap={theme.spacing(4)}
      >
        <Box>
          <Typography component="h1">Delete account</Typography>
@@ -341,7 +356,7 @@ const ProfilePanel = () => {
          level="error"
          label="Delete account"
          onClick={() => setIsOpen("delete")}
-          sx={{ width: "fit-content", mt: theme.gap.small }}
+          sx={{ width: "fit-content", mt: theme.spacing(4) }}
        />
      </Stack>
      {/* TODO - Update ModalPopup Component with @mui for reusability */}
@@ -353,18 +368,19 @@ const ProfilePanel = () => {
        disablePortal
      >
        <Stack
-          gap="10px"
+          gap={theme.spacing(5)}
          sx={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: 500,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
            boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
            "&:focus": {
              outline: "none",
            },
@@ -378,7 +394,12 @@ const ProfilePanel = () => {
            and all of your data will be deleted. Deleting your account is
            permanent and non-recoverable action.
          </Typography>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
+          <Stack
+            direction="row"
+            gap={theme.spacing(5)}
+            mt={theme.spacing(5)}
+            justifyContent="flex-end"
+          >
            <Button
              level="tertiary"
              label="Cancel"
@@ -406,17 +427,22 @@ const ProfilePanel = () => {
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: 450,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
            boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
            "&:focus": {
              outline: "none",
            },
          }}
        >
-          <Typography id="modal-update-picture" component="h1">
+          <Typography
+            id="modal-update-picture"
+            component="h1"
+            color={theme.palette.text.secondary}
+          >
            Upload Image
          </Typography>
          <ImageField
@@ -447,7 +473,12 @@ const ProfilePanel = () => {
          ) : (
            ""
          )}
-          <Stack direction="row" mt="20px" gap="10px" justifyContent="flex-end">
+          <Stack
+            direction="row"
+            mt={theme.spacing(10)}
+            gap={theme.spacing(5)}
+            justifyContent="flex-end"
+          >
            <Button
              level="secondary"
              label="Edit"
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -198,7 +198,18 @@ const TeamPanel = () => {
  };

  return (
-    <TabPanel value="team">
+    <TabPanel
+      value="team"
+      sx={{
+        "& h1": {
+          color: theme.palette.text.tertiary,
+        },
+        "& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
+          {
+            color: theme.palette.text.accent,
+          },
+      }}
+    >
      {/* FEATURE STILL TO BE IMPLEMENTED */}
      {/* <Stack component="form">
        <Box sx={{ alignSelf: "flex-start" }}>
@@ -250,24 +261,30 @@ const TeamPanel = () => {
        component="form"
        noValidate
        spellCheck="false"
-        gap={theme.gap.large}
+        gap={theme.spacing(12)}
      >
        <Typography component="h1">Team members</Typography>
        <Stack direction="row" justifyContent="space-between">
          <Stack
            direction="row"
            alignItems="flex-end"
-            gap={theme.gap.medium}
-            sx={{ fontSize: "14px" }}
+            gap={theme.spacing(6)}
+            sx={{ fontSize: 14 }}
          >
-            <ButtonGroup>
+            <ButtonGroup
+              sx={{
+                "& button, & button:hover": {
+                  borderColor: theme.palette.border.light,
+                },
+              }}
+            >
              <Button
                level="secondary"
                label="All"
                onClick={() => setFilter("all")}
                sx={{
                  backgroundColor:
-                    filter === "all" && theme.palette.otherColors.fillGray,
+                    filter === "all" && theme.palette.background.fill,
                }}
              />
              <Button
@@ -276,7 +293,7 @@ const TeamPanel = () => {
                onClick={() => setFilter("admin")}
                sx={{
                  backgroundColor:
-                    filter === "admin" && theme.palette.otherColors.fillGray,
+                    filter === "admin" && theme.palette.background.fill,
                }}
              />
              <Button
@@ -285,7 +302,7 @@ const TeamPanel = () => {
                onClick={() => setFilter("user")}
                sx={{
                  backgroundColor:
-                    filter === "user" && theme.palette.otherColors.fillGray,
+                    filter === "user" && theme.palette.background.fill,
                }}
              />
            </ButtonGroup>
@@ -293,7 +310,7 @@ const TeamPanel = () => {
          <Button
            level="primary"
            label="Invite a team member"
-            sx={{ paddingX: "30px" }}
+            sx={{ paddingX: theme.spacing(15) }}
            onClick={() => setIsOpen(true)}
          />
        </Stack>
@@ -312,18 +329,19 @@ const TeamPanel = () => {
        disablePortal
      >
        <Stack
-          gap="10px"
+          gap={theme.spacing(5)}
          sx={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
+            bgcolor: theme.palette.background.main,
+            border: 1,
+            borderColor: theme.palette.border.light,
+            borderRadius: theme.shape.borderRadius,
            boxShadow: 24,
-            p: "30px",
+            p: theme.spacing(15),
            "&:focus": {
              outline: "none",
            },
@@ -335,7 +353,7 @@ const TeamPanel = () => {
          <Typography
            id="invite-member-to-team"
            component="p"
-            sx={{ mb: theme.gap.medium }}
+            sx={{ mb: theme.spacing(6) }}
          >
            When you add a new team member, they will get access to all
            monitors.
@@ -360,14 +378,14 @@ const TeamPanel = () => {
              }))
            }
            items={[
-              { _id: "admin", name: "admin" },
-              { _id: "user", name: "user" },
+              { _id: "admin", name: "Admin" },
+              { _id: "user", name: "User" },
            ]}
          />
          <Stack
            direction="row"
-            gap={theme.gap.small}
-            mt={theme.gap.ml}
+            gap={theme.spacing(4)}
+            mt={theme.spacing(8)}
            justifyContent="flex-end"
          >
            <Button
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -19,12 +19,6 @@

  height: calc(100vh - var(--env-var-spacing-2) * 2);
  max-width: var(--env-var-side-bar-width);
-
-  border: 1px solid var(--border-color);
-  border-radius: var(--env-var-radius-1);
-  background-color: var(--primary-bg);
-
-  padding: var(--env-var-spacing-1) 0;
 }

 .home-layout > div {
@@ -32,19 +26,11 @@
  flex: 1;
 }

-.home-layout > div:has(> [class*="fallback__"]) {
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-  border-style: dashed;
-  background-color: var(--primary-bg);
-  overflow: hidden;
-  position: relative;
-}
 .home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
  position: absolute;
  top: 0;
  left: 50%;
-  transform: translate(-50%, -33%);
+  transform: translate(-50%, -47%);
  z-index: 0;

  width: 100%;
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -6,12 +6,6 @@
 .account .MuiSelect-select {
  font-size: var(--env-var-font-size-medium);
 }
-.account h1.MuiTypography-root,
-.account p.MuiTypography-root,
-.account input,
-.account .MuiSelect-select {
-  color: var(--secondary-color-light);
-}
 .account h1.MuiTypography-root {
  font-weight: 600;
 }
@@ -19,10 +13,6 @@
  padding: 0;
  margin-top: 50px;
 }
-.account .MuiDivider-root,
-.account .MuiButtonGroup-root button {
-  border-color: var(--border-color);
-}
 .account button:not(.MuiIconButton-root) {
  height: 34px;
 }
@@ -43,10 +33,6 @@
  top: 100%;
 }

-.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root,
-.account .MuiTable-root p + p {
-  color: var(--secondary-color-light-accent);
-}
 .account .MuiTableBody-root .MuiTableCell-root {
  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
 }
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -30,18 +30,18 @@ const Account = ({ open = "profile" }) => {
  return (
    <Box
      className="account"
-      px={theme.gap.xl}
-      py={theme.gap.large}
+      px={theme.spacing(20)}
+      py={theme.spacing(12)}
      border={1}
-      borderColor={theme.palette.otherColors.graishWhite}
-      borderRadius={`${theme.shape.borderRadius}px`}
-      backgroundColor={theme.palette.otherColors.white}
+      borderColor={theme.palette.border.light}
+      borderRadius={theme.shape.borderRadius}
+      backgroundColor={theme.palette.background.main}
    >
      <TabContext value={tab}>
        <Box
          sx={{
            borderBottom: 1,
-            borderColor: "var(--env-var-color-16)",
+            borderColor: theme.palette.border.light,
            "& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
          }}
        >
@@ -52,15 +52,15 @@ const Account = ({ open = "profile" }) => {
                key={index}
                value={label.toLowerCase()}
                sx={{
-                  fontSize: "13px",
-                  color: theme.palette.secondary.main,
+                  fontSize: 13,
+                  color: theme.palette.text.tertiary,
                  textTransform: "none",
                  minWidth: "fit-content",
                  minHeight: 0,
-                  paddingLeft: "0",
-                  paddingY: theme.gap.small,
+                  paddingLeft: 0,
+                  paddingY: theme.spacing(4),
                  fontWeight: 400,
-                  marginRight: theme.gap.ml,
+                  marginRight: theme.spacing(8),
                  "&:focus": {
                    outline: "none",
                  },
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -85,7 +85,21 @@ const CheckEmail = () => {
  };

  return (
-    <Stack className="check-email-page auth" overflow="hidden">
+    <Stack
+      className="check-email-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 26,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -93,8 +107,8 @@ const CheckEmail = () => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -104,31 +118,31 @@ const CheckEmail = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
      >
        <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
          alignItems="center"
          textAlign="center"
        >
          <Box>
            <EmailIcon alt="email icon" />
            <Typography component="h1">Check your email</Typography>
-            <Typography mt={theme.gap.xs}>
+            <Typography mt={theme.spacing(2)}>
              We sent a password reset link to{" "}
              <Typography className="email-sent-to" component="span">
                {email || "username@email.com"}
@@ -144,13 +158,13 @@ const CheckEmail = () => {
              maxWidth: 400,
            }}
          />
-          <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
+          <Typography sx={{ alignSelf: "center", mb: theme.spacing(6) }}>
            Didn&apos;t receive the email?{" "}
            <Typography
              component="span"
              onClick={resendToken}
              sx={{
-                color: theme.palette.primary.main,
+                color: theme.palette.common.main,
                userSelect: "none",
                pointerEvents: disabled ? "none" : "auto",
                cursor: disabled ? "default" : "pointer",
@@ -162,11 +176,12 @@ const CheckEmail = () => {
          </Typography>
        </Stack>
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">Go back to —</Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          ml={theme.spacing(2)}
+          color={theme.palette.common.main}
          onClick={handleNavigate}
          sx={{ userSelect: "none" }}
        >
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -87,7 +87,21 @@ const ForgotPassword = () => {
  };

  return (
-    <Stack className="forgot-password-page auth" overflow="hidden">
+    <Stack
+      className="forgot-password-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 24,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -95,8 +109,8 @@ const ForgotPassword = () => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -106,24 +120,24 @@ const ForgotPassword = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
      >
        <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
          alignItems="center"
          textAlign="center"
        >
@@ -155,18 +169,18 @@ const ForgotPassword = () => {
                sx={{
                  width: "100%",
                  fontWeight: 400,
-                  mt: theme.gap.mlplus,
+                  mt: theme.spacing(10),
                }}
              />
            </form>
          </Box>
        </Stack>
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">Go back to —</Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          ml={theme.spacing(2)}
          onClick={handleNavigate}
          sx={{ userSelect: "none" }}
        >
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -30,7 +30,7 @@ const LandingPage = ({ onContinue }) => {
  return (
    <>
      <Stack
-        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
        alignItems="center"
        textAlign="center"
      >
@@ -47,7 +47,7 @@ const LandingPage = ({ onContinue }) => {
            sx={{
              width: "100%",
              "& svg": {
-                mr: theme.gap.small,
+                mr: theme.spacing(4),
              },
            }}
          />
@@ -64,6 +64,11 @@ const LandingPage = ({ onContinue }) => {
                  "noreferrer"
                );
              }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
            >
              Terms of Service
            </Typography>{" "}
@@ -77,6 +82,11 @@ const LandingPage = ({ onContinue }) => {
                  "noreferrer"
                );
              }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
            >
              Privacy Policy.
            </Typography>
@@ -114,7 +124,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Log In</Typography>
          <Typography>Enter your email address</Typography>
@@ -144,10 +157,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              mb: theme.gap.medium,
-              px: theme.gap.ml,
+              mb: theme.spacing(6),
+              px: theme.spacing(8),
              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
              },
            }}
            props={{ tabIndex: -1 }}
@@ -204,7 +217,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Log In</Typography>
          <Typography>Enter your password</Typography>
@@ -233,10 +249,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              mb: theme.gap.medium,
-              px: theme.gap.ml,
+              mb: theme.spacing(6),
+              px: theme.spacing(8),
              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
              },
            }}
            props={{ tabIndex: -1 }}
@@ -255,7 +271,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
          </Typography>
          <Typography
            component="span"
-            ml={theme.gap.xs}
+            ml={theme.spacing(2)}
            sx={{ userSelect: "none" }}
            onClick={handleNavigate}
          >
@@ -393,7 +409,21 @@ const Login = () => {
  };

  return (
-    <Stack className="login-page auth" overflow="hidden">
+    <Stack
+      className="login-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 30,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -401,8 +431,8 @@ const Login = () => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -412,18 +442,18 @@ const Login = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
@@ -450,13 +480,14 @@ const Login = () => {
          )
        )}
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">
          Don&apos;t have an account? —
        </Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.main}
+          ml={theme.spacing(2)}
          onClick={() => {
            navigate("/register");
          }}
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -22,7 +22,21 @@ const NewPasswordConfirmed = () => {
  };

  return (
-    <Stack className="password-confirmed-page auth" overflow="hidden">
+    <Stack
+      className="password-confirmed-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 22,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -30,8 +44,8 @@ const NewPasswordConfirmed = () => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -41,31 +55,31 @@ const NewPasswordConfirmed = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
      >
        <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
          alignItems="center"
          textAlign="center"
        >
          <Box>
            <ConfirmIcon alt="password confirm icon" />
            <Typography component="h1">Password reset</Typography>
-            <Typography mt={theme.gap.xs}>
+            <Typography mt={theme.spacing(2)}>
              Your password has been successfully reset. Click below to log in
              magically.
            </Typography>
@@ -81,11 +95,12 @@ const NewPasswordConfirmed = () => {
          />
        </Stack>
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">Go back to —</Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.main}
+          ml={theme.spacing(2)}
          onClick={handleNavigate}
          sx={{ userSelect: "none" }}
        >
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -33,7 +33,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
  return (
    <>
      <Stack
-        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
        alignItems="center"
        textAlign="center"
      >
@@ -52,7 +52,7 @@ const LandingPage = ({ isAdmin, onSignup }) => {
            sx={{
              width: "100%",
              "& svg": {
-                mr: theme.gap.small,
+                mr: theme.spacing(4),
              },
            }}
          />
@@ -69,6 +69,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
                  "noreferrer"
                );
              }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
            >
              Terms of Service
            </Typography>{" "}
@@ -82,6 +87,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
                  "noreferrer"
                );
              }}
+              sx={{
+                "&:hover": {
+                  color: theme.palette.text.tertiary,
+                },
+              }}
            >
              Privacy Policy.
            </Typography>
@@ -120,7 +130,10 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Enter your personal details</Typography>
@@ -160,9 +173,9 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
              },
            }}
            props={{ tabIndex: -1 }}
@@ -211,7 +224,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Enter your email address</Typography>
@@ -241,9 +257,9 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
              },
            }}
            props={{ tabIndex: -1 }}
@@ -292,7 +308,10 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
+      <Stack
+        gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Create your password</Typography>
@@ -327,7 +346,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
          </form>
          <Stack
            gap={theme.gap.small}
-            mb={{ xs: theme.gap.ml, sm: theme.gap.large }}
+            mb={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
          >
            <Check
              text={
@@ -394,9 +413,9 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              px: theme.gap.ml,
+              px: theme.spacing(8),
              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.xs,
+                mr: theme.spacing(2),
              },
            }}
            props={{ tabIndex: -1 }}
@@ -580,7 +599,21 @@ const Register = ({ isAdmin }) => {
  };

  return (
-    <Stack className="register-page auth" overflow="hidden">
+    <Stack
+      className="register-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 30,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -588,8 +621,8 @@ const Register = ({ isAdmin }) => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -599,18 +632,18 @@ const Register = ({ isAdmin }) => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.xl}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
@@ -645,17 +678,17 @@ const Register = ({ isAdmin }) => {
          ""
        )}
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">
          Already have an account? —
        </Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          ml={theme.spacing(2)}
          onClick={() => {
            navigate("/login");
          }}
-          sx={{ userSelect: "none" }}
+          sx={{ userSelect: "none", color: theme.palette.common.main }}
        >
          Log In
        </Typography>
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -104,7 +104,21 @@ const SetNewPassword = () => {
  };

  return (
-    <Stack className="set-new-password-page auth" overflow="hidden">
+    <Stack
+      className="set-new-password-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.common.main,
+          fontWeight: 600,
+          fontSize: 24,
+        },
+        "& p": {
+          fontSize: 14,
+          color: theme.palette.text.accent,
+        },
+      }}
+    >
      <Box
        className="background-pattern-svg"
        sx={{ backgroundImage: `url(${background})` }}
@@ -112,8 +126,8 @@ const SetNewPassword = () => {
      <Stack
        direction="row"
        alignItems="center"
-        px={theme.gap.large}
-        gap={theme.gap.small}
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
      >
        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
@@ -123,24 +137,24 @@ const SetNewPassword = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
-        pb={theme.gap.large}
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(12)}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
            border: 1,
-            borderRadius: theme.shape.borderRadius,
-            borderColor: theme.palette.otherColors.graishWhite,
-            backgroundColor: theme.palette.otherColors.white,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.border.light,
+            backgroundColor: theme.palette.background.main,
            padding: {
-              xs: theme.gap.large,
-              sm: theme.gap.xl,
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
            },
          },
        }}
      >
        <Stack
-          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
          alignItems="center"
          textAlign="center"
        >
@@ -176,7 +190,7 @@ const SetNewPassword = () => {
                error={errors.confirm}
              />
            </form>
-            <Stack gap={theme.gap.small} mb={theme.gap.large}>
+            <Stack gap={theme.spacing(4)} mb={theme.spacing(12)}>
              <Check
                text={
                  <>
@@ -244,11 +258,12 @@ const SetNewPassword = () => {
          />
        </Stack>
      </Stack>
-      <Box textAlign="center" p={theme.gap.large}>
+      <Box textAlign="center" p={theme.spacing(12)}>
        <Typography display="inline-block">Go back to —</Typography>
        <Typography
          component="span"
-          ml={theme.gap.xs}
+          color={theme.palette.common.main}
+          ml={theme.spacing(2)}
          onClick={() => navigate("/login")}
          sx={{ userSelect: "none" }}
        >
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -5,7 +5,6 @@
 .auth h1 {
  font-size: var(--env-var-font-size-xlarge);
  font-weight: 600;
-  color: var(--theme-main);
 }
 .auth button:not(.MuiIconButton-root),
 .auth p,
@@ -13,16 +12,8 @@
 .auth span {
  font-size: var(--env-var-font-size-medium-plus);
 }
-.auth p {
-  color: var(--secondary-color-light-accent);
-}
-.auth .field h3.MuiTypography-root,
-.auth .field input {
-  color: var(--secondary-color);
-}

 .auth p + span {
-  color: var(--theme-main);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 300ms ease-in;
@@ -34,7 +25,6 @@
  transition: all 200ms;
 }
 .auth p > span:not(.email-sent-to):hover {
-  color: var(--secondary-color-light);
  text-underline-offset: 4px;
 }
 .auth p + span:hover {
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -1,9 +1,26 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";

 const Maintenance = () => {
+  const theme = useTheme();
+
  return (
-    <div className="maintenance">
+    <Box
+      className="maintenance"
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
      <Fallback
        title="maintenance window"
        checks={[
@@ -13,7 +30,7 @@ const Maintenance = () => {
        ]}
        link="/maintenance/create"
      />
-    </div>
+    </Box>
  );
 };

--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -145,7 +145,21 @@ const PageSpeed = () => {
  let isActuallyLoading = isLoading && monitors.length === 0;

  return (
-    <Box className="page-speed" pt={theme.gap.xl}>
+    <Box
+      className="page-speed"
+      pt={theme.gap.xl}
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
      {isActuallyLoading ? (
        <SkeletonLayout />
      ) : monitors?.length !== 0 ? (
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -1,8 +1,25 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";

 const Status = () => {
+  const theme = useTheme();
+
  return (
-    <div className="status">
+    <Box
+      className="status"
+      sx={{
+        ':has(> [class*="fallback__"])': {
+          position: "relative",
+          border: 1,
+          borderColor: theme.palette.border.light,
+          borderRadius: theme.shape.borderRadius,
+          borderStyle: "dashed",
+          backgroundColor: theme.palette.background.main,
+          overflow: "hidden",
+        },
+      }}
+    >
      <Fallback
        title="status page"
        checks={[
@@ -11,7 +28,7 @@ const Status = () => {
          "Build trust with your customers",
        ]}
      />
-    </div>
+    </Box>
  );
 };