Improving styles for error spans.

app/assets/css/launcher.css

@@ -197,18 +197,13 @@ p {
     letter-spacing: 1px;
 }
 
-/* Div to display any login errors. */
-#loginError {
-    font-family: 'Avenir Book';
-    color: #fff;
-    font-size: 12px;
-    background: #9b1313;
-    border: 0.5px solid white;
-    padding: 2px 0px;
-    width: 100%;
-    text-align: center;
-    font-weight: bold;
-    margin: 8px 0px;
+/* Container to organize login field elements. */
+.loginFieldContainer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 /* SVG icons on the login view. */
@@ -218,6 +213,18 @@ p {
     width: 20px;
 }
 
+/* Span which displays errors related to login field content. */
+.loginErrorSpan {
+    font-family: 'Avenir Medium';
+    font-weight: bold;
+    font-size: 8px;
+    color: #ff1b0c;
+    width: 100%;
+    text-align: right;
+    position: absolute;
+    top: 7px;
+}
+
 /* Login text input styles. */
 .loginField {
     font-family: 'Avenir Book';
@@ -225,7 +232,7 @@ p {
     border-width: 1.5px 0px 0px 0px;
     border-style: solid;
     width: 250px;
-    /*margin-bottom: 20px;*/
+    margin-bottom: 20px;
     border-color: #fff;
     color: rgba(255, 255, 255, 0.75);
     font-weight: bold;
@@ -254,16 +261,6 @@ p {
     margin-bottom: 13px;
 }
 
-.loginErrorSpan {
-    font-family: 'Avenir Medium';
-    font-weight: bold;
-    font-size: 8px;
-    color: red;
-    width: 100%;
-    text-align: right;
-    margin-bottom: 15px;
-}
-
 /* Container which contains the forgot and remember options. */
 #loginOptions {
     display: flex;

app/login.ejs

@@ -3,20 +3,24 @@
         <div id='loginForm'>
             <img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
             <span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
-            <svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
-                <g>
-                    <path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
-                </g>
-            </svg>
-            <input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/>
-            <span class="loginErrorSpan">* Invalid Username</span>
-            <svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43">
-                <g>
-                    <path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
-                </g>
-            </svg>
-            <input id="loginPassword" class="loginField" type="password" placeholder="PASSWORD"/>
-            <span class="loginErrorSpan">* Required</span>
+            <div class="loginFieldContainer">
+                <svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
+                    <g>
+                        <path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
+                    </g>
+                </svg>
+                <span class="loginErrorSpan" id="loginEmailError">* Invalid Email</span>
+                <input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/>
+            </div>
+            <div class="loginFieldContainer">
+                <svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43">
+                    <g>
+                        <path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
+                    </g>
+                </svg>
+                <span class="loginErrorSpan" id="loginPasswordError">* Required</span>
+                <input id="loginPassword" class="loginField" type="password" placeholder="PASSWORD"/>
+            </div>
             <div id="loginOptions">
                 <span class="loginSpanDim">
                     <a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">forgot password?</a>