From 313a3af67cf5f5ffce144cbd73d89aea1cb509cc Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 30 Aug 2024 21:11:09 -0400
Subject: [PATCH] Added button styles to theme

---
 Client/src/Components/Button/index.jsx   | 11 ---------
 Client/src/Components/Sidebar/index.css  |  2 +-
 Client/src/Pages/Monitors/Home/index.jsx | 11 +++++----
 Client/src/Utils/Theme/darkTheme.js      | 21 +++++++++++++++--
 Client/src/Utils/Theme/lightTheme.js     | 30 ++++++++++++++++++------
 5 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 4c59f8b47..12de33be2 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -73,17 +73,6 @@ const Button = ({
       onClick={onClick}
       disableRipple
       sx={{
-        lineHeight: 1.5,
-        fontWeight: 400,
-        boxShadow: "none",
-        textTransform: "none",
-        borderRadius: "4px",
-        "&:focus": {
-          outline: "none",
-        },
-        "&:hover": {
-          boxShadow: "none",
-        },
         ...sx,
       }}
       {...props}
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index f8265a2be..b01562ac4 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -75,7 +75,7 @@ aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
 }
 
 aside .MuiListSubheader-root {
-  transition: all 200ms ease;
+  transition: padding 200ms ease;
 }
 
 @keyframes fadeIn {
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 75632a582..cb2cee505 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -3,10 +3,9 @@ import { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
-import Button from "../../../Components/Button";
 import { useTheme } from "@emotion/react";
 import BasicTable from "../../../Components/BasicTable";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import SkeletonLayout from "./skeleton";
 import Fallback from "./fallback";
@@ -77,13 +76,15 @@ const Monitors = ({ isAdmin }) => {
               <Greeting type="uptime" />
               {monitorState.monitors?.length !== 0 && (
                 <Button
-                  level="primary"
-                  label="Create monitor"
+                  variant="contained"
+                  color="common"
                   onClick={() => {
                     navigate("/monitors/create");
                   }}
                   sx={{ fontWeight: 500 }}
-                />
+                >
+                  Create monitor
+                </Button>
               )}
             </Stack>
           </Box>
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 76dd80a3a..e61526b29 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -14,6 +14,7 @@ const background = {
   accent: "#18181a",
 };
 const border = { light: "#27272a", dark: "#2c2c2c" };
+const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
 
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -24,7 +25,7 @@ const darkTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
     mode: "dark",
-    common: { main: "#1570ef" },
+    common: common,
     text: text,
     background: background,
     border: border,
@@ -46,6 +47,7 @@ const darkTheme = createTheme({
       main: "#d32f2f",
       light: "#1e1e1e",
       bg: "#27272a",
+      dark: "#932020",
       border: "#f04438",
     },
     warning: {
@@ -77,10 +79,25 @@ const darkTheme = createTheme({
   },
   spacing: 2,
   components: {
-    MuiButtonBase: {
+    MuiButton: {
       defaultProps: {
         disableRipple: true,
       },
+      styleOverrides: {
+        root: {
+          variants: [],
+          fontWeight: 400,
+          borderRadius: 4,
+          boxShadow: "none",
+          textTransform: "none",
+          "&:focus": {
+            outline: "none",
+          },
+          "&:hover": {
+            boxShadow: "none",
+          },
+        },
+      },
     },
     MuiIconButton: {
       styleOverrides: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 4b2742e87..17d52f3cd 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -13,6 +13,7 @@ const background = {
   accent: "#f9fafb",
 };
 const border = { light: "#eaecf0", dark: "#d0d5dd" };
+const common = { main: "#1570ef", dark: "#0e4ea7", contrastText: "#FFFFFF" };
 
 const fontFamilyDefault =
   '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
@@ -22,16 +23,16 @@ const shadow =
 const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
-    common: { main: "#1570ef" },
+    common: common,
     text: text,
     background: background,
     border: border,
     info: {
-      text: "#475467",
-      main: "#475467",
-      bg: "#ffffff",
-      light: "#ffffff",
-      border: "#D0D5DD",
+      text: text.primary,
+      main: text.primary,
+      bg: background.main,
+      light: background.main,
+      border: border.dark,
     },
     success: {
       text: "#079455",
@@ -75,10 +76,25 @@ const lightTheme = createTheme({
   },
   spacing: 2,
   components: {
-    MuiButtonBase: {
+    MuiButton: {
       defaultProps: {
         disableRipple: true,
       },
+      styleOverrides: {
+        root: {
+          variants: [],
+          fontWeight: 400,
+          borderRadius: 4,
+          boxShadow: "none",
+          textTransform: "none",
+          "&:focus": {
+            outline: "none",
+          },
+          "&:hover": {
+            boxShadow: "none",
+          },
+        },
+      },
     },
     MuiIconButton: {
       styleOverrides: {