Forms refactor

app/account/register/register.jade

@@ -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
 
@@ -117,5 +120,4 @@
 
 .join-topcoder
   span Have an account?  
-
     a(ui-sref="login(vm.$stateParams)") Log in

app/account/reset-password/reset-password.jade

@@ -15,6 +15,7 @@
         input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
+        .arrow
         h3 Email Tips:
 
         p Enter your email address and we'll get back to you with a reset link
@@ -49,6 +50,7 @@
       toggle-password-with-tips
 
       .tips.password-tips(ng-show="vm.passwordFocus")
+        .arrow
         h3 Password Tips:
 
         p(ng-class="{ 'has-length-between-range': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.minlength && !vm.resetPasswordForm.password.$error.maxlength && !vm.resetPasswordForm.password.$error.required) }") Must be between 8 and 64 characters

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -31,7 +31,7 @@
     // Only show if not data science track
     p.roles 
       span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
-        #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+       #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
   .completed-challenge(
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
@@ -65,7 +65,7 @@
     // Only show if not data science track
     p.roles
       span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
-        #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+        #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")
@@ -76,7 +76,7 @@
 
       p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
-      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
     .challenge-details
       .challenge-info
@@ -106,7 +106,7 @@
 
       p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
-      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+      p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
     .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")
 

app/directives/track-toggle/track-toggle.directive.jade

@@ -1,7 +1,7 @@
 .track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']")
-  hr(class="{{!$index  && 'first'}}")
+  //- hr(class="{{!$index  && 'first'}}")
 
-  .content
+  .content(class="{{!tracks[track] && 'disabled'}}")
     .track-details
       .icon(ng-class="{'disabled': !tracks[track]}")
         img(ng-if="track == 'DATA_SCIENCE' && tracks[track]", src="/images/ico-track-data.svg")
@@ -23,5 +23,3 @@
       label.onoffswitch-label(for='{{track}}-onoffswitch')
         span.onoffswitch-inner
         span.onoffswitch-switch
-
-hr.bottom

app/index.jade

@@ -28,6 +28,7 @@ html
     // build:css /styles/app.css
     //- inject:css
     link(rel="stylesheet", href="assets/css/reset.css")
+    link(rel="stylesheet", href="assets/css/vendors/angucomplete.css")
     link(rel="stylesheet", href="assets/css/topcoder.css")
     link(rel="stylesheet", href="assets/css/skill-picker/skill-picker.css")
     link(rel="stylesheet", href="assets/css/sitemap/sitemap.css")

app/settings/account-info/account-info.jade

@@ -1,7 +1,7 @@
 .account-info-container
   .settings-section.credentials
     .section-info
-      h2 credentials
+      h2 Credentials
       .description Used to log in to your account and cannot be edited. Please contact [email protected] if you need to make changes.
 
     .section-fields
@@ -31,6 +31,7 @@
               placeholder="Pick a new password"
             )
             .tips.password-tips(ng-show="vm.passwordFocus")
+              .arrow
               h3 Password Tips:
 
               p Your password must have:

app/settings/edit-profile/edit-profile.jade

@@ -21,8 +21,8 @@
                 span(ng-show="!vm.userData.photoURL || !vm.userData.photoURL.length") Add Image
               input(type='file', name='image', on-file-change='on-file-change', id="change-image-input", style="display: none;")
 
-              .file-delete(ng-show="vm.userData.photoURL && vm.userData.photoURL.length")
-                button.tc-btn.tc-btn-secondary.tc-btn-s(ng-click="vm.deleteImage()", type="button") Delete
+              .file-delete
+                button.tc-btn.tc-btn-ghost.tc-btn-warning.tc-btn-s(ng-click="vm.deleteImage()", type="button") Delete
 
         .country
           .form-label country to represent

assets/css/account/account.scss

