feat: finished

Client/src/Components/BasicTable/index.jsx

@@ -1,3 +1,8 @@
+/* TODO
+
+Should we delete this?
+*/
+
 import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import { useTheme } from "@emotion/react";

Client/src/Components/HttpStatusLabel/index.jsx

@@ -39,7 +39,7 @@ const HttpStatusLabel = ({ status, customStyles }) => {
 		},
 		default: {
 			color: theme.palette.primary.contrastText,
-			borderColor: theme.palette.primary.lowContrast,
+			borderColor: theme.palette.primary.contrastText,
 		},
 	};
 

Client/src/Components/Label/index.jsx

@@ -31,8 +31,8 @@ const BaseLabel = ({ label, styles, children }) => {
 			className="label"
 			sx={{
 				borderRadius: borderRadius,
-				border: `1px solid ${theme.palette.primary.contrastTextTertiary}`,
-				color: theme.palette.primary.contrastTextTertiary,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				color: theme.palette.primary.contrastText,
 				padding: padding,
 				...styles,
 			}}
@@ -126,8 +126,8 @@ const statusToTheme = {
 	up: "success",
 	down: "error",
 	paused: "warning",
-	pending: "secondary",
-	"cannot resolve": "tertiary",
+	pending: "warning",
+	"cannot resolve": "error",
 };
 
 const StatusLabel = ({ status, text, customStyles }) => {

Client/src/Pages/Infrastructure/index.jsx

@@ -137,14 +137,7 @@ function Infrastructure() {
 			id: "actions",
 			content: "Actions",
 			render: (row) => (
-				<IconButton
-					sx={{
-						"& svg path": {
-							/* TODO check */
-							stroke: "red" /* theme.palette.other.icon */,
-						},
-					}}
-				>
+				<IconButton>
 					<InfrastructureMenu
 						monitor={row}
 						isAdmin={isAdmin}
@@ -256,11 +249,12 @@ function Infrastructure() {
 
 						<DataTable
 							config={{
+								/* TODO this behavior seems to be repeated. Put it on the root table? */
 								rowSX: {
 									cursor: "pointer",
-									"&:hover": {
-										/* TODO check */
-										backgroundColor: "red" /* theme.palette.background.accent */,
+									"&:hover td": {
+										backgroundColor: theme.palette.tertiary.main,
+										transition: "background-color .3s ease",
 									},
 								},
 								onRowClick: (row) => openDetails(row.id),

Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx

@@ -257,7 +257,7 @@ const UptimeDataTable = ({
 							height="100%"
 							position="absolute"
 							sx={{
-								backgroundColor: theme.palette.accent.contrastText,
+								backgroundColor: theme.palette.primary.main,
 								opacity: 0.8,
 								zIndex: 100,
 							}}
@@ -288,6 +288,7 @@ const UptimeDataTable = ({
 							cursor: "pointer",
 							"&:hover td": {
 								backgroundColor: theme.palette.tertiary.main,
+								transition: "background-color .3s ease",
 							},
 						},
 						onRowClick: (row) => {

Client/src/Pages/Uptime/Home/index.jsx

@@ -169,6 +169,11 @@ const UptimeMonitors = () => {
 								sx={{
 									fontWeight: 500,
 									whiteSpace: "nowrap",
+									/* TODO IMPORTANT this should be applied to all buttons */
+									"&:focus-visible": {
+										outline: `2px solid ${theme.palette.primary.contrastText}`,
+										outlineOffset: 4,
+									},
 								}}
 							>
 								Create new

Client/src/Utils/Theme/globalTheme.js

@@ -264,6 +264,7 @@ const baseTheme = (palette) => ({
 						padding: "0 var(--env-var-spacing-1-minus) !important",
 					},
 					"& .MuiOutlinedInput-root": {
+						color: theme.palette.primary.contrastTextSecondary,
 						borderRadius: 4,
 					},
 					"& .MuiOutlinedInput-notchedOutline": {