fix: country field bottom margin

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 {

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;

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>

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