From 8cc17dd05fb04ba9d80f007f5491e783fbdd9d4d Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Tue, 12 Jan 2021 15:30:40 +0500
Subject: [PATCH] Add consistent padding between form and browser frame

---
 src/logistration/RegistrationPage.jsx         |  39 +++---
 src/logistration/_style.scss                  |   8 ++
 .../tests/RegistrationPage.test.jsx           |  16 +++
 .../RegistrationPage.test.jsx.snap            | 111 +++++++++---------
 4 files changed, 107 insertions(+), 67 deletions(-)

diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx
index f01837e0..bd0496ed 100644
--- a/src/logistration/RegistrationPage.jsx
+++ b/src/logistration/RegistrationPage.jsx
@@ -305,7 +305,13 @@ class RegistrationPage extends React.Component {
             return (
               <React.Fragment key={field.type}>
                 <input {...props} />
-                { nodes }
+                <ValidationFormGroup
+                  for={field.name}
+                  key={field.name}
+                  className="pt-10 mb-0"
+                >
+                  { nodes }
+                </ValidationFormGroup>
               </React.Fragment>
             );
           }
@@ -319,7 +325,7 @@ class RegistrationPage extends React.Component {
                 key={field.name}
                 invalid={this.state.errors[stateVar] !== ''}
                 invalidMessage={field.errorMessages.required}
-                className="custom-control"
+                className="custom-control mb-0"
               >
                 <Input {...props} />
                 {beforeLink}
@@ -342,8 +348,9 @@ class RegistrationPage extends React.Component {
               key={field.name}
               invalid={this.state.errors[stateVar] !== ''}
               invalidMessage={field.errorMessages.required}
+              className="mb-0"
             >
-              <label htmlFor={field.name} className="h6 pt-3">{field.label} (required)</label>
+              <label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
               <Input {...props} />
             </ValidationFormGroup>
           );
@@ -357,7 +364,7 @@ class RegistrationPage extends React.Component {
   addExtraOptionalFields() {
     const fields = this.props.formData.fields.map((field) => {
       let options = null;
-      let cssClass = null;
+      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;
@@ -376,11 +383,11 @@ class RegistrationPage extends React.Component {
             props.options = options;
           }
           if (field.name === 'gender') {
-            cssClass = 'opt-inline-field';
+            cssClass += ' opt-inline-field';
           }
 
           if (field.name === 'year_of_birth') {
-            cssClass = 'opt-inline-field opt-year-field';
+            cssClass += ' opt-inline-field opt-year-field';
           }
 
           return (
@@ -389,7 +396,7 @@ class RegistrationPage extends React.Component {
               key={field.name}
               className={cssClass}
             >
-              <label htmlFor={field.name} className="h6 pt-3">
+              <label htmlFor={field.name} className="h6 pt-10">
                 {field.label} {this.props.intl.formatMessage(messages['logistration.register.optional.label'])}
               </label>
               <Input {...props} />
@@ -484,8 +491,9 @@ class RegistrationPage extends React.Component {
                   for="name"
                   invalid={this.state.errors.name !== ''}
                   invalidMessage={this.state.errors.name}
+                  className="mb-0"
                 >
-                  <label htmlFor="name" className="h6 pt-3">
+                  <label htmlFor="name" className="h6 pt-10">
                     {intl.formatMessage(messages['logistration.fullname.label'])}
                   </label>
                   <Input
@@ -503,8 +511,9 @@ class RegistrationPage extends React.Component {
                   for="username"
                   invalid={this.state.errors.username !== ''}
                   invalidMessage={this.state.errors.username}
+                  className="mb-0"
                 >
-                  <label htmlFor="username" className="h6 pt-3">
+                  <label htmlFor="username" className="h6 pt-10">
                     {intl.formatMessage(messages['logistration.username.label'])}
                   </label>
                   <Input
@@ -522,8 +531,9 @@ class RegistrationPage extends React.Component {
                   for="email"
                   invalid={this.state.errors.email !== ''}
                   invalidMessage={this.state.errors.email}
+                  className="mb-0"
                 >
-                  <label htmlFor="email" className="h6 pt-3">
+                  <label htmlFor="email" className="h6 pt-10">
                     {intl.formatMessage(messages['logistration.register.page.email.label'])}
                   </label>
                   <Input
@@ -542,8 +552,9 @@ class RegistrationPage extends React.Component {
                     for="password"
                     invalid={this.state.errors.password !== ''}
                     invalidMessage={this.state.errors.password}
+                    className="mb-0"
                   >
-                    <label htmlFor="password" className="h6 pt-3">
+                    <label htmlFor="password" className="h6 pt-10">
                       {intl.formatMessage(messages['logistration.password.label'])}
                     </label>
                     <Input
@@ -561,7 +572,7 @@ class RegistrationPage extends React.Component {
                 { this.addExtraRequiredFields() }
                 <ValidationFormGroup
                   for="optional"
-                  className="custom-control"
+                  className="custom-control pt-10 mb-0"
                 >
                   <Input
                     name="optional"
@@ -572,14 +583,14 @@ class RegistrationPage extends React.Component {
                     onChange={e => this.handleOnOptional(e)}
                     required
                   />
-                  <p role="presentation" id="additionalFields" onClick={e => this.handleOnOptional(e)}>
+                  <p role="presentation" id="additionalFields" className="mb-0" onClick={e => this.handleOnOptional(e)}>
                     {intl.formatMessage(messages['logistration.support.education.research'])}
                   </p>
                 </ValidationFormGroup>
                 { this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
                 <StatefulButton
                   type="button"
-                  className="btn-primary"
+                  className="btn-primary mt-10"
                   state={submitState}
                   labels={{
                     default: intl.formatMessage(messages['logistration.create.account.button']),
diff --git a/src/logistration/_style.scss b/src/logistration/_style.scss
index 30768ea3..9d7d23d8 100644
--- a/src/logistration/_style.scss
+++ b/src/logistration/_style.scss
@@ -236,10 +236,18 @@ $apple-focus-black: $apple-black;
   height: 90%;
 }
 
+.mt-10 {
+ margin-top: 10px;
+}
+
 .mt-20 {
   margin-top: 20px;
 }
 
+.pt-10 {
+  padding-top: 10px;
+}
+
 @media (min-width: 576px) {
   .reset-password-container {
     width: 420px;
diff --git a/src/logistration/tests/RegistrationPage.test.jsx b/src/logistration/tests/RegistrationPage.test.jsx
index 682e5c1e..c4ab9572 100644
--- a/src/logistration/tests/RegistrationPage.test.jsx
+++ b/src/logistration/tests/RegistrationPage.test.jsx
@@ -158,6 +158,20 @@ describe('./RegistrationPage.js', () => {
               options: [{ value: '', name: '--' }, { value: 'p', name: 'Doctorate' }],
               required: false,
             },
+            {
+              label: 'Year of birth.',
+              name: 'year_of_birth',
+              type: 'select',
+              options: [{ value: '', name: '--' }, { value: '2021', name: '2021' }],
+              required: false,
+            },
+            {
+              label: 'Gender.',
+              name: 'gender',
+              type: 'select',
+              options: [{ value: '', name: '--' }, { value: 'f', name: 'Female' }],
+              required: false,
+            },
           ],
         },
       },
@@ -169,6 +183,8 @@ describe('./RegistrationPage.js', () => {
     registrationPage.update();
     expect(registrationPage.find('textarea#goals').length).toEqual(1);
     expect(registrationPage.find('select#level_of_education').length).toEqual(1);
+    expect(registrationPage.find('select#year_of_birth').length).toEqual(1);
+    expect(registrationPage.find('select#gender').length).toEqual(1);
   });
 
   it('should dispatch fetchRegistrationForm on ComponentDidMount', () => {
diff --git a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 594227a4..a9c78d8d 100644
--- a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -35,10 +35,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
         className="mb-4 form-group"
       >
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="name"
           >
             Full Name (required)
@@ -57,10 +57,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="username"
           >
             Public Username (required)
@@ -79,10 +79,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="email"
           >
             Email (required)
@@ -101,7 +101,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           />
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control mb-0"
         >
           <input
             aria-describedby=""
@@ -131,7 +131,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
           </strong>
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control pt-10 mb-0"
         >
           <input
             aria-describedby=""
@@ -145,6 +145,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
             value={false}
           />
           <p
+            className="mb-0"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -155,7 +156,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-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -238,10 +239,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
         className="mb-4 form-group"
       >
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="name"
           >
             Full Name (required)
@@ -260,10 +261,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="username"
           >
             Public Username (required)
@@ -282,10 +283,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="email"
           >
             Email (required)
@@ -304,10 +305,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="password"
           >
             Password (required)
@@ -326,7 +327,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control mb-0"
         >
           <input
             aria-describedby=""
@@ -356,7 +357,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           </strong>
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control pt-10 mb-0"
         >
           <input
             aria-describedby=""
@@ -370,6 +371,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
             value={false}
           />
           <p
+            className="mb-0"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -380,7 +382,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-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -423,10 +425,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
         className="mb-4 form-group"
       >
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="name"
           >
             Full Name (required)
@@ -445,10 +447,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="username"
           >
             Public Username (required)
@@ -467,10 +469,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="email"
           >
             Email (required)
@@ -489,10 +491,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="password"
           >
             Password (required)
@@ -511,7 +513,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           />
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control mb-0"
         >
           <input
             aria-describedby=""
@@ -541,7 +543,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           </strong>
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control pt-10 mb-0"
         >
           <input
             aria-describedby=""
@@ -555,6 +557,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
             value={false}
           />
           <p
+            className="mb-0"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -565,7 +568,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-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -608,10 +611,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
         className="mb-4 form-group"
       >
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="name"
           >
             Full Name (required)
@@ -630,10 +633,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="username"
           >
             Public Username (required)
@@ -652,10 +655,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="email"
           >
             Email (required)
@@ -674,10 +677,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="password"
           >
             Password (required)
@@ -696,7 +699,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           />
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control mb-0"
         >
           <input
             aria-describedby=""
@@ -726,7 +729,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           </strong>
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control pt-10 mb-0"
         >
           <input
             aria-describedby=""
@@ -740,6 +743,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
             value={false}
           />
           <p
+            className="mb-0"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -750,7 +754,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 btn-primary disabled btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary mt-10 disabled btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -828,10 +832,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
         className="mb-4 form-group"
       >
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="name"
           >
             Full Name (required)
@@ -850,10 +854,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="username"
           >
             Public Username (required)
@@ -872,10 +876,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="email"
           >
             Email (required)
@@ -894,10 +898,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           />
         </div>
         <div
-          className="form-group"
+          className="form-group mb-0"
         >
           <label
-            className="h6 pt-3"
+            className="h6 pt-10"
             htmlFor="password"
           >
             Password (required)
@@ -916,7 +920,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           />
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control mb-0"
         >
           <input
             aria-describedby=""
@@ -946,7 +950,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           </strong>
         </div>
         <div
-          className="form-group custom-control"
+          className="form-group custom-control pt-10 mb-0"
         >
           <input
             aria-describedby=""
@@ -960,6 +964,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
             value={false}
           />
           <p
+            className="mb-0"
             id="additionalFields"
             onClick={[Function]}
             role="presentation"
@@ -970,7 +975,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-primary btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="button"