From 313a3af67cf5f5ffce144cbd73d89aea1cb509cc Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 30 Aug 2024 21:11:09 -0400 Subject: [PATCH 1/9] 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 }) => { {monitorState.monitors?.length !== 0 && ( )} 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: { From ac483786148ad856972fca8b92436d91f8163b50 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 01:33:33 -0400 Subject: [PATCH 2/9] Refactored theme common color props and fixed button background delay on theme change --- .../Charts/MonitorDetailsAreaChart/index.jsx | 2 +- Client/src/Components/Inputs/Image/index.jsx | 6 +++--- Client/src/Components/Link/index.jsx | 4 ++-- Client/src/Components/Sidebar/index.jsx | 2 +- .../Components/TabPanels/Account/ProfilePanel.jsx | 2 +- Client/src/Pages/Auth/CheckEmail.jsx | 6 +++--- Client/src/Pages/Auth/ForgotPassword.jsx | 4 ++-- Client/src/Pages/Auth/Login.jsx | 8 ++++---- Client/src/Pages/Auth/NewPasswordConfirmed.jsx | 4 ++-- Client/src/Pages/Auth/Register/Register.jsx | 4 ++-- Client/src/Pages/Auth/SetNewPassword.jsx | 4 ++-- .../Maintenance/CreateMaintenanceWindow/index.jsx | 2 +- Client/src/Pages/Monitors/Details/index.jsx | 2 +- Client/src/Pages/Monitors/Home/index.jsx | 2 +- Client/src/Pages/PageSpeed/Details/index.jsx | 6 +++--- Client/src/Pages/PageSpeed/index.jsx | 2 +- Client/src/Utils/Theme/darkTheme.js | 14 +++++++++----- Client/src/Utils/Theme/lightTheme.js | 14 +++++++++----- 18 files changed, 48 insertions(+), 40 deletions(-) diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 3e69c0d60..4e5d1d7b0 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -22,7 +22,7 @@ const CustomToolTip = ({ active, payload, label }) => { > diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index f7bdc9cf0..cdc7d8c7f 100644 --- a/Client/src/Components/Inputs/Image/index.jsx +++ b/Client/src/Components/Inputs/Image/index.jsx @@ -38,12 +38,12 @@ const ImageField = ({ id, src, loading, onChange }) => { border: "dashed", borderRadius: theme.shape.borderRadius, borderColor: isDragging - ? theme.palette.common.main + ? theme.palette.primary.main : theme.palette.border.light, borderWidth: "2px", transition: "0.2s", "&:hover": { - borderColor: theme.palette.common.main, + borderColor: theme.palette.primary.main, backgroundColor: "hsl(215, 87%, 51%, 0.05)", }, }} @@ -96,7 +96,7 @@ const ImageField = ({ id, src, loading, onChange }) => { Click to upload diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx index 025bd0c25..5a055e28e 100644 --- a/Client/src/Components/Link/index.jsx +++ b/Client/src/Components/Link/index.jsx @@ -28,11 +28,11 @@ const Link = ({ level, label, url }) => { sx: { textDecoration: "underline", textDecorationStyle: "dashed", - textDecorationColor: theme.palette.common.main, + textDecorationColor: theme.palette.primary.main, textUnderlineOffset: "1px", ":hover": { color: theme.palette.text.tertiary, - textDecorationColor: theme.palette.common.main, + textDecorationColor: theme.palette.primary.main, backgroundColor: theme.palette.background.fill, }, }, diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 722d48431..c372f8c66 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -154,7 +154,7 @@ function Sidebar() { color="white" sx={{ position: "relative", - backgroundColor: theme.palette.common.main, + backgroundColor: theme.palette.primary.main, borderRadius: theme.shape.borderRadius, userSelect: "none", }} diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 732919085..67c48d034 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -302,7 +302,7 @@ const ProfilePanel = () => { label="Update" onClick={openPictureModal} sx={{ - color: theme.palette.common.main, + color: theme.palette.primary.main, }} /> diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index 120923bb2..0936a1b2f 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -90,7 +90,7 @@ const CheckEmail = () => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 26, }, @@ -164,7 +164,7 @@ const CheckEmail = () => { component="span" onClick={resendToken} sx={{ - color: theme.palette.common.main, + color: theme.palette.primary.main, userSelect: "none", pointerEvents: disabled ? "none" : "auto", cursor: disabled ? "default" : "pointer", @@ -181,7 +181,7 @@ const CheckEmail = () => { diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index f174b2322..89b8095b9 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -92,7 +92,7 @@ const ForgotPassword = () => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 24, }, @@ -185,7 +185,7 @@ const ForgotPassword = () => { Go back to — { Forgot password? { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 30, }, @@ -491,7 +491,7 @@ const Login = () => { { navigate("/register"); diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx index 89e8fd110..2d07de23e 100644 --- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -27,7 +27,7 @@ const NewPasswordConfirmed = () => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 22, }, @@ -99,7 +99,7 @@ const NewPasswordConfirmed = () => { Go back to — { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 30, }, @@ -731,7 +731,7 @@ const Register = ({ isSuperAdmin }) => { onClick={() => { navigate("/login"); }} - sx={{ userSelect: "none", color: theme.palette.common.main }} + sx={{ userSelect: "none", color: theme.palette.primary.main }} > Log In diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index ca54e6fc8..9345df0fb 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -109,7 +109,7 @@ const SetNewPassword = () => { overflow="hidden" sx={{ "& h1": { - color: theme.palette.common.main, + color: theme.palette.primary.main, fontWeight: 600, fontSize: 24, }, @@ -280,7 +280,7 @@ const SetNewPassword = () => { Go back to — navigate("/login")} sx={{ userSelect: "none" }} diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx index 0c6a16d5e..c4b142e2a 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx @@ -215,7 +215,7 @@ const CreateNewMaintenanceWindow = () => { sx={{ width: "fit-content", fontSize: "var(--env-var-font-size-small)", - borderBottom: `1px dashed ${theme.palette.common.main}`, + borderBottom: `1px dashed ${theme.palette.primary.main}`, paddingBottom: "4px", }} > diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index 1506cd86f..02fb769bf 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -37,7 +37,7 @@ const StatBox = ({ title, value }) => { mb={theme.spacing(2)} fontSize={14} fontWeight={500} - color={theme.palette.common.main} + color={theme.palette.primary.main} sx={{ "& span": { color: theme.palette.text.accent, diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index cb2cee505..318a9da20 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/Client/src/Pages/Monitors/Home/index.jsx @@ -77,7 +77,7 @@ const Monitors = ({ isAdmin }) => { {monitorState.monitors?.length !== 0 && ( { mt={theme.spacing(8)} justifyContent="flex-end" > - { justifyContent="flex-end" > + 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" ? ( ) : ( "" @@ -354,12 +343,13 @@ const CreateMonitor = () => { 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 }) => { {isAdmin && ( )} { > Response Times - + { > 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: { From cca02d30b962e04d929e9fae274d8db2831ecfa5 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 17:37:55 -0400 Subject: [PATCH 4/9] Refactored buttons --- Client/src/Components/Alert/index.jsx | 18 ++-- Client/src/Components/BasicTable/index.jsx | 43 ++++------ Client/src/Components/Fallback/index.jsx | 11 +-- .../TabPanels/Account/ProfilePanel.jsx | 70 +++++++-------- Client/src/Pages/Auth/CheckEmail.jsx | 13 +-- Client/src/Pages/Auth/Login.jsx | 75 +++++++++------- .../src/Pages/Auth/NewPasswordConfirmed.jsx | 11 +-- Client/src/Pages/Auth/Register/Register.jsx | 86 +++++++++++-------- Client/src/Pages/Incidents/index.jsx | 57 +++++------- Client/src/Pages/Integrations/index.jsx | 11 +-- .../CreateMaintenanceWindow/index.jsx | 39 ++++----- .../src/Pages/Monitors/Home/actionsMenu.jsx | 18 ++-- Client/src/Pages/Monitors/Home/fallback.jsx | 11 +-- Client/src/Pages/NotFound/index.jsx | 11 +-- .../src/Pages/PageSpeed/Configure/index.jsx | 53 +++++++----- .../Pages/PageSpeed/CreatePageSpeed/index.css | 1 + .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 11 +-- Client/src/Pages/PageSpeed/Details/index.jsx | 29 +++---- Client/src/Pages/Settings/index.jsx | 11 +-- Client/src/Utils/Theme/lightTheme.js | 2 +- 20 files changed, 292 insertions(+), 289 deletions(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index cd9dcc18e..eb5fbd13b 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -1,12 +1,11 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import { Box, IconButton, Stack, Typography } from "@mui/material"; +import { Box, Button, IconButton, Stack, Typography } from "@mui/material"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"; import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; import CloseIcon from "@mui/icons-material/Close"; import "./index.css"; -import Button from "../Button"; /** * Icons mapping for different alert variants. @@ -65,8 +64,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { )} {hasIcon && isToast && ( + > + Dismiss + )} {isToast && ( diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index aed322beb..33073d838 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -13,6 +13,7 @@ import { Box, Typography, Stack, + Button, } from "@mui/material"; import { useDispatch, useSelector } from "react-redux"; import { setRowsPerPage } from "../../Features/UI/uiSlice"; @@ -21,7 +22,6 @@ import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react"; import LeftArrow from "../../assets/icons/left-arrow.svg?react"; import RightArrow from "../../assets/icons/right-arrow.svg?react"; import SelectorVertical from "../../assets/icons/selector-vertical.svg?react"; -import Button from "../Button"; import "./index.css"; /** * Component for pagination actions (first, previous, next, last). @@ -54,37 +54,37 @@ const TablePaginationActions = (props) => { return ( ); }; @@ -293,19 +293,10 @@ const BasicTable = ({ data, paginated, reversed, table }) => { sx={{ mt: theme.spacing(6), color: theme.palette.text.secondary, - "& button.MuiButtonBase-root, & .MuiSelect-select": { - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - }, "& svg path": { stroke: theme.palette.text.tertiary, strokeWidth: 1.3, }, - "& button:not(.Mui-disabled):hover": { - backgroundColor: theme.palette.background.fill, - borderColor: theme.palette.background.fill, - }, }} /> diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 26d818bdf..8d6b21f73 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -1,10 +1,9 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import Skeleton from "../../assets/Images/create-placeholder.svg?react"; import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react"; import Background from "../../assets/Images/background-grid.svg?react"; -import Button from "../Button"; import Check from "../Check/Check"; import { useNavigate } from "react-router-dom"; import { useSelector } from "react-redux"; @@ -66,11 +65,13 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => { {/* TODO - display a different fallback if user is not an admin*/} {isAdmin && ( )} ); diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 67c48d034..1611db818 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -1,9 +1,8 @@ import { useTheme } from "@emotion/react"; import { useRef, useState } from "react"; import TabPanel from "@mui/lab/TabPanel"; -import { Box, Divider, Modal, Stack, Typography } from "@mui/material"; +import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; -import Button from "../../Button"; import Avatar from "../../Avatar"; import Field from "../../Inputs/Field"; import ImageField from "../../Inputs/Image"; @@ -292,19 +291,12 @@ const ProfilePanel = () => { } sx={{ mr: "8px" }} /> - + { borderColor: theme.palette.border.light, }} /> - - + + Delete account Note that deleting your account will remove all data from our @@ -353,12 +340,13 @@ const ProfilePanel = () => { + {/* TODO - Update ModalPopup Component with @mui for reusability */} { mt={theme.spacing(5)} justifyContent="flex-end" > - { justifyContent="flex-end" > + diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index 0936a1b2f..88bc1983c 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -1,11 +1,10 @@ -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import { useEffect, useState } from "react"; import { useTheme } from "@emotion/react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router"; import { createToast } from "../../Utils/toastUtils"; import { forgotPassword } from "../../Features/Auth/authSlice"; -import Button from "../../Components/Button"; import background from "../../assets/Images/background_pattern_decorative.png"; import EmailIcon from "../../assets/icons/email.svg?react"; import Logo from "../../assets/icons/bwu-icon.svg?react"; @@ -92,7 +91,7 @@ const CheckEmail = () => { "& h1": { color: theme.palette.primary.main, fontWeight: 600, - fontSize: 26, + fontSize: 22, }, "& p": { fontSize: 14, @@ -150,14 +149,16 @@ const CheckEmail = () => { Didn't receive the email?{" "} { @@ -151,27 +155,29 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => { @@ -219,6 +225,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => { <> @@ -243,29 +250,39 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => { - + { diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index 8de08e2d3..e454b355f 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useState, useEffect, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import { useDispatch } from "react-redux"; import { credentials } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; @@ -13,11 +13,9 @@ import Logo from "../../../assets/icons/bwu-icon.svg?react"; import Mail from "../../../assets/icons/mail.svg?react"; import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; import Check from "../../../Components/Check/Check"; -import Button from "../../../Components/Button"; import Field from "../../../Components/Inputs/Field"; import { networkService } from "../../../main"; import "../index.css"; -import { logger } from "../../../Utils/Logger"; /** * Displays the initial landing page. @@ -46,17 +44,22 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { @@ -180,26 +183,29 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => { @@ -270,26 +276,29 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => { @@ -443,26 +452,29 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => { diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 75e8fb174..5d756298e 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,7 +1,12 @@ import { useState, useEffect } from "react"; import { useSelector } from "react-redux"; -import { ButtonGroup, Stack, Skeleton, Typography } from "@mui/material"; -import Button from "../../Components/Button"; +import { + ButtonGroup, + Stack, + Skeleton, + Typography, + Button, +} from "@mui/material"; import { networkService } from "../../main"; import { useTheme } from "@emotion/react"; import Select from "../../Components/Inputs/Select"; @@ -78,11 +83,7 @@ const Incidents = () => { }; return ( - + {loading ? ( ) : ( @@ -114,38 +115,26 @@ const Incidents = () => { }} > { ); diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx index c4b142e2a..43102ac21 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx @@ -1,7 +1,6 @@ -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import "./index.css"; import { useState } from "react"; -import Button from "../../../Components/Button"; import Back from "../../../assets/icons/left-arrow-long.svg?react"; import Select from "../../../Components/Inputs/Select"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; @@ -230,18 +229,17 @@ const CreateNewMaintenanceWindow = () => {
{ +
diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index 272aeb6fd..7d342f5d7 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx @@ -4,6 +4,7 @@ import { useTheme } from "@emotion/react"; import { useNavigate } from "react-router-dom"; import { createToast } from "../../../Utils/toastUtils"; import { + Button, IconButton, Menu, MenuItem, @@ -16,7 +17,6 @@ import { getUptimeMonitorsByTeamId, } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; import Settings from "../../../assets/icons/settings-bold.svg?react"; -import Button from "../../../Components/Button"; import PropTypes from "prop-types"; const ActionsMenu = ({ monitor, isAdmin }) => { @@ -189,21 +189,25 @@ const ActionsMenu = ({ monitor, isAdmin }) => { justifyContent="flex-end" > diff --git a/Client/src/Pages/Monitors/Home/fallback.jsx b/Client/src/Pages/Monitors/Home/fallback.jsx index c5d41ee48..f9a444e7c 100644 --- a/Client/src/Pages/Monitors/Home/fallback.jsx +++ b/Client/src/Pages/Monitors/Home/fallback.jsx @@ -1,6 +1,5 @@ -import { Stack, Typography } from "@mui/material"; +import { Button, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; -import Button from "../../../Components/Button"; import { useNavigate } from "react-router-dom"; import PropTypes from "prop-types"; @@ -25,13 +24,15 @@ const Fallback = ({ isAdmin }) => { {isAdmin && ( )} ); diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx index 17949ce4f..7d7adf149 100644 --- a/Client/src/Pages/NotFound/index.jsx +++ b/Client/src/Pages/NotFound/index.jsx @@ -1,8 +1,7 @@ -import Button from "../../Components/Button"; import React from "react"; import PropTypes from "prop-types"; import NotFoundSvg from "../../../src/assets/Images/sushi_404.svg"; -import { Stack, Typography } from "@mui/material"; +import { Button, Stack, Typography } from "@mui/material"; import { useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; @@ -48,11 +47,13 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => { {desc} ); diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 756e52d2b..92dd5bb36 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { useTheme } from "@emotion/react"; -import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material"; +import { Box, Button, Modal, Skeleton, Stack, Typography } from "@mui/material"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router"; import { @@ -11,7 +11,6 @@ import { import { monitorValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; -import Button from "../../../Components/Button"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -197,29 +196,33 @@ const PageSpeedConfigure = () => { { @@ -376,11 +381,15 @@ const PageSpeedConfigure = () => { justifyContent="flex-end" > + diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css index 4ac8d4a10..4b46fd3f0 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css @@ -22,6 +22,7 @@ .create-page-speed .section-disabled { opacity: 0.4; padding: 10px; + margin-right: -5px; border-radius: 8px; user-select: none; pointer-events: none; diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index 342eefc71..00c02a362 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -1,11 +1,10 @@ -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import { useState } from "react"; import { useTheme } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; -import Button from "../../../Components/Button"; import Checkbox from "../../../Components/Inputs/Checkbox"; import { monitorValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; @@ -229,11 +228,13 @@ const CreatePageSpeed = () => { diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index f63af43db..29c0b72e0 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import { Box, Skeleton, Stack, Typography } from "@mui/material"; +import { Box, Button, Skeleton, Stack, Typography } from "@mui/material"; import { PieChart } from "@mui/x-charts/PieChart"; import { useDrawingArea } from "@mui/x-charts"; import { useEffect, useState } from "react"; @@ -12,7 +12,6 @@ import { } from "../../../Utils/timeUtils"; import { logger } from "../../../Utils/Logger"; import { networkService } from "../../../main"; -import Button from "../../../Components/Button"; import SettingsIcon from "../../../assets/icons/settings-bold.svg?react"; import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react"; import ClockIcon from "../../../assets/icons/maintenance.svg?react"; @@ -398,28 +397,24 @@ const PageSpeedDetails = () => { { diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 92481a4df..49f864e53 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -29,7 +29,7 @@ const lightTheme = createTheme({ border: border, info: { text: text.primary, - main: text.secondary, + main: text.tertiary, bg: background.main, light: background.main, border: border.dark, From 9fc2d5c33abf9bc438a257324a5218c7b5cc2aac Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 17:39:37 -0400 Subject: [PATCH 5/9] Removed button component --- Client/src/Components/Button/index.css | 33 --------- Client/src/Components/Button/index.jsx | 97 -------------------------- 2 files changed, 130 deletions(-) delete mode 100644 Client/src/Components/Button/index.css delete mode 100644 Client/src/Components/Button/index.jsx diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/index.css deleted file mode 100644 index 63791d46b..000000000 --- a/Client/src/Components/Button/index.css +++ /dev/null @@ -1,33 +0,0 @@ -.MuiButtonBase-root.button-rotate90 svg { - transition: transform 500ms ease; -} -.MuiButtonBase-root.button-rotate90:hover svg { - transform: rotate(90deg); - transform-origin: center; -} - -.MuiButtonBase-root.button-rotate180 svg { - transition: transform 700ms ease; -} -.MuiButtonBase-root.button-rotate180:hover svg { - transform: rotate(180deg); - transform-origin: center; -} - -.MuiButtonBase-root.button-slideLeft { - padding-left: 45px; -} -.MuiButtonBase-root.button-slideLeft svg { - position: absolute; - left: 15px; - transition: left 250ms cubic-bezier(0.65, 0, 0.076, 1); -} -.MuiButtonBase-root.button-slideLeft:hover svg { - left: 11px; -} - -.MuiButtonBase-root.button-slideLeft:hover, -.MuiButtonBase-root.button-rotate180:hover, -.MuiButtonBase-root.button-rotate90:hover { - background-color: rgba(71, 84, 103, 0.08); -} diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx deleted file mode 100644 index 12de33be2..000000000 --- a/Client/src/Components/Button/index.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Button as MuiButton } from "@mui/material"; -import PropTypes from "prop-types"; -import "./index.css"; - -const levelConfig = { - primary: { - variant: "contained", - color: "primary", - }, - secondary: { - variant: "outlined", - color: "secondary", - }, - tertiary: { - variant: "text", - color: "tertiary", - }, - error: { - variant: "contained", - color: "error", - }, - imagePrimary: { - color: "primary", - variant: "text", - }, - imageSecondary: { - color: "secondary", - variant: "text", - }, - imageTertiary: { - color: "tertiary", - variant: "text", - }, -}; - -/** - * @component - * @param {Object} props - * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button - * @param {string} props.type - The type of the button - * @param {string} props.label - The label of the button - * @param {React.ReactNode} props.img - Image for button - * @param {boolean} [props.disabled] - Whether the button is disabled - * @param {function} props.onClick - Function to run when the button is clicked - * @param {Object} props.sx - Styles for the button - * @returns {JSX.Element} - * @example - * // Render an error button - * - + loading={isLoading} + > + Delete account + diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 97235049e..8c4630b19 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -11,7 +11,6 @@ import { TextField, Typography, } from "@mui/material"; -import ButtonSpinner from "../../ButtonSpinner"; import { useEffect, useState } from "react"; import EditSvg from "../../../assets/icons/edit.svg?react"; import Field from "../../Inputs/Field"; @@ -22,6 +21,7 @@ import { useSelector } from "react-redux"; import BasicTable from "../../BasicTable"; import Remove from "../../../assets/icons/trash-bin.svg?react"; import Select from "../../Inputs/Select"; +import LoadingButton from "@mui/lab/LoadingButton"; /** * TeamPanel component manages the organization and team members, @@ -392,13 +392,15 @@ const TeamPanel = () => { - + > + Send invite + diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index 89b8095b9..338da645c 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -7,10 +7,10 @@ import { useEffect, useState } from "react"; import { credentials } from "../../Validation/validation"; import { useNavigate } from "react-router-dom"; import Field from "../../Components/Inputs/Field"; -import ButtonSpinner from "../../Components/ButtonSpinner"; import Logo from "../../assets/icons/bwu-icon.svg?react"; import Key from "../../assets/icons/key.svg?react"; import background from "../../assets/Images/background_pattern_decorative.png"; +import LoadingButton from "@mui/lab/LoadingButton"; import "./index.css"; const ForgotPassword = () => { @@ -166,18 +166,19 @@ const ForgotPassword = () => { onChange={handleChange} error={errors.email} /> - + > + Send instructions + diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index 9345df0fb..a01e9bd51 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -8,11 +8,11 @@ import { useState } from "react"; import { credentials } from "../../Validation/validation"; import { useNavigate } from "react-router-dom"; import Check from "../../Components/Check/Check"; -import ButtonSpinner from "../../Components/ButtonSpinner"; import Field from "../../Components/Inputs/Field"; import LockIcon from "../../assets/icons/lock-button-icon.svg?react"; import background from "../../assets/Images/background_pattern_decorative.png"; import Logo from "../../assets/icons/bwu-icon.svg?react"; +import LoadingButton from "@mui/lab/LoadingButton"; import "./index.css"; const SetNewPassword = () => { @@ -266,14 +266,16 @@ const SetNewPassword = () => { /> - + > + Reset password + diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 380f97b9e..38c0635f2 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -16,13 +16,15 @@ import { } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; import Field from "../../../Components/Inputs/Field"; import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; +import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import PulseDot from "../../../Components/Animated/PulseDot"; -import "./index.css"; import SkeletonLayout from "./skeleton"; -import ButtonSpinner from "../../../Components/ButtonSpinner"; +import LoadingButton from "@mui/lab/LoadingButton"; +import "./index.css"; + /** * Parses a URL string and returns a URL object. * @@ -247,27 +249,40 @@ const Configure = () => { ml: "auto", }} > - } + - + {monitor?.isActive ? ( + <> + + Pause + + ) : ( + <> + + Resume + + )} + + @@ -374,13 +389,15 @@ const Configure = () => { - + > + Save + @@ -439,9 +456,14 @@ const Configure = () => { > Cancel - + diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 688c6d92f..fc615d848 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -1,6 +1,5 @@ import { useTheme } from "@emotion/react"; import { Box, Button, Stack, styled, Typography } from "@mui/material"; -import ButtonSpinner from "../../Components/ButtonSpinner"; import Field from "../../Components/Inputs/Field"; import Link from "../../Components/Link"; import Select from "../../Components/Inputs/Select"; @@ -10,6 +9,7 @@ import { useDispatch, useSelector } from "react-redux"; import { createToast } from "../../Utils/toastUtils"; import { deleteMonitorChecksByTeamId } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; import PropTypes from "prop-types"; +import LoadingButton from "@mui/lab/LoadingButton"; const Settings = ({ isAdmin }) => { const theme = useTheme(); const { user, authToken } = useSelector((state) => state.auth); @@ -124,13 +124,15 @@ const Settings = ({ isAdmin }) => { /> Clear all stats. This is irreversible. - + > + Clear all stats + From d2da8e7dff527d758057c31f01a9a00350d36ce5 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 18:11:23 -0400 Subject: [PATCH 7/9] Removed button spinner component --- Client/src/Components/ButtonSpinner/index.jsx | 105 ------------------ 1 file changed, 105 deletions(-) delete mode 100644 Client/src/Components/ButtonSpinner/index.jsx diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx deleted file mode 100644 index 8c6d1deb8..000000000 --- a/Client/src/Components/ButtonSpinner/index.jsx +++ /dev/null @@ -1,105 +0,0 @@ -import LoadingButton from "@mui/lab/LoadingButton"; -import PropTypes from "prop-types"; - -const levelConfig = { - primary: { - variant: "contained", - color: "primary", - }, - secondary: { - variant: "outlined", - color: "secondary", - }, - tertiary: { - variant: "text", - color: "tertiary", - }, - error: { - variant: "contained", - color: "error", - }, -}; - -/** - * @component - * @param {Object} props - * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The style level of the button. - * @param {string} props.label - The label text displayed on the button. - * @param {React.ReactNode} [props.img] - Icon or image element to display within the button. - * @param {boolean} [props.disabled=false] - Determines if the button is disabled. - * @param {string} [props.loadingText] - Text displayed when the button is in a loading state. - * @param {'start' | 'end'} [props.position] - Specifies where the icon or loading loadingText should be positioned relative to the label. - * @param {function} props.onClick - Callback function invoked when the button is clicked. - * @param {boolean} props.isLoading - Indicates if the button is in a loading state. - * @param {Object} [props.sx] - Additional styles to apply to the button. - * @returns {JSX.Element} - * @example - * // Render a primary button with an icon at the end - * } - * position="end" - * onClick={handleSaveClick} - * isLoading={loading} - * /> - */ - -const ButtonSpinner = ({ - level, - label, - disabled, - loadingText, - position, - img, - onClick, - isLoading, - sx, -}) => { - const { variant, color } = levelConfig[level]; - //if both a loadingPosition and loadingIndicator are provided, the spinner overlaps with the text and it breaks - if (position && loadingText) loadingText = null; - return ( - - {label} - - ); -}; - -ButtonSpinner.propTypes = { - level: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - loadingText: PropTypes.string, - position: PropTypes.oneOf(["start", "end"]), - img: PropTypes.node, - onClick: PropTypes.func.isRequired, - isLoading: PropTypes.bool.isRequired, - sx: PropTypes.object, - disabled: PropTypes.bool, -}; - -export default ButtonSpinner; From 8b9641aee8d11c0dbb232d556f2a9480dff259a1 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 18:13:03 -0400 Subject: [PATCH 8/9] Removed redundant color vars --- Client/src/Utils/Theme/darkTheme.js | 5 ----- Client/src/Utils/Theme/lightTheme.js | 5 ----- 2 files changed, 10 deletions(-) diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 61d37fcab..15df7c1b8 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -65,11 +65,6 @@ const darkTheme = createTheme({ fill: "#18181a", grid: "#454546", }, - // TO BE REMOVED // - tertiary: { - main: "#e6e6e6", - }, - // ----------------- // }, spacing: 2, components: { diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 49f864e53..bb83d09b2 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -62,11 +62,6 @@ const lightTheme = createTheme({ fill: "#e3e3e3", grid: "#a2a3a3", }, - // TO BE REMOVED // - tertiary: { - main: "#475467", - }, - // ----------------- // }, spacing: 2, components: { From cf49201be1df38da159ed527bc89feec621555b7 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 31 Aug 2024 20:00:29 -0400 Subject: [PATCH 9/9] Add correct variant prop --- Client/src/Pages/Monitors/Home/fallback.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Monitors/Home/fallback.jsx b/Client/src/Pages/Monitors/Home/fallback.jsx index f9a444e7c..270f23f29 100644 --- a/Client/src/Pages/Monitors/Home/fallback.jsx +++ b/Client/src/Pages/Monitors/Home/fallback.jsx @@ -24,7 +24,7 @@ const Fallback = ({ isAdmin }) => { {isAdmin && (