nuke theme

client/src/components/common/HeaderCreate.tsx

@@ -52,7 +52,7 @@ export const HeaderCreate = ({
           <Button
             loading={isLoading}
             variant="contained"
-            color="accent"
+            color="primary"
             disabled={limitReached}
             onClick={() => navigate(path)}
           >

client/src/components/common/HeatmapResponseTime.tsx

@@ -53,24 +53,20 @@ export const HeatmapResponseTime = ({
         {data.map((check, index) => {
           const statusBg =
             check.status === "placeholder"
-              ? theme.palette.primary.lowContrast
+              ? theme.palette.action.hover
               : check.status === "up"
-                ? theme.palette.success.lowContrast
-                : theme.palette.error.lowContrast;
+                ? theme.palette.success.light
+                : theme.palette.error.light;
           const respBg =
             check.status === "placeholder"
-              ? theme.palette.primary.lowContrast
+              ? theme.palette.action.hover
               : getResponseColor(check.responseTime, {
-                  start: theme.palette.success.lowContrast,
-                  mid: theme.palette.warning.lowContrast,
-                  end: theme.palette.error.lowContrast,
+                  start: theme.palette.success.main,
+                  mid: theme.palette.warning.main,
+                  end: theme.palette.error.main,
                 });
           const statusBorder =
-            check.status === "placeholder"
-              ? theme.palette.primary.lowContrast
-              : check.status === "up"
-                ? theme.palette.success.main
-                : theme.palette.error.main;
+            check.status === "placeholder" ? theme.palette.divider : check.status === "up" ? theme.palette.success.main : theme.palette.error.main;
 
           return (
             <HeatmapResponseTimeTooltip key={`${check}-${index}`} check={check}>

client/src/components/common/HeatmapResponseTimeTooltip.tsx

@@ -14,8 +14,8 @@ export const HeatmapResponseTimeTooltip: React.FC<{
   const theme = useTheme();
 
   const getColor = (status: string) => {
-    if (status === "up") return theme.palette.success.lowContrast;
-    if (status === "down") return theme.palette.error.lowContrast;
+    if (status === "up") return theme.palette.success.light;
+    if (status === "down") return theme.palette.error.light;
   };
 
   if (check.status === "placeholder") {
@@ -37,7 +37,7 @@ export const HeatmapResponseTimeTooltip: React.FC<{
           sx={{
             backgroundColor: theme.palette.secondary.main,
             border: 1,
-            borderColor: theme.palette.primary.lowContrast,
+            borderColor: theme.palette.divider,
             borderRadius: theme.shape.borderRadius,
             p: theme.spacing(4),
           }}

client/src/components/common/HistogramResponseTime.tsx

@@ -57,8 +57,8 @@ export const HistogramResponseTime = ({
           const heightPct = `${Math.max(0, Math.min(100, (check as any).normalResponseTime ?? 0))}%`;
           const barColor =
             check.status === "up"
-              ? theme.palette.success.lowContrast
-              : theme.palette.error.lowContrast;
+              ? theme.palette.success.light
+              : theme.palette.error.light;
           const bar = (
             <Box
               sx={{
@@ -66,7 +66,7 @@ export const HistogramResponseTime = ({
                 width: "100%",
                 height: "100%",
                 borderRadius: theme.spacing(1),
-                bgcolor: theme.palette.primary.lowContrast,
+                bgcolor: theme.palette.action.hover,
                 overflow: "hidden",
               }}
             >

client/src/components/design-elements/BaseBox.tsx

@@ -7,10 +7,10 @@ export const BaseBox = ({ sx, ...rest }: BoxProps) => {
     <Box
       {...rest}
       sx={{
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.background.paper,
         border: 1,
         borderStyle: "solid",
-        borderColor: theme.palette.primary.lowContrast,
+        borderColor: theme.palette.divider,
         borderRadius: theme.shape.borderRadius,
         ...sx,
       }}

client/src/components/design-elements/Breadcrumb.tsx

@@ -49,7 +49,7 @@ export const Breadcrumb = ({
         fontSize: "14px",
         marginBottom: theme.spacing(6),
         "& .MuiBreadcrumbs-separator": {
-          color: theme.palette.primary.contrastTextTertiary,
+          color: theme.palette.text.secondary,
         },
       }}
     >
@@ -60,16 +60,16 @@ export const Breadcrumb = ({
           alignItems: "center",
           gap: theme.spacing(2),
           textDecoration: "none",
-          color: theme.palette.primary.contrastTextTertiary,
+          color: theme.palette.text.secondary,
         }}
       >
         <Home size={16} strokeWidth={1.5} />
         <Typography
           sx={{
             fontSize: "14px",
-            color: theme.palette.primary.contrastTextTertiary,
+            color: theme.palette.text.secondary,
             "&:hover": {
-              color: theme.palette.accent.main,
+              color: theme.palette.primary.main,
             },
           }}
         >
@@ -94,7 +94,7 @@ export const Breadcrumb = ({
             sx={{
               fontSize: "14px",
               fontWeight: 600,
-              color: theme.palette.accent.main,
+              color: theme.palette.primary.main,
             }}
           >
             {displayName}
@@ -110,9 +110,9 @@ export const Breadcrumb = ({
             <Typography
               sx={{
                 fontSize: "14px",
-                color: theme.palette.primary.contrastTextTertiary,
+                color: theme.palette.text.secondary,
                 "&:hover": {
-                  color: theme.palette.accent.main,
+                  color: theme.palette.primary.main,
                 },
               }}
             >

client/src/components/design-elements/BulletPointCheck.tsx

@@ -15,7 +15,7 @@ export const BulletPointCheck = ({
   const colors: Record<string, string | undefined> = {
     success: theme.palette.success.main,
     error: theme.palette.error.main,
-    info: theme.palette.primary.contrastTextSecondary,
+    info: theme.palette.text.secondary,
   };
 
   return (
@@ -29,11 +29,7 @@ export const BulletPointCheck = ({
       />
       <Typography
         component="span"
-        color={
-          variant === "info"
-            ? theme.palette.primary.contrastTextSecondary
-            : colors[variant]
-        }
+        color={variant === "info" ? theme.palette.text.secondary : colors[variant]}
         fontWeight={450}
         sx={{
           opacity: 0.9,

client/src/components/design-elements/Fallback.tsx

@@ -32,9 +32,9 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
         xl: "40%",
       }}
       padding={{ xs: theme.spacing(8), md: theme.spacing(16) }}
-      bgcolor={theme.palette.primary.main}
+      bgcolor={theme.palette.background.paper}
       border={1}
-      borderColor={theme.palette.primary.lowContrast}
+      borderColor={theme.palette.divider}
       borderRadius={theme.shape.borderRadius}
       sx={{
         borderStyle: "dashed",
@@ -60,7 +60,7 @@ export const ErrorFallback = ({
       <Typography
         variant="h1"
         marginY={theme.spacing(4)}
-        color={theme.palette.primary.contrastTextTertiary}
+        color={theme.palette.text.secondary}
       >
         {title}
       </Typography>
@@ -106,7 +106,7 @@ export const EmptyFallback = ({
         <Stack>
           <Button
             variant="contained"
-            color="accent"
+            color="primary"
             onClick={() => navigate(actionLink)}
           >
             {actionButtonText}
@@ -158,7 +158,7 @@ export const EmptyMonitorFallback = ({
         <Stack>
           <Button
             variant="contained"
-            color="accent"
+            color="primary"
             onClick={() => navigate(actionLink)}
             disabled={monitorLimitReached}
           >

client/src/components/design-elements/Gauge.tsx

@@ -61,7 +61,7 @@ export const Gauge = ({
       position={"relative"}
       width={radius}
       height={radius}
-      bgcolor={theme.palette.primary.main}
+      bgcolor={theme.palette.background.paper}
       borderRadius={"50%"}
     >
       <svg

client/src/components/design-elements/InfoBox.tsx

@@ -22,27 +22,27 @@ export const InfoBox: React.FC<InfoBoxProps> = ({ title, description }) => {
             ? "rgba(59, 130, 246, 0.1)"
             : "rgba(59, 130, 246, 0.05)",
         borderRadius: theme.shape.borderRadius,
-        borderLeft: `4px solid ${theme.palette.accent.main}`,
+        borderLeft: `4px solid ${theme.palette.primary.main}`,
       }}
     >
       <Info
         size={24}
         strokeWidth={1.5}
         style={{
-          color: theme.palette.accent.main,
+          color: theme.palette.primary.main,
           flexShrink: 0,
           marginTop: theme.spacing(1),
         }}
       />
       <Stack spacing={theme.spacing(4)}>
-        <Typography variant="h2" sx={{ color: theme.palette.accent.main }}>
+        <Typography variant="h2" sx={{ color: theme.palette.primary.main }}>
           {title}
         </Typography>
         <Typography
           variant="body1"
           sx={{
             lineHeight: 1.7,
-            color: theme.palette.primary.contrastTextSecondary,
+            color: theme.palette.text.secondary,
           }}
         >
           {description}

client/src/components/design-elements/PlanCard.tsx

@@ -34,7 +34,7 @@ export const PlanCard = ({
       ? theme.palette.success.main
       : plan.plan === "free"
         ? theme.palette.text.secondary
-        : theme.palette.accent.main;
+        : theme.palette.primary.main;
   const Icon = (() => {
     switch (plan.plan) {
       case "free":
@@ -98,7 +98,7 @@ export const PlanCard = ({
         flexDirection: "column",
         height: "100%",
         border: selected ? 2 : 1,
-        borderColor: selected ? theme.palette.accent.main : "divider",
+        borderColor: selected ? theme.palette.primary.main : "divider",
         transition:
           "transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease",
         ...(selected
@@ -130,9 +130,9 @@ export const PlanCard = ({
                 size="small"
                 label="Most popular"
                 sx={{
-                  bgcolor: theme.palette.accent.main,
+                  bgcolor: theme.palette.primary.main,
                   color: theme.palette.getContrastText(
-                    theme.palette.accent.main
+                    theme.palette.primary.main
                   ),
                 }}
               />
@@ -171,7 +171,7 @@ export const PlanCard = ({
           <Button
             loading={loading}
             variant="contained"
-            color="accent"
+            color="primary"
             onClick={(e) => {
               e.stopPropagation();
               onClick?.(plan.plan);

client/src/components/design-elements/PulseDot.tsx

@@ -32,7 +32,7 @@ export const PulseDot = ({ color }: { color: string }) => {
 						width: "7px",
 						height: "7px",
 						borderRadius: "50%",
-						backgroundColor: theme.palette.accent.contrastText,
+            backgroundColor: theme.palette.getContrastText(theme.palette.primary.main),
 						top: "50%",
 						left: "50%",
 						transform: "translate(-50%, -50%)",

client/src/components/design-elements/ResolutionCard.tsx

@@ -22,9 +22,7 @@ export const ResolutionCard = ({
   durationLabel,
 }: ResolutionCardProps) => {
   const theme = useTheme();
-  const bg = resolved
-    ? theme.palette.success.lowContrast
-    : theme.palette.error.lowContrast;
+  const bg = resolved ? theme.palette.success.light : theme.palette.error.light;
 
   return (
     <BaseBox sx={{ width: "100%", maxWidth: 420 }}>

client/src/components/design-elements/SkeletonCard.tsx

@@ -51,7 +51,7 @@ const SkeletonCard: React.FC<SkeletonCardProps> = ({
     height: 34,
     borderRadius: theme.shape.borderRadius,
     background: theme.palette.secondary.main,
-    border: `1px solid ${theme.palette.primary.lowContrast}`,
+    border: `1px solid ${theme.palette.divider}`,
     animation: "pulse 1.6s ease-in-out infinite",
     ...pulseAnimation,
   };
@@ -60,7 +60,7 @@ const SkeletonCard: React.FC<SkeletonCardProps> = ({
     height: 7,
     borderRadius: theme.shape.borderRadius,
     background: theme.palette.secondary.main,
-    border: `1px solid ${theme.palette.primary.lowContrast}`,
+    border: `1px solid ${theme.palette.divider}`,
     animation: "pulse 1.6s ease-in-out infinite",
     ...pulseAnimation,
   };

client/src/components/design-elements/SplitBox.tsx

@@ -15,16 +15,16 @@ export const SplitBox = ({
   return (
     <Stack
       direction={isSmall ? "column" : "row"}
-      bgcolor={theme.palette.primary.main}
+      bgcolor={theme.palette.background.paper}
       border={1}
-      borderColor={theme.palette.primary.lowContrast}
+      borderColor={theme.palette.divider}
       borderRadius={theme.spacing(2)}
     >
       <Box
         padding={theme.spacing(15)}
         borderRight={isSmall ? 0 : 1}
         borderBottom={isSmall ? 1 : 0}
-        borderColor={theme.palette.primary.lowContrast}
+        borderColor={theme.palette.divider}
         flex={0.7}
         sx={{
           background:

client/src/components/design-elements/StatBox.tsx

@@ -20,16 +20,14 @@ export const GradientBox: React.FC<GradientBox> = ({
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
   const bg = palette
-    ? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)`
-    : `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`;
+    ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+    : theme.palette.background.paper;
 
   return (
     <BaseBox
       sx={{
         padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
-        width: isSmall
-          ? `100%`
-          : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
+        width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
 
         background: bg,
         ...sx,
@@ -66,9 +64,7 @@ export const StatBox: React.FC<StatBoxProps> = ({
       palette={palette}
       sx={{
         ...(sx as object),
-        ...(onClick
-          ? { cursor: "pointer", '&:hover': { opacity: 0.95 } }
-          : {}),
+        ...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
       }}
     >
       <Stack onClick={onClick}>

client/src/components/design-elements/StatusBox.tsx

@@ -41,11 +41,7 @@ const StatusBox = ({
   return (
     <BGBox>
       <Stack spacing={theme.spacing(4)}>
-        <Typography
-          variant={"h2"}
-          textTransform="uppercase"
-          color={theme.palette.primary.contrastTextTertiary}
-        >
+        <Typography variant={"h2"} textTransform="uppercase" color={theme.palette.text.secondary}>
           {label}
         </Typography>
         <Typography variant="h1" color={color}>
@@ -59,47 +55,23 @@ const StatusBox = ({
 export const UpStatusBox = ({ n }: { n: number }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  return (
-    <StatusBox
-      label={t("monitorStatus.up")}
-      n={n}
-      color={theme.palette.success.lowContrast}
-    />
-  );
+  return <StatusBox label={t("monitorStatus.up")} n={n} color={theme.palette.success.light} />;
 };
 
 export const DownStatusBox = ({ n }: { n: number }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  return (
-    <StatusBox
-      label={t("monitorStatus.down")}
-      n={n}
-      color={theme.palette.error.lowContrast}
-    />
-  );
+  return <StatusBox label={t("monitorStatus.down")} n={n} color={theme.palette.error.light} />;
 };
 
 export const PausedStatusBox = ({ n }: { n: number }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  return (
-    <StatusBox
-      label={t("monitorStatus.paused")}
-      n={n}
-      color={theme.palette.warning.lowContrast}
-    />
-  );
+  return <StatusBox label={t("monitorStatus.paused")} n={n} color={theme.palette.warning.light} />;
 };
 
 export const InitializingStatusBox = ({ n }: { n: number }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  return (
-    <StatusBox
-      label={t("monitorStatus.initializing")}
-      n={n}
-      color={theme.palette.warning.lowContrast}
-    />
-  );
+  return <StatusBox label={t("monitorStatus.initializing")} n={n} color={theme.palette.warning.light} />;
 };

client/src/components/design-elements/StatusLabel.tsx

@@ -37,13 +37,7 @@ export const StatusLabel = ({
         ...sx,
       }}
     >
-      <Box
-        width={7}
-        height={7}
-        bgcolor={theme.palette[palette].lowContrast}
-        borderRadius="50%"
-        marginRight="5px"
-      />
+      <Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
       {transformedText}
     </BaseBox>
   );
@@ -76,13 +70,7 @@ export const ValueLabel = ({
             : "rgba(0, 0, 0, 0.08)",
       }}
     >
-      <Box
-        width={7}
-        height={7}
-        bgcolor={theme.palette[palette].lowContrast}
-        borderRadius="50%"
-        marginRight="5px"
-      />
+      <Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
       {transformedText}
     </BaseBox>
   );

client/src/components/design-elements/Tab.tsx

@@ -18,13 +18,13 @@ export const Tab = (props: CustomTabProps) => {
         paddingBottom: 0,
         minWidth: "auto",
         alignItems: "flex-start",
-        color: theme.palette.primary.contrastTextTertiary,
+        color: theme.palette.text.secondary,
         "&.Mui-selected": {
-          color: theme.palette.accent.main,
+        color: theme.palette.primary.main,
           fontWeight: 600,
         },
         "&:hover": {
-          color: theme.palette.primary.contrastTextSecondary,
+        color: theme.palette.text.secondary,
         },
         "& .MuiTab-iconWrapper": {
           marginRight: theme.spacing(2),

client/src/components/design-elements/Table.tsx

@@ -85,7 +85,7 @@ export function DataTable<
               sx={{
                 borderStyle: "solid",
                 borderWidth: 1,
-                borderColor: theme.palette.primary.lowContrast,
+                borderColor: theme.palette.divider,
                 borderRadius: theme.shape.borderRadius,
                 padding: theme.spacing(4),
                 cursor: onRowClick ? "pointer" : "default",
@@ -126,20 +126,23 @@ export function DataTable<
             {
               paddingLeft: theme.spacing(8),
             },
+          "& .MuiTableCell-root": {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
           "& .MuiTableHead-root .MuiTableRow-root": {
             height: "28px",
           },
           "& :is(th)": {
-            backgroundColor: theme.palette.tertiary.main,
-            color: theme.palette.secondary.contrastText,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.secondary,
             fontWeight: 500,
             textTransform: "uppercase",
             padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
             fontSize: theme.typography.fontSize,
           },
           "& :is(td)": {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastTextSecondary,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.secondary,
             padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
             fontSize: theme.typography.fontSize,
           },
@@ -346,7 +349,7 @@ export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
         },
         "& .MuiSelect-select": {
           border: 1,
-          borderColor: theme.palette.primary.lowContrast,
+          borderColor: theme.palette.divider,
           borderRadius: theme.shape.borderRadius,
         },
       }}
@@ -363,7 +366,7 @@ const EmptyView = () => {
         p: theme.spacing(4),
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: theme.palette.primary.lowContrast,
+        borderColor: theme.palette.divider,
         borderRadius: theme.shape.borderRadius,
       }}
     >

client/src/components/design-elements/Tabs.tsx

@@ -9,9 +9,9 @@ export const Tabs = (props: CustomTabsProps) => {
     <MuiTabs
       sx={{
         minHeight: 34,
-        borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
         "& .MuiTabs-indicator": {
-          backgroundColor: theme.palette.accent.main,
+        backgroundColor: theme.palette.primary.main,
           height: 2,
           bottom: 0,
         },

client/src/components/design-elements/Tooltip.tsx

@@ -51,7 +51,7 @@ export const TooltipWithInfo: React.FC<TooltipWithInfoProps> = ({
 }) => {
   const theme = useTheme();
 
-  const defaultColor = theme.palette.primary.contrastTextTertiary;
+  const defaultColor = theme.palette.text.secondary;
 
   return (
     <Tooltip {...props}>

client/src/components/inputs/Button.tsx

@@ -18,9 +18,6 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
         boxShadow: "none",
         "&:hover": {
           boxShadow: "none",
-          backgroundColor: props.color === "primary"
-            ? theme.palette.tertiary.main
-            : undefined,
         },
         ...sx,
       }}

client/src/components/inputs/Checkbox.tsx

@@ -26,9 +26,9 @@ export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
         checkedIcon={<SquareCheck size={16} strokeWidth={1.5} />}
         sx={{
           padding: 0,
-          color: theme.palette.primary.contrastTextTertiary,
+          color: theme.palette.text.secondary,
           "&.Mui-checked": {
-            color: theme.palette.accent.main,
+            color: theme.palette.primary.main,
           },
           "&:hover": { backgroundColor: "transparent" },
           "& svg": {

client/src/components/inputs/DateTimePicker.tsx

@@ -29,17 +29,17 @@ export const DateTimePicker = forwardRef<HTMLDivElement, CustomDateTimePickerPro
             "& .MuiPickersOutlinedInput-root ": {
               height: 34,
               borderRadius: theme.shape.borderRadius,
-              borderColor: theme.palette.primary.lowContrast,
+              borderColor: theme.palette.divider,
             },
             "& .MuiPickersOutlinedInput-notchedOutline": {
-              borderColor: theme.palette.primary.lowContrast,
+              borderColor: theme.palette.divider,
             },
             "&:hover .MuiPickersOutlinedInput-notchedOutline": {
-              borderColor: theme.palette.primary.lowContrast,
+              borderColor: theme.palette.divider,
             },
             "& .MuiPickersInputBase-root.MuiPickersOutlinedInput-root.Mui-focused:not(.Mui-error) .MuiPickersOutlinedInput-notchedOutline":
               {
-                borderColor: theme.palette.accent.main,
+              borderColor: theme.palette.primary.main,
               },
             "& .MuiFormHelperText-root": {
               marginLeft: 0,

client/src/components/inputs/Dialog.tsx

@@ -12,7 +12,7 @@ export const DialogInput = ({
   content,
   onConfirm,
   onCancel,
-  confirmColor = "accent",
+  confirmColor = "primary",
   cancelColor = "error",
   loading = false,
 }: {
@@ -21,8 +21,8 @@ export const DialogInput = ({
   content?: string;
   onConfirm?(item: any): any;
   onCancel?(item: any): any;
-  confirmColor?: "error" | "accent";
-  cancelColor?: "error" | "accent";
+  confirmColor?: "error" | "primary";
+  cancelColor?: "error" | "primary";
   loading?: boolean;
 }) => {
   return (

client/src/components/inputs/FieldLabel.tsx

@@ -21,7 +21,7 @@ export const FieldLabel: React.FC<FieldLabelProps> = ({
       sx={{
         fontSize: "14px",
         fontWeight: 500,
-        color: theme.palette.primary.contrastTextSecondary,
+        color: theme.palette.text.secondary,
         marginBottom: theme.spacing(2),
         display: "block",
       }}

client/src/components/inputs/RadioInput.tsx

@@ -17,11 +17,11 @@ export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
       sx={{
         padding: 0,
         mt: theme.spacing(0.5),
-        color: theme.palette.primary.contrastTextTertiary,
+        color: theme.palette.text.secondary,
         "&.Mui-checked": {
-          color: theme.palette.accent.main,
+          color: theme.palette.primary.main,
           "& svg circle": {
-            fill: theme.palette.accent.main,
+            fill: theme.palette.primary.main,
           },
         },
         "& .MuiSvgIcon-root": {
@@ -51,7 +51,7 @@ export const RadioWithDescription: React.FC<
           <Typography component="p">{label}</Typography>
           <Typography
             component="h6"
-            color={theme.palette.primary.contrastTextSecondary}
+            color={theme.palette.text.secondary}
           >
             {description}
           </Typography>
@@ -64,7 +64,7 @@ export const RadioWithDescription: React.FC<
         borderRadius: theme.shape.borderRadius,
 
         "&:hover": {
-          backgroundColor: theme.palette.tertiary.main,
+          backgroundColor: theme.palette.background.paper,
         },
         "& .MuiButtonBase-root": {
           p: 0,

client/src/components/inputs/Select.tsx

@@ -83,10 +83,10 @@ export const SelectInput = <T,>({
         },
         "& .MuiOutlinedInput-notchedOutline": {
           borderRadius: theme.shape.borderRadius,
-          borderColor: theme.palette.primary.lowContrast,
+          borderColor: theme.palette.divider,
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: theme.palette.primary.lowContrast,
+          borderColor: theme.palette.divider,
         },
         ...props.sx,
       }}

client/src/components/inputs/Switch.tsx

@@ -22,7 +22,7 @@ export const SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>(
               "&.Mui-checked": {
                 color: "#E0E0E0",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: theme.palette.accent.main,
+                  backgroundColor: theme.palette.primary.main,
                   opacity: 1,
                   border: 0,
                 },

client/src/components/inputs/SwitchLogout.tsx

@@ -29,7 +29,7 @@ export const LogoutSwitch = () => {
           },
           "&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
             {
-              stroke: theme.palette.accent.main,
+            stroke: theme.palette.primary.main,
             },
         }}
       >

client/src/components/inputs/SwitchSettings.tsx

@@ -77,7 +77,7 @@ export const SettingsSwitch = () => {
             },
             "&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
               {
-                stroke: theme.palette.accent.main,
+                stroke: theme.palette.primary.main,
               },
           }}
         >

client/src/components/inputs/SwitchTeam.tsx

@@ -58,7 +58,7 @@ export const TeamSwitch = () => {
             },
             "&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
               {
-                stroke: theme.palette.accent.main,
+                stroke: theme.palette.primary.main,
               },
           }}
         >

client/src/components/inputs/SwitchTheme.tsx

@@ -30,7 +30,7 @@ export const ThemeSwitch = () => {
           },
           "&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
             {
-              stroke: theme.palette.accent.main,
+              stroke: theme.palette.primary.main,
             },
         }}
       >

client/src/components/inputs/TextInput.tsx

@@ -26,10 +26,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             fontSize: typographyLevels.base,
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: theme.palette.primary.lowContrast,
+            borderColor: theme.palette.divider,
           },
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: theme.palette.primary.lowContrast,
+            borderColor: theme.palette.divider,
           },
           "& .MuiFormHelperText-root": {
             marginLeft: 0,

client/src/components/inputs/TextLink.tsx

@@ -21,7 +21,7 @@ export const TextLink = ({
   return (
     <Stack direction="row" gap={theme.spacing(4)}>
       <Typography>{text}</Typography>
-      <Link color="accent" to={href} component={RouterLink} target={target}>
+      <Link color="primary" to={href} component={RouterLink} target={target}>
         {linkText}
       </Link>
     </Stack>

client/src/components/layouts/sidebar/CollapseButton.tsx

@@ -12,13 +12,13 @@ export const CollapseButton = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
     <ArrowLeft
       height={theme.spacing(8)}
       width={theme.spacing(8)}
-      color={theme.palette.primary.contrastTextSecondary}
+      color={theme.palette.text.secondary}
     />
   ) : (
     <ArrowRight
       height={theme.spacing(8)}
       width={theme.spacing(8)}
-      color={theme.palette.primary.contrastTextSecondary}
+      color={theme.palette.text.secondary}
     />
   );
 
@@ -30,14 +30,14 @@ export const CollapseButton = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
         top: 60,
         right: 0,
         transform: `translate(50%, 0)`,
-        backgroundColor: theme.palette.tertiary.main,
-        border: `1px solid ${theme.palette.primary.lowContrast}`,
+        backgroundColor: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
         p: theme.spacing(2.5),
 
         "&:focus": { outline: "none" },
         "&:hover": {
-          backgroundColor: theme.palette.primary.lowContrast,
-          borderColor: theme.palette.primary.lowContrast,
+          backgroundColor: theme.palette.action.hover,
+          borderColor: theme.palette.divider,
         },
       }}
       onClick={() => {

client/src/components/layouts/sidebar/Logo.tsx

@@ -28,9 +28,9 @@ export const Logo = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
         display={"flex"}
         justifyContent={"center"}
         alignItems={"center"}
-        bgcolor={theme.palette.accent.main}
+        bgcolor={theme.palette.primary.main}
         borderRadius={theme.shape.borderRadius}
-        color={theme.palette.accent.contrastText}
+        color={theme.palette.getContrastText(theme.palette.primary.main)}
         fontSize={18}
       >
         C

client/src/components/layouts/sidebar/NavItem.tsx

@@ -23,13 +23,15 @@ export const NavItem = ({
 }) => {
   const theme = useTheme();
   const iconStroke = selected
-    ? theme.palette.accent.main
-    : theme.palette.primary.contrastTextTertiary;
+    ? theme.palette.primary.main
+    : theme.palette.text.secondary;
 
-  const buttonBgColor = selected ? theme.palette.secondary.main : "transparent";
+  const buttonBgColor = selected
+    ? theme.palette.action.selected
+    : "transparent";
   const buttonBgHoverColor = selected
-    ? theme.palette.secondary.main
-    : theme.palette.tertiary.main;
+    ? theme.palette.action.selected
+    : theme.palette.action.hover;
   const fontWeight = selected ? 600 : 400;
   return (
     <Tooltip
@@ -52,16 +54,12 @@ export const NavItem = ({
       <ListItemButton
         sx={{
           backgroundColor: buttonBgColor,
-          backgroundImage: selected
-            ? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`
-            : "none",
+          backgroundImage: "none",
           border: 1,
-          borderColor: selected ? theme.palette.primary.veryLowContrast : "transparent",
+          borderColor: "transparent",
           "&:hover": {
             backgroundColor: buttonBgHoverColor,
-            backgroundImage: selected
-              ? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`
-              : "none",
+            backgroundImage: "none",
           },
           height: 32,
           gap: theme.spacing(4),
@@ -80,13 +78,15 @@ export const NavItem = ({
               opacity: 0.81,
               transition: "stroke 0.2s ease",
             },
-            "& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
-              stroke: iconStroke,
-            },
-            ".MuiListItemButton-root:hover &": {
-              "& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
-                stroke: theme.palette.accent.main,
+            "& svg path, & svg line, & svg polyline, & svg rect, & svg circle":
+              {
+                stroke: iconStroke,
               },
+            ".MuiListItemButton-root:hover &": {
+              "& svg path, & svg line, & svg polyline, & svg rect, & svg circle":
+                {
+                  stroke: theme.palette.primary.main,
+                },
             },
           }}
         >

client/src/components/layouts/sidebar/index.tsx

@@ -45,7 +45,7 @@ export const SideBar = () => {
       paddingTop={theme.spacing(6)}
       paddingBottom={theme.spacing(6)}
       gap={theme.spacing(6)}
-      borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
+      borderRight={`1px solid ${theme.palette.divider}`}
       width={sideBarOpen ? EXPANDED_WIDTH : COLLAPSED_WIDTH}
       sx={{
         transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
@@ -103,7 +103,7 @@ export const SideBar = () => {
         })}
       </List>
       <Divider
-        sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }}
+        sx={{ mt: "auto", borderColor: theme.palette.divider }}
       />
       <BottomControls />
     </Stack>

client/src/components/monitors/Chart.tsx

@@ -41,12 +41,12 @@ export const BaseChart: React.FC<BaseChartProps> = ({
                 justifyContent: "center",
                 width: 34,
                 height: 34,
-                backgroundColor: theme.palette.primary.veryLowContrast,
+                backgroundColor: theme.palette.action.hover,
                 "& svg": {
                   width: 20,
                   height: 20,
                   "& path": {
-                    stroke: theme.palette.primary.contrastTextTertiary,
+                    stroke: theme.palette.text.secondary,
                   },
                 },
               }}

client/src/components/monitors/ChartAvgResponse.tsx

@@ -41,7 +41,7 @@ export const ChartAvgResponse = ({
           >
             <RadialBar
               dataKey="value"
-              background={{ fill: theme.palette[palette].lowContrast }}
+              background={{ fill: theme.palette[palette].light }}
             >
               <Cell visibility={"hidden"} />
               <Cell fill={theme.palette[palette].main} />

client/src/components/monitors/ChartPageSpeedReport.tsx

@@ -61,7 +61,7 @@ export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => {
     {
       value: 100,
       fill: alpha(
-        theme.palette[pageSpeedPalette].lowContrast || "#ffffff",
+        theme.palette[pageSpeedPalette].light || "#ffffff",
         0.6
       ),
       stroke: "none",

client/src/components/monitors/ChartPageSpeedReportLegend.tsx

@@ -24,7 +24,7 @@ const MetricBox = ({
       sx={{
         border: 1,
         borderStyle: "solid",
-        borderColor: theme.palette.primary.lowContrast,
+        borderColor: theme.palette.divider,
         borderRadius: theme.shape.borderRadius,
       }}
     >
@@ -37,7 +37,7 @@ const MetricBox = ({
       </Stack>
       <Box
         width={4}
-        bgcolor={theme.palette[palette].lowContrast}
+        bgcolor={theme.palette[palette].light}
         sx={{
           borderTopRightRadius: theme.shape.borderRadius,
           borderBottomRightRadius: theme.shape.borderRadius,

client/src/components/monitors/ChartResponseTime.tsx

@@ -38,7 +38,7 @@ export const XTick: React.FC<XTickProps> = ({ x, y, payload, range }) => {
       x={x}
       y={y + 10}
       textAnchor="middle"
-      fill={theme.palette.primary.contrastTextTertiary}
+      fill={theme.palette.text.secondary}
       fontSize={11}
       fontWeight={400}
     >
@@ -98,7 +98,7 @@ export const ChartResponseTime = ({
       <ResponsiveContainer width="100%" height={300}>
         <AreaChart data={normalized?.slice().reverse()}>
           <CartesianGrid
-            stroke={theme.palette.primary.lowContrast}
+            stroke={theme.palette.divider}
             strokeWidth={1}
             strokeOpacity={1}
             fill="transparent"
@@ -108,12 +108,12 @@ export const ChartResponseTime = ({
             <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
               <stop
                 offset="0%"
-                stopColor={theme.palette.accent.main}
+                stopColor={theme.palette.primary.main}
                 stopOpacity={0.8}
               />
               <stop
                 offset="100%"
-                stopColor={theme.palette.accent.light}
+                stopColor={theme.palette.primary.light}
                 stopOpacity={0}
               />
             </linearGradient>
@@ -138,7 +138,7 @@ export const ChartResponseTime = ({
           <Area
             type="monotone"
             dataKey="normalResponseTime"
-            stroke={theme.palette.accent.main}
+            stroke={theme.palette.primary.main}
             fill="url(#colorUv)"
           />
         </AreaChart>

client/src/components/monitors/HistogramInfrastructure.tsx

@@ -145,7 +145,7 @@ export const HistogramInfrastructure = ({
           <YAxis domain={title === "temp" ? tempYDomain : yDomain} />
 
           <CartesianGrid
-            stroke={theme.palette.primary.lowContrast}
+            stroke={theme.palette.divider}
             strokeWidth={1}
             strokeOpacity={1}
             fill="transparent"

client/src/components/monitors/HistogramPageSpeed.tsx

@@ -68,14 +68,14 @@ export const HistogramPageSpeed = ({
           style={{ cursor: "pointer" }}
         >
           <CartesianGrid
-            stroke={theme.palette.primary.lowContrast}
+            stroke={theme.palette.divider}
             strokeWidth={1}
             strokeOpacity={1}
             fill="transparent"
             vertical={false}
           />
           <Tooltip
-            cursor={{ stroke: theme.palette.primary.lowContrast }}
+            cursor={{ stroke: theme.palette.divider }}
             content={<HistogramPageSpeedTooltip />}
           />
           <defs>

client/src/components/monitors/HistogramPageSpeedScores.tsx

@@ -12,10 +12,7 @@ import { HistogramPageSpeedScoresTooltip } from "./HistogramPageSpeedScoresToolt
 import { useTheme } from "@mui/material/styles";
 import type { GroupedCheck } from "@/types/check";
 import type { Palette } from "@mui/material/styles";
-type PaletteColorKey = Extract<
-  keyof Palette,
-  "primary" | "secondary" | "success" | "warning" | "accent"
->;
+type PaletteColorKey = Extract<keyof Palette, "primary" | "secondary" | "success" | "warning">;
 
 export interface ConfigItem {
   id: string;
@@ -42,7 +39,7 @@ const config: Record<string, ConfigItem> = {
   accessibility: {
     id: "accessibility",
     text: "accessibility",
-    palette: "accent",
+    palette: "secondary",
   },
 };
 
@@ -57,20 +54,20 @@ export const HistogramPageSpeedScores = ({
       <ResponsiveContainer width="100%" minWidth={25} height={215}>
         <AreaChart data={checks}>
           <CartesianGrid
-            stroke={theme.palette.primary.lowContrast}
+            stroke={theme.palette.divider}
             strokeWidth={1}
             strokeOpacity={1}
             fill="transparent"
             vertical={false}
           />
           <Tooltip
-            cursor={{ stroke: theme.palette.primary.lowContrast }}
+            cursor={{ stroke: theme.palette.divider }}
             content={<HistogramPageSpeedScoresTooltip config={config} />}
           />
           <defs>
             {Object.values(config).map(({ id, palette }) => {
               const startColor = theme.palette[palette].main;
-              const endColor = theme.palette[palette].lowContrast;
+              const endColor = theme.palette[palette].light;
 
               return (
                 <linearGradient id={id} x1="0" y1="0" x2="0" y2="1" key={id}>

client/src/components/monitors/HistogramPageSpeedScoresTooltip.tsx

@@ -26,7 +26,7 @@ export const HistogramPageSpeedScoresTooltip = ({
         sx={{
           backgroundColor: theme.palette.primary.main,
           border: 1,
-          borderColor: theme.palette.primary.lowContrast,
+          borderColor: theme.palette.divider,
           borderRadius: theme.shape.borderRadius,
           py: theme.spacing(2),
           px: theme.spacing(4),
@@ -34,7 +34,7 @@ export const HistogramPageSpeedScoresTooltip = ({
       >
         <Typography
           sx={{
-            color: theme.palette.primary.contrastTextTertiary,
+            color: theme.palette.text.secondary,
             fontSize: 12,
             fontWeight: 500,
           }}

client/src/components/monitors/HistogramPageSpeedTooltip.tsx

@@ -19,7 +19,7 @@ export const HistogramPageSpeedTooltip = ({
       sx={{
         backgroundColor: theme.palette.secondary.main,
         border: 1,
-        borderColor: theme.palette.primary.lowContrast,
+        borderColor: theme.palette.divider,
         borderRadius: theme.shape.borderRadius,
         p: theme.spacing(4),
       }}

client/src/components/monitors/HistogramStatus.tsx

@@ -34,7 +34,7 @@ const XLabel = ({
         dy={-3}
         textAnchor="start"
         fontSize={11}
-        fill={theme.palette.primary.contrastTextTertiary}
+        fill={theme.palette.text.secondary}
       >
         {formatDateWithTz(p1._id, dateFormat, uiTimezone)}
       </text>
@@ -44,7 +44,7 @@ const XLabel = ({
         dy={-3}
         textAnchor="end"
         fontSize={11}
-        fill={theme.palette.primary.contrastTextTertiary}
+        fill={theme.palette.text.secondary}
       >
         {formatDateWithTz(p2._id, dateFormat, uiTimezone)}
       </text>
@@ -118,7 +118,7 @@ export const HistogramStatus = ({
         <ResponsiveContainer width="100%" height={155}>
           <BarChart data={normalChecks}>
             <XAxis
-              stroke={theme.palette.primary.lowContrast}
+              stroke={theme.palette.divider}
               height={15}
               tick={false}
               label={

client/src/components/monitors/MonitorStatus.tsx

@@ -32,7 +32,7 @@ export const MonitorStatus = ({ monitor }: { monitor: IMonitor }) => {
       <Stack direction="row" alignItems={"center"} gap={theme.spacing(4)}>
         <PulseDot color={getStatusColor(monitor.status, theme)} />
         <Typography
-          color={theme.palette.primary.contrastTextSecondary}
+          color={theme.palette.text.secondary}
           fontSize={typographyLevels.l}
           fontWeight={"bolder"}
           fontFamily={"monospace"}

client/src/components/status-pages/HistogramStatusPage.tsx

@@ -42,7 +42,7 @@ export const HistogramStatusPage = ({ checks }: { checks: ICheck[] }) => {
                 xs: theme.spacing(2),
                 sm: theme.spacing(6),
               }}
-              bgcolor={theme.palette.primary.lowContrast}
+              bgcolor={theme.palette.action.hover}
               sx={{
                 borderRadius: theme.spacing(1.5),
               }}
@@ -54,8 +54,8 @@ export const HistogramStatusPage = ({ checks }: { checks: ICheck[] }) => {
                 height={`${check.normalResponseTime}%`}
                 bgcolor={
                   check.status === "up"
-                    ? theme.palette.success.lowContrast
-                    : theme.palette.error.lowContrast
+                    ? theme.palette.success.light
+                    : theme.palette.error.light
                 }
                 sx={{
                   borderRadius: theme.spacing(1.5),

client/src/components/status-pages/StatusHeader.tsx

@@ -16,7 +16,7 @@ export const StatusHeader = ({
   return (
     <Stack
       width={"100%"}
-      bgcolor={theme.palette[headerConfig.paletteKey].lowContrast}
+      bgcolor={theme.palette[headerConfig.paletteKey].light}
       borderRadius={theme.shape.borderRadius}
       padding={theme.spacing(4)}
     >

client/src/pages/auth/Invite.tsx

@@ -210,7 +210,7 @@ const Invite = () => {
         <Button
           loading={loading}
           variant="contained"
-          color="accent"
+          color="primary"
           type="submit"
         >
           Send Invite

client/src/pages/auth/Login.tsx

@@ -130,7 +130,7 @@ const Login = () => {
           <Button
             variant="contained"
             loading={loading}
-            color="accent"
+            color="primary"
             type="submit"
             sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
           >

client/src/pages/auth/RegisterForm.tsx

@@ -56,7 +56,7 @@ export const RegisterForm = ({
     return (
       <Button
         variant="contained"
-        color="accent"
+        color="primary"
         onClick={() => onSubmit(defaults)}
       >
         Accept invite
@@ -165,7 +165,7 @@ export const RegisterForm = ({
       <Button
         variant="contained"
         loading={loading}
-        color="accent"
+        color="primary"
         type="submit"
         sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
       >

client/src/pages/billing/Success.tsx

@@ -43,13 +43,13 @@ const BillingSuccessPage = () => {
         >
           <Typography variant="h1">Finishing subscription update...</Typography>
           <Stack direction="row" alignItems={"center"} gap={theme.spacing(10)}>
-            <CircularProgress color="accent" size={28} />
+            <CircularProgress color="primary" size={28} />
             <Stack>
               <Typography variant="h2">
                 {plan ? (
                   <>
                     {"Selected plan: "}
-                    <span style={{ color: theme.palette.accent.main }}>
+                    <span style={{ color: theme.palette.primary.main }}>
                       {plan.charAt(0).toUpperCase() + plan.slice(1)}
                     </span>
                   </>
@@ -70,13 +70,13 @@ const BillingSuccessPage = () => {
                 nothing will change.
               </Typography>
               <Button
-                color="accent"
+                color="primary"
                 variant="outlined"
                 onClick={() => refetch?.()}
               >
                 Try again
               </Button>
-              <Button color="accent" variant="contained" href="/billing">
+              <Button color="primary" variant="contained" href="/billing">
                 Back to billing
               </Button>
             </Stack>

client/src/pages/diagnostic/DiagnosticsLogTab.tsx

@@ -27,7 +27,7 @@ export const DiagnosticsLogTab = () => {
     info: theme.palette.success.main,
     warn: theme.palette.warning.main,
     error: theme.palette.error.main,
-    debug: theme.palette.accent.main,
+    debug: theme.palette.primary.main,
   };
 
   const headers: Header<ILogEntry>[] = [

client/src/pages/errors/NoTeam.tsx

@@ -42,7 +42,7 @@ const NoTeam = () => {
         <Box>
           <Button
             variant="contained"
-            color="accent"
+            color="primary"
             onClick={async () => {
               await post("/auth/logout", {});
               navigate("/login");

client/src/pages/errors/NotFound.tsx

@@ -27,7 +27,7 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
         <Typography variant="body1">{desc}</Typography>
         <Button
           variant="contained"
-          color="accent"
+          color="primary"
           sx={{ mt: theme.spacing(10) }}
           onClick={() => navigate("/")}
         >

client/src/pages/export/Export.tsx

@@ -75,7 +75,7 @@ const ExportPage = () => {
               <Button
                 loading={loading}
                 variant="contained"
-                color="accent"
+                color="primary"
                 onClick={handleExport}
               >
                 Export to JSON
@@ -130,7 +130,7 @@ const ExportPage = () => {
               <Button
                 loading={isPosting}
                 variant="contained"
-                color="accent"
+                color="primary"
                 onClick={handleImport}
               >
                 Import from JSON

client/src/pages/incidents/IncidentTable.tsx

@@ -119,7 +119,7 @@ export const IncidentTable = ({
                 refetch();
               }}
               variant="contained"
-              color="accent"
+              color="primary"
             >
               Resolve
             </Button>

client/src/pages/infrastructure/InfraDetailsGraphs.tsx

@@ -11,8 +11,8 @@ const getChartConfigs = (theme: any, checks: IInfraCheck[]) => {
     {
       type: "memory",
       dataKeys: ["memory.usage_percent"],
-      strokeColor: theme.palette.accent.main,
-      gradientStartColor: theme.palette.accent.main,
+      strokeColor: theme.palette.primary.main,
+      gradientStartColor: theme.palette.primary.main,
       yDomain: [0, 1],
       idx: null,
     },

client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx

@@ -20,8 +20,8 @@ const getChartConfigs = (
     {
       type: "Bytes received",
       dataKeys: [`net[${idx}].bytes_recv`],
-      strokeColor: theme.palette.accent.main,
-      gradientStartColor: theme.palette.accent.main,
+      strokeColor: theme.palette.primary.main,
+      gradientStartColor: theme.palette.primary.main,
       yDomain: [0, 1],
       idx: null,
     },

client/src/pages/infrastructure/InfraForm.tsx

@@ -349,7 +349,7 @@ export const InfraForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/maintenance/MaintenanceForm.tsx

@@ -217,7 +217,7 @@ export const MaintenanceForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/notification-channels/NotificationChannelsForm.tsx

@@ -213,7 +213,7 @@ export const NotificationChannelsForm = ({
       >
         <Button
           variant="contained"
-          color="accent"
+          color="primary"
           onClick={handleTest}
           loading={isPosting || loading}
         >
@@ -223,7 +223,7 @@ export const NotificationChannelsForm = ({
           loading={isPosting || loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/pagespeed/PageSpeedForm.tsx

@@ -269,7 +269,7 @@ export const PageSpeedForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/profile/ProfileForm.tsx

@@ -140,7 +140,7 @@ export const ProfileForm = ({
       <Button
         variant="contained"
         loading={loading}
-        color="accent"
+        color="primary"
         type="submit"
         sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
       >

client/src/pages/recovery/RecoveryForm.tsx

@@ -78,7 +78,7 @@ export const RecoveryForm = ({
       <Button
         variant="contained"
         loading={loading}
-        color="accent"
+        color="primary"
         type="submit"
         sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
       >

client/src/pages/recovery/ResetForm.tsx

@@ -98,7 +98,7 @@ export const ResetForm = ({
       <Button
         variant="contained"
         loading={loading}
-        color="accent"
+        color="primary"
         type="submit"
         sx={{ width: "100%", alignSelf: "center", fontWeight: 700 }}
       >

client/src/pages/settings/SettingsForm.tsx

@@ -309,7 +309,7 @@ export const SettingsForm = ({
                 <Button
                   loading={loading}
                   variant="contained"
-                  color="accent"
+                  color="primary"
                   onClick={() => {
                     onTest(formValues);
                   }}
@@ -320,7 +320,7 @@ export const SettingsForm = ({
                   loading={loading}
                   type="submit"
                   variant="contained"
-                  color="accent"
+                  color="primary"
                 >
                   Save e-mail settings
                 </Button>
@@ -364,7 +364,7 @@ export const SettingsForm = ({
               >
                 <Button
                   variant="contained"
-                  color="accent"
+                  color="primary"
                   type="submit"
                   loading={loading}
                 >

client/src/pages/status-page/StatusPageForm.tsx

@@ -203,7 +203,7 @@ export const StatusPageForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/teams/TeamMemberForm.tsx

@@ -137,7 +137,7 @@ export const TeamMemberForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/teams/TeamsForm.tsx

@@ -144,7 +144,7 @@ export const TeamsForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/pages/uptime/UptimeForm.tsx

@@ -338,7 +338,7 @@ export const UptimeForm = ({
           loading={loading}
           type="submit"
           variant="contained"
-          color="accent"
+          color="primary"
         >
           {t("settingsSave")}
         </Button>

client/src/theme/new_palette.ts

@@ -1,21 +0,0 @@
-const typographyBase = 13;
-
-export const typographyLevels = {
-  base: typographyBase,
-  xs: `${(typographyBase - 4) / 16}rem`,
-  s: `${(typographyBase - 2) / 16}rem`,
-  m: `${typographyBase / 16}rem`,
-  l: `${(typographyBase + 2) / 16}rem`,
-  xl: `${(typographyBase + 10) / 16}rem`,
-};
-
-export const lightPalette = {
-  primary: {
-    main: "#1570ef",
-  },
-};
-export const darkPalette = {
-  primary: {
-    main: "#1570ef",
-  },
-};

client/src/theme/palette.ts

@@ -47,85 +47,65 @@ export const colors = {
 };
 
 export const lightPalette = {
-  accent: {
-    main: colors.blueBlueWave,
-    light: lighten(colors.blueBlueWave, 0.2),
-    dark: darken(colors.blueBlueWave, 0.2),
-    contrastText: colors.offWhite,
-  },
   primary: {
-    main: colors.offWhite,
-    contrastText: colors.blueGray800,
-    contrastTextSecondary: colors.blueGray600,
-    contrastTextTertiary: colors.blueGray500,
-    lowContrast: colors.gray250,
-    veryLowContrast: lighten(colors.gray250, 0.5),
+    main: colors.blueBlueWave,
+    light: lighten(colors.blueBlueWave, 0.4),
+    dark: darken(colors.blueBlueWave, 0.2),
   },
   secondary: {
     main: colors.gray200,
     light: colors.lightBlueWave,
     dark: lighten(colors.gray200, 0.1),
-    contrastText: colors.blueGray600,
-  },
-  tertiary: {
-    main: colors.gray100,
-    contrastText: colors.blueGray800,
   },
+  // Tertiary is a custom helper palette
   success: {
     main: colors.green700,
     contrastText: colors.offWhite,
-    lowContrast: colors.green400,
+    light: lighten(colors.green700, 0.35),
+    dark: darken(colors.green700, 0.2),
   },
   warning: {
     main: colors.orange700,
     contrastText: colors.offWhite,
-    lowContrast: colors.orange100,
+    light: lighten(colors.orange700, 0.4),
+    dark: darken(colors.orange700, 0.2),
   },
   error: {
     main: colors.red700,
     contrastText: colors.offWhite,
-    lowContrast: colors.red400,
+    light: lighten(colors.red700, 0.35),
+    dark: darken(colors.red700, 0.2),
   },
 };
 
 export const darkPalette = {
-  accent: {
-    main: colors.blueBlueWave,
-    light: lighten(colors.blueBlueWave, 0.2),
-    dark: darken(colors.blueBlueWave, 0.2),
-    contrastText: colors.offWhite,
-  },
   primary: {
-    main: colors.offBlack,
-    contrastText: colors.blueGray50,
-    contrastTextSecondary: colors.gray200,
-    contrastTextTertiary: colors.gray500,
-    lowContrast: colors.blueGray600,
-    veryLowContrast: darken(colors.blueGray600, 0.5),
+    main: colors.blueBlueWave,
+    light: lighten(colors.blueBlueWave, 0.4),
+    dark: darken(colors.blueBlueWave, 0.2),
   },
   secondary: {
     main: colors.gray700,
     light: colors.lightBlueWave,
     dark: lighten(colors.gray700, 0.1),
-    contrastText: colors.gray200,
-  },
-  tertiary: {
-    main: colors.blueGray800,
-    contrastText: colors.gray100,
   },
+  // Tertiary is a custom helper palette
   success: {
     main: colors.green100,
     contrastText: colors.offBlack,
-    lowContrast: colors.green200,
+    light: lighten(colors.green100, 0.25),
+    dark: darken(colors.green100, 0.15),
   },
   warning: {
     main: colors.orange200,
     contrastText: colors.offBlack,
-    lowContrast: colors.orange600,
+    light: lighten(colors.orange200, 0.25),
+    dark: darken(colors.orange200, 0.15),
   },
   error: {
     main: colors.red100,
     contrastText: colors.offBlack,
-    lowContrast: colors.red600,
+    light: lighten(colors.red100, 0.25),
+    dark: darken(colors.red100, 0.15),
   },
 };

client/src/theme/theme.ts

@@ -1,6 +1,5 @@
 import { createTheme } from "@mui/material";
-// import { lightPalette, darkPalette, typographyLevels } from "./palette";
-import { lightPalette, darkPalette, typographyLevels } from "./new_palette";
+import { lightPalette, darkPalette, typographyLevels } from "./palette";
 
 import type { Theme } from "@mui/material/styles";
 
@@ -35,23 +34,18 @@ export const theme = (mode: string, palette: any) =>
       fontSize: typographyLevels.base,
       h1: {
         fontSize: typographyLevels.xl,
-        color: palette.primary.contrastText,
         fontWeight: 500,
       },
       h2: {
         fontSize: typographyLevels.l,
-        color: palette.primary.contrastTextSecondary,
         fontWeight: 400,
       },
-
       body1: {
         fontSize: typographyLevels.m,
-        color: palette.primary.contrastTextTertiary,
         fontWeight: 400,
       },
       body2: {
         fontSize: typographyLevels.s,
-        color: palette.primary.contrastTextTertiary,
         fontWeight: 400,
       },
     },
@@ -87,7 +81,7 @@ export const theme = (mode: string, palette: any) =>
         styleOverrides: {
           root: {
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: palette.accent.main,
+              borderColor: palette.primary.main,
             },
           },
         },
@@ -101,10 +95,10 @@ export const theme = (mode: string, palette: any) =>
               padding: 0,
               border: 1,
               borderStyle: "solid",
-              borderColor: theme.palette.primary.lowContrast,
+              borderColor: theme.palette.divider,
               borderRadius: 4,
               boxShadow: shadow,
-              backgroundColor: theme.palette.primary.main,
+              backgroundColor: theme.palette.background.paper,
               backgroundImage: "none",
             };
           },

client/src/types/mui.d.ts

@@ -1,31 +1,11 @@
 import "@mui/material/Button";
 
-declare module "@mui/material/styles" {
-  interface Palette {
-    accent: Palette["primary"];
-    tertiary: Palette["primary"];
-  }
-  interface PaletteOptions {
-    accent?: PaletteOptions["primary"];
-    tertiary?: PaletteOptions["primary"];
-  }
-
-  interface PaletteColor {
-    contrastTextSecondary?: string;
-    contrastTextTertiary?: string;
-    lowContrast?: string;
-    veryLowContrast?: string;
-  }
-}
+declare module "@mui/material/styles" {}
 
 declare module "@mui/material/Button" {
-  interface ButtonPropsColorOverrides {
-    accent: true;
-  }
+  interface ButtonPropsColorOverrides {}
 }
 
 declare module "@mui/material/CircularProgress" {
-  interface CircularProgressPropsColorOverrides {
-    accent: true;
-  }
+  interface CircularProgressPropsColorOverrides {}
 }

client/src/utils/DataUtils.ts

@@ -41,7 +41,7 @@ export const normalizeResponseTimes = <
 };
 
 // Interpolate color between three theme colors over 0-100 range.
-// 0-50 => start (success.lowContrast), 50-75 => mid (warning.lowContrast), 75-100 => end (error.lowContrast)
+// 0-50 => start (success.light), 50-75 => mid (warning.light), 75-100 => end (error.light)
 export const getResponseColor = (
   ms: number,
   colors: {

client/src/utils/MonitorUtils.ts

@@ -36,10 +36,10 @@ export const getValuePalette = (value: ValueType): PaletteKey => {
 
 export const getStatusColor = (status: MonitorStatus, theme: any): string => {
   const statusColors: Record<MonitorStatus, string> = {
-    up: theme.palette.success.lowContrast,
-    down: theme.palette.error.lowContrast,
-    paused: theme.palette.warning.lowContrast,
-    initializing: theme.palette.warning.lowContrast,
+    up: theme.palette.success.light,
+    down: theme.palette.error.light,
+    paused: theme.palette.warning.light,
+    initializing: theme.palette.warning.light,
   };
   return statusColors[status];
 };
@@ -58,9 +58,9 @@ export const getInfraGaugeColor = (val: number, theme: any) => {
   if (val < 50) {
     return theme.palette.success.main;
   } else if (val < 80) {
-    return theme.palette.warning.lowContrast;
+    return theme.palette.warning.light;
   } else {
-    return theme.palette.error.lowContrast;
+    return theme.palette.error.light;
   }
 };