From cd14783c089c9f94349334f3b3157667d86ca84a Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 29 Mar 2023 16:59:35 -0400
Subject: [PATCH] fix(striker-ui): correct label in SwitchWithLabel

---
 .../ManageFence/CommonFenceInputGroup.tsx     |  1 -
 striker-ui/components/SwitchWithLabel.tsx     | 61 ++++++++++---------
 striker-ui/types/SwitchWithLabel.d.ts         |  2 +-
 3 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/striker-ui/components/ManageFence/CommonFenceInputGroup.tsx b/striker-ui/components/ManageFence/CommonFenceInputGroup.tsx
index 9c70146e..cccfee64 100644
--- a/striker-ui/components/ManageFence/CommonFenceInputGroup.tsx
+++ b/striker-ui/components/ManageFence/CommonFenceInputGroup.tsx
@@ -24,7 +24,6 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
         input={
           <SwitchWithLabel
             checked={isChecked}
-            flexBoxProps={{ width: '100%' }}
             id={id}
             label={label}
             name={name}
diff --git a/striker-ui/components/SwitchWithLabel.tsx b/striker-ui/components/SwitchWithLabel.tsx
index 89ce5d9c..a1b9ac21 100644
--- a/striker-ui/components/SwitchWithLabel.tsx
+++ b/striker-ui/components/SwitchWithLabel.tsx
@@ -1,55 +1,58 @@
-import { Switch, SxProps, Theme } from '@mui/material';
-import { FC, useMemo } from 'react';
+import {
+  FormControlLabel as MUIFormControlLabel,
+  styled,
+  Switch as MUISwitch,
+} from '@mui/material';
+import { FC, ReactElement, useMemo } from 'react';
 
 import { GREY } from '../lib/consts/DEFAULT_THEME';
 
-import FlexBox from './FlexBox';
 import { BodyText } from './Text';
 
+const SwitchFormControlLabel = styled(MUIFormControlLabel)({
+  height: '3.5em',
+  marginLeft: 0,
+  width: '100%',
+});
+
 const SwitchWithLabel: FC<SwitchWithLabelProps> = ({
   checked: isChecked,
-  flexBoxProps: { sx: flexBoxSx, ...restFlexBoxProps } = {},
+  formControlLabelProps,
   id: switchId,
   label,
   name: switchName,
   onChange,
   switchProps,
 }) => {
-  const combinedFlexBoxSx = useMemo<SxProps<Theme>>(
-    () => ({
-      '& > :first-child': {
-        flexGrow: 1,
-      },
-
-      ...flexBoxSx,
-    }),
-    [flexBoxSx],
-  );
-
-  const labelElement = useMemo(
+  const labelElement = useMemo<ReactElement>(
     () =>
       typeof label === 'string' ? (
-        <BodyText inheritColour color={`${GREY}9F`}>
+        <BodyText inheritColour color={`${GREY}AF`}>
           {label}
         </BodyText>
       ) : (
-        label
+        <>{label}</>
       ),
     [label],
   );
 
   return (
-    <FlexBox row {...restFlexBoxProps} sx={combinedFlexBoxSx}>
-      {labelElement}
-      <Switch
-        checked={isChecked}
-        edge="end"
-        id={switchId}
-        name={switchName}
-        onChange={onChange}
-        {...switchProps}
-      />
-    </FlexBox>
+    <SwitchFormControlLabel
+      componentsProps={{ typography: { flexGrow: 1 } }}
+      control={
+        <MUISwitch
+          checked={isChecked}
+          edge="end"
+          id={switchId}
+          name={switchName}
+          onChange={onChange}
+          {...switchProps}
+        />
+      }
+      label={labelElement}
+      labelPlacement="start"
+      {...formControlLabelProps}
+    />
   );
 };
 
diff --git a/striker-ui/types/SwitchWithLabel.d.ts b/striker-ui/types/SwitchWithLabel.d.ts
index 4015119c..4e4448bf 100644
--- a/striker-ui/types/SwitchWithLabel.d.ts
+++ b/striker-ui/types/SwitchWithLabel.d.ts
@@ -1,5 +1,5 @@
 type SwitchWithLabelOptionalProps = {
-  flexBoxProps?: import('../components/FlexBox').FlexBoxProps;
+  formControlLabelProps?: import('@mui/material').FormControlLabelProps;
   switchProps?: import('@mui/material').SwitchProps;
 };