Added button styles to theme

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}

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 {

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>

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: {

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: {