Finish mobile empty state for my-challenges on dashboard

Author: Nick Litwin

app/my-dashboard/my-challenges/my-challenges.jade

@@ -1,20 +1,35 @@
-header
-  h1.section-title Active Challenges
-
-  p.noChallenges(ng-hide="vm.userHasChallenges") You have not participated in any challenges yet.
+header(ng-hide="vm.loading")
+  h1.section-title(ng-bind="vm.userHasChallenges ? 'Active Challenges' : 'Challenges'")
 
 .section-loading(ng-show="vm.loading")
 
-section(ng-if="vm.userHasChallenges && !vm.loading")
+section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
+  h3 Prove your skills
+
+  .tracks
+    .track
+      .develop-icon-outline
+      p Development
+
+    .track
+      .design-icon-outline
+      p Design
+
+    .track
+      .data-science-icon-outline
+      p Data Science
+
+  p.info Hey, whatever your like might be—Design, Development, or Data Science—we have it! Explore the Challenges section and show us what you’re made of!
+
+  a(ng-href="https://www.{{DOMAIN}}/challenges/") View Challenges
+
+section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading")
   .challenges
     challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
 
-.section-links
+.section-links(ng-if="vm.userHasChallenges && !vm.loading")
   .link
     a(ui-sref="my-challenges") View All
 
-  .link(ng-show="dashboard.isCopilot")
-    a(href="https://www.{{vm.domain}}/direct") Launch Topcoder Direct
-
-  .link(ng-hide="vm.userHasChallenges")
-    a(href="https://community.{{vm.domain}}/", target="_blank") View Help Library
+  .link
+    a(ui-sref="my-challenges") Past Challenges

assets/css/directives/challenge-tiles.scss

@@ -73,7 +73,7 @@
     width: 75px;
     height: 63px;
     margin-bottom: 20px;
-    background-image: url(/images/svgs/ico-calendar.svg);
+    background-image: url(/images/ico-calendar.svg);
 
     > p {
       @include sofia-pro-bold;
@@ -164,20 +164,20 @@
   .registrants-icon {
     width: 15px;
     height: 16px;
-    background-image: url(/images/svgs/ico-users.svg);
+    background-image: url(/images/ico-users.svg);
     background-size: 15px 16px;
   }
 
   .submissions-icon {
     width: 22px;
     height: 14px;
-    background-image: url(/images/svgs/ico-submissions.svg);
+    background-image: url(/images/ico-submissions.svg);
   }
 
   .forum-icon {
     width: 20px;
     height: 17px;
-    background-image: url(/images/svgs/ico-posts.svg);
+    background-image: url(/images/ico-posts.svg);
   }
 }
 

assets/css/directives/srm-tile.scss

@@ -59,7 +59,7 @@
     align-items: center;
     width: 76px;
     height: 91px;
-    background-image: url(/images/svgs/ico-calendar-detailed.svg);
+    background-image: url(/images/ico-calendar-detailed.svg);
 
     span {
       display: block;

assets/css/my-challenges/my-challenges.scss

@@ -137,13 +137,5 @@
         }
       }
     }
-
-    .spotlightChallenges {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-top: 20px;
-      margin-bottom: 10px;
-    }
   }
 }

assets/css/my-dashboard/my-challenges.scss

@@ -1,56 +1,74 @@
 @import '../partials/combined';
 
 .my-challenges {
-  min-height: 50px;
-  display: flex;
-  flex-direction: column;
+  .section-title {
+    margin-bottom: 27px;
+  }
 
-  > header {
-    position: relative;
-    margin-bottom: 35px;
+  .section-loading {
+    min-height: 500px;
+  }
 
-    p.noChallenges {
-      text-align: center;
-      margin-top: 10px;
+  .noChallenges {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #3D3D3D;
+
+    h3 {
+      margin-bottom: 20px;
+      @include sofia-pro-extra-light;
       font-size: 18px;
+      text-transform: uppercase;
     }
 
-    p.viewChallenges {
-      position: absolute;
-      top: 3px;
-      right: 10px;
+    .tracks {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      width: 260px;
 
-      a {
-        text-decoration: underline;
-      }
-    }
-
-    p.viewDashboard {
-      position: absolute;
-      top: 3px;
-      left: 10px;
+      .track {
+        div:first-child {
+          margin: 0 auto 10px;
+          @include background-image-size(44px, 43px);
+        }
 
-      a {
-        text-decoration: underline;
+        p {
+          @include sofia-pro-medium;
+          font-size: 12px;
+          text-transform: uppercase;
+        }
+      }
+      .develop-icon-outline {
+        @include develop-icon-outline;
+      }
+      .design-icon-outline {
+        @include design-icon-outline;
+      }
+      .data-science-icon-outline {
+        @include data-icon-outline;
       }
     }
 
-    p.filters {
-      position: absolute;
-      top: 3px;
-      right: 10px;
-
-      a {
-        text-decoration: underline;
-      }
+    .info {
+      width: 260px;
+      margin-top: 50px;
+      @include sofia-pro-light;
+      font-size: 15.4px;
+      line-height: 22.4px;
+      text-align: center;
     }
-  }
 
-  .section-loading {
-    min-height: 500px;
+    a {
+      margin-top: 20px;
+      margin-bottom: 40px;
+      @include button-l;
+      text-decoration: none;
+    }
   }
 
-  section {
+  .hasChallenges {
     display: flex;
     justify-content: center;
     padding: 20px 0;
@@ -94,12 +112,4 @@
       }
     }
   }
-
-  .spotlightChallenges {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
 }

assets/css/my-dashboard/my-dashboard.scss

@@ -4,6 +4,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  @media only screen and (min-width: 1262px) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
   .subtrack-stats, .my-challenges, .srms, .programs, .community-updates {
     @include module-l;
@@ -12,10 +18,13 @@
 
   .section-title {
     @include sofia-pro-bold;
-    font-size: 28px;
+    font-size: 22px;
     color: #3D3D3D;
     text-align: center;
     text-transform: uppercase;
+    @media only screen and (min-width: 450) {
+      font-size: 28px;
+    }
   }
 
   .section-links {

assets/css/partials/_mixins.scss

@@ -65,6 +65,11 @@
   font-weight: 700;
 }
 
+@mixin sofia-pro-extra-light {
+  font-family: 'Sofia Pro', Arial;
+  font-weight: 200;
+}
+
 @mixin sofia-pro-light {
   font-family: 'Sofia Pro', Arial;
   font-weight: 300;
@@ -172,6 +177,8 @@
 @mixin module-l {
   @include module-s;
   max-width: 1242px;
+  margin-left: 10px;
+  margin-right: 10px;
   padding-top: 30px;
   @media only screen and (min-width: 900px) {
     padding: 90px 0 30px;
@@ -189,6 +196,26 @@
   -webkit-overflow-scrolling: touch;
 }
 
+@mixin background-image-size($width, $height) {
+  width: $width;
+  height: $height;
+  background-size: $width, $height;
+}
+
+@mixin develop-icon-outline {
+  background-image: url(/images/ico-track-develop-outline.svg);
+}
+
+@mixin design-icon-outline {
+  background-image: url(/images/ico-track-design-outline.svg);
+}
+
+@mixin data-icon-outline {
+  background-image: url(/images/ico-track-data-outline.svg);
+}
+
+
+
 // UI REFRESH STYLES
 @mixin ui-submit-button {
   width: 300px;