Fixed background color not changing on theme swap

2026-01-12 12:49:42 -06:00 · 2024-09-06 16:32:38 -04:00
parent 0598a08f34
commit 79ba916a44
9 changed files with 71 additions and 43 deletions
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -32,6 +32,7 @@ import { ThemeProvider } from "@emotion/react";
 import lightTheme from "./Utils/Theme/lightTheme";
 import darkTheme from "./Utils/Theme/darkTheme";
 import { useSelector } from "react-redux";
+import { CssBaseline } from "@mui/material";

 function App() {
  const AdminCheckedRegister = withAdminCheck(Register);
@@ -45,6 +46,7 @@ function App() {

  return (
    <ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
+      <CssBaseline />
      <Routes>
        <Route exact path="/" element={<HomeLayout />}>
          <Route
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -149,6 +149,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
          dataKey="responseTime"
          stroke={theme.palette.primary.main}
          fill="url(#colorUv)"
+          strokeWidth={1.5}
        />
      </AreaChart>
    </ResponsiveContainer>
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,7 +1,3 @@
-#root:has(.home-layout) {
-  background-color: var(--secondary-bg);
-}
-
 .home-layout {
  position: relative;
  min-height: 100vh;
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -1,24 +1,15 @@
 import Sidebar from "../../Components/Sidebar";
 import { Outlet } from "react-router";
-import { Box, Stack } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import { Stack } from "@mui/material";

 import "./index.css";

 const HomeLayout = () => {
-  const theme = useTheme();
-
  return (
-    <Box backgroundColor={theme.palette.background.alt}>
-      <Stack
-        className="home-layout"
-        flexDirection="row"
-        gap={theme.spacing(14)}
-      >
-        <Sidebar />
-        <Outlet />
-      </Stack>
-    </Box>
+    <Stack className="home-layout" flexDirection="row" gap={14}>
+      <Sidebar />
+      <Outlet />
+    </Stack>
  );
 };

--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -6,9 +6,11 @@ import { forgotPassword } from "../../Features/Auth/authSlice";
 import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
+import { IconBox } from "./styled";
 import Field from "../../Components/Inputs/Field";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
+import Background from "../../assets/Images/background-grid.svg?react";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import LoadingButton from "@mui/lab/LoadingButton";
 import "./index.css";
@@ -94,7 +96,7 @@ const ForgotPassword = () => {
        "& h1": {
          color: theme.palette.primary.main,
          fontWeight: 600,
-          fontSize: 24,
+          fontSize: 21,
        },
        "& p": {
          fontSize: 14,
@@ -104,8 +106,14 @@ const ForgotPassword = () => {
    >
      <Box
        className="background-pattern-svg"
-        sx={{ backgroundImage: `url(${background})` }}
-      />
+        sx={{
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.border.light,
+          },
+        }}
+      >
+        <Background style={{ width: "100%" }} />
+      </Box>
      <Stack
        direction="row"
        alignItems="center"
@@ -142,7 +150,9 @@ const ForgotPassword = () => {
          textAlign="center"
        >
          <Box>
-            <Key alt="password key icon" />
+            <IconBox>
+              <Key alt="password key icon" />
+            </IconBox>
            <Typography component="h1">Forgot password?</Typography>
            <Typography>
              No worries, we&apos;ll send you reset instructions.
--- a/Client/src/Pages/Auth/styled.jsx
+++ b/Client/src/Pages/Auth/styled.jsx
@@ -0,0 +1,26 @@
+import { Box, styled } from "@mui/material";
+
+export const IconBox = styled(Box)(({ theme }) => ({
+  height: 48,
+  minWidth: 48,
+  width: 48,
+  position: "relative",
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.dark,
+  borderRadius: 12,
+  backgroundColor: theme.palette.background.accent,
+  margin: "auto",
+  marginBottom: 4,
+  "& svg": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 24,
+    height: 24,
+    "& path": {
+      stroke: theme.palette.text.tertiary,
+    },
+  },
+}));
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -53,8 +53,8 @@ const darkTheme = createTheme({
    warning: {
      text: "#e88c30",
      main: "#FF9F00",
-      light: "#272115",
-      bg: "#624711",
+      light: "#624711",
+      bg: "#262115",
      border: "#e88c30",
    },
    percentage: {
@@ -74,6 +74,15 @@ const darkTheme = createTheme({
  },
  spacing: 2,
  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundImage:
+            "radial-gradient(circle, #09090b, #0c0c0e, #0f0f11, #111113, #131315, #131315, #131315, #131315, #111113, #0f0f11, #0c0c0e, #09090b)",
+          lineHeight: "inherit",
+        },
+      },
+    },
    MuiButton: {
      defaultProps: {
        disableRipple: true,
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -50,8 +50,8 @@ const lightTheme = createTheme({
    warning: {
      text: "#DC6803",
      main: "#fdb022",
-      light: "#fffcf5",
-      bg: "#ffecbc",
+      light: "#ffecbc",
+      bg: "#fffcf5",
      border: "#fec84b",
    },
    percentage: {
@@ -71,6 +71,14 @@ const lightTheme = createTheme({
  },
  spacing: 2,
  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundImage:
+            "radial-gradient(circle, #fcfcfd, #fdfcfd, #fdfdfd, #fefdfe, #fefefe, #fefefe, #fefefe, #fefefe, #fefdfe, #fdfdfd, #fdfcfd, #fcfcfd)",
+        },
+      },
+    },
    MuiButton: {
      defaultProps: {
        disableRipple: true,
--- a/Client/src/assets/icons/key.svg
+++ b/Client/src/assets/icons/key.svg
@@ -1,18 +1,3 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_137_18974)">
-<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
-<path d="M35.8333 25.4999C35.8333 24.9028 35.6055 24.3057 35.1499 23.8501C34.6943 23.3945 34.0972 23.1667 33.5 23.1667M33.5 32.5C37.366 32.5 40.5 29.366 40.5 25.5C40.5 21.634 37.366 18.5 33.5 18.5C29.634 18.5 26.5 21.634 26.5 25.5C26.5 25.8193 26.5214 26.1336 26.5628 26.4415C26.6309 26.948 26.6649 27.2013 26.642 27.3615C26.6181 27.5284 26.5877 27.6184 26.5055 27.7655C26.4265 27.9068 26.2873 28.046 26.009 28.3243L20.0467 34.2866C19.845 34.4884 19.7441 34.5893 19.6719 34.707C19.608 34.8114 19.5608 34.9252 19.5322 35.0442C19.5 35.1785 19.5 35.3212 19.5 35.6065V37.6333C19.5 38.2867 19.5 38.6134 19.6272 38.863C19.739 39.0825 19.9175 39.261 20.137 39.3728C20.3866 39.5 20.7133 39.5 21.3667 39.5H24.1667V37.1667H26.5V34.8333H28.8333L30.6757 32.991C30.954 32.7127 31.0932 32.5735 31.2345 32.4945C31.3816 32.4123 31.4716 32.3819 31.6385 32.358C31.7987 32.3351 32.052 32.3691 32.5585 32.4372C32.8664 32.4786 33.1807 32.5 33.5 32.5Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_137_18974" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_18974"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_18974" result="shape"/>
-</filter>
-</defs>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 8.99994C17 8.48812 16.8047 7.9763 16.4142 7.58579C16.0237 7.19526 15.5118 7 15 7M15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3C11.6863 3 9 5.68629 9 9C9 9.27368 9.01832 9.54308 9.05381 9.80704C9.11218 10.2412 9.14136 10.4583 9.12172 10.5956C9.10125 10.7387 9.0752 10.8157 9.00469 10.9419C8.937 11.063 8.81771 11.1823 8.57913 11.4209L3.46863 16.5314C3.29568 16.7043 3.2092 16.7908 3.14736 16.8917C3.09253 16.9812 3.05213 17.0787 3.02763 17.1808C3 17.2959 3 17.4182 3 17.6627V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H7V19H9V17H11L12.5791 15.4209C12.8177 15.1823 12.937 15.063 13.0581 14.9953C13.1843 14.9248 13.2613 14.8987 13.4044 14.8783C13.5417 14.8586 13.7588 14.8878 14.193 14.9462C14.4569 14.9817 14.7263 15 15 15Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>