SUP-2231, New Empty States for Dashboard and Profile

-- Updated background images for empty states
-- Fixed margin/paddings of non empty states as well to do styling for empty states. Moved paddings from parent elements to child elements so that we have better control on them in empty states.

Author: vikasrohit

app/my-challenges/my-challenges.controller.js

@@ -88,7 +88,7 @@
         vm.loading = CONSTANTS.STATE_READY;
 
         vm.totalCount = _.sum(_.pluck(data, 'metadata.totalCount'));
-        vm.myChallenges = [];//vm.myChallenges.concat(_.union(data[0], data[1]));
+        vm.myChallenges = vm.myChallenges.concat(_.union(data[0], data[1]));
       })
       .catch(function(resp) {
         $log.error(resp);

app/my-challenges/my-challenges.jade

@@ -7,12 +7,12 @@
     .content
 
       .never-participated(ng-if="vm.neverParticipated")
-        empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills")
+        empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills", show="vm.neverParticipated")
           .info-links
             a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
 
             a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
-      section.challenges(ng-if="!vm.neverParticipated")
+      section.participated(ng-if="!vm.neverParticipated")
         .top
           .filters
             a(ng-click="vm.statusFilter !== 'active' && vm.changeFilter('active')", ng-class="{disabled: vm.statusFilter == 'active'}") Active
@@ -34,7 +34,7 @@
               a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
               a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
 
-        tc-section.hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")
+        .hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")
 
           .data(ng-class="vm.view + '-view'")                      
             challenge-tile(

app/my-dashboard/my-dashboard.jade

@@ -3,7 +3,7 @@
 .my-dashboard-container
   .subtrack-stats(id="stats", ui-view="subtrack-stats")
 
-  .my-challenges(id="challenges", ui-view="my-challenges")
+  .challenges(id="challenges", ui-view="my-challenges")
 
   .srms(id="srms", ui-view="srms", ng-show="dashboard.showSRMs")
 

app/my-dashboard/programs/programs.controller.js

@@ -26,7 +26,7 @@
     function activate() {
       MemberCertService.getMemberRegistration(userId, CONSTANTS.SWIFT_PROGRAM_ID)
       .then(function(res) {
-        if (res != null) {
+        if (res == null) {
           vm.registered = false;
           vm.loading = false;
         } else {

app/my-srms/my-srms.jade

@@ -18,7 +18,7 @@
       .no-srms(ng-if="!vm.srms.length && vm.loading === 'ready'")
         empty-state-placeholder(title="Past SRMs", description="You have not participated in any SRMs yet.", show="vm.statusFilter === 'past'")
           .info-links
-            a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/data?pageIndex=1") Find SRMs
+            a.find-srms.tc-btn.tc-btn-s.tc-btn-ghost(ng-href="https://www.{{DOMAIN}}/challenges/data?pageIndex=1") Find SRMs
             a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
         empty-state-placeholder(title="Upcoming SRMs", description="There are no upcoming SRMs.", show="vm.statusFilter === 'future'")
 
@@ -28,4 +28,4 @@
             ng-repeat="srm in vm.srms | orderBy:vm.orderBy:vm.reverseOrder", 
             srm="srm", view="vm.view", ng-class="vm.view + '-view'", show-results="vm.statusFilter === 'past'")
 
-      tc-endless-paginator(state="vm.loading", page-params="vm.pageParams")
+        tc-endless-paginator(state="vm.loading", page-params="vm.pageParams")

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

@@ -30,6 +30,8 @@
 
     .never-participated {
       padding-top: 30px;
+      background-image: url('/images/empty-states/pattern-my-challenges.png');
+      background-repeat: repeat;
 
       .info-links {
         text-align: center;
@@ -44,21 +46,46 @@
             margin-bottom: 30px;
           }
 
-          &.participate {
-            color: $white;
+          &.find-challenges {
           }
 
           &.learn-more {
             font-size: 12px;
             line-height: 12px;
-            color: $gray-lighter;
+            color: $accent-gray;
           }
         }
       }
     }
 
     section.noChallenges {
       padding-top: 30px;
+      background-image: url('/images/empty-states/pattern-my-challenges.png');
+      background-repeat: repeat;
+
+      .info-links {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+
+        a {
+          text-transform: uppercase;
+          @include sofia-pro-medium;
+
+          &:not(:last-child) {
+            margin-bottom: 30px;
+          }
+
+          &.find-challenges {
+          }
+
+          &.learn-more {
+            font-size: 12px;
+            line-height: 12px;
+            color: $accent-gray;
+          }
+        }
+      }
     }
 
     .hasChallenges {
@@ -67,15 +94,16 @@
       align-items: center;
       border-top: none;// prevent css from my dashboard to 
       border-bottom: none;// prevent css from my dashboard to override
+      
+      padding: 15px 15px 30px 15px;
+      background-color: $gray-lightest;
     }
 
     .content {
 
-      section.challenges {
+      section.participated {
         background: white;
         align-self: center;
-        padding-bottom: 15px;
-        padding-top: 10px 20px 0px 20px;
         display: flex;
         flex-flow: column wrap;
         position: relative;
@@ -88,7 +116,7 @@
           justify-content: space-between;
           padding-top: 35px;
           padding-bottom: 35px;
-          border-bottom: 1px solid #F0F0F0;
+          border-bottom: 1px solid $gray-light;
 
           .filters {
             position: initial;

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

@@ -1,7 +1,7 @@
 @import 'topcoder-includes';
 @import '../partials/combined';
 
-.my-challenges {
+.challenges {
   header {
     position: relative;
   }
@@ -66,54 +66,12 @@
   }
 
   .noChallenges {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: $gray-darkest;
-    padding-left: 20px;
-    padding-right: 20px;
-
-    // TODO remove once we are sure we don't need tracks in empty state
-    .tracks {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      min-width: 260px;
-      @media only screen and (min-width: 450px) {
-        min-width: 350px;
-      }
-
-      .track {
-        div:first-child {
-          margin: 0 auto 10px;
-          @include background-image-size(44px, 44px);
-        }
-
-        &:last-child {
-          display: none;
-          @media only screen and (min-width: 450px) {
-            display: block;
-          }
-        }
-
-        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;
-      }
-      .copilot-icon-outline {
-        @include copilot-icon-outline;
-      }
+    padding-top: 40px;
+    background-image: url('/images/empty-states/pattern-my-challenges-dashboard.png');
+    background-repeat: repeat;
+    .title,
+    .description {
+      color: $white;
     }
 
     .info-links {

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

@@ -12,16 +12,21 @@
     background-color: $white;
   }
 
-  .my-challenges, .srms, .programs, .community-updates {
+  .challenges, .srms, .programs, .community-updates {
     @include module-l;
     margin-top: 1px;
     width: 100%;
-    padding-top: 30px;
+
+    header {
+      .section-title {
+        padding-top: 30px;
+      }
+    }
   }
 
-  .my-challenges, .srms, .programs, .community-updates {
+  .challenges, .srms, .programs, .community-updates {
     @media only screen and (min-width: 900px) {
-      padding-top: 30px;
+      padding-top: 0px;
     }
   }
 

assets/css/my-dashboard/programs.scss

@@ -2,7 +2,6 @@
 @import '../partials/combined';
 
 .programs {
-  padding-top: 30px;
 
   .section-loading {
     min-height: 200px;
@@ -17,9 +16,17 @@
   }
 
   .unregistered {
+    background-image: url('/images/empty-states/pattern-ios-challenges.png');
+    background-repeat: repeat;
+    padding-top: 40px;
 
     .title {
       text-transform: none;
+      color: $white;
+    }
+
+    .description {
+      color: $white;
     }
 
     .info-links {

assets/css/my-srms/my-srms.scss

@@ -21,54 +21,13 @@
     text-align: center;
   }
 
-  .nav {
-    @include module-full-width;
-    background: white;
-    height: 100px;
-    padding-left: 60px;
-    padding-right: 60px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-    .arrow {
-      width: 15px;
-    }
-    .breadcrumbs {
-      @include sofia-pro-extra-light;
-      font-size: 14px;
-      line-height: 16px;
-      .dashboard {
-        display: block;
-        color: black;
-        text-align: center;
-        text-transform: uppercase;
-
-        a {
-          color: black;
-          text-decoration: none;
-
-          &:hover {
-            color: $primary;
-          }
-        }
-      }
-      .my-srms {
-        display: block;
-        color: $primary;
-        font-weight: 700;
-        text-align: center;
-        text-transform: uppercase;
-      }
-    }
-  }
-
   .no-srms {
-    margin: 30px;
+    padding: 30px;
     display: flex;
     flex-direction: inherit;
     align-items: center;
+    background-image: url('/images/empty-states/pattern-my-challenges.png');
+    background-repeat: repeat;
 
     .info-links {
       text-align: center;
@@ -83,14 +42,13 @@
           margin-bottom: 30px;
         }
 
-        &.participate {
-          color: $white;
+        &.find-srms {
         }
 
         &.learn-more {
           font-size: 12px;
           line-height: 12px;
-          color: $gray-lighter;
+          color: $accent-gray;
         }
       }
     }
@@ -99,6 +57,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 15px 15px 30px 15px;
     background-color: $gray-lightest;
   }
 
@@ -107,8 +66,6 @@
     section.my-srms {
       background: white;
       align-self: center;
-      padding-bottom: 15px;
-      padding-top: 10px 20px 0px 20px;
       display: flex;
       flex-flow: column wrap;
       position: relative;
@@ -121,7 +78,7 @@
         justify-content: space-between;
         padding-top: 35px;
         padding-bottom: 35px;
-        border-bottom: 1px solid #F0F0F0;
+        border-bottom: 1px solid $gray-light;
 
         .filters {
           position: initial;