From 7b750c74056613b883c2be123e3f5348354e336c Mon Sep 17 00:00:00 2001
From: Adeel Khan <muhammad.adeel@arbisoft.com>
Date: Mon, 1 Feb 2021 13:17:47 +0500
Subject: [PATCH] Remove margin bottom from register fields

---
 src/register/RegistrationPage.jsx             | 17 ++--
 .../RegistrationPage.test.jsx.snap            | 78 +++++++++----------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 1848a349..e52b6229 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -403,7 +403,7 @@ class RegistrationPage extends React.Component {
                 <ValidationFormGroup
                   for={field.name}
                   key={field.name}
-                  className="pt-10 mb-20 small"
+                  className="pt-10 small"
                 >
                   { nodes }
                 </ValidationFormGroup>
@@ -420,7 +420,7 @@ class RegistrationPage extends React.Component {
                 key={field.name}
                 invalid={this.state.errors[stateVar] !== ''}
                 invalidMessage={field.errorMessages.required}
-                className="custom-control mb-20 small"
+                className="custom-control small"
               >
                 <Input {...props} />
                 {beforeLink}
@@ -445,7 +445,7 @@ class RegistrationPage extends React.Component {
               key={field.name}
               invalid={this.state.errors[stateVar] !== ''}
               invalidMessage={field.errorMessages.required}
-              className="mb-20"
+              className="mb-0"
             >
               <label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
               <Input {...props} />
@@ -461,7 +461,7 @@ class RegistrationPage extends React.Component {
   addExtraOptionalFields() {
     const fields = this.props.formData.fields.map((field) => {
       let options = null;
-      let cssClass = 'mb-20';
+      let cssClass = 'mb-0';
       if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
         if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
           REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -588,12 +588,11 @@ class RegistrationPage extends React.Component {
               </div>
               <hr className="mb-20 border-gray-200" />
               <h3 className="mb-20">{intl.formatMessage(messages['create.a.new.account'])}</h3>
-              <Form className="mb-4 form-group">
+              <Form className="form-group">
                 <ValidationFormGroup
                   for="name"
                   invalid={this.state.errors.name !== ''}
                   invalidMessage={this.state.errors.name}
-                  className="mb-20"
                   helpText="This name will be used by any certificates that you earn."
                 >
                   <label htmlFor="name" className="h6 pt-10">
@@ -615,7 +614,6 @@ class RegistrationPage extends React.Component {
                   for="username"
                   invalid={this.state.errors.username !== ''}
                   invalidMessage={this.state.errors.username}
-                  className="mb-20"
                   helpText="The name that will identify you in your courses. It cannot be changed later."
                 >
                   <label htmlFor="username" className="h6 pt-10">
@@ -638,7 +636,6 @@ class RegistrationPage extends React.Component {
                   for="email"
                   invalid={this.state.errors.email !== ''}
                   invalidMessage={this.state.errors.email}
-                  className="mb-20"
                   helpText="This is what you will use to login."
                 >
                   <label htmlFor="email" className="h6 pt-10">
@@ -661,7 +658,6 @@ class RegistrationPage extends React.Component {
                     for="password"
                     invalid={this.state.errors.password !== ''}
                     invalidMessage={this.state.errors.password}
-                    className="mb-20"
                     helpText="Your password must contain at least 8 characters, including 1 letter & 1 number."
                   >
                     <label htmlFor="password" className="h6 pt-10">
@@ -694,7 +690,7 @@ class RegistrationPage extends React.Component {
                     onChange={e => this.handleOnOptional(e)}
                     required
                   />
-                  <p role="presentation" id="additionalFields" className="mb-20 small" onClick={e => this.handleOnOptional(e)}>
+                  <p role="presentation" id="additionalFields" className="mb-0 small" onClick={e => this.handleOnOptional(e)}>
                     {intl.formatMessage(messages['support.education.research'])}
                   </p>
                 </ValidationFormGroup>
@@ -703,6 +699,7 @@ class RegistrationPage extends React.Component {
                   type="button"
                   variant="brand"
                   state={submitState}
+                  className="mt-20"
                   labels={{
                     default: intl.formatMessage(messages['create.account.button']),
                   }}
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 3bac877b..7447ed71 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -43,10 +43,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
         Create a new account
       </h3>
       <form
-        className="mb-4 form-group"
+        className="form-group"
       >
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -75,7 +75,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -105,7 +105,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -134,7 +134,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </small>
         </div>
         <div
-          className="form-group custom-control mb-20 small"
+          className="form-group custom-control small"
         >
           <input
             aria-describedby=""
@@ -178,7 +178,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
             value={false}
           />
           <p
-            className="mb-20 small"
+            className="mb-0 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -189,7 +189,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -240,10 +240,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
         Create a new account
       </h3>
       <form
-        className="mb-4 form-group"
+        className="form-group"
       >
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -272,7 +272,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -302,7 +302,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -331,7 +331,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -360,7 +360,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-20 small"
+          className="form-group custom-control small"
         >
           <input
             aria-describedby=""
@@ -404,7 +404,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
             value={false}
           />
           <p
-            className="mb-20 small"
+            className="mb-0 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -415,7 +415,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -505,10 +505,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
         Create a new account
       </h3>
       <form
-        className="mb-4 form-group"
+        className="form-group"
       >
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -537,7 +537,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -567,7 +567,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -596,7 +596,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -625,7 +625,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-20 small"
+          className="form-group custom-control small"
         >
           <input
             aria-describedby=""
@@ -669,7 +669,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
             value={false}
           />
           <p
-            className="mb-20 small"
+            className="mb-0 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -680,7 +680,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -731,10 +731,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
         Create a new account
       </h3>
       <form
-        className="mb-4 form-group"
+        className="form-group"
       >
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -763,7 +763,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -793,7 +793,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -822,7 +822,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -851,7 +851,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </small>
         </div>
         <div
-          className="form-group custom-control mb-20 small"
+          className="form-group custom-control small"
         >
           <input
             aria-describedby=""
@@ -895,7 +895,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
             value={false}
           />
           <p
-            className="mb-20 small"
+            className="mb-0 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -906,7 +906,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
         <button
           aria-disabled={true}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
+          className="pgn__stateful-btn pgn__stateful-btn-state-pending mt-20 disabled btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -1000,10 +1000,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
         Create a new account
       </h3>
       <form
-        className="mb-4 form-group"
+        className="form-group"
       >
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -1032,7 +1032,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -1062,7 +1062,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -1091,7 +1091,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group mb-20"
+          className="form-group"
         >
           <label
             className="h6 pt-10"
@@ -1120,7 +1120,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </small>
         </div>
         <div
-          className="form-group custom-control mb-20 small"
+          className="form-group custom-control small"
         >
           <input
             aria-describedby=""
@@ -1164,7 +1164,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
             value={false}
           />
           <p
-            className="mb-20 small"
+            className="mb-0 small"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -1175,7 +1175,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
           disabled={false}
           onClick={[Function]}
           type="button"