@@ -5,15 +5,17 @@
 .register-container,
 .reset-password-container,
 .registered-successfully-container {
+  position: relative;
   width: 560px;
   margin: 60px auto 0;
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: flex-start;
-  @include source-sans-regular;
-  background-color: white;
+  @include font-with-weight('Merriweather Sans');
+  background-color: $white;
   border-radius: 3px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
 
   header {
     height: 70px;
@@ -50,41 +52,67 @@
   h1 {
     margin-top: 39px;
     margin-bottom: 40px;
-    @include ui-h1;
-    color: #3D3D3D;
+    @media (max-width: 767px) {
+      margin: 30px auto;
+    }
+    color: $gray-darkest;
     line-height: 30px;
     font-size: 20px;
-    @include sofia-pro-light;
+    @include font-with-weight('Sofia Pro', 300);
     width: 380px;
     align-self: center;
     text-transform: uppercase;
   }
 
-  input:not([type="checkbox"]), button {
-    display: block;
-    margin-bottom: 10px;
+  // 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"]) {
-    height: 40px;
     width: 300px;
-    padding: 0;
-    padding-left: 15px;
-    border: 0;
-    @include source-sans-regular;
-    font-size: 16px;
-    color: #231F20;
-    box-shadow: none;
-    outline: none;
   }
 
-  .tips {
-    left: 380px;
+  toggle-password {
+    input#current-password-input {
+      width: 300px;
+      height: 20px;
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  .tips,
+  .email-tips,
+  .password-tips {
+    @media screen and (min-width: 915px) {
+      left: 395px;
+    }   
   }
 
-  .email-tips {
-    left: 380px;
+  // Autocomplete
+  .angucomplete-dropdown {
+    width: 100%;
+    color: $gray-darkest;
+    text-align: left;
+    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.4);
+  }
+  .angucomplete-selected-row {
+    background-color: $primary-lighter;
+    color: $gray-darkest;
   }
+  // Autocomplete end
 
   button {
     // width: 180px;
@@ -100,56 +128,10 @@
     width: 380px;
   }
 
-  input[type="text"],
-  input[type="password"],
-  input[type="email"],
-  input.email,
-  toggle-password,
-  toggle-password-with-tips {
-    height: 38px;
-    background: $white;
-    border: 1px solid #B7B7B7;
-    box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
-    border-radius: 2px;
-    cursor: auto;
-    color: #3d3d3d;
-    font-family: "Merriweather Sans";
-    font-size: 15px;
-
-    &:hover {
-      border: 1px solid #A3A3AE;
-      box-shadow: inset 0px 0px 2px 0px #B7B7B7;
-    }
-
-    &:focus,
-    &.focus {
-      border: 1px solid #0096FF;
-      outline: none;
-      box-shadow: inset 0px 0px 2px 1px rgba(133,203,255,0.60);
-    }
-
-    transition: .15s all;
-  }
-
-  input:not([type="checkbox"]) {
-    box-shadow: none;
-  }
 
   toggle-password {
     input#current-password-input {
       width: 300px;
-      height: 20px;
-      border: none;
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  toggle-password-with-tips {
-    input#password-input {
-      border: none;
-      outline: none;
-      box-shadow: none;
     }
   }
 
@@ -176,7 +158,7 @@
         color: #A3A3AE;
         font-size: 10px;
         line-height: 13px;
-        @include sofia-pro-medium;
+        @include font-with-weight('Sofia Pro', 500);;
         text-transform: uppercase;
         margin-top: 10px;
         cursor: pointer;
@@ -199,7 +181,7 @@
       color: #A3A3AE;
       font-size: 13px;
       line-height: 22px;
-      @include sofia-pro-regular;
+      @include font-with-weight;
       text-transform: uppercase;
     }
 
@@ -217,7 +199,7 @@
           color: #A3A3AE;
           font-size: 10px;
           line-height: 13px;
-          @include sofia-pro-medium;
+          @include font-with-weight('Sofia Pro', 500);
           text-transform: uppercase;
           cursor: pointer;
           margin-top: 10px;
@@ -276,9 +258,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 font-with-weight('Sofia Pro', 500);
 
   a {
     display: inline;