Refactored button group styling

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>

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>

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

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)}>