remove global scss styles from modular scss files (it's cool to rhyme your commit messages...) (#138)

Author: mattwills8

client/components/CreateProjectForm/CreateProjectForm.js

@@ -36,7 +36,7 @@ class CreateProjectForm extends Component {
     const { handleSubmit } = this.props
     return (
       <form id="createProjectForm" className={styles.form} onSubmit={handleSubmit(this.createProject.bind(this))}>
-        <h1>Create New Project</h1>
+        <h1 className={styles.formHeading}>Create New Project</h1>
 
         <Field name="image"
           component={this.renderImageUpload} />

client/components/CreateProjectForm/CreateProjectForm.scss

@@ -5,7 +5,7 @@
   @extend %form;
 }
 
-h1 {
+.formHeading {
   grid-column: 1 / 1;
   grid-row: 1;
 }

client/components/ForgotPasswordForm/ForgotPasswordForm.scss

@@ -5,12 +5,12 @@
   @extend %form;
 }
 
-h1 {
+.h1 {
   grid-column: 1 / 1;
   grid-row: 1;
 }
 
-h3 {
+.h3 {
   grid-column: 1 / 1;
   grid-row: 2;
 }

client/components/ForgotPasswordForm/NewPasswordForm.js

@@ -32,8 +32,8 @@ class NewPasswordForm extends Component {
 
     return (
       <form className={styles.form} onSubmit={handleSubmit}>
-        <h1>New Password</h1>
-        <h3>Set your new password</h3>
+        <h1 className={styles.h1}>New Password</h1>
+        <h3 className={styles.h3}>Set your new password</h3>
         <Field
           name="password"
           value={this.props.password}

client/components/ForgotPasswordForm/SendVerificationCodeForm.js

@@ -15,8 +15,8 @@ const SendVerificationCodeForm = props => {
   const {handleSubmit} = props
   return (
     <form className={styles.form} onSubmit={handleSubmit}>
-      <h1>Forgot Password?</h1>
-      <h3>{"Let's get you a new one!"}</h3>
+      <h1 className={styles.h1}>Forgot Password?</h1>
+      <h3 className={styles.h3}>{"Let's get you a new one!"}</h3>
 
       <Field value={props.email}
         name="email"

client/components/ForgotPasswordForm/ValidateVerificationCodeForm.js

@@ -16,8 +16,8 @@ const ValidateVerificationCodeForm = props => {
   const {handleSubmit} = props
   return (
     <form className={styles.form} onSubmit={handleSubmit}>
-      <h1>Forgot Password?</h1>
-      <h3>{"Let's validate your code!"}</h3>
+      <h1 className={styles.h1}>Forgot Password?</h1>
+      <h3 className={styles.h3}>{"Let's validate your code!"}</h3>
 
       <Field
         value={props.code}

client/components/LoginForm/LoginForm.js

@@ -46,7 +46,7 @@ class LoginForm extends Component {
 
     return (
       <form id="loginForm" className={styles.form} onSubmit={handleSubmit(this.validateEmailAndPassword.bind(this))}>
-        <h1>Login</h1>
+        <h1 className={styles.h1}>Login</h1>
 
         <Field
           name="email"

client/components/LoginForm/LoginForm.scss

@@ -5,7 +5,7 @@
   @extend %form;
 }
 
-h1 {
+.h1 {
   grid-column: 1 / 1;
   grid-row: 1;
 }

client/components/SignupForm/SignupForm.js

@@ -85,7 +85,7 @@ function SignupForm (props) {
 
   return (
     <form className={ styles.form } onSubmit={ handleSubmit(signup) }>
-      <h1>Signup</h1>
+      <h1 className={styles.h1}>Signup</h1>
 
       <Field name="email"
         component={ EmailField }

client/components/SignupForm/SignupForm.scss

@@ -3,17 +3,17 @@
 
 .form {
   @extend %form;
+
+  input:focus {
+    outline: none;
+  }
 }
 
-h1 {
+.h1 {
   grid-column: 1 / 1;
   grid-row: 1;
 }
 
-input:focus {
-  outline: none;
-}
-
 .inputEmailContainer {
   position: relative;
   grid-column: 1 / 1;