feat: SW-1422 Updated UX for booking code desktop and mobile

components/TempDesignSystem/Form/Switch/index.tsx

@@ -32,20 +32,14 @@ export default function Switch({
       isDisabled={registerOptions?.disabled}
       excludeFromTabOrder
     >
-      {({ isSelected }) => (
-        <>
-          <span className={styles.switchContainer}>
-            {children}
-            <span className={styles.switch} tabIndex={0}></span>
-          </span>
-          {fieldState.error ? (
-            <Caption className={styles.error} fontOnly>
-              <InfoCircleIcon color="red" />
-              {fieldState.error.message}
-            </Caption>
-          ) : null}
-        </>
-      )}
+      {children}
+      <span className={styles.switch} tabIndex={0}></span>
+      {fieldState.error ? (
+        <Caption className={styles.error} fontOnly>
+          <InfoCircleIcon color="red" />
+          {fieldState.error.message}
+        </Caption>
+      ) : null}
     </AriaSwitch>
   )
 }

components/TempDesignSystem/Form/Switch/switch.module.css

@@ -3,6 +3,8 @@
   flex-direction: row;
   color: var(--text-color);
   cursor: pointer;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .switch {