Login / Register style fixes (#23)

- Add error message styling.
- Remove horizontal scrolling.

Author: ram2091999

src/app/components/Authentication/Login.tsx

@@ -59,7 +59,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
     }
 
     return (
-      <div className={classnames(styles.root)}>
+      <div className={classnames(styles.loginRoot)}>
         <div className={classnames(styles.welcomeBack)}>
           <h1> Welcome! </h1>
           <p> Log in to access your dashboard and profile </p>
@@ -132,7 +132,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
                   </div>
                 </div>
               </div>
-              <div className="form-row">
+              <div className={classnames('form-row', styles['error-row'])}>
                 <div
                   className={
                     !errorMessage
@@ -144,7 +144,8 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
                       : classnames(
                           'col text-center mt -0 mb-2 errorMessage',
                           styles['register-error-active'],
-                          registerStyles.errorMessage,
+                          registerStyles.errorMessageLogin,
+                          styles['login-error-active'],
                         )
                   }
                 >

src/app/components/Authentication/Register.tsx

@@ -94,7 +94,7 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
     }
 
     return (
-      <div className={classnames(authStyles.root)}>
+      <div className={classnames(authStyles.registerRoot)}>
         <div className={classnames(authStyles.registerMessage)}>
           <h1 className={classnames(authStyles['register-h1'])}> Register to CodeCharacter! </h1>
           <p> Register now and code your way through!! </p>
@@ -154,7 +154,7 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
                         required
                       />
                       <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                        Enter a valid username.It should have a minimum of 5 characters and must be
+                        Enter a valid username. It should have a minimum of 5 characters and must be
                         alphanumeric
                       </div>
                     </div>

src/app/styles/Authentication.module.css

@@ -8,6 +8,14 @@
   z-index: 10;
 }
 
+.loginRoot,.registerRoot {
+  max-width: 100%;
+  overflow-x: hidden;
+  user-select: none;
+  text-align: center;
+}
+
+
 .Authentication .customBtn:focus,
 .buttonPanel:focus {
   outline: none;
@@ -160,25 +168,29 @@
   padding: 9px;
   margin-top: 0;
   text-align: left;
+  color: #7a0825;
 }
 .register-error {
   background-color: #fee5d4;
   padding: 9px;
   margin-top: -20px;
   margin-bottom: 10px;
+  text-align: left;
+  color: #7a0825;
 }
 
 .register-error-inactive {
   display: none;
 }
 .register-error-active {
   background-color: #fee5d4;
-  padding: 9px;
+  padding: 9px !important;
   display: block;
   width: 100%;
   margin: auto;
   margin-top: 10px;
-  color: red;
+  color: #7a0825 !important;
+  text-align: left !important;
 }
 
 .login-label {
@@ -188,11 +200,6 @@
   font-family: 'Karla', sans-serif;
 }
 
-.root {
-  user-select: none;
-  text-align: center;
-}
-
 .welcomeBack {
   margin-top: 57px;
   margin-bottom: 10px;
@@ -457,3 +464,14 @@
 .main-register-form {
   margin-top: 20px;
 }
+
+.error-row {
+  width: 100%;
+  margin-right: 0;
+  margin-left: -3px;
+}
+
+.login-error-active {
+  position: relative;
+  left: 1%;
+}

src/app/styles/Register.module.css

@@ -16,9 +16,17 @@
 
 .errorMessage {
   width: 100%;
-  margin-top: 0.25rem;
+  margin-bottom: 0 !important;
   font-size: 80%;
-  color: #dc3545;
+  color: #7a0825;
+  text-align: left !important;
+}
+
+.errorMessageLogin {
+  width: 100%;
+  margin-top: 1.7rem;
+  font-size: 80%;
+  color: #7a0825;
 }
 
 .checkbox-input {