Patch for Issue 2868/2775 (MSFT-204/59) Fix PR 248/278

Author: Nkumar

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

@@ -1,4 +1,5 @@
 @import 'topcoder/tc-includes';
+@import "../tc-ui-variables.scss";
 
 // Toggle password with password tips directive
 toggle-password-with-tips {
@@ -20,7 +21,7 @@ toggle-password-with-tips {
 
   .input-btn .input:focus ~ .tc-btn {
     color: #FFFFFF;
-    background: #59A7FF;
+    background: $tc-dark-blue-90;
   }
 
   .input-btn .tc-btn,

app/styles/tc-ui.scss

@@ -93,6 +93,10 @@
     font-family: inherit;
     font-weight: inherit;
   }
+  
+  .tc-btn.show-password-btn:focus {
+    outline: 2px solid $tc-dark-blue-70;
+  }
 
   .tc-btn.loading:enabled, .tc-btn:focus:not(:disabled) {
     background: $tc-white;
@@ -356,4 +360,4 @@
     font-size: 15px;
     line-height: 20px;
   }
-}
+}

app/styles/tc/register.scss

@@ -1,4 +1,5 @@
 @import 'topcoder/tc-includes';
+@import '../tc-ui-variables.scss';
 
 .register-container {
   form {
@@ -8,6 +9,15 @@
     align-items: center;
     button {
       margin-top: 0;
+      background-color: $tc-dark-blue-90;
+      &:focus {
+        outline: 3px solid $tc-dark-blue-70;
+      }
+      &.disabled {
+        background-color: $tc-gray-60 !important;
+        color: $tc-white-cream;
+        opacity: 1;
+      }
     }
 
     @media (min-width: 768px) {

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

@@ -18,4 +18,4 @@
     class="input input-btn {{ vm.hasPasswordError() ? 'error' : ''}}"
     required)
 
-  <button type="button" id="toggleInputTypeBtn" class="tc-btn tc-btn-sm" ng-click="vm.toggleInputType()">{{ vm.toggleShowLabel }}</button>
+  <button type="button" id="toggleInputTypeBtn" tabIndex="0"  class="tc-btn tc-btn-sm show-password-btn" ng-click="vm.toggleInputType()">{{ vm.toggleShowLabel }}</button>

app/views/tc/register.jade

@@ -114,8 +114,8 @@
       section.terms
         p By clicking "Join" you agree to Topcoder's #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy]
 
-      button.tc-btn.tc-btn-large(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-show="vm.isValidCountry") Join
-      button.tc-btn.tc-btn-large.disabled(type="submit", ng-show="!vm.isValidCountry", disabled="disabled") Join
+      button.tc-btn.tc-btn-large(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-show="vm.isValidCountry", tabIndex="0") Join
+      button.tc-btn.tc-btn-large.disabled(type="submit", ng-show="!vm.isValidCountry", disabled="disabled", tabIndex="0") Join
 
   div(role="region" aria-label="Register With")
     section.login-options(ng-if="!vm.ssoUser")