From cedbcd7141d2022310f381e13be7578e82efe3d2 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 31 Aug 2024 14:53:15 -0400
Subject: [PATCH] Refactored button group styling

---
 .../TabPanels/Account/TeamPanel.jsx           | 63 ++++++---------
 Client/src/Pages/Monitors/Configure/index.jsx | 15 ++--
 .../Pages/Monitors/CreateMonitor/index.jsx    | 42 ++++------
 Client/src/Pages/Monitors/Details/index.jsx   | 77 ++++++++-----------
 Client/src/Pages/PageSpeed/index.jsx          | 11 +--
 Client/src/Utils/Theme/darkTheme.js           | 30 ++++++--
 Client/src/Utils/Theme/lightTheme.js          | 30 ++++++--
 7 files changed, 135 insertions(+), 133 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 9c63bd1c2..97235049e 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
 import {
   Box,
+  Button,
   ButtonGroup,
   Divider,
   IconButton,
@@ -11,7 +12,6 @@ import {
   Typography,
 } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
-import Button from "../../Button";
 import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
@@ -283,48 +283,37 @@ const TeamPanel = () => {
             gap={theme.spacing(6)}
             sx={{ fontSize: 14 }}
           >
-            <ButtonGroup
-              sx={{
-                "& button, & button:hover": {
-                  borderColor: theme.palette.border.light,
-                },
-              }}
-            >
+            <ButtonGroup>
               <Button
-                level="secondary"
-                label="All"
+                variant="group"
+                filled={(filter === "all").toString()}
                 onClick={() => setFilter("all")}
-                sx={{
-                  backgroundColor:
-                    filter === "all" && theme.palette.background.fill,
-                }}
-              />
+              >
+                All
+              </Button>
               <Button
-                level="secondary"
-                label="Administrator"
+                variant="group"
+                filled={(filter === "admin").toString()}
                 onClick={() => setFilter("admin")}
-                sx={{
-                  backgroundColor:
-                    filter === "admin" && theme.palette.background.fill,
-                }}
-              />
+              >
+                Administrator
+              </Button>
               <Button
-                level="secondary"
-                label="Member"
+                variant="group"
+                filled={(filter === "user").toString()}
                 onClick={() => setFilter("user")}
-                sx={{
-                  backgroundColor:
-                    filter === "user" && theme.palette.background.fill,
-                }}
-              />
+              >
+                Member
+              </Button>
             </ButtonGroup>
           </Stack>
           <Button
-            level="primary"
-            label="Invite a team member"
-            sx={{ paddingX: theme.spacing(15) }}
+            variant="contained"
+            color="primary"
             onClick={() => setIsOpen(true)}
-          />
+          >
+            Invite a team member
+          </Button>
         </Stack>
         <BasicTable
           data={tableData}
@@ -400,11 +389,9 @@ const TeamPanel = () => {
             mt={theme.spacing(8)}
             justifyContent="flex-end"
           >
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={closeInviteModal}
-            />
+            <Button variant="text" color="info" onClick={closeInviteModal}>
+              Cancel
+            </Button>
             <ButtonSpinner
               level="primary"
               label="Send invite"
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 61d7d155c..380f97b9e 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Modal, Stack, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -14,7 +14,6 @@ import {
   getUptimeMonitorsByTeamId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import Select from "../../../Components/Inputs/Select";
@@ -434,11 +433,15 @@ const Configure = () => {
             justifyContent="flex-end"
           >
             <Button
-              level="tertiary"
-              label="Cancel"
+              variant="text"
+              color="info"
               onClick={() => setIsOpen(false)}
-            />
-            <Button level="error" label="Delete" onClick={handleRemove} />
+            >
+              Cancel
+            </Button>
+            <Button variant="contained" color="error" onClick={handleRemove}>
+              Delete
+            </Button>
           </Stack>
         </Stack>
       </Modal>
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index bc0f55ed3..5147236e2 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Box, ButtonGroup, Stack, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
@@ -9,7 +9,6 @@ import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import { ConfigBox } from "../styled";
 import Radio from "../../../Components/Inputs/Radio";
-import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
@@ -232,29 +231,19 @@ const CreateMonitor = () => {
               {monitor.type === "http" ? (
                 <ButtonGroup sx={{ ml: "32px" }}>
                   <Button
-                    level="secondary"
-                    label="HTTPS"
+                    variant="group"
+                    filled={https.toString()}
                     onClick={() => setHttps(true)}
-                    sx={{
-                      backgroundColor: https && theme.palette.background.fill,
-                      borderColor: theme.palette.border.dark,
-                      "&:hover": {
-                        borderColor: theme.palette.border.dark,
-                      },
-                    }}
-                  />
+                  >
+                    HTTPS
+                  </Button>
                   <Button
-                    level="secondary"
-                    label="HTTP"
+                    variant="group"
+                    filled={(!https).toString()}
                     onClick={() => setHttps(false)}
-                    sx={{
-                      backgroundColor: !https && theme.palette.background.fill,
-                      borderColor: theme.palette.border.dark,
-                      "&:hover": {
-                        borderColor: theme.palette.border.dark,
-                      },
-                    }}
-                  />
+                  >
+                    HTTP
+                  </Button>
                 </ButtonGroup>
               ) : (
                 ""
@@ -354,12 +343,13 @@ const CreateMonitor = () => {
         </ConfigBox>
         <Stack direction="row" justifyContent="flex-end">
           <Button
-            id="create-monitor-btn"
-            level="primary"
-            label="Create monitor"
+            variant="contained"
+            color="primary"
             onClick={handleCreateMonitor}
             disabled={Object.keys(errors).length !== 0 && true}
-          />
+          >
+            Create monitor
+          </Button>
         </Stack>
       </Stack>
     </Box>
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 02fb769bf..616f18657 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -1,6 +1,13 @@
 import PropTypes from "prop-types";
 import { useEffect, useState, useCallback } from "react";
-import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Skeleton,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { networkService } from "../../../main";
@@ -11,7 +18,6 @@ import {
 } from "../../../Utils/timeUtils";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
-import Button from "../../../Components/Button";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -237,28 +243,23 @@ const DetailsPage = ({ isAdmin }) => {
               </Box>
               {isAdmin && (
                 <Button
-                  level="tertiary"
-                  label="Configure"
-                  animate="rotate90"
-                  img={
-                    <SettingsIcon
-                      style={{
-                        minWidth: theme.spacing(10),
-                        minHeight: theme.spacing(10),
-                      }}
-                    />
-                  }
+                  variant="contained"
+                  color="secondary"
                   onClick={() => navigate(`/monitors/configure/${monitorId}`)}
                   sx={{
                     ml: "auto",
                     alignSelf: "flex-end",
-                    backgroundColor: theme.palette.background.fill,
-                    px: theme.spacing(6),
+                    px: theme.spacing(5),
                     "& svg": {
                       mr: theme.spacing(3),
+                      "& path": {
+                        stroke: theme.palette.other.icon,
+                      },
                     },
                   }}
-                />
+                >
+                  <SettingsIcon /> Configure
+                </Button>
               )}
             </Stack>
             <Stack
@@ -326,40 +327,28 @@ const DetailsPage = ({ isAdmin }) => {
                 >
                   Response Times
                 </Typography>
-                <ButtonGroup
-                  sx={{
-                    "& .MuiButtonBase-root": {
-                      borderColor: theme.palette.border.light,
-                    },
-                  }}
-                >
+                <ButtonGroup>
                   <Button
-                    level="secondary"
-                    label="Day"
+                    variant="group"
+                    filled={(dateRange === "day").toString()}
                     onClick={() => setDateRange("day")}
-                    sx={{
-                      backgroundColor:
-                        dateRange === "day" && theme.palette.background.fill,
-                    }}
-                  />
+                  >
+                    Day
+                  </Button>
                   <Button
-                    level="secondary"
-                    label="Week"
+                    variant="group"
+                    filled={(dateRange === "week").toString()}
                     onClick={() => setDateRange("week")}
-                    sx={{
-                      backgroundColor:
-                        dateRange === "week" && theme.palette.background.fill,
-                    }}
-                  />
+                  >
+                    Week
+                  </Button>
                   <Button
-                    level="secondary"
-                    label="Month"
+                    variant="group"
+                    filled={(dateRange === "month").toString()}
                     onClick={() => setDateRange("month")}
-                    sx={{
-                      backgroundColor:
-                        dateRange === "month" && theme.palette.background.fill,
-                    }}
-                  />
+                  >
+                    Month
+                  </Button>
                 </ButtonGroup>
               </Stack>
               <Box
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 27240b6e8..eaaa3bc3e 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Button, Grid, Skeleton, Stack, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { useTheme } from "@emotion/react";
 import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
@@ -8,7 +8,6 @@ import { getPageSpeedByTeamId } from "../../Features/PageSpeedMonitor/pageSpeedM
 import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";
-import Button from "../../Components/Button";
 import { useNavigate } from "react-router";
 import { getLastChecked } from "../../Utils/monitorUtils";
 import PropTypes from "prop-types";
@@ -196,10 +195,12 @@ const PageSpeed = ({ isAdmin }) => {
             >
               <Greeting type="pagespeed" />
               <Button
-                level="primary"
-                label="Create new"
+                variant="contained"
+                color="primary"
                 onClick={() => navigate("/pagespeed/create")}
-              />
+              >
+                Create new
+              </Button>
             </Stack>
           </Box>
           <Grid container spacing={theme.spacing(12)}>
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 05c5942d9..61d37fcab 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -25,12 +25,13 @@ const darkTheme = createTheme({
   palette: {
     mode: "dark",
     primary: { main: "#1570ef" },
+    secondary: { main: "#2e2e2e" },
     text: text,
     background: background,
     border: border,
     info: {
       text: text.primary,
-      main: text.primary,
+      main: text.secondary,
       bg: background.main,
       light: background.main,
       border: border.light,
@@ -65,9 +66,6 @@ const darkTheme = createTheme({
       grid: "#454546",
     },
     // TO BE REMOVED //
-    secondary: {
-      main: "#e6e6e6",
-    },
     tertiary: {
       main: "#e6e6e6",
     },
@@ -80,8 +78,26 @@ const darkTheme = createTheme({
         disableRipple: true,
       },
       styleOverrides: {
-        root: {
-          variants: [],
+        root: ({ theme }) => ({
+          variants: [
+            {
+              props: (props) => props.variant === "group",
+              style: {
+                color: theme.palette.secondary.contrastText,
+                backgroundColor: theme.palette.background.main,
+                border: 1,
+                borderStyle: "solid",
+                borderColor: theme.palette.border.light,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === "group" && props.filled === "true",
+              style: {
+                backgroundColor: theme.palette.secondary.main,
+              },
+            },
+          ],
           fontWeight: 400,
           borderRadius: 4,
           boxShadow: "none",
@@ -92,7 +108,7 @@ const darkTheme = createTheme({
           "&:hover": {
             boxShadow: "none",
           },
-        },
+        }),
       },
     },
     MuiIconButton: {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index 1610ec322..92481a4df 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -23,12 +23,13 @@ const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
     primary: { main: "#1570EF" },
+    secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
     text: text,
     background: background,
     border: border,
     info: {
       text: text.primary,
-      main: text.primary,
+      main: text.secondary,
       bg: background.main,
       light: background.main,
       border: border.dark,
@@ -62,9 +63,6 @@ const lightTheme = createTheme({
       grid: "#a2a3a3",
     },
     // TO BE REMOVED //
-    secondary: {
-      main: "#475467",
-    },
     tertiary: {
       main: "#475467",
     },
@@ -77,8 +75,26 @@ const lightTheme = createTheme({
         disableRipple: true,
       },
       styleOverrides: {
-        root: {
-          variants: [],
+        root: ({ theme }) => ({
+          variants: [
+            {
+              props: (props) => props.variant === "group",
+              style: {
+                color: theme.palette.secondary.contrastText,
+                backgroundColor: theme.palette.background.main,
+                border: 1,
+                borderStyle: "solid",
+                borderColor: theme.palette.border.light,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === "group" && props.filled === "true",
+              style: {
+                backgroundColor: theme.palette.secondary.main,
+              },
+            },
+          ],
           fontWeight: 400,
           borderRadius: 4,
           boxShadow: "none",
@@ -89,7 +105,7 @@ const lightTheme = createTheme({
           "&:hover": {
             boxShadow: "none",
           },
-        },
+        }),
       },
     },
     MuiIconButton: {