From 9708c2e9b196d4c928b4bf908fbf0370a5e30936 Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Tue, 29 Jun 2021 15:54:04 +0500
Subject: [PATCH] fix: country field bottom margin

---
 src/redesign/_style.scss                     | 7 -------
 src/redesign/common-components/FormGroup.jsx | 5 ++++-
 src/redesign/register/CountryDropdown.jsx    | 3 ++-
 src/redesign/register/RegistrationPage.jsx   | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/redesign/_style.scss b/src/redesign/_style.scss
index 67a22b78..cf3e2e43 100644
--- a/src/redesign/_style.scss
+++ b/src/redesign/_style.scss
@@ -622,13 +622,6 @@ select.form-control {
     right: 0;
     position: relative;
   }
-  .mt-small {
-    margin-top: 3rem !important;
-  }
-}
-
-.-mt-4 {
-    margin-top: -1.4rem;
 }
 
 .alert .alert-icon {
diff --git a/src/redesign/common-components/FormGroup.jsx b/src/redesign/common-components/FormGroup.jsx
index 9ad410c0..fbbb5cbd 100644
--- a/src/redesign/common-components/FormGroup.jsx
+++ b/src/redesign/common-components/FormGroup.jsx
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {
   const [hasFocus, setHasFocus] = useState(false);
+  const className = props.className || 'mb-4';
 
   const handleFocus = (e) => {
     setHasFocus(true);
@@ -21,7 +22,7 @@ const FormGroup = (props) => {
   };
 
   return (
-    <Form.Group controlId={props.name} className="mb-4" isInvalid={props.errorMessage !== ''}>
+    <Form.Group controlId={props.name} className={className} isInvalid={props.errorMessage !== ''}>
       <Form.Control
         as={props.as}
         type={props.type}
@@ -74,6 +75,7 @@ FormGroup.defaultProps = {
   trailingElement: null,
   type: 'text',
   children: null,
+  className: '',
 };
 
 FormGroup.propTypes = {
@@ -93,6 +95,7 @@ FormGroup.propTypes = {
   type: PropTypes.string,
   value: PropTypes.string.isRequired,
   children: PropTypes.element,
+  className: PropTypes.string,
 };
 
 export default FormGroup;
diff --git a/src/redesign/register/CountryDropdown.jsx b/src/redesign/register/CountryDropdown.jsx
index 94bd816a..8a8a4b09 100644
--- a/src/redesign/register/CountryDropdown.jsx
+++ b/src/redesign/register/CountryDropdown.jsx
@@ -181,6 +181,7 @@ class CountryDropdown extends React.Component {
           as="input"
           name={this.props.name}
           autoComplete="off"
+          className="mb-0"
           floatingLabel={this.props.floatingLabel}
           trailingElement={this.state.icon}
           handleChange={this.handleOnChange}
@@ -190,7 +191,7 @@ class CountryDropdown extends React.Component {
           value={this.state.displayValue}
           errorMessage={this.state.errorMessage}
         />
-        <div className="dropdown-container -mt-4">
+        <div className="dropdown-container">
           { this.state.dropDownItems?.length > 0 ? this.state.dropDownItems : null }
         </div>
       </div>
diff --git a/src/redesign/register/RegistrationPage.jsx b/src/redesign/register/RegistrationPage.jsx
index fd50e040..0af5946e 100644
--- a/src/redesign/register/RegistrationPage.jsx
+++ b/src/redesign/register/RegistrationPage.jsx
@@ -594,7 +594,7 @@ class RegistrationPage extends React.Component {
               handleChange={(value) => this.setState({ country: value })}
               errorCode={this.state.errorCode}
             />
-            <div id="honor-code" className="micro text-muted mt-small">
+            <div id="honor-code" className="micro text-muted mt-4">
               <FormattedMessage
                 id="register.page.terms.of.service.and.honor.code"
                 defaultMessage="By creating an account, you agree to the {tosAndHonorCode} and you acknowledge that {platformName} and each