From 12adb74e686e61ba8a32e00a7a9d59bb0123ae1a Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 07:33:53 +0000
Subject: [PATCH 01/15] add logic for calc timediff

---
 .../challenge-card.component.ts               | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
index 5f278484f5..1011c40a5d 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
@@ -27,6 +27,7 @@ export class ChallengeCardComponent implements OnInit {
   desc!: string;
   incentives!: string;
   statusClass!: string;
+  time_info!: string | number;
   // difficulty!: string | undefined;
 
   constructor(
@@ -63,6 +64,45 @@ export class ChallengeCardComponent implements OnInit {
         : this.imageService.getImage({
             objectKey: 'banner-default.svg',
           });
+      if (this.challenge.endDate && this.status === 'completed') {
+        this.time_info = `Ended ${this.calcTimeDiff(
+          this.challenge.endDate
+        )} ago`;
+      } else if (this.challenge.endDate && this.status === 'active') {
+        this.time_info = `Ends in ${this.calcTimeDiff(this.challenge.endDate)}`;
+      } else if (this.challenge.startDate && this.status === 'upcoming') {
+        this.time_info = `Starts in ${this.calcTimeDiff(
+          this.challenge.startDate
+        )}`;
+      }
     }
   }
+
+  calcTimeDiff(date: string | null | undefined) {
+    if (!date) {
+      return '';
+    }
+    const refDate: any = new Date(date + ' 00:00:00');
+    const now: any = new Date();
+    const diffMs = Math.abs(refDate - now);
+
+    // Calculate the time difference in years, months, weeks, days, and hours.
+    const timeDiff = {
+      year: Math.floor(diffMs / 31_556_952_000),
+      month: Math.floor(diffMs / 2_629_746_000),
+      week: Math.floor(diffMs / 604_800_000),
+      day: Math.floor(diffMs / 86_400_000),
+      hour: Math.floor(diffMs / 3_600_000),
+    };
+
+    // Find the largest unit of time and return in human-readable format.
+    let timeDiffString = '';
+    for (const [unit, value] of Object.entries(timeDiff)) {
+      if (value > 0) {
+        timeDiffString = `${value} ${unit}` + (value > 1 ? 's' : '');
+        break;
+      }
+    }
+    return timeDiffString;
+  }
 }

From 7abf689d03cf1c41f0d6b5335c51d29c75a90fe1 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 07:35:01 +0000
Subject: [PATCH 02/15] add temporal info to challenge card

---
 .../src/lib/challenge-card/challenge-card.component.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
index 7e98480faa..b3487dbe22 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
@@ -18,9 +18,12 @@
       <p class="card-title">
         {{ challenge.name }}
       </p>
-      <p class="card-subtitle" *ngIf="platform">
-        {{ platform.name }}
-      </p>
+      <div class="card-status">
+        <div><span [ngClass]="statusClass">•</span> {{ status | titlecase }}</div>
+        <div class="mat-small">
+          {{ time_info }}
+        </div>
+      </div>
       <p class="mat-caption">{{ desc }}</p>
     </div>
     <div class="card-footer">

From b06605d9a3d2e367d62d2fc675f30540e6e0f8d0 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 07:36:11 +0000
Subject: [PATCH 03/15] ui update of status tag

---
 .../challenge-card/_challenge-card-theme.scss | 23 ++++++-------------
 .../challenge-card.component.scss             |  9 ++++++++
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
index 759ec8cc1f..c00bfe1d0d 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
@@ -24,24 +24,15 @@
     border-color: transparent;
     color: map.get($figma, dl-color-default-primary1);
   }
