TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1761 from bluewave-labs/fix/fe/loading-buttons

Browse Source 
fix: fe/loading buttons
This commit is contained in:
Alexander Holliday authored and GitHub committed 2025-02-14 10:39:11 -08:00
2 parents 8ae743a395 064a9f6d36
commit 2330dcd758
15 files changed
+63 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+3 -4
View File
@@ -1,8 +1,7 @@
import TabPanel from "@mui/lab/TabPanel";
import { useState } from "react";
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { Box, Stack, Typography, Button } from "@mui/material";
import { PasswordEndAdornment } from "../../Inputs/TextInput/Adornments";
import TextInput from "../../Inputs/TextInput";
import { credentials } from "../../../Validation/validation";
@@ -226,7 +225,7 @@ const PasswordPanel = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
variant="contained"
color="accent"
type="submit"
@@ -242,7 +241,7 @@ const PasswordPanel = () => {
}}
>
Save
</LoadingButton>
</Button>
</Stack>
</Stack>
</TabPanel>
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+2 -3
View File
@@ -14,7 +14,6 @@ import { formatBytes } from "../../../Utils/fileUtils";
import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import LoadingButton from "@mui/lab/LoadingButton";
import { GenericDialog } from "../../Dialog/genericDialog";
import Dialog from "../../Dialog";
@@ -344,7 +343,7 @@ const ProfilePanel = () => {
justifyContent="flex-end"
>
<Box width="fit-content">
<LoadingButton
<Button
variant="contained"
color="accent"
onClick={handleSaveProfile}
@@ -354,7 +353,7 @@ const ProfilePanel = () => {
sx={{ px: theme.spacing(12) }}
>
Save
</LoadingButton>
</Button>
</Box>
</Stack>
</Stack>
Client/src/Components/TabPanels/Account/TeamPanel.jsx
+6 -8
View File
@@ -8,7 +8,6 @@ import { networkService } from "../../../main";
import { createToast } from "../../../Utils/toastUtils";
import { useSelector } from "react-redux";
import Select from "../../Inputs/Select";
import LoadingButton from "@mui/lab/LoadingButton";
import { GenericDialog } from "../../Dialog/genericDialog";
import DataTable from "../../Table/";
/**
@@ -229,14 +228,13 @@ const TeamPanel = () => {
</Button>
</ButtonGroup>
</Stack>
<LoadingButton
loading={isSendingInvite}
<Button
variant="contained"
color="accent"
onClick={() => setIsOpen(true)}
>
Invite a team member
</LoadingButton>
</Button>
</Stack>
<DataTable
@@ -287,15 +285,15 @@ const TeamPanel = () => {
mt={theme.spacing(8)}
justifyContent="flex-end"
>
<LoadingButton
<Button
loading={isSendingInvite}
variant="contained" // CAIO_REVIEW
color="error"
onClick={closeInviteModal}
>
Cancel
</LoadingButton>
<LoadingButton
</Button>
<Button
variant="contained"
color="accent"
onClick={handleInviteMember}
@@ -303,7 +301,7 @@ const TeamPanel = () => {
disabled={isDisabled}
>
Send invite
</LoadingButton>
</Button>
</Stack>
</GenericDialog>
</TabPanel>
Client/src/Pages/Auth/ForgotPassword.jsx
+3 -4
View File
@@ -1,4 +1,4 @@
import { Box, Stack, Typography } from "@mui/material";
import { Box, Stack, Typography, Button } from "@mui/material";
import { useTheme } from "@emotion/react";
import { createToast } from "../../Utils/toastUtils";
import { useDispatch, useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import TextInput from "../../Components/Inputs/TextInput";
import Logo from "../../assets/icons/checkmate-icon.svg?react";
import Key from "../../assets/icons/key.svg?react";
import Background from "../../assets/Images/background-grid.svg?react";
import LoadingButton from "@mui/lab/LoadingButton";
import IconBox from "../../Components/IconBox";
import "./index.css";
@@ -185,7 +184,7 @@ const ForgotPassword = () => {
error={errors.email ? true : false}
helperText={errors.email}
/>
<LoadingButton
<Button
variant="contained"
color="accent"
loading={isLoading}
@@ -197,7 +196,7 @@ const ForgotPassword = () => {
}}
>
Send instructions
</LoadingButton>
</Button>
</Box>
</Stack>
</Stack>
Client/src/Pages/Auth/Login/Components/PasswordStep.jsx
+2 -3
View File
@@ -1,7 +1,6 @@
import { useRef, useEffect } from "react";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import LoadingButton from "@mui/lab/LoadingButton";
import { useSelector } from "react-redux";
import TextInput from "../../../../Components/Inputs/TextInput";
import { PasswordEndAdornment } from "../../../../Components/Inputs/TextInput/Adornments";
@@ -90,7 +89,7 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
<ArrowBackRoundedIcon />
{t("commonBack")}{" "}
</Button>
<LoadingButton
<Button
variant="contained"
color="accent"
type="submit"
@@ -106,7 +105,7 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
}}
>
{t("continue")}
</LoadingButton>
</Button>
</Stack>
</Box>
</Stack>
Client/src/Pages/Auth/SetNewPassword.jsx
+3 -4
View File
@@ -3,8 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { Box, Stack, Typography, Button } from "@mui/material";
import { setNewPassword } from "../../Features/Auth/authSlice";
import { createToast } from "../../Utils/toastUtils";
import { credentials } from "../../Validation/validation";
@@ -232,7 +231,7 @@ const SetNewPassword = () => {
/>
</Stack>
</Box>
<LoadingButton
<Button
variant="contained"
color="accent"
loading={isLoading}
@@ -245,7 +244,7 @@ const SetNewPassword = () => {
sx={{ width: "100%", maxWidth: 400 }}
>
{t("authSetNewPasswordResetPassword")}
</LoadingButton>
</Button>
</Stack>
</Stack>
<Box
Client/src/Pages/DistributedUptime/Create/index.jsx
+3 -4
View File
@@ -1,6 +1,5 @@
// Components
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import ConfigBox from "../../../Components/ConfigBox";
@@ -328,15 +327,15 @@ const CreateDistributedUptime = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
variant="contained"
color="primary"
color="accent"
onClick={() => handleCreateMonitor()}
disabled={!Object.values(errors).every((value) => value === undefined)}
loading={isLoading}
>
{isCreate ? "Create monitor" : "Configure monitor"}
</LoadingButton>
</Button>
</Stack>
</Stack>
</Box>
Client/src/Pages/Infrastructure/Create/index.jsx
+2 -3
View File
@@ -11,7 +11,6 @@ import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
// MUI
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
//Components
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -405,14 +404,14 @@ const CreateInfrastructureMonitor = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
variant="contained"
color="accent"
onClick={handleCreateInfrastructureMonitor}
loading={monitorState?.isLoading}
>
Create infrastructure monitor
</LoadingButton>
</Button>
</Stack>
</Stack>
</Box>
Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
+2 -3
View File
@@ -9,7 +9,6 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
import { maintenanceWindowValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import LoadingButton from "@mui/lab/LoadingButton";
import dayjs from "dayjs";
import Select from "../../../Components/Inputs/Select";
@@ -552,7 +551,7 @@ const CreateMaintenance = () => {
>
Cancel
</Button>
<LoadingButton
<Button
loading={isLoading}
variant="contained"
color="accent"
@@ -564,7 +563,7 @@ const CreateMaintenance = () => {
? "Create maintenance"
: "Edit maintenance"
}`}
</LoadingButton>
</Button>
</Box>
</Stack>
</Box>
Client/src/Pages/PageSpeed/Configure/index.jsx
+7 -8
View File
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useTheme } from "@emotion/react";
import { Box, Stack, Tooltip, Typography } from "@mui/material";
import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router";
import {
@@ -20,7 +20,6 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
import LoadingButton from "@mui/lab/LoadingButton";
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import SkeletonLayout from "./skeleton";
import useUtils from "../../Uptime/Monitors/Hooks/useUtils";
@@ -265,7 +264,7 @@ const PageSpeedConfigure = () => {
alignSelf="flex-end"
ml="auto"
>
<LoadingButton
<Button
onClick={handlePause}
loading={isLoading}
variant="contained"
@@ -293,8 +292,8 @@ const PageSpeedConfigure = () => {
Resume
</>
)}
</LoadingButton>
<LoadingButton
</Button>
<Button
loading={isLoading}
variant="contained"
color="error"
@@ -304,7 +303,7 @@ const PageSpeedConfigure = () => {
}}
>
Remove
</LoadingButton>
</Button>
</Box>
</Stack>
<ConfigBox>
@@ -422,7 +421,7 @@ const PageSpeedConfigure = () => {
justifyContent="flex-end"
mt="auto"
>
<LoadingButton
<Button
loading={isLoading}
type="submit"
variant="contained"
@@ -431,7 +430,7 @@ const PageSpeedConfigure = () => {
sx={{ px: theme.spacing(12) }}
>
Save
</LoadingButton>
</Button>
</Stack>
</Stack>
</>
Client/src/Pages/PageSpeed/Create/index.jsx
+2 -3
View File
@@ -14,7 +14,6 @@ import { parseDomainName } from "../../../Utils/monitorUtils";
// MUI
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
//Components
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -335,7 +334,7 @@ const CreatePageSpeed = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
variant="contained"
color="accent"
onClick={handleCreateMonitor}
@@ -343,7 +342,7 @@ const CreatePageSpeed = () => {
loading={isLoading}
>
Create monitor
</LoadingButton>
</Button>
</Stack>
</Stack>
</Box>
Client/src/Pages/Settings/index.jsx
+6 -7
View File
@@ -3,7 +3,6 @@ import { Box, Stack, Typography, Button, Switch } from "@mui/material";
import TextInput from "../../Components/Inputs/TextInput";
import Link from "../../Components/Link";
import Select from "../../Components/Inputs/Select";
import LoadingButton from "@mui/lab/LoadingButton";
import { useIsAdmin } from "../../Hooks/useIsAdmin";
import Dialog from "../../Components/Dialog";
import ConfigBox from "../../Components/ConfigBox";
@@ -328,7 +327,7 @@ const Settings = () => {
<Stack gap={theme.spacing(20)}>
<Box>
<Typography>Add demo monitors</Typography>
<LoadingButton
<Button
variant="contained"
color="accent"
loading={isLoading || authIsLoading || checksIsLoading}
@@ -336,11 +335,11 @@ const Settings = () => {
sx={{ mt: theme.spacing(4) }}
>
Add demo monitors
</LoadingButton>
</Button>
</Box>
<Box>
<Typography>Remove all monitors</Typography>
<LoadingButton
<Button
variant="contained"
color="error"
loading={isLoading || authIsLoading || checksIsLoading}
@@ -350,7 +349,7 @@ const Settings = () => {
sx={{ mt: theme.spacing(4) }}
>
Remove all monitors
</LoadingButton>
</Button>
</Box>
</Stack>
<Dialog
@@ -404,7 +403,7 @@ const Settings = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
loading={isLoading || authIsLoading || checksIsLoading}
disabled={Object.keys(errors).length > 0}
variant="contained"
@@ -413,7 +412,7 @@ const Settings = () => {
onClick={handleSave}
>
Save
</LoadingButton>
</Button>
</Stack>
</Stack>
</Box>
Client/src/Pages/Uptime/Configure/index.jsx
+12 -9
View File
@@ -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, Stack, Tooltip, Typography } from "@mui/material";
import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
import { monitorValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
@@ -22,7 +22,6 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
import SkeletonLayout from "./skeleton";
import LoadingButton from "@mui/lab/LoadingButton";
import "./index.css";
import Dialog from "../../../Components/Dialog";
@@ -292,7 +291,7 @@ const Configure = () => {
ml: "auto",
}}
>
<LoadingButton
<Button
variant="contained"
color="secondary"
loading={isLoading}
@@ -323,8 +322,8 @@ const Configure = () => {
Resume
</>
)}
</LoadingButton>
<LoadingButton
</Button>
<Button
loading={isLoading}
variant="contained"
color="error"
@@ -332,7 +331,7 @@ const Configure = () => {
onClick={() => setIsOpen(true)}
>
Remove
</LoadingButton>
</Button>
</Box>
</Stack>
<ConfigBox>
@@ -347,7 +346,11 @@ const Configure = () => {
<TextInput
type={monitor?.type === "http" ? "url" : "text"}
https={protocol === "https"}
startAdornment={monitor?.type === "http" && <HttpAdornment https={protocol === "https"} />}
startAdornment={
monitor?.type === "http" && (
<HttpAdornment https={protocol === "https"} />
)
}
id="monitor-url"
label="URL to monitor"
placeholder="google.com"
@@ -443,7 +446,7 @@ const Configure = () => {
justifyContent="flex-end"
mt="auto"
>
<LoadingButton
<Button
variant="contained"
color="accent"
loading={isLoading}
@@ -451,7 +454,7 @@ const Configure = () => {
onClick={handleSubmit}
>
Save
</LoadingButton>
</Button>
</Stack>
</Stack>
</>
Client/src/Pages/Uptime/Create/index.jsx
+4 -5
View File
@@ -13,7 +13,6 @@ import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMoni
// MUI
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
//Components
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -143,8 +142,8 @@ const CreateMonitor = () => {
...monitor,
[formName]: value,
};
if (formName === 'type') {
newMonitor.url = '';
if (formName === "type") {
newMonitor.url = "";
}
setMonitor(newMonitor);
@@ -405,7 +404,7 @@ const CreateMonitor = () => {
direction="row"
justifyContent="flex-end"
>
<LoadingButton
<Button
variant="contained"
color="accent"
onClick={handleCreateMonitor}
@@ -413,7 +412,7 @@ const CreateMonitor = () => {
loading={isLoading}
>
Create monitor
</LoadingButton>
</Button>
</Stack>
</Stack>
</Box>
Client/src/Utils/Theme/globalTheme.js
+6 -5
View File
@@ -132,7 +132,7 @@ const baseTheme = (palette) => ({
backgroundColor: theme.palette.secondary.main,
color: theme.palette.primary.contrastText,
},
"&.MuiLoadingButton-root": {
"&.MuiButton-root": {
"&:disabled": {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.primary.contrastText,
@@ -141,12 +141,13 @@ const baseTheme = (palette) => ({
boxShadow: `0 0 0 1px ${theme.palette.accent.main}`, // CAIO_REVIEW, this should really have a solid BG color
},
},
"&.MuiLoadingButton-loading": {
"& .MuiLoadingButton-label": {
"&.MuiButton-loading": {
"&:disabled": {
color: "transparent",
},
"& .MuiLoadingButton-loadingIndicator": {
color: "inherit",
"& .MuiButton-loadingIndicator": {
color: theme.palette.primary.contrastText,
},
},
}),