refactoring

Client/src/Components/Inputs/ColorPicker/index.jsx

@@ -21,15 +21,17 @@ import { MuiColorInput } from "mui-color-input";
  *		>
  *	</ColorPicker>
  */
-const ColorPicker = ({ id, value, error, onChange, onBlur }) => {
+const ColorPicker = ({ id, name, value, error, onChange, onBlur }) => {
 	const theme = useTheme();
 	return (
 		<Stack gap={theme.spacing(4)}>
 			<MuiColorInput
 				format="hex"
+				name={name}
+				type="color-picker"
 				value={value}
 				id={id}
-				onChange={onChange}
+				onChange={(color) => onChange({ target: { name, value: color } })}
 				onBlur={onBlur}
 			/>
 			{error && (
@@ -54,7 +56,7 @@ ColorPicker.propTypes = {
 	value: PropTypes.string,
 	error: PropTypes.string,
 	onChange: PropTypes.func.isRequired,
-	onBlur: PropTypes.func.isRequired,
+	onBlur: PropTypes.func,
 };
 
 export default ColorPicker;

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -4,7 +4,7 @@ import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
 
 import ConfigBox from "../../../Components/ConfigBox";
-import { StatusFormContext } from "../../../Pages/Status/CreateStatusContext";
+import { StatusFormContext } from "../../../Pages/StatusPage/CreateStatusContext";
 import { useSelector } from "react-redux";
 import { logger } from "../../../Utils/Logger";
 import { createToast } from "../../../Utils/toastUtils";
@@ -22,14 +22,8 @@ import { buildErrors } from "../../../Validation/error";
  */
 const ContentPanel = () => {
 	const theme = useTheme();
-	const {
-		form,
-		setForm,
-		errors,
-		setErrors,
-		handleBlur,
-		handelCheckboxChange,
-	} = useContext(StatusFormContext);
+	const { form, setForm, errors, setErrors, handleBlur, handelCheckboxChange } =
+		useContext(StatusFormContext);
 	const [cards, setCards] = useState([]);
 	const { user, authToken } = useSelector((state) => state.auth);
 	const [monitors, setMonitors] = useState([]);
@@ -80,7 +74,7 @@ const ContentPanel = () => {
 
 	const handleServersBlur = () => {
 		const { error } = publicPageSettingsValidation.validate(
-			{ "monitors": form.monitors },
+			{ monitors: form.monitors },
 			{
 				abortEarly: false,
 			}
@@ -88,7 +82,7 @@ const ContentPanel = () => {
 		setErrors((prev) => {
 			return buildErrors(prev, "monitors", error);
 		});
-	};			
+	};
 	return (
 		<TabPanel
 			value="Contents"
@@ -158,7 +152,7 @@ const ContentPanel = () => {
 							form={form}
 							setForm={setForm}
 							removeItem={removeCard}
-							onBlur= {handleServersBlur}
+							onBlur={handleServersBlur}
 						/>
 
 						{errors["monitors"] && (

Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx

@@ -12,7 +12,7 @@ import Select from "../../Inputs/Select";
 import { logoImageValidation } from "../../../Validation/validation";
 import { formatBytes } from "../../../Utils/fileUtils";
 import ProgressUpload from "../../ProgressBars";
-import { StatusFormContext } from "../../../Pages/Status/CreateStatusContext";
+import { StatusFormContext } from "../../../Pages/StatusPage/CreateStatusContext";
 import ColorPicker from "../../Inputs/ColorPicker";
 import Checkbox from "../../Inputs/Checkbox";
 
@@ -22,8 +22,15 @@ import Checkbox from "../../Inputs/Checkbox";
  */
 const GeneralSettingsPanel = () => {
 	const theme = useTheme();
-	const { form, setForm, errors, setErrors, handleBlur, handleChange, handelCheckboxChange } =
-		useContext(StatusFormContext);
+	const {
+		form,
+		setForm,
+		errors,
+		setErrors,
+		handleBlur,
+		handleChange,
+		handelCheckboxChange,
+	} = useContext(StatusFormContext);
 	const [logo, setLogo] = useState(form.logo);
 
 	const [progress, setProgress] = useState({ value: 0, isLoading: false });
@@ -213,7 +220,7 @@ const GeneralSettingsPanel = () => {
 										width: "100%",
 										maxWidth: "200px",
 										alignSelf: "center",
-										mt: theme.spacing(4)
+										mt: theme.spacing(4),
 									}}
 								>
 									Remove Logo