#76 styled error message into ul on signup page

Author: billy-le

src/scenes/home/signup/signup.css

@@ -32,6 +32,21 @@
   width: 100%;
 }
 
+.errorList {
+  align-self: center;
+  color: #ff665A;
+  font-size: 1.5rem;
+  font-weight: 800;
+  list-style-position: inside;
+  margin-bottom: 12px;
+  margin-top: 12px;
+  padding: 0;
+}
+
+.errorMessage {
+  padding-left: 20px;
+}
+
 @media screen and (max-width: 599px) {
   .signupForm {
     max-width: 298px;

src/scenes/home/signup/signup.js

@@ -125,7 +125,9 @@ class SignUp extends Component {
             id="passwordConfirm" placeholder="Confirm Password"
             onChange={this.onConfirmPasswordChange} validateFunc={this.validatePasswordConfirm}
           />
-          {this.state.error && <span>There was an error joining Operation Code: {this.state.error}</span>}
+          {this.state.error ? <ul className={styles.errorList}>There was an error joining Operation Code:
+            <li className={styles.errorMessage}>{this.state.error}</li>
+          </ul> : null }
           {this.state.success && <Redirect to="/thanks" />}
           <FormButton className={styles.joinButton} text="Join" onClick={this.handleOnClick} theme="red" />
         </Form>