Added error element styles and proper position

zero-to-mastery · Dec 31, 2019 · ce85812 · ce85812
1 parent 2e5f96d
commit ce85812
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/src/pages/Register/RegisterPage/Register.module.scss b/src/pages/Register/RegisterPage/Register.module.scss
@@ -79,14 +79,15 @@
             }
 
             .errorLabel {
-                padding-top: 3%;
-                width: 100%;
-                font-size: 1.2rem;
-                line-height: 160%;
-                letter-spacing: 0.1em;
-                color: red;
-                text-align: center;
-                padding-bottom: 5%;
+                padding: .75rem 1rem;
+                width: 90%;
+                background-color: rgba(red, .3);
+                color: darken(red, 10);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: .8rem;
+                border-radius: 4px;
             }
 
             .showpassword {

diff --git a/src/pages/Register/RegisterPage/RegisterPage.jsx b/src/pages/Register/RegisterPage/RegisterPage.jsx
@@ -64,6 +64,7 @@ function RegisterPage({ setName, setEmail, setPassword, onFormSubmit, span }) {
             <div className={classes.coltwo}>
                 <form className={classes.signupform} onSubmit={onFormSubmit}>
                     <h1 className={classes.signupheading}>Sign Up</h1>
+                    {span && <Span className={classes.errorLabel} content={span} />}
                     <div className={classes.name}>
                         <FormInput 
                             labelText='Name'
@@ -111,9 +112,6 @@ function RegisterPage({ setName, setEmail, setPassword, onFormSubmit, span }) {
                         </button>
                     </div>
                     <h2>Already a member?&nbsp;&nbsp;<Link to="/login">Sign In</Link></h2>
-                    {span && (
-                        <Span className={classes.errorLabel} content={span} />
-                    )}
                 </form>
             </div>
         </div>