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

Refactored sx styling to theme file style overrides

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-29 20:42:12 -04:00
1 parent bddca58a37
commit 4352b3690d
12 files changed
+90 -101
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Avatar/index.jsx
+1
View File
@@ -57,6 +57,7 @@ const Avatar = ({ src, small, sx }) => {
}
sx={{
fontSize: small ? "16px" : "22px",
color: "white",
fontWeight: 400,
backgroundColor: stringToColor(`${user?.firstName} ${user?.lastName}`),
display: "inline-flex",
Client/src/Components/BasicTable/index.css
-11
View File
@@ -120,17 +120,6 @@
opacity: 0.4;
}
.pagination-dropdown ul {
padding: 4px;
min-width: 100px;
}
.pagination-dropdown li {
font-size: var(--env-var-font-size-medium);
}
body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
font-size: var(--env-var-font-size-small-plus);
}
.monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
text-transform: uppercase;
opacity: 0.8;
Client/src/Components/BasicTable/index.jsx
+2 -10
View File
@@ -272,7 +272,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
},
}}
>
<Typography px={theme.spacing(2)} sx={{ opacity: 0.7 }}>
<Typography px={theme.spacing(2)} fontSize={12} sx={{ opacity: 0.7 }}>
Showing {getRange()} of {data.rows.length} monitor(s)
</Typography>
<TablePagination
@@ -300,19 +300,11 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
sx: {
mt: 0,
mb: theme.spacing(2),
"& li": {
p: theme.spacing(2),
color: theme.palette.text.tertiary,
},
"& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
{
backgroundColor: theme.palette.background.fill,
},
},
},
transformOrigin: { vertical: "bottom", horizontal: "left" },
anchorOrigin: { vertical: "top", horizontal: "left" },
sx: { mt: "-4px" },
sx: { mt: theme.spacing(-2) },
},
inputProps: { id: "pagination-dropdown" },
IconComponent: SelectorVertical,
Client/src/Components/Breadcrumbs/index.jsx
+1 -1
View File
@@ -33,7 +33,7 @@ const Breadcrumbs = ({ list }) => {
lineHeight="18px"
sx={{
"& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
backgroundColor: "#e3e3e3",
backgroundColor: theme.palette.other.fill,
opacity: 1,
},
}}
Client/src/Components/Fallback/index.jsx
+10 -4
View File
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import Skeleton from "../../assets/Images/create-placeholder.svg?react";
import background from "../../assets/Images/background_pattern_decorative.png";
import Background from "../../assets/Images/background-grid.svg?react";
import Button from "../Button";
import Check from "../Check/Check";
import { useNavigate } from "react-router-dom";
@@ -32,12 +32,18 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => {
<Skeleton style={{ zIndex: 1 }} />
<Box
className="background-pattern-svg"
sx={{ backgroundImage: `url(${background})` }}
/>
sx={{
"& svg g g:last-of-type path": {
stroke: theme.palette.border.light,
},
}}
>
<Background style={{ width: "100%" }} />
</Box>
<Stack gap={theme.spacing(4)} maxWidth={"275px"} zIndex={1}>
<Typography
component="h1"
marginY={theme.spacing(6)}
marginY={theme.spacing(4)}
color={theme.palette.text.secondary}
>
A {title} is used to:
Client/src/Components/Inputs/Select/index.css
-5
View File
@@ -5,8 +5,3 @@
align-items: center;
line-height: 1;
}
.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select),
.MuiMenu-List .MuiMenuItem-root,
.select-wrapper h3.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
}
Client/src/Components/Inputs/Select/index.jsx
+1 -18
View File
@@ -77,26 +77,9 @@ const Select = ({
onChange={onChange}
displayEmpty
inputProps={{ id: id }}
MenuProps={{
MenuListProps: {
sx: {
p: 0,
"& li": {
color: theme.palette.text.secondary,
fontSize: 13,
px: theme.spacing(4),
py: theme.spacing(2.5),
borderRadius: theme.shape.borderRadius,
},
"& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
{
backgroundColor: theme.palette.background.fill,
},
},
},
}}
IconComponent={KeyboardArrowDownIcon}
sx={{
fontSize: 13,
minWidth: "125px",
"& fieldset": {
borderRadius: theme.shape.borderRadius,
Client/src/Components/Sidebar/index.jsx
+14 -48
View File
@@ -305,31 +305,12 @@ function Sidebar() {
slotProps={{
paper: {
sx: {
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shape.boxShadow,
backgroundColor: theme.palette.background.main,
mt: theme.spacing(-2),
ml: theme.spacing(1),
},
},
}}
MenuListProps={{
sx: {
p: 3,
minWidth: "100px",
"& li": {
color: theme.palette.text.secondary,
fontSize: 13,
px: theme.spacing(4),
py: theme.spacing(2.5),
borderRadius: theme.shape.borderRadius,
},
"& li:hover": {
backgroundColor: theme.palette.background.accent,
},
},
}}
MenuListProps={{ sx: { px: 1, py: 2 } }}
sx={{
ml: theme.spacing(8),
"& .selected-path": {
@@ -360,9 +341,13 @@ function Sidebar() {
}}
sx={{
gap: theme.spacing(4),
borderRadius: theme.shape.borderRadius,
pl: theme.spacing(4),
mb: "1px",
opacity: 0.9,
"& svg": {
"& path": {
stroke: theme.palette.other.icon,
strokeWidth: 1.1,
},
},
}}
>
{child.icon}
@@ -460,9 +445,7 @@ function Sidebar() {
)
)}
</List>
<Divider
sx={{ my: theme.spacing(4), borderColor: theme.palette.border.light }}
/>
<Divider sx={{ my: theme.spacing(4) }} />
{/* other */}
<List
component="nav"
@@ -526,7 +509,7 @@ function Sidebar() {
</Tooltip>
))}
</List>
<Divider sx={{ mt: "auto", borderColor: theme.palette.border.light }} />
<Divider sx={{ mt: "auto" }} />
<Stack
direction="row"
@@ -607,11 +590,6 @@ function Sidebar() {
slotProps={{
paper: {
sx: {
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shape.boxShadow,
backgroundColor: theme.palette.background.main,
marginTop: theme.spacing(-4),
marginLeft: collapsed ? theme.spacing(2) : 0,
},
@@ -619,18 +597,7 @@ function Sidebar() {
}}
MenuListProps={{
sx: {
p: 3,
minWidth: "100px",
"& li": {
color: theme.palette.text.secondary,
fontSize: 13,
px: theme.spacing(4),
py: theme.spacing(2.5),
borderRadius: theme.shape.borderRadius,
},
"& li:hover": {
backgroundColor: theme.palette.background.accent,
},
p: 2,
"& li:has(.MuiBox-root):hover": {
backgroundColor: theme.palette.background.main,
},
@@ -652,11 +619,10 @@ function Sidebar() {
</Box>
</MenuItem>
)}
{collapsed && (
<Divider sx={{ borderColor: theme.palette.border.light }} />
)}
{collapsed && <Divider />}
<MenuItem onClick={() => dispatch(setMode("light"))}>Light</MenuItem>
<MenuItem onClick={() => dispatch(setMode("dark"))}>Dark</MenuItem>
<Divider />
<MenuItem
onClick={logout}
sx={{
Client/src/Layouts/HomeLayout/index.css
+1 -1
View File
@@ -30,7 +30,7 @@
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -47%);
transform: translate(-50%, -50%);
z-index: 0;
width: 100%;
Client/src/Pages/Monitors/Home/index.css
-3
View File
@@ -6,9 +6,6 @@
font-size: var(--env-var-font-size-large);
font-weight: 500;
}
.monitors p.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
}
.monitors h1.MuiTypography-root + p.MuiTypography-root {
font-size: var(--env-var-font-size-medium-plus);
}
Client/src/Utils/Theme/darkTheme.js
+30
View File
@@ -5,6 +5,7 @@ const text = {
secondary: "#e6e6e6",
tertiary: "#a1a1aa",
accent: "#e6e6e6",
disabled: "rgba(172, 172, 172, 0.3)",
};
const background = {
main: "#151518",
@@ -54,10 +55,13 @@ const darkTheme = createTheme({
border: "#fec84b",
},
unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
divider: border.light,
other: {
icon: "#e6e6e6",
line: "#27272a",
fill: "#18181a",
},
// TO BE REMOVED //
primary: {
main: "#1570ef",
},
@@ -67,6 +71,7 @@ const darkTheme = createTheme({
tertiary: {
main: "#e6e6e6",
},
// ----------------- //
},
spacing: 2,
components: {
@@ -79,6 +84,7 @@ const darkTheme = createTheme({
styleOverrides: {
root: {
marginTop: 4,
padding: 0,
border: 1,
borderStyle: "solid",
borderColor: border.light,
@@ -88,6 +94,30 @@ const darkTheme = createTheme({
},
},
},
MuiList: {
styleOverrides: {
root: {
padding: 0,
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
borderRadius: 4,
backgroundColor: "inherit",
padding: "4px 6px",
color: text.secondary,
fontSize: 13,
margin: 2,
minWidth: 100,
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
{
backgroundColor: background.fill,
},
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
Client/src/Utils/Theme/lightTheme.js
+30
View File
@@ -22,6 +22,7 @@ const shadow =
const lightTheme = createTheme({
typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
palette: {
mode: "dark",
common: { main: "#1570ef" },
text: text,
background: background,
@@ -54,10 +55,13 @@ const lightTheme = createTheme({
border: "#fec84b",
},
unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
divider: border.light,
other: {
icon: "#667085",
line: "#d6d9dd",
fill: "#e3e3e3",
},
// TO BE REMOVED //
primary: {
main: "#1570EF",
},
@@ -67,6 +71,7 @@ const lightTheme = createTheme({
tertiary: {
main: "#475467",
},
// ----------------- //
},
spacing: 2,
components: {
@@ -88,6 +93,31 @@ const lightTheme = createTheme({
},
},
},
MuiList: {
styleOverrides: {
root: {
padding: 0,
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
borderRadius: 4,
backgroundColor: "inherit",
padding: "4px 6px",
color: text.secondary,
fontSize: 13,
margin: 2,
marginBottom: 0,
minWidth: 100,
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
{
backgroundColor: background.fill,
},
},
},
},
MuiTableCell: {
styleOverrides: {
root: {