fix: standarize form field UI

client/src/components/formHelpers/FormFields.js

@@ -6,11 +6,10 @@ import {
   Col,
   ControlLabel,
   FormControl,
+  FormGroup,
   HelpBlock
 } from '@freecodecamp/react-bootstrap';
 
-import './form-fields.css';
-
 const propTypes = {
   errors: PropTypes.objectOf(PropTypes.string),
   fields: PropTypes.objectOf(
@@ -48,15 +47,12 @@ function FormFields(props) {
           const key = kebabCase(name);
           const type = name in types ? types[name] : 'text';
           return (
-            <div className='inline-form-field' key={key}>
-              <Col sm={3} xs={12}>
+            <Col key={key} xs={12}>
+              <FormGroup>
                 {type === 'hidden' ? null : (
                   <ControlLabel htmlFor={key}>{startCase(name)}</ControlLabel>
                 )}
-              </Col>
-              <Col sm={9} xs={12}>
                 <FormControl
-                  bsSize='lg'
                   componentClass={type === 'textarea' ? type : 'input'}
                   id={key}
                   name={name}
@@ -72,8 +68,8 @@ function FormFields(props) {
                     <Alert bsStyle='danger'>{errors[name]}</Alert>
                   </HelpBlock>
                 ) : null}
-              </Col>
-            </div>
+              </FormGroup>
+            </Col>
           );
         })}
     </div>

client/src/components/formHelpers/__snapshots__/Form.test.js.snap

@@ -11,10 +11,10 @@ exports[`<DynamicForm /> snapshot 1`] = `
 >
   <div>
     <div
-      className="inline-form-field"
+      className="col-xs-12"
     >
       <div
-        className="col-sm-3 col-xs-12"
+        className="form-group"
       >
         <label
           className="control-label"
@@ -22,12 +22,8 @@ exports[`<DynamicForm /> snapshot 1`] = `
         >
           Name
         </label>
-      </div>
-      <div
-        className="col-sm-9 col-xs-12"
-      >
         <input
-          className="form-control input-lg"
+          className="form-control"
           id="name"
           name="name"
           onChange={[Function]}

client/src/components/formHelpers/form-fields.css

@@ -1,6 +0,0 @@
-.inline-form-field {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}