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 (
}
@@ -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,
}}
>
@@ -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"] ? (
{
onChange={handleChange}
onBlur={handleBlur}
/>
-