Various fixes to appease CodeClimate check

Author: kylemh

src/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'font-awesome/css/font-awesome.css';
 import App from './App';
+import './normalize.css';
 import './index.css';
 import './index.global.css';
-import './normalize.css';
 
 ReactDOM.render(
   <App />,

src/normalize.css

@@ -271,14 +271,15 @@ select { /* 1 */
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Correct the inability to style clickable types in iOS, Firefox, and Safari.
  */
 
 button,
 html [type="button"], /* 1 */
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button; /* 2 */
+  -moz-appearance: button;
 }
 
 /**
@@ -367,31 +368,34 @@ textarea {
 }
 
 /**
- * 1. Correct the odd appearance in Chrome and Safari.
+ * 1. Correct the odd appearance in Chrome, Firefox, and Safari.
  * 2. Correct the outline style in Safari.
  */
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
+  -moz-appearance: textfield;
   outline-offset: -2px; /* 2 */
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding and cancel buttons in Chrome, Firefox, and Safari on macOS.
  */
 
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 1. Correct the inability to style clickable types in iOS, Firefox, and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
+  -moz-appearance: button;
   font: inherit; /* 2 */
 }
 

src/scenes/home/codeSchools/approvedSchools/approvedSchools.js

@@ -52,6 +52,7 @@ class ApprovedSchools extends Component {
 
     return (
       <Section
+        id="approvedSchools"
         title="VA-Approved Schools"
         headingLines={false}
         margin

src/scenes/home/codeSchools/codeSchools.js

@@ -50,24 +50,24 @@ class CodeSchools extends Component {
 
           <div className={styles.filterButtonDiv}>
             <LinkButton
+              link="#approvedSchools"
               text="Code Schools with VA Approval"
               theme="blue"
-              link="#schoolsByApproval"
             />
             <LinkButton
+              link="#partnerSchools"
               text="Partner Schools with Scholarships"
               theme="blue"
-              link="#schoolsByScholarship"
             />
             <LinkButton
+              link="#onlineSchools"
               text="Online Schools"
               theme="blue"
-              link="#onlineSchools"
             />
             <LinkButton
+              link="#schoolsByState"
               text="Search by State"
               theme="blue"
-              link="#schoolsByState"
             />
           </div>
         </Section>

src/scenes/home/codeSchools/onlineSchools/onlineSchools.css

@@ -13,7 +13,7 @@
   padding: 2.5% 0 2.5% 0;
 }
 
-.moocs h3 {
+.moocs > h3 {
   text-align: center;
   font-size: 1.8rem;
 }
@@ -30,6 +30,6 @@
 }
 
 .boxShadow {
-  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }

src/scenes/home/codeSchools/partnerSchools/partnerSchools.js

@@ -15,7 +15,7 @@ class PartnerSchools extends Component {
   render() {
     return (
       <Section
-        id="schoolsByScholarship"
+        id="partnerSchools"
         title="Partnered Schools"
         theme="white"
         headingLines={false}

src/shared/components/accordian/accordian.css

@@ -1,3 +1,3 @@
 .accordian {
-
+  border: #555 solid;
 }

src/shared/components/accordian/accordianItem/accordianItem.css

@@ -1,9 +1,9 @@
 .accordianItem {
-
+  border: #888 black;
 }
 
 .accordianItemHeading {
-  font-size:26px;
-  padding:20px;
-  text-align:center;
+  font-size: 26px;
+  padding: 20px;
+  text-align: center;
 }

src/shared/components/form/formInput/formInput.css

@@ -1,3 +1,7 @@
 .formInput {
   composes: formControl from '../form.css';
-}
+}
+
+.formInput > input::placeholder {
+  color: #999;
+}

src/shared/components/form/formInput/formInput.js

@@ -35,14 +35,15 @@ class FormInput extends Component {
     return (
       <div className={styles.formInput}>
         {this.props.label && <Label htmlFor={this.props.id}>{this.props.label}</Label>}
+
         <input
           id={this.props.id}
           type={this.props.inputType}
           value={this.state.text}
           placeholder={this.props.placeholder}
           onChange={this.handleChange}
         />
-        { !this.state.isValid && <span>{this.props.validationErrorMessage}</span>}
+        {!this.state.isValid && <span>{this.props.validationErrorMessage}</span>}
       </div>
     );
   }
@@ -66,10 +67,7 @@ FormInput.defaultProps = {
   validationErrorMessage: null,
   validateFunc: null,
   onChange: null,
-  intputType: "text"
+  inputType: "text"
 };
 
-// TODO: Add prop for icon placement on left-side of input bar
-// TODO: Decrease opacity of placeholder text
-
 export default FormInput;