Field refactor,

Merge branch 'dev' of https://github.com/appirio-tech/topcoder-app into forms-refactor

# By Tom Ladendorf
# Via Tom Ladendorf (1) and Victor George (1)
* 'dev' of https://github.com/appirio-tech/topcoder-app:
  disabled button change

Author: Victor George

app/account/register/register.jade

@@ -14,13 +14,13 @@
     p.form-error(ng-show="vm.errMsg") {{vm.errMsg}}
 
     .first-last-names
-      input-sticky-placeholder(sticky-placeholder="First", ng-model="vm.firstname")
+      input-sticky-placeholder.tc-input(sticky-placeholder="First", ng-model="vm.firstname")
         input(ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
 
-      input-sticky-placeholder(sticky-placeholder="Last", ng-model="vm.lastname")
+      input-sticky-placeholder.tc-input(sticky-placeholder="Last", ng-model="vm.lastname")
         input(ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
 
-    .country-dropdown
+    .country-dropdown.tc-input
       angucomplete-alt(
         input-name="country",
         placeholder="Country",
@@ -46,6 +46,7 @@
         input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
 
       .tips.username-tips(ng-show="vm.usernameTips")
+        .arrow
         h3 Username Tips:
 
         p Your username will be public
@@ -67,6 +68,7 @@
         input(ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
+        .arrow
         h3 Email Tips:
 
         p Your email address will be private and not shared with anyone.
@@ -84,9 +86,10 @@
       toggle-password-with-tips(ng-if="!vm.isSocialRegistration")
 
       .tips.password-tips(ng-show="vm.passwordFocus")
-        h3 Password Tips:
+        .arrow
+        //- h3 Password Tips:
 
-        p Your password must have:
+        H3 Your password must have:
 
         p(ng-class="{ 'has-length-between-range': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.minlength && !vm.registerForm.password.$error.maxlength && !vm.registerForm.password.$error.required) }") At least 8 characters
 
@@ -97,7 +100,7 @@
     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") Join
+    button.tc-btn.tc-btn-large.tc-btn-wide(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid") Join
 
   section.login-options
     p.tc-separator
@@ -116,5 +119,4 @@
 
 .join-topcoder
   span Have an account?  
-
     a(ui-sref="login(vm.$stateParams)") Log in

assets/css/account/account.scss

@@ -12,8 +12,9 @@
   text-align: center;
   justify-content: flex-start;
   @include source-sans-regular;
-  background-color: white;
+  background-color: $white;
   border-radius: 3px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
 
   header {
     height: 70px;
@@ -50,8 +51,11 @@
   h1 {
     margin-top: 39px;
     margin-bottom: 40px;
+    @media (max-width: 767px) {
+      margin: 30px auto;
+    }
     @include ui-h1;
-    color: #3D3D3D;
+    color: $gray-darkest;
     line-height: 30px;
     font-size: 20px;
     @include sofia-pro-light;
@@ -60,16 +64,41 @@
     text-transform: uppercase;
   }
 
+  // registration sizes, remove
+  input[name="firstname"], input[name="lastname"] {
+    width: 185px;
+    padding-right: 45px;
+  }
+
+  input[name="username"], input[name="email"] {
+    padding-right: 85px;
+  }
+
+  input[type="text"],
+  toggle-password {
+    width: 380px;
+  }
+
   input:not([type="checkbox"]) {
     width: 300px;
   }
 
-  .tips {
-    left: 380px;
+  toggle-password {
+    input#current-password-input {
+      width: 300px;
+      height: 20px;
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
   }
 
-  .email-tips {
-    left: 380px;
+  .tips,
+  .email-tips,
+  .password-tips {
+    @media screen and (min-width: 915px) {
+      left: 395px;
+    }   
   }
 
   button {
@@ -216,9 +245,9 @@
   flex-flow: row wrap;
   margin-top: 30px;
   justify-content: center;  
-  font-size: 12px;
   text-transform: uppercase;
-  font-size: 12px;
+  font-size: $label-small;
+  @include sofia-pro-medium;
 
   a {
     display: inline;

assets/css/account/login.scss

@@ -2,13 +2,6 @@
 @import '../partials/combined';
 
 .login-container {
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-
-  h1 {
-      @media (max-width: 767px) {
-        margin: 30px auto;
-      }
-  }
 
   form {
     display: flex;

assets/css/directives/input-sticky-placeholder.scss

@@ -1,17 +1,17 @@
 @import 'topcoder-includes';
 @import '../partials/combined';
 
-.input-sticky-placeholder-container {
-  position: relative;
+// .input-sticky-placeholder-container {
+//   position: relative;
 
-  span.placeholder-text {
-    position: absolute;
-    top: 3px;
-    right: 10px;
-    @include sofia-pro-regular;
-    font-size: 10px;
-    line-height: 40px;
-    text-transform: uppercase;
-    color: $accent-gray;
-  }
-}
+//   span.placeholder-text {
+//     position: absolute;
+//     top: 3px;
+//     right: 10px;
+//     @include sofia-pro-regular;
+//     font-size: 10px;
+//     line-height: 40px;
+//     text-transform: uppercase;
+//     color: $accent-gray;
+//   }
+// }

assets/css/directives/toggle-password-with-tips.scss

@@ -8,33 +8,11 @@ toggle-password-with-tips {
   align-items: center;
   justify-content: space-between;
 
-  height: 40px;
-  width: 300px;
-  margin-bottom: 10px;
-  padding-left: 15px;
-  padding-right: 10px;
-  border: 0;
-
-  @include source-sans-regular;
-  font-size: 16px;
-  background-color: $white;
-  color: #231F20;
 
   input#password-input {
     width: 155px;
     margin-bottom: 0;
     padding-left: 0;
     outline: 0;
   }
-
-  label {
-    text-transform: uppercase;
-    font-size: 9.8px;
-    color: #808285;
-
-    input[type="checkbox"] {
-      width: 15px;
-      margin: 0;
-    }
-  }
 }

assets/css/directives/toggle-password.scss

@@ -8,33 +8,11 @@ toggle-password {
   align-items: center;
   justify-content: space-between;
 
-  height: 40px;
-  width: 300px;
-  margin-bottom: 10px;
-  padding-left: 15px;
-  padding-right: 10px;
-  border: 0;
-
-  @include source-sans-regular;
-  font-size: 16px;
-  background-color: $white;
-  color: #231F20;
 
   input#current-password-input {
     width: 155px;
     margin-bottom: 0;
     padding-left: 0;
     outline: 0;
   }
-
-  label {
-    text-transform: uppercase;
-    font-size: 9.8px;
-    color: #808285;
-
-    input[type="checkbox"] {
-      width: 15px;
-      margin: 0;
-    }
-  }
 }

assets/css/partials/_tc-buttons.scss

@@ -9,7 +9,7 @@ button {
   transition: .15s all;
   cursor: pointer;
 
-  &:disabled {
+  &:disabled, &.disabled {
     background-color: $gray !important;
     border-color: $gray-dark !important;
     opacity: 1;