-  .status-tag {
-    border-color: map.get($figma, dl-color-default-primary2);
-    background-color: map.get($figma, dl-color-default-hover1);
-    color: #000;
-
-    &.active {
-      border-color: #71c663;
-      background-color: #d0fedd;
+  .card-status{
+    .active {
+      color: #71c663;
     }
-
-    &.completed {
-      border-color: #ffb6c1;
-      background-color: #ffdde2;
+    .completed {
+      color: #ffb6c1;
     }
-
-    &.upcoming {
-      border-color: #ffc56d;
-      background-color: #fff1bf;
+    .upcoming {
+      color: #ffc56d;
     }
   }
 }
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index 4f88800c67..4633ed9cad 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -18,6 +18,15 @@
 .card-banner {
   height: 100%;
 }
+.card-status {
+  margin: 8px 0 12px;
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+}
 
 // FOOTER
 .difficulty-tag {

From db0c521f908cc5a00209133b103ec7fffdef26fa Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 07:36:50 +0000
Subject: [PATCH 04/15] rearrange card layout

---
 .../challenge-card/challenge-card.component.html    |  7 ++++---
 .../challenge-card/challenge-card.component.scss    | 13 +++----------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
index b3487dbe22..8ac74b7ea6 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
@@ -27,12 +27,13 @@
       <p class="mat-caption">{{ desc }}</p>
     </div>
     <div class="card-footer">
-      <mat-icon aria-hidden="true" class="card-icon">auto_awesome</mat-icon>
+      <mat-icon aria-hidden="true" class="card-icon">emoji_events</mat-icon>
       <div class="difficulty-tag mat-small">
         {{ incentives }}
       </div>
-      <div class="status-tag mat-small" [ngClass]="statusClass">
-        {{ status }}
+      <div class="platform-tag mat-small">
+        <mat-icon aria-hidden="true" class="card-icon">location_on</mat-icon>
+        {{ platform.name }}
       </div>
     </div>
   </div>
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index 4633ed9cad..4cf06811cf 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -35,17 +35,10 @@
   flex: 1;
   @include general.line-clamp(2);
 }
-.status-tag {
+.platform-tag {
   max-width: 110px;
-  margin-left: 6px;
-  padding: 4px 0;
+  padding-right: 8px;
   display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  box-sizing: border-box;
   align-items: center;
-  justify-content: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: constants.$dl-radius-radius-radius16;
+  justify-content: flex-start;
 }

From 2f02804afef7d7f1d6d2149deba02b7d56a922c8 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 07:37:43 +0000
Subject: [PATCH 05/15] titleCase status on profile page; increase slug text
 size

---
 .../openchallenges/challenge/src/lib/challenge.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/openchallenges/challenge/src/lib/challenge.component.html b/libs/openchallenges/challenge/src/lib/challenge.component.html
index e245cf2c53..d42f738ead 100644
--- a/libs/openchallenges/challenge/src/lib/challenge.component.html
+++ b/libs/openchallenges/challenge/src/lib/challenge.component.html
@@ -7,13 +7,13 @@ <h2>
           {{ challenge.name }}
           <!-- <mat-icon aria-hidden="true" class="verified">verified_outline</mat-icon> -->
         </h2>
-        <p class="username">@{{ challenge.slug }}</p>
+        <p class="mat-body-strong username">@{{ challenge.slug }}</p>
         <div
           class="profile-type"
           *ngIf="challenge.status"
           [ngClass]="['status', challenge.status ? challenge.status : '']"
         >
-          {{ challenge.status }}
+          {{ challenge.status | titlecase }}
         </div>
       </div>
     </section>

From a092e68100d0c0d18678faa4764c589f3c661247 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 23:11:25 +0000
Subject: [PATCH 06/15] add default height for cards with no temporal info

---
 .../ui/src/lib/challenge-card/challenge-card.component.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index 4cf06811cf..0940b4171d 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -19,7 +19,7 @@
   height: 100%;
 }
 .card-status {
-  margin: 8px 0 12px;
+  min-height: 58px;
   display: flex;
   flex-direction: column;
   flex-basis: 100%;

From f707c5161bf9f1e6ea1d0effa6675e99532a8ee9 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 23:11:58 +0000
Subject: [PATCH 07/15] update fx for calc timeDiff

---
 .../ui/src/lib/challenge-card/challenge-card.component.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
index 1011c40a5d..252d52d065 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
@@ -78,8 +78,9 @@ export class ChallengeCardComponent implements OnInit {
     }
   }
 
-  calcTimeDiff(date: string | null | undefined) {
-    if (!date) {
+  calcTimeDiff(date: string) {
+    const pattern = /\d{4}-\d{2}-\d{2}/;
+    if (!pattern.test(date)) {
       return '';
     }
     const refDate: any = new Date(date + ' 00:00:00');

From 9484d4bdb9fedb21512363772953d180a04a975e Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 23:15:18 +0000
Subject: [PATCH 08/15] fix card-body height so that cards stay uniform

---
 .../ui/src/lib/challenge-card/challenge-card.component.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index 0940b4171d..c61ff07769 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -13,7 +13,7 @@
   cursor: pointer;
 }
 .card-body {
-  min-height: 160px;
+  min-height: 190px;
 }
 .card-banner {
   height: 100%;

From 914ac565f5e0e6f6d215941fb9d63f6be3a07831 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 26 Oct 2023 23:52:20 +0000
Subject: [PATCH 09/15] create alt icon color; upate palette

---
 libs/openchallenges/themes/src/_palettes.scss              | 2 +-
 .../ui/src/lib/challenge-card/_challenge-card-theme.scss   | 7 ++++---
 .../src/lib/challenge-card/challenge-card.component.html   | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/libs/openchallenges/themes/src/_palettes.scss b/libs/openchallenges/themes/src/_palettes.scss
index 24d13674eb..815a96839d 100644
--- a/libs/openchallenges/themes/src/_palettes.scss
+++ b/libs/openchallenges/themes/src/_palettes.scss
@@ -126,7 +126,7 @@ $figma-collection: (
   dl-color-default-navbardark: map.get($dark-blue-palette, 800),
   dl-color-default-secondary1: map.get($light-blue-palette, 300),
   dl-color-default-secondary2: map.get($accent-purple-palette, 300),
-  dl-color-default-darkaccent1: map.get($accent-green-palette, 600),
+  dl-color-default-darkaccent1: map.get($accent-green-palette, 700),
   dl-color-default-darkaccent2: map.get($accent-purple-palette, 200),
   dl-color-gray-black: #000000,
   dl-color-gray-white: #ffffff,
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
index c00bfe1d0d..fde3096e19 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
@@ -16,13 +16,14 @@
     border-color: transparent;
     background-color: map.get($figma, dl-color-default-hover1);
   }
-  .star-icon {
+  .star-icon,
+  .card-icon {
     border-color: transparent;
     color: map.get($figma, dl-color-default-primary1);
   }
-  .card-icon {
+  .card-icon-alt {
     border-color: transparent;
-    color: map.get($figma, dl-color-default-primary1);
+    color: map.get($figma, dl-color-default-darkaccent1);
   }
   .card-status{
     .active {
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
index 8ac74b7ea6..1ae55e0380 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
@@ -32,7 +32,7 @@
         {{ incentives }}
       </div>
       <div class="platform-tag mat-small">
-        <mat-icon aria-hidden="true" class="card-icon">location_on</mat-icon>
+        <mat-icon aria-hidden="true" class="card-icon-alt">location_on</mat-icon>
         {{ platform.name }}
       </div>
     </div>

From c684dcba9507e9ef05b7e50f632316dc06a756b5 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:06:56 +0000
Subject: [PATCH 10/15] increase width for longer platform names

---
 .../ui/src/lib/challenge-card/challenge-card.component.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index c61ff07769..e69abb5c7c 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -36,7 +36,7 @@
   @include general.line-clamp(2);
 }
 .platform-tag {
-  max-width: 110px;
+  max-width: 115px;
   padding-right: 8px;
   display: flex;
   align-items: center;

From 5a1f56458d87aeff8ea469b5b943ecd32174b5db Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:07:22 +0000
Subject: [PATCH 11/15] colorize entire status; remove bullet

---
 .../src/lib/challenge-card/_challenge-card-theme.scss  | 10 +++-------
 .../lib/challenge-card/challenge-card.component.html   |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
index fde3096e19..f9f1a7cf8d 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
@@ -21,19 +21,15 @@
     border-color: transparent;
     color: map.get($figma, dl-color-default-primary1);
   }
-  .card-icon-alt {
-    border-color: transparent;
-    color: map.get($figma, dl-color-default-darkaccent1);
-  }
   .card-status{
     .active {
-      color: #71c663;
+      color: #24A658;
     }
     .completed {
-      color: #ffb6c1;
+      color: #FA6D6D;
     }
     .upcoming {
-      color: #ffc56d;
+      color: #F8B146;
     }
   }
 }
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
index 1ae55e0380..6cb9a57427 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
@@ -19,7 +19,7 @@
         {{ challenge.name }}
       </p>
       <div class="card-status">
-        <div><span [ngClass]="statusClass">•</span> {{ status | titlecase }}</div>
+        <div><span [ngClass]="statusClass">{{ status | titlecase }}</span></div>
         <div class="mat-small">
           {{ time_info }}
         </div>
@@ -32,7 +32,7 @@
         {{ incentives }}
       </div>
       <div class="platform-tag mat-small">
-        <mat-icon aria-hidden="true" class="card-icon-alt">location_on</mat-icon>
+        <mat-icon aria-hidden="true" class="card-icon">location_on</mat-icon>
         {{ platform.name }}
       </div>
     </div>

From 798b280f9cd33be9c8b218fa2113ab9833b757a1 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Mon, 30 Oct 2023 18:41:59 +0000
Subject: [PATCH 12/15] remove platform info; revert to bullet status design

---
 .../challenge-card.component.html             |  6 +-----
 .../challenge-card.component.scss             |  7 -------
 .../challenge-card.component.ts               | 21 +++++++------------
 3 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
index 6cb9a57427..5cdc3832af 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html
@@ -19,7 +19,7 @@
         {{ challenge.name }}
       </p>
       <div class="card-status">
-        <div><span [ngClass]="statusClass">{{ status | titlecase }}</span></div>
+        <div><span [ngClass]="statusClass">●</span> {{ status | titlecase }}</div>
         <div class="mat-small">
           {{ time_info }}
         </div>
@@ -31,10 +31,6 @@
       <div class="difficulty-tag mat-small">
         {{ incentives }}
       </div>
-      <div class="platform-tag mat-small">
-        <mat-icon aria-hidden="true" class="card-icon">location_on</mat-icon>
-        {{ platform.name }}
-      </div>
     </div>
   </div>
 </div>
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index e69abb5c7c..0b1c986917 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -35,10 +35,3 @@
   flex: 1;
   @include general.line-clamp(2);
 }
-.platform-tag {
-  max-width: 115px;
-  padding-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
index 252d52d065..0fcb870101 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts
@@ -4,8 +4,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import {
   Challenge,
-  ChallengePlatformService,
-  SimpleChallengePlatform,
   Image,
   ImageService,
 } from '@sagebionetworks/openchallenges/api-client-angular';
@@ -22,7 +20,6 @@ import { Observable } from 'rxjs';
 export class ChallengeCardComponent implements OnInit {
   @Input({ required: true }) challenge!: Challenge;
   banner$: Observable<Image> | undefined;
-  platform!: SimpleChallengePlatform;
   status!: string | undefined;
   desc!: string;
   incentives!: string;
@@ -30,10 +27,7 @@ export class ChallengeCardComponent implements OnInit {
   time_info!: string | number;
   // difficulty!: string | undefined;
 
-  constructor(
-    private challengePlatformService: ChallengePlatformService,
-    private imageService: ImageService
-  ) {}
+  constructor(private imageService: ImageService) {}
 
   ngOnInit(): void {
     if (this.challenge) {
@@ -42,7 +36,6 @@ export class ChallengeCardComponent implements OnInit {
       // this.difficulty = this.challenge.difficulty
       //   ? startCase(this.challenge.difficulty.replace('-', ''))
       //   : undefined;
-      this.platform = this.challenge.platform;
       this.desc = this.challenge.headline
         ? this.challenge.headline
         : this.challenge.description;
@@ -65,9 +58,10 @@ export class ChallengeCardComponent implements OnInit {
             objectKey: 'banner-default.svg',
           });
       if (this.challenge.endDate && this.status === 'completed') {
-        this.time_info = `Ended ${this.calcTimeDiff(
-          this.challenge.endDate
-        )} ago`;
+        const timeSince = this.calcTimeDiff(this.challenge.endDate);
+        if (timeSince) {
+          this.time_info = `Ended ${timeSince} ago`;
+        }
       } else if (this.challenge.endDate && this.status === 'active') {
         this.time_info = `Ends in ${this.calcTimeDiff(this.challenge.endDate)}`;
       } else if (this.challenge.startDate && this.status === 'upcoming') {
@@ -89,7 +83,6 @@ export class ChallengeCardComponent implements OnInit {
 
     // Calculate the time difference in years, months, weeks, days, and hours.
     const timeDiff = {
-      year: Math.floor(diffMs / 31_556_952_000),
       month: Math.floor(diffMs / 2_629_746_000),
       week: Math.floor(diffMs / 604_800_000),
       day: Math.floor(diffMs / 86_400_000),
@@ -99,7 +92,9 @@ export class ChallengeCardComponent implements OnInit {
     // Find the largest unit of time and return in human-readable format.
     let timeDiffString = '';
     for (const [unit, value] of Object.entries(timeDiff)) {
-      if (value > 0) {
+      if (unit === 'month' && value > 3) {
+        break;
+      } else if (value > 0) {
         timeDiffString = `${value} ${unit}` + (value > 1 ? 's' : '');
         break;
       }

From cba9a94e2c367aeca07a8c751ed1b1aa61309874 Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Mon, 30 Oct 2023 18:42:15 +0000
Subject: [PATCH 13/15] update colors

---
 .../lib/challenge-card/_challenge-card-theme.scss    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
index f9f1a7cf8d..8612a5408f 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/_challenge-card-theme.scss
@@ -23,18 +23,22 @@
   }
   .card-status{
     .active {
-      color: #24A658;
+      color: #71C663;
     }
     .completed {
-      color: #FA6D6D;
+      color: map.get($figma, dl-color-default-primary1)
     }
     .upcoming {
-      color: #F8B146;
+      color: #FFC56D;
     }
   }
 }
 
-@mixin typography($theme) { }
+@mixin typography($theme) {
+  .card-status span {
+    font-size: 21px;
+  }
+}
 
 @mixin theme($theme) {
   $color-config: mat.get-color-config($theme);

From bb32d7ebe7414cc0b2f5bb7fe81759981e77a1bf Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Wed, 1 Nov 2023 22:13:48 +0000
Subject: [PATCH 14/15] update status colors on profiles

---
 .../challenge/src/lib/_challenge-theme.scss          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/openchallenges/challenge/src/lib/_challenge-theme.scss b/libs/openchallenges/challenge/src/lib/_challenge-theme.scss
index f249285579..adfa951cb3 100644
--- a/libs/openchallenges/challenge/src/lib/_challenge-theme.scss
+++ b/libs/openchallenges/challenge/src/lib/_challenge-theme.scss
@@ -45,18 +45,18 @@
     color: #000;
 
     &.active {
-      border-color: #71c663;
-      background-color: #d0fedd;
+      color: #1C5E2A;
+      background-color: #D0FEDD;
     }
 
     &.completed {
-      border-color: #ffb6c1;
-      background-color: #ffdde2;
+      color: map.get($figma, dl-color-default-navbardark);
+      background-color: map.get($primary, 100);
     }
 
     &.upcoming {
-      border-color: #ffc56d;
-      background-color: #fff1bf;
+      color: #E1861F;
+      background-color: #FFF5D1;
     }
   }
 

From 32789399afd4d27a5f05aa024c2ba325bb84568e Mon Sep 17 00:00:00 2001
From: verena <9377970+vpchung@users.noreply.github.com>
Date: Thu, 2 Nov 2023 00:25:34 +0000
Subject: [PATCH 15/15] add margin for better centering

---
 .../ui/src/lib/challenge-card/challenge-card.component.scss    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
index 0b1c986917..6a43e1a748 100644
--- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
+++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss
@@ -19,6 +19,9 @@
   height: 100%;
 }
 .card-status {
+  div:first-child {
+    margin-right: 5px;
+  }
   min-height: 58px;
   display: flex;
   flex-direction: column;