remove old config boxes

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)}

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";

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";

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";

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 = () => {

Client/src/Pages/Settings/styled.jsx

@@ -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,
-	},
-}));

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,

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 = [

Client/src/Pages/Uptime/styled.jsx

@@ -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,
-	},
-}));