From b55aee85112bc19224d7b142d77fabb96139ac95 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 18 Dec 2024 12:20:18 -0800
Subject: [PATCH] remove old config boxes

---
 Client/src/Components/Inputs/Search/index.jsx |  9 +++++
 .../Infrastructure/CreateMonitor/index.jsx    |  2 +-
 .../src/Pages/PageSpeed/Configure/index.jsx   |  2 +-
 .../Pages/PageSpeed/CreatePageSpeed/index.jsx |  3 +-
 Client/src/Pages/Settings/index.jsx           |  3 +-
 Client/src/Pages/Settings/styled.jsx          | 36 ------------------
 Client/src/Pages/Uptime/Configure/index.jsx   |  2 +-
 .../src/Pages/Uptime/CreateUptime/index.jsx   |  3 +-
 Client/src/Pages/Uptime/styled.jsx            | 38 -------------------
 9 files changed, 15 insertions(+), 83 deletions(-)
 delete mode 100644 Client/src/Pages/Settings/styled.jsx
 delete mode 100644 Client/src/Pages/Uptime/styled.jsx

diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx
index c944955b9..9a1995726 100644
--- a/Client/src/Components/Inputs/Search/index.jsx
+++ b/Client/src/Components/Inputs/Search/index.jsx
@@ -40,6 +40,7 @@ const SearchAdornment = () => {
 
 //TODO keep search state inside of component
 const Search = ({
+	label,
 	id,
 	options,
 	filteredBy,
@@ -76,6 +77,14 @@ const Search = ({
 			getOptionLabel={(option) => option[filteredBy]}
 			renderInput={(params) => (
 				<Stack>
+					<Typography
+						component="h3"
+						fontSize={"var(--env-var-font-size-medium)"}
+						color={theme.palette.text.secondary}
+						fontWeight={500}
+					>
+						{label}
+					</Typography>
 					<TextField
 						{...params}
 						error={Boolean(error)}
diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index 56162d2a5..b50411e48 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -16,7 +16,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Link from "../../../Components/Link";
-import { ConfigBox } from "../../Uptime/styled";
+import ConfigBox from "../../../Components/ConfigBox";
 import TextInput from "../../../Components/Inputs/TextInput";
 import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
 import { createToast } from "../../../Utils/toastUtils";
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 0c94678d2..3cb40f8d2 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -13,7 +13,7 @@ import {
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
-import { ConfigBox } from "../../Uptime/styled";
+import ConfigBox from "../../../Components/ConfigBox";
 import TextInput from "../../../Components/Inputs/TextInput";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 30592e2eb..e5d4a6d79 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -20,8 +20,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import TextInput from "../../../Components/Inputs/TextInput";
 import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
-import { ConfigBox } from "../../Uptime/styled";
-
+import ConfigBox from "../../../Components/ConfigBox";
 import { createToast } from "../../../Utils/toastUtils";
 import Radio from "../../../Components/Inputs/Radio";
 import Checkbox from "../../../Components/Inputs/Checkbox";
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index f3fcb8376..5c53f3d01 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -18,13 +18,12 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { setTimezone, setMode } from "../../Features/UI/uiSlice";
 import timezones from "../../Utils/timezones.json";
 import { useState, useEffect } from "react";
-import { ConfigBox } from "./styled";
 import { networkService } from "../../main";
 import { settingsValidation } from "../../Validation/validation";
 import { useNavigate } from "react-router";
 import Dialog from "../../Components/Dialog";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
-
+import ConfigBox from "../../Components/ConfigBox";
 const SECONDS_PER_DAY = 86400;
 
 const Settings = () => {
diff --git a/Client/src/Pages/Settings/styled.jsx b/Client/src/Pages/Settings/styled.jsx
deleted file mode 100644
index aeefdaebb..000000000
--- a/Client/src/Pages/Settings/styled.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Stack, styled } from "@mui/material";
-
-export const ConfigBox = styled(Stack)(({ theme }) => ({
-	display: "flex",
-	flexDirection: "row",
-	justifyContent: "space-between",
-	gap: theme.spacing(20),
-	backgroundColor: theme.palette.background.main,
-	border: 1,
-	borderStyle: "solid",
-	borderColor: theme.palette.border.light,
-	borderRadius: theme.spacing(2),
-	"& > *": {
-		paddingTop: theme.spacing(12),
-		paddingBottom: theme.spacing(18),
-	},
-	"& > div:first-of-type": {
-		flex: 0.7,
-		borderRight: 1,
-		borderRightStyle: "solid",
-		borderRightColor: theme.palette.border.light,
-		paddingRight: theme.spacing(15),
-		paddingLeft: theme.spacing(15),
-	},
-	"& > div:last-of-type": {
-		flex: 1,
-		paddingRight: theme.spacing(20),
-		paddingLeft: theme.spacing(18),
-	},
-	"& h1, & h2": {
-		color: theme.palette.text.secondary,
-	},
-	"& p": {
-		color: theme.palette.text.tertiary,
-	},
-}));
diff --git a/Client/src/Pages/Uptime/Configure/index.jsx b/Client/src/Pages/Uptime/Configure/index.jsx
index 0d7388d14..32532d462 100644
--- a/Client/src/Pages/Uptime/Configure/index.jsx
+++ b/Client/src/Pages/Uptime/Configure/index.jsx
@@ -6,7 +6,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
-import { ConfigBox } from "../styled";
+import ConfigBox from "../../../Components/ConfigBox";
 import {
 	updateUptimeMonitor,
 	pauseUptimeMonitor,
diff --git a/Client/src/Pages/Uptime/CreateUptime/index.jsx b/Client/src/Pages/Uptime/CreateUptime/index.jsx
index 6d5682415..d72a4fa25 100644
--- a/Client/src/Pages/Uptime/CreateUptime/index.jsx
+++ b/Client/src/Pages/Uptime/CreateUptime/index.jsx
@@ -17,14 +17,13 @@ import LoadingButton from "@mui/lab/LoadingButton";
 
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { ConfigBox } from "../styled";
 import TextInput from "../../../Components/Inputs/TextInput";
 import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
 import { createToast } from "../../../Utils/toastUtils";
 import Radio from "../../../Components/Inputs/Radio";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Select from "../../../Components/Inputs/Select";
-
+import ConfigBox from "../../../Components/ConfigBox";
 const CreateMonitor = () => {
 	const MS_PER_MINUTE = 60000;
 	const SELECT_VALUES = [
diff --git a/Client/src/Pages/Uptime/styled.jsx b/Client/src/Pages/Uptime/styled.jsx
deleted file mode 100644
index f159d44f2..000000000
--- a/Client/src/Pages/Uptime/styled.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Stack, styled } from "@mui/material";
-
-export const ConfigBox = styled(Stack)(({ theme }) => ({
-	flexDirection: "row",
-	border: 1,
-	borderStyle: "solid",
-	borderColor: theme.palette.border.light,
-	borderRadius: theme.spacing(2),
-	backgroundColor: theme.palette.background.main,
-	"& > *": {
-		paddingTop: theme.spacing(12),
-		paddingBottom: theme.spacing(18),
-	},
-	"& > div:first-of-type": {
-		flex: 0.7,
-		borderRight: 1,
-		borderRightStyle: "solid",
-		borderRightColor: theme.palette.border.light,
-		paddingRight: theme.spacing(15),
-		paddingLeft: theme.spacing(15),
-	},
-	"& > div:last-of-type": {
-		flex: 1,
-		paddingRight: theme.spacing(20),
-		paddingLeft: theme.spacing(18),
-	},
-	"& h2": {
-		color: theme.palette.text.secondary,
-		fontSize: 15,
-		fontWeight: 600,
-	},
-	"& h3, & p": {
-		color: theme.palette.text.tertiary,
-	},
-	"& p": {
-		fontSize: 13,
-	},
-}));