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 key={key} xs={12}>
-              <Col sm={3} 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>
+              </FormGroup>
-            </div>
+            </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;
-}

client/src/templates/Challenges/backend/Show.js

@@ -161,42 +161,35 @@ export class BackEnd extends Component {
       <LearnLayout>
         <Grid>
           <Row>
-            <Col xs={12}>
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12} >
               <Spacer />
-              <div>
+              <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
-                <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
+              <ChallengeDescription
-                <ChallengeDescription
+                description={description}
-                  description={description}
+                instructions={instructions}
-                  instructions={instructions}
+              />
-                />
+              <Form
-              </div>
+                buttonText={buttonCopy + '(Ctrl + Enter)'}
-              <div>
+                formFields={formFields}
-                <Form
+                id={backendNS}
-                  buttonText={buttonCopy + '(Ctrl + Enter)'}
+                options={options}
-                  formFields={formFields}
+                submit={executeChallenge}
-                  id={backendNS}
+              />
-                  options={options}
+              <ProjectToolPanel guideUrl={createGuideUrl(slug)} />
-                  submit={executeChallenge}
+              <br />
-                />
+              <Output
-                <ProjectToolPanel guideUrl={createGuideUrl(slug)} />
+                defaultOutput={`/**
-              </div>
+*
-              <div>
+* Test output will go here
-                <br />
+*
-                <Output
+*
-                  defaultOutput={`/**
+*/`}
-  *
+                dimensions={this.state}
-  * Test output will go here
+                height={150}
-  *
+                output={output}
-  *
+              />
-  */`}
+              <TestSuite tests={tests} />
-                  dimensions={this.state}
+
-                  height={150}
-                  output={output}
-                />
-              </div>
-              <div>
-                <TestSuite tests={tests} />
-              </div>
               <Spacer />
             </Col>
             <CompletionModal />