Adding UI functionality to the login view.

app/assets/css/launcher.css

@@ -223,6 +223,30 @@ p {
     text-align: right;
     position: absolute;
     top: 7px;
+    opacity: 0;
+    transition: 0.25s ease;
+}
+
+.shake {
+    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+@keyframes shake {
+    10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+    
+    20%, 80% {
+        transform: translate3d(2px, 0, 0);
+    }
+  
+    30%, 50%, 70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+  
+    40%, 60% {
+        transform: translate3d(4px, 0, 0);
+    }
 }
 
 /* Login text input styles. */
@@ -245,6 +269,9 @@ p {
 .loginField:focus {
     outline: none;
 }
+.loginField:disabled {
+    color: rgba(255, 255, 255, 0.50);
+}
 .loginField::-webkit-input-placeholder {
     color: rgba(255, 255, 255, 0.75);
     font-size: 10px;
@@ -321,6 +348,9 @@ p {
 #loginButton:active #loginSVG {
     -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
 }
+#loginButton:disabled #loginSVG .arrowLine {
+    stroke: rgba(255, 255, 255, 0.75);
+}
 
 #loginButtonContent {
     display: flex;
@@ -328,10 +358,10 @@ p {
 }
 
 #loginButton .circle-loader,
-#loginButton:disabled #loginSVG {
+#loginButton[loading] #loginSVG {
     display: none;
 }
-#loginButton:disabled .circle-loader,
+#loginButton[loading] .circle-loader,
 #loginButton #loginSVG {
     display: initial;
 }