Issue 3232 | Add labels

app/styles/directives/toggle-password.directive.scss

@@ -30,7 +30,7 @@ toggle-password {
   .input-btn .tc-btn:active {
     position: absolute;
     right: 1px;
-    top: 1px;
+    top: 21px;
     background: $tc-white;
     border: 0;
     border-left: 1px solid $tc-gray-30;
@@ -46,11 +46,4 @@ toggle-password {
     margin-top: 0px;
   }
 
-  label {
-    display: flex !important;
-    line-height: 20px !important;
-    position: absolute;
-    top: 10px;
-    right: 0px;
-  }
 }

app/styles/tc/login.scss

@@ -2,6 +2,19 @@
 @import "../tc-ui-variables";
 
 .login-container {
+  label {
+    @include font-with-weight('Sofia Pro', 500);
+    margin: 5px 0;
+    display: block;
+    margin-bottom: 5px;
+    text-align: left;
+    color: $tc-gray-80; 
+    font-size: 10px;
+    line-height: 10px;
+    height: initial;
+    text-align: left;
+  }
+
   form {
     display: flex;
     flex-flow: column wrap;

app/views/directives/toggle-password.directive.jade

@@ -1,4 +1,5 @@
 .input-btn
+  label(for="current-password-input") PASSWORD
   input#current-password-input(
     ng-model="vm.currentPassword",
     ng-model-options="{allowInvalid: true}",

app/views/tc/login.jade

@@ -21,7 +21,8 @@
       p.form-error(ng-message="SOCIAL_LOGIN_ERROR" role="alert") User with that profile is not registered.
 
     div.validation-bar(ng-class="{'error-bar': vm.loginErrors.USERNAME_NONEXISTANT}")
-      input(ng-model="vm.username", placeholder="Username or Email", type="text", required, aria-invalid="false") 
+      label(for="username") USERNAME OR EMAIL
+      input(ng-model="vm.username", id="username", placeholder="Username or Email", type="text", required, aria-invalid="false") 
 
     toggle-password