Merge pull request #438 from appirio-tech/feature/tom-settings-v2

first round of changes

Author: tladendo

app/directives/external-account/external-account.directive.jade

@@ -1,4 +1,4 @@
-.ext-tile(ng-repeat="account in accountList | orderBy:'order'", ng-click="!account.disabled && !readOnly && handleClick(account.provider, account.status)", ng-class="{'connected': account.status === 'linked', 'connecting': account.status === 'pending', 'disabled': account.disabled, 'enabled': !account.disabled, 'read-only': readOnly}")
+.ext-tile(ng-repeat="account in accountList | orderBy:'order'", ng-click="!account.disabled && !readOnly && handleClick(account.provider, account.status)", ng-class="{'connected': account.status === 'linked', 'connecting': account.status === 'pending', 'disabled': account.disabled, 'enabled': !account.disabled, 'read-only': readOnly, 'connect': account.status === 'unlinked' && !account.disabled}")
   .external-account-box(ng-class="account.colorClass")
     i.fa(ng-class="account.className")
 

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

@@ -6,10 +6,10 @@
 
     .section-fields
       .form-label.username Username
-      input.form-field(name="username", value="{{vm.userData.handle}}", disabled=true)
+      input.form-field.grey(name="username", value="{{vm.userData.handle}}", disabled=true)
 
       .form-label email
-      input.form-field(name="email", value="{{vm.userData.email}}", disabled=true)
+      input.form-field.grey(name="email", value="{{vm.userData.email}}", disabled=true)
 
       div(ng-hide="vm.isSocialRegistration")
         form(name="vm.newPasswordForm", role="form", ng-submit="vm.newPasswordForm.$valid && vm.submitNewPassword()", novalidate)
@@ -109,7 +109,7 @@
             p(ng-show="vm.accountInfoForm.address.$error.required") Please enter an address
 
           .form-label Address 2
-            span(style="text-transform: none;")  (opt., suite, etc.)
+            span(style="text-transform: none;")  (apt., suite, etc.)
           input.tc-input(
             name="address2",
             type="text",
@@ -145,7 +145,7 @@
           .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.state.$invalid")
             p(ng-show="vm.accountInfoForm.state.$error.required") Please enter a state or province
 
-          .form-label Zip
+          .form-label Zip/Post Code
           input.tc-input(
             name="zipcode", type="text",
             placeholder="Zip"
@@ -158,7 +158,9 @@
           .account-info-error(ng-show="vm.addressDirty && vm.accountInfoForm.zipcode.$invalid")
             p(ng-show="vm.accountInfoForm.zipcode.$error.required") Please enter a zip
 
-          .form-label Country
+          .form-label
+            span Country
+            span.mandatory *mandatory
           angucomplete-alt(
             input-name="country",
             input-class="tc-input",
@@ -177,5 +179,5 @@
             p(ng-show="vm.accountInfoForm.country.$error.required") Please choose a country from the list.
 
 
-          .button-container
-            button.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save
+  .save-section
+    button.save.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save

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

@@ -49,19 +49,20 @@
     .settings-section.tracks
       .section-info
         h2 Tracks
-        .description Topcoder's three categories of challenges... please pick at least one on your skills and interests
+        .description Topcoder's three categories of challenges... please pick at least one based on your skills and interests.
 
 
       .section-fields
         track-toggle(tracks="vm.tracks")
 
-        button.tc-btn.tc-btn-secondary.tc-btn-l(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine)", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
-        button.tc-btn.tc-btn-secondary.tc-btn-l.disabled(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine", type="button") Save
+    .save-section
+      button.tc-btn.tc-btn-primary.tc-btn-m(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine)", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
+      button.tc-btn.tc-btn-secondary.tc-btn-m.disabled(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine", type="button") Save
 
   .settings-section.skills
     .section-info
       h2 skills
-      .description Languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well
+      .description Languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.
 
     .section-fields
       .field-label Add a new skill

assets/css/directives/external-account.scss

@@ -29,6 +29,12 @@
     }
   }
 
+  &.connect {
+    .external-account-box {
+      background-color: #fbfbfb;
+    }
+  }
+
   &.connected,
   &.enabled:hover {
     .el-weblinks i {color: #82A0AA;}
@@ -41,6 +47,13 @@
     .el-github i {color: #4B3D74;}
   }
 
+  &.enabled.connect:hover {
+    .external-account-box {
+      background-color: #f2faff;
+      border: 1px solid #85ccff;
+    }
+  }
+
   &.read-only {
     cursor: default;
   }
@@ -71,7 +84,7 @@
     .provider {
       margin-top: 8px;
       @include sofia-pro-medium;
-      font-size: 10px;
+      font-size: 12px;
       line-height: 13px;
       text-align: center;
       text-transform: uppercase;

assets/css/settings/account-info.scss

@@ -16,17 +16,18 @@
     .section-fields {
       display: flex;
       flex-direction: column;
+      .form-field {
+        &.grey {
+          background-color: #fcfcfc;
+        }
+      }
       .form-label {
         margin-top: 30px;
         &.username {
           margin-top: 0px;
         }
       }
-      .button-container {
-        button.save {
-          margin-top: 20px;
-        }
-      }
+
     }
   }
 
@@ -94,6 +95,23 @@
       @include ui-enabled-button;
     }
   }
+  .save-section {
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #fcfcfc;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    button.save {
+      margin-bottom: 15px;
+      margin-top: 15px;
+      width: 100px;
+    }
+  }
 }
 
 @media only screen and (min-width: 760px) {

assets/css/settings/settings.scss

@@ -260,11 +260,21 @@
       margin-top: 40px;
     }
 
+
+  }
+  .save-section {
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #fcfcfc;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     button {
-      margin-bottom: 20px;
-      align-self: flex-start;
-      margin-left: 25%;
-      margin-top: 20px;
+      margin-bottom: 15px;
+      margin-top: 15px;
       width: 100px;
     }
   }