Merge branch 'dev' into release/v1.0.8

* dev:
  #60 Styling "Login" and "Register" buttons in logged out state
  6 or so more fixes
  Nav: Blue arrow for active nav item is not aligned
  fixed hover for skills on profile
  a fix for image upload styling

Author: vikasrohit

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

@@ -24,4 +24,4 @@
         span.onoffswitch-inner
         span.onoffswitch-switch
 
-hr
+hr.bottom

app/layout/header/header.jade

@@ -15,7 +15,7 @@
         img(ng-switch-when="true", ng-if="vm.profile.photoURL && vm.profile.photoURL.length", class="user-avatar", ng-src="{{vm.profile.photoURL}}")
         img(ng-switch-when="true", ng-if="!vm.profile.photoURL || !vm.profile.photoURL.length", class="user-avatar", ng-src="/images/ico-user-default.svg")
 
-        span(ng-switch-when="false" class="btn-link") JOIN
+        span(ng-switch-when="false" class="tc-btn tc-btn-s") JOIN
 
     ul.main-menu
       li.menu-item.search-wrapper
@@ -43,7 +43,7 @@
                 ng-class="{'underline': vm.selectedGroup() == 'user'}"
               ) {{vm.userHandle}}
 
-          a.btn-link.btn-edit-profile.show-small(ui-sref="settings.profile") EDIT
+          a.tc-btn.tc-btn-s.btn-edit-profile.show-small(ui-sref="settings.profile") EDIT
 
           ul.submenu
             header-menu-item(ng-repeat="item in vm.userMenu" item="item")
@@ -55,9 +55,9 @@
 
         // links for anonymous user
         .menu-item-header(ng-switch-when="false")
-          a.btn-link(ui-sref="register") REGISTER
+          a.tc-btn.tc-btn-s.btn-link(ui-sref="register") JOIN
 
-          a.btn-link.secondary-link(ui-sref="login") LOGIN
+          a.tc-btn.tc-btn-s.tc-btn-ghost.btn-link(ui-sref="login") LOG IN
 
           //- a(ng-click="launchIntro();", ng-show="!!vm.introOptions") Intro
 

app/settings/edit-profile/edit-profile.controller.js

@@ -15,6 +15,7 @@
     vm.updateProfile  = updateProfile;
     vm.addSkill = addSkill;
     vm.deleteImage = deleteImage;
+    vm.changeImage = changeImage;
 
     activate();
 
@@ -155,5 +156,10 @@
         toaster.pop('error', "Whoops!", "Something went wrong. Please try again later.");
       });
     }
+
+    function changeImage() {
+      var fileInput = document.querySelector('#change-image-input');
+      fileInput.click(); // Or, use the native click() of the file input.
+    }
   }
 })();

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

@@ -16,8 +16,9 @@
             img.profile-circle(ng-show="!vm.userData.photoURL || !vm.userData.photoURL.length", src="/images/ico-user-default.svg")
 
             .buttons
-              :verbatim
-                <button class="file-upload tc-btn tc-btn-primary tc-btn-s"><span>Change Image</span><input type="file" name="image" on-file-change="on-file-change"/></button>
+              button.file-upload.tc-btn.tc-btn-primary.tc-btn-s(ng-click="vm.changeImage()", type="button")
+                span Change Image
+              input(type='file', name='image', on-file-change='on-file-change', id="change-image-input", style="display: none;")
 
               .file-delete
                 button.tc-btn.tc-btn-secondary.tc-btn-s(ng-click="vm.deleteImage()", type="button") Delete
@@ -57,8 +58,8 @@
         track-toggle(tracks="vm.tracks")
 
     .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
+      button.tc-btn.tc-btn-primary.tc-btn-s(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-s.disabled(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine", type="button") Save
 
   .settings-section.skills
     .section-info

assets/css/directives/track-toggle.scss

@@ -8,6 +8,9 @@ track-toggle {
     &.first {
       margin-top: 0px;
     }
+    &.bottom {
+      margin-bottom: 0;
+    }
   }
   .track {
     width: 100%;

assets/css/layout/header.scss

@@ -88,18 +88,7 @@
 }
 
 .btn-link {
-  color: #fff;
-  font-size: 12px;
-  line-height: 1.2em;
-  border-radius: 4px;
-  background-color: #00AEFf;
   display: inline-block;
-  padding: 8px 20px;
-  text-decoration: none;
-
-  &.secondary-link {
-    background-color: #d1d3d4;
-  }
 }
 
 .user-link .user-avatar, .user-link .btn-join {
@@ -431,7 +420,7 @@
         position: absolute;
         bottom: 5px;
         left: 50%;
-        margin-left: -12px;
+        margin-left: -6px;
         background-color: transparent;
       }
       &.hide {

assets/css/partials/_tc-inputs.scss

@@ -9,7 +9,7 @@ input.tc-input,
   color: #231f20;
   outline: none;
   background: white;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #b7b7b7;
   box-shadow: inset 0px 0px 2px 0px rgba(183,183,183,0.30);
   border-radius: 2px;
   cursor: auto;

assets/css/profile/about.scss

@@ -119,6 +119,10 @@
         margin-top: 20px;
         margin-right: 15px;
 
+        a:hover {
+          cursor: default;
+        }
+
         + .skill {
           margin-left: 15px;
         }
@@ -205,7 +209,6 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      cursor: pointer;
 
       &.noclick {
         cursor: default;
@@ -492,7 +495,6 @@
 
       .track {
         width: 100%;
-        cursor: pointer;
         padding-top: 30px;
         .name {
           img {

assets/css/settings/settings.scss

@@ -49,6 +49,12 @@
     font-weight: 400;
     padding-left: 15px;
   }
+  textarea {
+    padding-left: 10px;
+    &:hover, &:focus {
+      padding-left: 10px;
+    }
+  }
   input:focus, textarea:focus {
     outline: 1px solid #4cb5ff;
   }
@@ -146,11 +152,13 @@
       @media only screen and (min-width: 768px) {
         width: 270px;
         margin-right: 33px;
+        margin-left: 30px;
       }
 
       h2 {
         text-transform: uppercase;
-        @include sofia-pro-light;
+        font-family: 'Sofia Pro';
+        font-weight: 500;
         font-size: 16px;
       }
 
@@ -220,7 +228,7 @@
               margin: 10px;
               margin-left: 0;
               margin-top: 20px;
-              width: 150px;
+              width: 120px;
               input {
                 position: absolute;
                 top: 0;
@@ -271,6 +279,7 @@
   }
   .tracks {
     padding-bottom: 0px;
+    border-bottom: none;
 
     .section-fields {
       margin-top: 40px;
@@ -291,10 +300,11 @@
     button {
       margin-bottom: 15px;
       margin-top: 15px;
-      width: 100px;
+      width: 120px;
     }
   }
   .skills {
+    border-top: 1px solid $gray-light;
     .section-fields {
       margin-top: 20px;
       display: flex;