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

Refactored button group styling

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-31 14:53:15 -04:00
1 parent ac48378614
commit cedbcd7141
7 files changed
+135 -133
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/TabPanels/Account/TeamPanel.jsx
+25 -38
View File
@@ -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"
Client/src/Pages/Monitors/Configure/index.jsx
+9 -6
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, 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
+16 -26
View File
@@ -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
+33 -44
View File
@@ -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
+6 -5
View File
@@ -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)}>
Client/src/Utils/Theme/darkTheme.js
+23 -7
View File
@@ -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: {
Client/src/Utils/Theme/lightTheme.js
+23 -7
View File
@@ -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: {