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

feat: simplify and adjust status label

Browse Source
This commit is contained in:
Caio Cabral committed 2025-01-12 09:39:31 -05:00
1 parent 5eca39cd04
commit 61aaa8489a
58 files changed
+266 -202
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/BasicTable/index.jsx
+3 -3
View File
@@ -251,7 +251,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
px={theme.spacing(4)}
sx={{
"& p": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>
@@ -305,9 +305,9 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
}}
sx={{
mt: theme.spacing(6),
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.3,
},
"& .MuiSelect-select": {
Client/src/Components/Charts/BarChart/index.jsx
+5 -3
View File
@@ -68,8 +68,8 @@ const BarChart = ({ checks = [] }) => {
height={theme.spacing(4)}
backgroundColor={
check.status
? theme.palette.success.accent
: theme.palette.error.accent
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast
}
sx={{ borderRadius: "50%" }}
/>
@@ -159,7 +159,9 @@ const BarChart = ({ checks = [] }) => {
width="100%"
height={`${animate ? check.responseTime : 0}%`}
backgroundColor={
check.status ? theme.palette.success.accent : theme.palette.error.accent
check.status
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast
}
sx={{
borderRadius: theme.spacing(1.5),
Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+3 -3
View File
@@ -36,7 +36,7 @@ const CustomToolTip = ({ active, payload, label }) => {
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -58,7 +58,7 @@ const CustomToolTip = ({ active, payload, label }) => {
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -114,7 +114,7 @@ const CustomTick = ({ x, y, payload, index }) => {
x={x}
y={y + 10}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>
Client/src/Components/Charts/Utils/chartUtils.jsx
+6 -6
View File
@@ -23,7 +23,7 @@ export const TzTick = ({ x, y, payload, index }) => {
x={x}
y={y + 10}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>
@@ -57,7 +57,7 @@ export const PercentTick = ({ x, y, payload, index }) => {
x={x - 20}
y={y}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>
@@ -128,7 +128,7 @@ export const InfrastructureTooltip = ({
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -150,7 +150,7 @@ export const InfrastructureTooltip = ({
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -208,7 +208,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -227,7 +227,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
Client/src/Components/Check/Check.jsx
+1 -1
View File
@@ -51,7 +51,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
sx={{
color:
variant === "info"
? theme.palette.primary.contrastText.tertiary
? theme.palette.primary.contrastTextTertiary
: colors[variant],
opacity: 0.8,
}}
Client/src/Components/ConfigBox/index.jsx
+2 -2
View File
@@ -28,10 +28,10 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
paddingLeft: theme.spacing(18),
},
"& h1, & h2": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
"& p": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}));
Client/src/Components/Dialog/genericDialog.jsx
+2 -2
View File
@@ -37,7 +37,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
id={titleId}
component="h2"
fontSize={16}
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
fontWeight={600}
>
{title}
@@ -45,7 +45,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
{description && (
<Typography
id={descriptionId}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{description}
</Typography>
Client/src/Components/Fallback/index.jsx
+1 -1
View File
@@ -54,7 +54,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
<Typography
component="h1"
marginY={theme.spacing(4)}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{vowelStart ? "An" : "A"} {title} is used to:
</Typography>
Client/src/Components/IconBox/index.jsx
+1 -1
View File
@@ -59,7 +59,7 @@ const IconBox = styled(Box)(
width: svgWidth,
height: svgHeight,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
},
})
Client/src/Components/Inputs/Checkbox/index.jsx
+2 -2
View File
@@ -94,10 +94,10 @@ const Checkbox = ({
},
"& span.MuiTypography-root": {
fontSize: 13,
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
".MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
opacity: 0.25,
},
}}
Client/src/Components/Inputs/Image/index.jsx
+3 -3
View File
@@ -94,7 +94,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</IconButton>
<Typography
component="h2"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
<Typography
component="span"
@@ -108,7 +108,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</Typography>
<Typography
component="p"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
sx={{ opacity: 0.6 }}
>
(maximum size: 3MB)
@@ -117,7 +117,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</Box>
<Typography
component="p"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
sx={{ opacity: 0.6 }}
>
Supported formats: JPG, PNG
Client/src/Components/Inputs/Radio/index.jsx
+2 -2
View File
@@ -43,7 +43,7 @@ const Radio = (props) => {
height: 16,
boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`,
"&:not(.Mui-checked)": {
boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText.main}70`, // Use theme text color for the outline
boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText}70`, // Use theme text color for the outline
},
mt: theme.spacing(0.5),
}}
@@ -56,7 +56,7 @@ const Radio = (props) => {
<Typography
component="h6"
mt={theme.spacing(1)}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
{props.desc}
</Typography>
Client/src/Components/Inputs/Search/index.jsx
+4 -4
View File
@@ -27,7 +27,7 @@ const SearchAdornment = () => {
width: 16,
height: 16,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.2,
},
},
@@ -80,7 +80,7 @@ const Search = ({
<Typography
component="h3"
fontSize={"var(--env-var-font-size-medium)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
>
{label}
@@ -157,7 +157,7 @@ const Search = ({
sx: {
"& ul": { p: 2, backgroundColor: theme.palette.primary.main },
"& li.MuiAutocomplete-option": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
px: 4,
borderRadius: theme.shape.borderRadius,
},
@@ -168,7 +168,7 @@ const Search = ({
},
"& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": {
color: theme.palette.primary.main,
backgroundColor: theme.palette.primary.contrastText.secondary,
backgroundColor: theme.palette.primary.contrastTextSecondary,
},
"& .MuiAutocomplete-noOptions": {
px: theme.spacing(6),
Client/src/Components/Inputs/Select/index.jsx
+3 -3
View File
@@ -54,7 +54,7 @@ const Select = ({
const theme = useTheme();
const itemStyles = {
fontSize: "var(--env-var-font-size-medium)",
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
borderRadius: theme.shape.borderRadius,
margin: theme.spacing(2),
};
@@ -67,7 +67,7 @@ const Select = ({
{label && (
<Typography
component="h3"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
fontSize={13}
>
@@ -95,7 +95,7 @@ const Select = ({
borderColor: theme.palette.primary.lowContrast,
},
"& svg path": {
fill: theme.palette.primary.contrastText.tertiary,
fill: theme.palette.primary.contrastTextTertiary,
},
...sx,
}}
Client/src/Components/Inputs/TextInput/Adornments/index.jsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const HttpAdornment = ({ https }) => {
<Typography
component="h5"
paddingRight={"var(--env-var-spacing-1-minus)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
sx={{ lineHeight: 1, opacity: 0.8 }}
>
{https ? "https" : "http"}://
Client/src/Components/Inputs/TextInput/index.jsx
+1 -1
View File
@@ -101,7 +101,7 @@ const TextInput = forwardRef(
<Typography
component="h3"
fontSize={"var(--env-var-font-size-medium)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
>
{label}
Client/src/Components/Label/index.jsx
+21 -18
View File
@@ -31,8 +31,8 @@ const BaseLabel = ({ label, styles, children }) => {
className="label"
sx={{
borderRadius: borderRadius,
border: `1px solid ${theme.palette.primary.contrastText.tertiary}`,
color: theme.palette.primary.contrastText.tertiary,
border: `1px solid ${theme.palette.primary.contrastTextTertiary}`,
color: theme.palette.primary.contrastTextTertiary,
padding: padding,
...styles,
}}
@@ -122,55 +122,58 @@ ColoredLabel.propTypes = {
* <StatusLabel status="up" text="Active" />
*/
/* TODO check design aspect with Gorkem */
const statusToTheme = {
up: "success",
down: "error",
paused: "warning",
pending: "secondary",
"cannot resolve": "tertiary",
};
const StatusLabel = ({ status, text, customStyles }) => {
const theme = useTheme();
const colors = {
/* const colors = {
up: {
dotColor: theme.palette.success.main,
/* bgColor: theme.palette.success.contrastText */ /* dark */
borderColor: theme.palette.success.main /* light */,
borderColor: theme.palette.success.main ,
},
down: {
dotColor: theme.palette.error.main,
/* TODO Look for dark and light, they still work */
/* bgColor: theme.palette.primary.lowContrast, */
borderColor: theme.palette.error.light,
},
paused: {
dotColor: theme.palette.warning.main,
/* bgColor: theme.palette.warning.dark, */
borderColor: theme.palette.warning.light,
},
pending: {
dotColor: theme.palette.primary.contrastText.secondary,
bgColor: theme.palette.primary.main,
dotColor: theme.palette.primary.contrastTextSecondary,
borderColor: theme.palette.primary.lowContrast,
},
"cannot resolve": {
dotColor: theme.palette.unresolved.main,
bgColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.unresolved.light,
},
};
}; */
const themeColor = statusToTheme[status];
// Look up the color for the status
const { borderColor, bgColor, dotColor } = colors[status];
/* const { borderColor, bgColor, dotColor } = colors[status]; */
return (
<BaseLabel
label={text}
styles={{
color: dotColor,
backgroundColor: bgColor,
borderColor: borderColor,
color: theme.palette[themeColor].main /* dotColor */,
/*backgroundColor: bgColor, */
borderColor: theme.palette[themeColor].lowContrast /* borderColor */,
...customStyles,
}}
>
<Box
width={7}
height={7}
bgcolor={dotColor}
bgcolor={theme.palette[themeColor].lowContrast /* dotColor */}
borderRadius="50%"
marginRight="5px"
/>
Client/src/Components/Link/index.jsx
+4 -4
View File
@@ -16,22 +16,22 @@ const Link = ({ level, label, url }) => {
const levelConfig = {
primary: {},
secondary: {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
sx: {
":hover": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
},
},
tertiary: {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
sx: {
textDecoration: "underline",
textDecorationStyle: "dashed",
textDecorationColor: theme.palette.primary.main,
textUnderlineOffset: "1px",
":hover": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
textDecorationColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.lowContrast,
},
Client/src/Components/ProgressBars/index.jsx
+2 -2
View File
@@ -71,7 +71,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
width: 23,
height: 23,
"& path": {
fill: theme.palette.primary.contrastText.tertiary,
fill: theme.palette.primary.contrastTextTertiary,
},
},
}}
@@ -90,7 +90,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
{error}
</Typography>
) : (
<Box color={theme.palette.primary.contrastText.tertiary}>
<Box color={theme.palette.primary.contrastTextTertiary}>
<Typography
component="h2"
mb={theme.spacing(1.5)}
Client/src/Components/Sidebar/index.jsx
+5 -5
View File
@@ -156,7 +156,7 @@ function Sidebar() {
}
}, [location]);
const iconColor = theme.palette.primary.contrastText.tertiary;
const iconColor = theme.palette.primary.contrastTextTertiary;
/* TODO refactor this, there are a some ternaries and comments in the return */
return (
@@ -178,7 +178,7 @@ function Sidebar() {
Text color for unselected menu items and menu headings
Secondary contrast text against main background
*/
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
"& .MuiList-root svg path": {
/* Menu Icons */
@@ -228,7 +228,7 @@ function Sidebar() {
height: theme.spacing(8),
"& path": {
/* TODO this should be set at the top level if possible */
stroke: theme.palette.primary.contrastText.secondary,
stroke: theme.palette.primary.contrastTextSecondary,
},
},
"&:focus": { outline: "none" },
@@ -443,7 +443,7 @@ function Sidebar() {
/* TODO this has no effect? */
"& svg": {
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.1,
},
},
@@ -536,7 +536,7 @@ function Sidebar() {
},
"&.selected-path::after": {
/* TODO what is this selector doing? */
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
transform: "scale(1.2)",
},
}}
Client/src/Components/StatBox/index.jsx
+3 -3
View File
@@ -44,15 +44,15 @@ const StatBox = ({ heading, subHeading, sx }) => {
"& h2": {
fontSize: 13,
fontWeight: 500,
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
textTransform: "uppercase",
},
"& p": {
fontSize: 18,
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
marginTop: theme.spacing(2),
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
marginLeft: theme.spacing(2),
fontSize: 15,
},
Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+1 -1
View File
@@ -115,7 +115,7 @@ const PasswordPanel = () => {
value="password"
sx={{
"& h1, & input": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+1 -1
View File
@@ -216,7 +216,7 @@ const ProfilePanel = () => {
value="profile"
sx={{
"& h1, & p, & input": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>
Client/src/Components/TabPanels/Account/TeamPanel.jsx
+2 -2
View File
@@ -91,7 +91,7 @@ const TeamPanel = () => {
id: idx,
data: (
<Stack>
<Typography color={theme.palette.primary.contrastText.secondary}>
<Typography color={theme.palette.primary.contrastTextSecondary}>
{member.firstName + " " + member.lastName}
</Typography>
<Typography>
@@ -190,7 +190,7 @@ const TeamPanel = () => {
value="team"
sx={{
"& h1": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
"& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
{
Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
+2 -2
View File
@@ -35,12 +35,12 @@ const SunAndMoonIcon = () => {
cx="12"
cy="12"
r="6"
fill={theme.palette.primary.contrastText.secondary}
fill={theme.palette.primary.contrastTextSecondary}
mask="url(#moon-mask)"
/>
<g
className="sun-beams"
stroke={theme.palette.primary.contrastText.secondary}
stroke={theme.palette.primary.contrastTextSecondary}
>
<line
x1="12"