From 406fa6ed9f4e368c7607d0312393e3cb2f5870a9 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 13 Dec 2024 11:29:50 -0500
Subject: [PATCH] - Merge feedback works from  status page 1 and status page 2
 branches

---
 Client/src/Components/Inputs/Checkbox/index.jsx   |  8 ++++++--
 Client/src/Components/Inputs/Image/index.jsx      | 10 +++++++---
 .../TabPanels/Status/GeneralSettingsPanel.jsx     | 15 +--------------
 Client/src/Validation/validation.js               |  3 ++-
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index 4685d8d44..b5b5b8981 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -21,6 +21,7 @@ import "./index.css";
  * @param {string} [props.value] - Optional value associated with the checkbox
  * @param {Function} [props.onChange] - Callback function triggered when checkbox state changes
  * @param {boolean} [props.isDisabled] - Determines if the checkbox is disabled
+ * @param {boolean} [props.alignSelf] - Whether the checkbox label should be positioned on flex-start.
  *
  * @returns {React.ReactElement} Rendered Checkbox component
  *
@@ -42,6 +43,7 @@ import "./index.css";
  *   isChecked={isAdvanced}
  *   isDisabled={!canModify}
  *   onChange={handleAdvancedToggle}
+ *   alignSelf = {alignSelf}
  * />
  */
 const Checkbox = ({
@@ -53,11 +55,12 @@ const Checkbox = ({
 	value,
 	onChange,
 	isDisabled,
+	alignSelf
 }) => {
 	/* TODO move sizes to theme */
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
-	const override = typeof label == "string" ? {} : { alignSelf: "flex-start" };
+	const override = alignSelf?  { alignSelf: "flex-start" } : {}
 	return (
 		<FormControlLabel
 			className="checkbox-wrapper"
@@ -76,7 +79,7 @@ const Checkbox = ({
 					sx={{
 						"&:hover": { backgroundColor: "transparent" },
 						"& svg": { width: sizes[size], height: sizes[size] },
-                        ...override						
+                        ...override
 					}}
 				/>
 			}
@@ -115,6 +118,7 @@ Checkbox.propTypes = {
 	value: PropTypes.string,
 	onChange: PropTypes.func,
 	isDisabled: PropTypes.bool,
+	alignSelf: PropTypes.bool,
 };
 
 export default Checkbox;
diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx
index d1404e94c..e7c41b9e9 100644
--- a/Client/src/Components/Inputs/Image/index.jsx
+++ b/Client/src/Components/Inputs/Image/index.jsx
@@ -11,12 +11,15 @@ import { checkImage } from "../../../Utils/fileUtils";
  * @param {string} props.id - The unique identifier for the input field.
  * @param {string} props.src - The URL of the image to display.
  * @param {function} props.onChange - The function to handle file input change.
+ * @param {string} props.isRound - The shape of the image to display.
  * @returns {JSX.Element} The rendered component.
  */
 
-const ImageField = ({ id, src, loading, onChange, error }) => {
+const ImageField = ({ id, src, loading, onChange, error, isRound = true }) => {
 	const theme = useTheme();
-	const error_border_style = error? {borderColor: theme.palette.error.main}: {}
+	const error_border_style = error ? { borderColor: theme.palette.error.main } : {};
+
+	const roundShape = isRound ? { borderRadius: "50%" } : {};
 
 	const [isDragging, setIsDragging] = useState(false);
 	const handleDragEnter = () => {
@@ -148,10 +151,10 @@ const ImageField = ({ id, src, loading, onChange, error }) => {
 						sx={{
 							width: "250px",
 							height: "250px",
-							borderRadius: "50%",
 							overflow: "hidden",
 							backgroundImage: `url(${src})`,
 							backgroundSize: "cover",
+							...roundShape,
 						}}
 					></Box>
 				</Stack>
@@ -164,6 +167,7 @@ ImageField.propTypes = {
 	id: PropTypes.string.isRequired,
 	src: PropTypes.string,
 	onChange: PropTypes.func.isRequired,
+	isRound: PropTypes.bool,
 };
 
 export default ImageField;
diff --git a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx b/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
index b1e21a2db..230822447 100644
--- a/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
+++ b/Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx
@@ -31,7 +31,6 @@ const GeneralSettingsPanel = () => {
 		url: "",
 		timezone: "America/Toronto",
 		color: "#4169E1",
-		theme: "light",
 		//which fields matching below?
 		publish: false,
 		logo: null,
@@ -68,7 +67,6 @@ const GeneralSettingsPanel = () => {
 	const handleSubmit = () => {
 		//validate rest of the form
 		delete localData.logo;
-		delete localData.publish;
 		if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
 			return;
 		}
@@ -162,7 +160,6 @@ const GeneralSettingsPanel = () => {
 							id="published-to-public"
 							label={`Published and visible to the public`}
 							isChecked={localData.publish}
-							value={"localData.publish"}
 							onChange={handleChange}
 							onBlur={handleBlur}
 						/>
@@ -226,6 +223,7 @@ const GeneralSettingsPanel = () => {
 							src={localData.logo?.src ?? logo?.src}
 							loading={progress.isLoading && progress.value !== 100}
 							onChange={handleLogo}
+							isRound={false}
 						/>
 						{progress.isLoading || progress.value !== 0 || errors["logo"] ? (
 							<ProgressUpload
@@ -247,17 +245,6 @@ const GeneralSettingsPanel = () => {
 							onChange={handleChange}
 							onBlur={handleBlur}
 						/>
-						<Select
-							id="theme"
-							label="Theme"
-							value={localData.theme}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							items={[
-								{ _id: "light", name: "Light" },
-								{ _id: "dark", name: "Dark" },
-							]}
-						/>
 					</Stack>
 				</ConfigBox>
 				<Stack
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 7f6a95352..7fe33845e 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -154,7 +154,8 @@ const publicPageGeneralSettingsValidation = joi.object({
 	url: joi.string().trim().messages({ "string.empty": "URL is required." }),
 	timezone: joi.string().trim().messages({ "string.empty": "Timezone is required." }),
 	color: joi.string().trim().messages({ "string.empty": "Color is required." }),
-	theme: joi.string().trim().messages({ "string.empty": "Theme is required." })
+	publish: joi.bool()
+
 }
 
 )