fix: Only content of Switch label is clickable

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FlowStatus/index.tsx

@@ -104,17 +104,8 @@ const FlowStatus = () => {
       <SettingsSection background>
         <Switch
           label={statusForm.values.status as Capitalize<string>}
-          formControlLabelProps={{
-            sx: {
-              marginBottom: 0.5,
-              [`& .${formControlLabelClasses.label}`]: {
-                fontWeight: FONT_WEIGHT_BOLD,
-                textTransform: "capitalize",
-                fontSize: 19,
-              },
-            },
-            name: "service.status",
-          }}
+          name={"service.status"}
+          variant="editorPage"
           checked={statusForm.values.status === "online"}
           onChange={() =>
             statusForm.setFieldValue(

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings/FooterLinksAndLegalDisclaimer.tsx

@@ -40,17 +40,8 @@ const TextInput: React.FC<{
       <Box mb={0.5} display="flex" alignItems="center">
         <Switch
           label={title}
-          formControlLabelProps={{
-            sx: {
-            marginBottom: 0.5,
-            [`& .${formControlLabelClasses.label}`]: {
-                fontWeight: FONT_WEIGHT_BOLD,
-                textTransform: "capitalize",
-                fontSize: 19,
-              },
-            },
-            name: switchProps?.name,
-          }}
+          name={switchProps?.name}
+          variant="editorPage"
           onChange={switchProps?.onChange}
           checked={switchProps?.checked}
         />

editor.planx.uk/src/ui/shared/Switch.tsx

@@ -1,27 +1,42 @@
 import Box from "@mui/material/Box";
-import FormControlLabel, { FormControlLabelProps } from "@mui/material/FormControlLabel";
+import FormControlLabel, { formControlLabelClasses } from "@mui/material/FormControlLabel";
 // eslint-disable-next-line no-restricted-imports
 import MuiSwitch, { SwitchProps as MuiSwitchProps } from "@mui/material/Switch";
 import React from "react";
+import { FONT_WEIGHT_BOLD } from "theme";
 
 interface Props {
   checked?: boolean;
   onChange: MuiSwitchProps["onChange"];
   label: Capitalize<string>
-  formControlLabelProps?: Partial<FormControlLabelProps>;
+  name?: string;
+  variant?: "editorPage" | "editorModal"
 }
 
-export const Switch: React.FC<Props> = ({ checked, onChange, label, formControlLabelProps }) => (
+export const Switch: React.FC<Props> = ({ checked, onChange, label, name, variant = "editorModal" }) => (
   <Box>
     <FormControlLabel
       control={
         <MuiSwitch
           checked={checked}
           onChange={onChange}
-        />
-      }
+          sx={{ pointerEvents: "auto"}}
+          />
+        }
+      name={name}
       label={label}
-      {...formControlLabelProps}
+      sx={{ 
+        pointerEvents: "none", 
+        [`& .${formControlLabelClasses.label}`]: { 
+          pointerEvents: "auto", 
+          display: "contents",
+          ...(variant === "editorPage" && {
+            fontWeight: FONT_WEIGHT_BOLD,
+            textTransform: "capitalize",
+            fontSize: 19,
+          })
+        }
+      }}
     />
   </Box>
-)
+)