From 8ece6b141ccd727d224638bdfe20990b013245ad Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 1 Jul 2022 00:03:26 +0200
Subject: [PATCH] hotfix/167: style negative timers (#169)

---
 client/src/features/viewers/countdown/Countdown.jsx         | 2 +-
 client/src/features/viewers/countdown/Countdown.module.scss | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/features/viewers/countdown/Countdown.jsx b/client/src/features/viewers/countdown/Countdown.jsx
index f37618ab7..1c3729ed0 100644
--- a/client/src/features/viewers/countdown/Countdown.jsx
+++ b/client/src/features/viewers/countdown/Countdown.jsx
@@ -106,7 +106,7 @@ export default function Countdown(props) {
             </div>
           </div>
           <div className={style.status}>{runningMessage}</div>
-          <span className={`${style.countdownClock} ${standby ? style.standby : ''}`}>
+          <span className={`${style.countdownClock} ${standby ? style.standby : ''} ${time.finished ? style.finished : ''}`}>
             {formatDisplay(
               time.running ? runningTimer : runningTimer + millisToSeconds(delay),
               time.running || time.waiting
diff --git a/client/src/features/viewers/countdown/Countdown.module.scss b/client/src/features/viewers/countdown/Countdown.module.scss
index 21ef47223..834c3156d 100644
--- a/client/src/features/viewers/countdown/Countdown.module.scss
+++ b/client/src/features/viewers/countdown/Countdown.module.scss
@@ -105,6 +105,9 @@
       &.standby {
         opacity: 0.6;
       }
+      &.finished {
+        color: $ontime-pink-variant;
+      }
     }
   }
 }