dashboard and subtrack polishes

Author: Victor George

app/directives/history-graph/history-graph.directive.jade

@@ -1,8 +1,6 @@
 .history-graph-directive(ng-show="graphState.show == 'history'")
   .history-graph-container
 
-    br
-
     .history-graph
 
     .info-port

app/directives/tc-endless-paginator/tc-endless-paginator.jade

@@ -1,4 +1,4 @@
 div.paginator
   tc-section(state="state")
-    button.tc-btn(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") Load More
+    button.tc-btn.tc-btn-s(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") Load More
 

app/profile/subtrack/nav.jade

@@ -5,10 +5,10 @@
   )
 
     div(class="name")
-      img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
-      img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
-      img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
-      img(ng-if="track == 'COPILOT'", src="/images/ico-track-co_pilot-outline.svg")
+      img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data.svg")
+      img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop.svg")
+      img(ng-if="track == 'DESIGN'", src="/images/ico-track-design.svg")
+      img(ng-if="track == 'COPILOT'", src="/images/ico-track-copilot.svg")
       span {{track | track | uppercase}}
 
     .subtrack(

assets/css/directives/challenge-tile.scss

@@ -68,12 +68,13 @@ challenge-tile .challenge.tile-view {
     align-items: center;
     min-height: 36px;
     padding: 0 20px;
-    @include source-sans-regular;
-    font-size: 13px;
-    line-height: 18px;
+    @include merriweather-sans-regular;
+    font-size: 12px;
+    line-height: 17px;
     background-color: $gray-lighter;
 
     span {
+      padding: 0;
       @include ellipsis;
       span:first-child {
         color: $accent-gray;

assets/css/directives/history-graph.scss

@@ -32,7 +32,9 @@
     }
 
     rect {
-      fill: #f6f6f6;
+      fill: $white;
+      stroke: $gray-lighter;
+      stroke-width: 2.3px;
     }
 
     .line {
@@ -42,14 +44,15 @@
     }
 
     .grid.x .tick {
-      stroke: white;
-      opacity: 0.7;
+      stroke: $gray-light;
+      stroke-width: 2px;
+      stroke-dasharray: 6, 8;
     }
 
     .grid.y .tick {
-      stroke: #d7d7d7;
-      stroke-dasharray: 5, 5;
-      opacity: 0.3;
+      stroke: none;
+      opacity: 0;
+      stroke-width: 1px;
     }
 
     .y.axis .tick text {
@@ -58,6 +61,17 @@
       text-align: left;
     }
 
+    circle {
+      r: 5.5px;
+      stroke: $white;
+      stroke-width: 1.5px;
+    }
+
+    circle::hover {
+      r: 7.5px;
+      stroke-width: 2px;
+    }
+
 
   }
   .info-port {
@@ -114,6 +128,11 @@
 }
 
 @media (min-width: 768px) {
+
+.stats > .graphs {
+  margin-top: -40px !important;
+}
+
 .history-graph-container {
   width: 950px;
   margin-left: auto;
@@ -137,10 +156,6 @@
       display: none;
     }
 
-    rect {
-      fill: #f6f6f6;
-    }
-
     .line {
       fill: none;
       stroke: #c5c5c5;

assets/css/directives/tc-tabs.scss

@@ -22,15 +22,26 @@
           line-height: 24px;
           @include sofia-pro-medium;
           text-transform: uppercase;
-          margin: auto 30px;
+          margin: auto 45px;
           &.selected {
             color: $gray-darkest;
             padding-bottom: 14px;
             border-bottom: solid 2px $primary;
           }
         }
       }
+      a:hover {
+        color: $accent-gray-dark;
+      }
     }
   }
   .tab-view {}
 }
+
+.page-header + tc-tab-set {
+   .tab-panel .tab-set {
+      border-top: none;
+    }
+  }
+
+

assets/css/profile/subtrack.scss

@@ -101,7 +101,10 @@
     margin-bottom: 10px;
     background-color: #fff;
     padding: 30px auto;
-
+    & + .develop {
+      // move the cards up to compensate for size. Refactor of the component will make this obsolete!
+      margin-top: -40px;
+    }
   }
 
   .bottom {
@@ -163,9 +166,9 @@
       justify-content: center;
     }
     h2.detailed {
-      margin: 50px auto 25px auto;
+      margin: 30px auto 0;
       text-align: center;
-      font-family: 'Lucida Grande';
+      @include sofia-pro-medium;
       font-size: 18px;
       line-height: 21px;
       font-weight: bold;
@@ -281,7 +284,7 @@
       margin-top: -3px;
       width: 90%;
       border: 0;
-      border-top: 1px solid #d1d3d4;
+      border-top: 1px solid $gray-lighter;
       margin-left: auto;
       margin-right: auto;
     }
@@ -376,13 +379,13 @@
         justify-content: center;
       }
       h2.detailed {
-        margin: 50px auto 25px auto;
+        margin: 30px auto 0;
         @include sofia-pro-regular;
-        font-size: 28px;
-        line-height: 34px;
+        font-size: 24px;
+        line-height: 30px;
       }
       ul.vertical-stats {
-        margin-top: 50px;
+        margin-top: 30px;
         width: 95%;
         align-content: space-between;
         height: 300px;
@@ -398,12 +401,12 @@
           font-size: 15px;
           line-height: 18px;
           padding: 14px;
-          border-bottom: 1px solid #f6f6f6;
+          border-bottom: 1px solid $gray-lighter;
           .right {
-            color: #00aeff;
+            color: $primary;
           }
           &.first {
-            border-top: 1px solid #f6f6f6;
+            border-top: 1px solid $gray-lighter;
           }
         }
       }