From ebdd2aab2e2b4d0e87e1534559348175f1978447 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Wed, 2 Aug 2023 13:41:39 +0300
Subject: [PATCH] feat(client): remove extra form elements in the settings
 (#50996)

---
 client/src/components/settings/email.tsx      | 18 ++--
 .../settings/keyboard-shortcuts.tsx           |  7 +-
 .../components/settings/scrollbar-width.tsx   |  4 +-
 client/src/components/settings/sound.tsx      |  4 +-
 client/src/components/settings/theme.tsx      | 26 +++---
 .../settings/toggle-button-setting.tsx        | 81 +++++++++--------
 .../settings/toggle-radio-setting.tsx         | 87 +++++++++----------
 .../components/settings/toggle-setting.css    |  9 +-
 8 files changed, 110 insertions(+), 126 deletions(-)

diff --git a/client/src/components/settings/email.tsx b/client/src/components/settings/email.tsx
index e123857bd1f..81f2477756c 100644
--- a/client/src/components/settings/email.tsx
+++ b/client/src/components/settings/email.tsx
@@ -227,16 +227,14 @@ function EmailSettings({
       </FullWidthRow>
       <Spacer size='medium' />
       <FullWidthRow>
-        <form id='form-quincy-email' onSubmit={e => e.preventDefault()}>
-          <ToggleButtonSetting
-            action={t('settings.email.weekly')}
-            flag={sendQuincyEmail}
-            flagName='sendQuincyEmail'
-            offLabel={t('buttons.no-thanks')}
-            onLabel={t('buttons.yes-please')}
-            toggleFlag={() => updateQuincyEmail(!sendQuincyEmail)}
-          />
-        </form>
+        <ToggleButtonSetting
+          action={t('settings.email.weekly')}
+          flag={sendQuincyEmail}
+          flagName='sendQuincyEmail'
+          offLabel={t('buttons.no-thanks')}
+          onLabel={t('buttons.yes-please')}
+          toggleFlag={() => updateQuincyEmail(!sendQuincyEmail)}
+        />
       </FullWidthRow>
     </div>
   );
diff --git a/client/src/components/settings/keyboard-shortcuts.tsx b/client/src/components/settings/keyboard-shortcuts.tsx
index b02f9176f03..68d97b11dc2 100644
--- a/client/src/components/settings/keyboard-shortcuts.tsx
+++ b/client/src/components/settings/keyboard-shortcuts.tsx
@@ -16,10 +16,7 @@ export default function KeyboardShortcutsSettings({
   const { t } = useTranslation();
 
   return (
-    <form
-      onSubmit={(e: React.FormEvent) => e.preventDefault()}
-      data-testid='fcc-enable-shortcuts-setting'
-    >
+    <>
       <ToggleButtonSetting
         action={t('settings.labels.keyboard-shortcuts')}
         flag={keyboardShortcuts}
@@ -31,7 +28,7 @@ export default function KeyboardShortcutsSettings({
         }}
       />
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 
diff --git a/client/src/components/settings/scrollbar-width.tsx b/client/src/components/settings/scrollbar-width.tsx
index 00ec6d24605..34f17697b94 100644
--- a/client/src/components/settings/scrollbar-width.tsx
+++ b/client/src/components/settings/scrollbar-width.tsx
@@ -34,7 +34,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
   /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 
   return (
-    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <>
       <label htmlFor='scrollbar-width-slider'>
         {t('settings.scrollbar-width')}:
         <span
@@ -79,7 +79,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
         </div>
       </div>
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 
diff --git a/client/src/components/settings/sound.tsx b/client/src/components/settings/sound.tsx
index 348f8f63615..f6011fb34e8 100644
--- a/client/src/components/settings/sound.tsx
+++ b/client/src/components/settings/sound.tsx
@@ -39,7 +39,7 @@ export default function SoundSettings({
   }
 
   return (
-    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <>
       <ToggleButtonSetting
         action={t('settings.labels.sound-mode')}
         explain={t('settings.sound-mode')}
@@ -65,7 +65,7 @@ export default function SoundSettings({
         onInput={handleVolumeChange}
       />
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 
diff --git a/client/src/components/settings/theme.tsx b/client/src/components/settings/theme.tsx
index 26fc7c51e0b..64c87a038cd 100644
--- a/client/src/components/settings/theme.tsx
+++ b/client/src/components/settings/theme.tsx
@@ -21,20 +21,18 @@ export default function ThemeSettings({
   const { t } = useTranslation();
 
   return (
-    <form onSubmit={(e: React.FormEvent): void => e.preventDefault()}>
-      <ToggleButtonSetting
-        action={t('settings.labels.night-mode')}
-        flag={currentTheme === Themes.Night}
-        flagName='currentTheme'
-        offLabel={t('buttons.off')}
-        onLabel={t('buttons.on')}
-        toggleFlag={() => {
-          toggleNightMode(
-            currentTheme === Themes.Night ? Themes.Default : Themes.Night
-          );
-        }}
-      />
-    </form>
+    <ToggleButtonSetting
+      action={t('settings.labels.night-mode')}
+      flag={currentTheme === Themes.Night}
+      flagName='currentTheme'
+      offLabel={t('buttons.off')}
+      onLabel={t('buttons.on')}
+      toggleFlag={() => {
+        toggleNightMode(
+          currentTheme === Themes.Night ? Themes.Default : Themes.Night
+        );
+      }}
+    />
   );
 }
 
diff --git a/client/src/components/settings/toggle-button-setting.tsx b/client/src/components/settings/toggle-button-setting.tsx
index 1adc758a575..bb40c426d38 100644
--- a/client/src/components/settings/toggle-button-setting.tsx
+++ b/client/src/components/settings/toggle-button-setting.tsx
@@ -10,51 +10,48 @@ export default function ToggleButtonSetting({
   flag,
   flagName,
   toggleFlag,
-  ...restProps
+  offLabel,
+  onLabel
 }: ToggleSettingProps): JSX.Element {
   return (
-    <div className='toggle-setting-container'>
-      <fieldset
-        {...(explain && {
-          'aria-labelledby': `legend${flagName} desc${flagName}`
-        })}
-      >
-        <legend
-          className='sr-only'
-          {...(explain && { id: `legend${flagName}` })}
+    <fieldset
+      className='toggle-setting-container'
+      {...(explain && {
+        'aria-labelledby': `legend${flagName} desc${flagName}`
+      })}
+    >
+      <legend className='sr-only' {...(explain && { id: `legend${flagName}` })}>
+        {action}
+      </legend>
+      <div className='toggle-description'>
+        <p aria-hidden={true}>{action}</p>
+        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
+      </div>
+      <div className='toggle-button-group'>
+        <button
+          aria-pressed={flag}
+          {...(!flag && { onClick: toggleFlag })}
+          value='1'
+          className='toggle-button-right'
         >
-          {action}
-        </legend>
-        <div className='toggle-description'>
-          <p aria-hidden={true}>{action}</p>
-          {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
-        </div>
-        <div className='toggle-button-group'>
-          <button
-            aria-pressed={flag}
-            {...(!flag && { onClick: toggleFlag })}
-            value='1'
-            className='toggle-button-right'
-          >
-            <span>
-              {restProps.onLabel}
-              {flag ? <ToggleCheck className='checkIcon' /> : null}
-            </span>
-          </button>
-          <button
-            aria-pressed={!flag}
-            {...(flag && { onClick: toggleFlag })}
-            value='2'
-            className='toggle-button-left'
-          >
-            <span>
-              {restProps.offLabel}
-              {!flag ? <ToggleCheck className='checkIcon' /> : null}
-            </span>
-          </button>
-        </div>
-      </fieldset>
-    </div>
+          <span>
+            {onLabel}
+            {flag ? <ToggleCheck className='checkIcon' /> : null}
+          </span>
+        </button>
+        <button
+          aria-pressed={!flag}
+          {...(flag && { onClick: toggleFlag })}
+          value='2'
+          className='toggle-button-left'
+        >
+          <span>
+            {offLabel}
+            {!flag ? <ToggleCheck className='checkIcon' /> : null}
+          </span>
+        </button>
+      </div>
+    </fieldset>
   );
 }
 
diff --git a/client/src/components/settings/toggle-radio-setting.tsx b/client/src/components/settings/toggle-radio-setting.tsx
index 336367514a0..e15bae2499f 100644
--- a/client/src/components/settings/toggle-radio-setting.tsx
+++ b/client/src/components/settings/toggle-radio-setting.tsx
@@ -18,56 +18,53 @@ export default function ToggleRadioSetting({
   flag,
   flagName,
   toggleFlag,
-  ...restProps
+  offLabel,
+  onLabel
 }: ToggleSettingProps): JSX.Element {
   const firstRadioId = `radioA${flagName}`;
   const secondRadioId = `radioB${flagName}`;
 
   return (
-    <div className='toggle-setting-container'>
-      <fieldset
-        {...(explain && {
-          'aria-labelledby': `legend${flagName} desc${flagName}`
-        })}
-      >
-        <legend
-          className='sr-only'
-          {...(explain && { id: `legend${flagName}` })}
-        >
-          {action}
-        </legend>
-        <div className='toggle-description'>
-          <p aria-hidden={true}>{action}</p>
-          {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
-        </div>
-        <div className='toggle-radio-group'>
-          <label htmlFor={firstRadioId}>
-            <input
-              id={firstRadioId}
-              type='radio'
-              {...(flag && { defaultChecked: true })}
-              {...(!flag && { onChange: toggleFlag })}
-              name={flagName}
-              value='1'
-            />
-            <span className='custom-circle'></span>
-            <span>{restProps.onLabel}</span>
-          </label>
-          <label htmlFor={secondRadioId}>
-            <input
-              id={secondRadioId}
-              type='radio'
-              {...(!flag && { defaultChecked: true })}
-              {...(flag && { onChange: toggleFlag })}
-              name={flagName}
-              value='2'
-            />
-            <span className='custom-circle' />
-            <span>{restProps.offLabel}</span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+    <fieldset
+      className='toggle-setting-container'
+      {...(explain && {
+        'aria-labelledby': `legend${flagName} desc${flagName}`
+      })}
+    >
+      <legend className='sr-only' {...(explain && { id: `legend${flagName}` })}>
+        {action}
+      </legend>
+      <div className='toggle-description'>
+        <p aria-hidden={true}>{action}</p>
+        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
+      </div>
+      <div className='toggle-radio-group'>
+        <label htmlFor={firstRadioId}>
+          <input
+            id={firstRadioId}
+            type='radio'
+            {...(flag && { defaultChecked: true })}
+            {...(!flag && { onChange: toggleFlag })}
+            name={flagName}
+            value='1'
+          />
+          <span className='custom-circle'></span>
+          <span>{onLabel}</span>
+        </label>
+        <label htmlFor={secondRadioId}>
+          <input
+            id={secondRadioId}
+            type='radio'
+            {...(!flag && { defaultChecked: true })}
+            {...(flag && { onChange: toggleFlag })}
+            name={flagName}
+            value='2'
+          />
+          <span className='custom-circle' />
+          <span>{offLabel}</span>
+        </label>
+      </div>
+    </fieldset>
   );
 }
 
diff --git a/client/src/components/settings/toggle-setting.css b/client/src/components/settings/toggle-setting.css
index 3c9840974e6..1c3f12becfe 100644
--- a/client/src/components/settings/toggle-setting.css
+++ b/client/src/components/settings/toggle-setting.css
@@ -1,5 +1,7 @@
 .toggle-setting-container {
   margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .toggle-description {
@@ -16,11 +18,6 @@
   font-size: 0.8rem;
 }
 
-.toggle-setting-container fieldset {
-  display: flex;
-  justify-content: space-between;
-}
-
 .toggle-button-group {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -122,7 +119,7 @@
 }
 
 @media (max-width: 35rem) {
-  .toggle-setting-container fieldset {
+  .toggle-setting-container {
     flex-direction: column;
     margin-bottom: 1rem;
   }