feat(client): remove bootstrap Form component (#50950)

client/src/components/Donation/stripe-card-form.tsx

@@ -1,4 +1,4 @@
-import { Button, Form } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import {
   CardNumberElement,
   CardExpiryElement,
@@ -136,7 +136,10 @@ const StripeCardForm = ({
   };
 
   return (
-    <Form className='donation-form' onSubmit={handleSubmit}>
+    <form
+      className='donation-form'
+      onSubmit={event => void handleSubmit(event)}
+    >
       <div
         className={`donation-elements${
           !isSubmissionValid ? ' failed-submition' : ''
@@ -165,7 +168,7 @@ const StripeCardForm = ({
       >
         {t('buttons.donate')}
       </Button>
-    </Form>
+    </form>
   );
 };
 

client/src/components/settings/keyboard-shortcuts.tsx

@@ -1,4 +1,3 @@
-import { Form } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Spacer } from '../helpers';
@@ -17,8 +16,7 @@ export default function KeyboardShortcutsSettings({
   const { t } = useTranslation();
 
   return (
-    <Form
-      inline={true}
+    <form
       onSubmit={(e: React.FormEvent) => e.preventDefault()}
       data-testid='fcc-enable-shortcuts-setting'
     >
@@ -33,7 +31,7 @@ export default function KeyboardShortcutsSettings({
         }}
       />
       <Spacer size='medium'></Spacer>
-    </Form>
+    </form>
   );
 }
 

client/src/components/settings/privacy.tsx

@@ -1,4 +1,4 @@
-import { Button, Form } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import { useTranslation, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
@@ -56,7 +56,7 @@ function PrivacySettings({ submitProfileUI, user }: PrivacyProps): JSX.Element {
       <SectionHeader>{t('settings.headings.privacy')}</SectionHeader>
       <FullWidthRow>
         <p>{t('settings.privacy')}</p>
-        <Form inline={true} onSubmit={submitNewProfileSettings}>
+        <form onSubmit={submitNewProfileSettings}>
           <div role='group' aria-label={t('settings.headings.privacy')}>
             <ToggleRadioSetting
               action={t('settings.labels.my-profile')}
@@ -155,7 +155,7 @@ function PrivacySettings({ submitProfileUI, user }: PrivacyProps): JSX.Element {
             {t('buttons.save')}{' '}
             <span className='sr-only'>{t('settings.headings.privacy')}</span>
           </Button>
-        </Form>
+        </form>
       </FullWidthRow>
       <FullWidthRow>
         <Spacer size='medium' />

client/src/components/settings/scrollbar-width.tsx

@@ -1,4 +1,3 @@
-import { Form } from '@freecodecamp/react-bootstrap';
 import React, { ChangeEvent, useState, useRef } from 'react';
 import store from 'store';
 import { useTranslation } from 'react-i18next';
@@ -35,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 inline={true} onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
       <label htmlFor='scrollbar-width-slider'>
         {t('settings.scrollbar-width')}:
         <span
@@ -80,7 +79,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
         </div>
       </div>
       <Spacer size='medium'></Spacer>
-    </Form>
+    </form>
   );
 }
 

client/src/components/settings/sound.tsx

@@ -1,4 +1,3 @@
-import { Form } from '@freecodecamp/react-bootstrap';
 import React, { ChangeEvent, useState } from 'react';
 import store from 'store';
 import { useTranslation } from 'react-i18next';
@@ -40,7 +39,7 @@ export default function SoundSettings({
   }
 
   return (
-    <Form inline={true} onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
       <ToggleButtonSetting
         action={t('settings.labels.sound-mode')}
         explain={t('settings.sound-mode')}
@@ -66,7 +65,7 @@ export default function SoundSettings({
         onInput={handleVolumeChange}
       />
       <Spacer size='medium'></Spacer>
-    </Form>
+    </form>
   );
 }
 

client/src/components/settings/theme.tsx

@@ -1,4 +1,3 @@
-import { Form } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { updateMyTheme } from '../../redux/settings/actions';
@@ -22,10 +21,7 @@ export default function ThemeSettings({
   const { t } = useTranslation();
 
   return (
-    <Form
-      inline={true}
-      onSubmit={(e: React.FormEvent): void => e.preventDefault()}
-    >
+    <form onSubmit={(e: React.FormEvent): void => e.preventDefault()}>
       <ToggleButtonSetting
         action={t('settings.labels.night-mode')}
         flag={currentTheme === Themes.Night}
@@ -38,7 +34,7 @@ export default function ThemeSettings({
           );
         }}
       />
-    </Form>
+    </form>
   );
 }
 

client/src/pages/update-email.tsx

@@ -1,5 +1,4 @@
 import {
-  Form,
   FormGroup,
   FormControl,
   ControlLabel,
@@ -78,7 +77,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
         <Row>
           <Col sm={6} smOffset={3}>
             <Row>
-              <Form horizontal={true} onSubmit={handleSubmit}>
+              <form onSubmit={handleSubmit}>
                 <FormGroup
                   controlId='emailInput'
                   validationState={getEmailValidationState()}
@@ -111,7 +110,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                     ? t('buttons.update-email')
                     : t('buttons.verify-email')}
                 </Button>
-              </Form>
+              </form>
               <p className='text-center'>
                 <Link to='/signout'>{t('buttons.sign-out')}</Link>
               </p>