- Add log and general settins tab validation

- WIP logo uploading in general settings tab

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

@@ -14,8 +14,9 @@ import { checkImage } from "../../../Utils/fileUtils";
  * @returns {JSX.Element} The rendered component.
  */
 
-const ImageField = ({ id, src, loading, onChange }) => {
+const ImageField = ({ id, src, loading, onChange, error }) => {
 	const theme = useTheme();
+	const error_border_style = error? {borderColor: theme.palette.error.main}: {}
 
 	const [isDragging, setIsDragging] = useState(false);
 	const handleDragEnter = () => {
@@ -28,7 +29,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 	return (
 		<>
 			{!checkImage(src) || loading ? (
-				<>
+				<>	
 					<Box
 						className="image-field-wrapper"
 						mt={theme.spacing(8)}
@@ -46,6 +47,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 								borderColor: theme.palette.primary.main,
 								backgroundColor: "hsl(215, 87%, 51%, 0.05)",
 							},
+							...error_border_style
 						}}
 						onDragEnter={handleDragEnter}
 						onDragLeave={handleDragLeave}
@@ -62,7 +64,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 									cursor: "pointer",
 									maxWidth: "500px",
 									minHeight: "175px",
-									zIndex: 1
+									zIndex: 1,
 								},
 								"& fieldset": {
 									padding: 0,
@@ -79,7 +81,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 								top: "50%",
 								left: "50%",
 								transform: "translate(-50%, -50%)",
-								zIndex:0,								
+								zIndex: 0,
 								width: "100%",
 							}}
 						>
@@ -114,7 +116,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 							>
 								(maximum size: 3MB)
 							</Typography>
-						</Stack>
+						</Stack>								
 					</Box>
 					<Typography
 						component="p"
@@ -123,6 +125,19 @@ const ImageField = ({ id, src, loading, onChange }) => {
 					>
 						Supported formats: JPG, PNG
 					</Typography>
+					{error && (
+						<Typography
+							component="span"
+							className="input-error"
+							color={theme.palette.error.main}
+							mt={theme.spacing(2)}
+							sx={{
+								opacity: 0.8,
+							}}
+						>
+							{error}
+						</Typography>
+					)}									
 				</>
 			) : (
 				<Stack