From f97fc23a4c5f12ded85fd4601cd4e5d67cf9611f Mon Sep 17 00:00:00 2001
From: Jonny <littlebigjonny06@gmail.com>
Date: Wed, 17 Apr 2019 16:30:00 +0200
Subject: [PATCH] Format the error messages for registering

---
 pages/register.js            | 10 +++-------
 static/css/errormessages.css | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 static/css/errormessages.css

diff --git a/pages/register.js b/pages/register.js
index 3395c3d..31fad19 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -21,9 +21,9 @@ import {
 }  from '../js/api';
 
 import '../static/everypage.css';
+import '../static/css/errormessages.css';
 
 export default class RegisterPage extends React.Component {
-
     render() {
         return (
             <div className="main generic-fullpage-bg">
@@ -42,7 +42,6 @@ export default class RegisterPage extends React.Component {
 }
 
 class Register extends React.Component {
-
     componentDidMount() {
         clearErrors();
     }
@@ -69,11 +68,9 @@ class RegisterErrorList extends React.Component {
         const { error, errorMessages } = this.props;
         if(error) {
             return (
-                <ul className='text-danger mt-3'>
+                <ul className="mt-3 error-box">
                     { errorMessages.map((message, index) => 
-                        <li key={index}>
-                            {message}
-                        </li>
+                        <li key={index}>{message}</li>
                     ) }
                 </ul>
             );
@@ -93,7 +90,6 @@ const VisibleRegisterErrorList = connect(
 )(RegisterErrorList);
 
 class RegisterForm extends React.Component {
-
     constructor(props) {
         super(props);
 
diff --git a/static/css/errormessages.css b/static/css/errormessages.css
new file mode 100644
index 0000000..d0babb6
--- /dev/null
+++ b/static/css/errormessages.css
@@ -0,0 +1,20 @@
+
+.error-box {
+    border: 2px solid #dc3545;
+    border-radius: 4px;
+
+    padding-right: 16px;
+    padding-left: 16px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.error-box > li {
+    color: #dc3545;
+    margin-right: 36px;
+    display: inline;
+}
+
+.error-box > li:last-child {
+    margin-right: 0px;
+}
\ No newline at end of file