Fix /my-dashboard ENDS IN time counter issue

Author: ThomasKranitsas

app/directives/challenge-tile/challenge-tile.jade

@@ -12,8 +12,8 @@
       .challenge-details
         p.currentPhase {{challenge.userCurrentPhase}}
 
-        .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime")
-          p.ends-in Ends In
+        .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime", ng-class="{'challenge-late' : challenge.isLate}")
+          p.ends-in {{challenge.isLate ? 'Late for' : 'Ends In'}}
           p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
           p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}
 
@@ -88,7 +88,7 @@
       p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
     .challenge-details
-      .challenge-info
+      .challenge-info(ng-class="{'challenge-late' : challenge.isLate}")
         p.currentPhase {{challenge.userCurrentPhase}}
 
         p.ends-in(ng-show="challenge.userCurrentPhaseEndTime") Ends: {{challenge.userCurrentPhaseEndTime[2] | localTime}}

app/services/challenge.service.js

@@ -119,6 +119,7 @@ import moment from 'moment'
           // Add actual time ['2', 'months', actual date]
           timeAndUnit.push(fullTime)
           challenge.userCurrentPhaseEndTime = timeAndUnit
+          challenge.isLate = moment().diff(fullTime) > 0 // If > 0 then the challenge has 'Late Deliverables' or
         }
       })
     }

assets/css/directives/challenge-tile.scss

@@ -222,6 +222,12 @@ challenge-tile .challenge.tile-view {
           text-transform: lowercase;
           color: #7F7F7F;
         }
+
+        &.challenge-late {
+          .ends-in, .time-remaining, .unit-of-time {
+            color: #ee6666;
+          }
+        }
       }
 
       .stalled-challenge {
@@ -462,6 +468,12 @@ challenge-tile .challenge.list-view {
         font-size: 14px;
         color: #A3A3AE;
       }
+
+      &.challenge-late {
+        .ends-in, .time-remaining, .unit-of-time {
+          color: #ee6666;
+        }
+      }
     }
 
     .marathon-score {