From 19782ae162963ff00f3731c1c10c2b8222f7af74 Mon Sep 17 00:00:00 2001
From: Sergey Tarabukin <tarabukin@tochka.com>
Date: Tue, 14 Mar 2023 10:25:14 +0500
Subject: [PATCH] [#206] [#206] The column icon should be red when the WIP
 limit is exceeded. The column icon should be yellow when the WIP limit is
 reached.

---
 src/column-limits/BoardPage/index.js   | 15 ++++++++++++++-
 src/column-limits/BoardPage/styles.css | 11 +++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/column-limits/BoardPage/index.js b/src/column-limits/BoardPage/index.js
index 5218b92..77ff88b 100644
--- a/src/column-limits/BoardPage/index.js
+++ b/src/column-limits/BoardPage/index.js
@@ -125,11 +125,24 @@ export default class extends PageModification {
         return;
       }
 
+      let colorClass;
+      switch (Math.sign(groupLimit - amountOfGroupTasks)) {
+        case -1:
+          colorClass = styles.limitColumnBadge_over_wip_limit;
+          break;
+        case 0:
+          colorClass = styles.limitColumnBadge_on_the_limit;
+          break;
+        default:
+          colorClass = styles.limitColumnBadge_below_the_limit;
+          break;
+      }
+
       this.insertHTML(
         document.querySelector(`.ghx-column[data-id="${leftTailColumnId}"]`),
         'beforeend',
         `
-          <span class="${styles.limitColumnBadge}">
+          <span class="${styles.limitColumnBadge} ${colorClass}">
               ${amountOfGroupTasks}/${groupLimit}
               <span class="${styles.limitColumnBadge__hint}">Issues per group / Max number of issues per group</span>
           </span>`
diff --git a/src/column-limits/BoardPage/styles.css b/src/column-limits/BoardPage/styles.css
index 7e43e4a..a2e719a 100644
--- a/src/column-limits/BoardPage/styles.css
+++ b/src/column-limits/BoardPage/styles.css
@@ -7,6 +7,17 @@
   font-size: 0.8rem;
   margin: 0 10px;
   color: white;
+}
+
+.limitColumnBadge_over_wip_limit {
+  background-color: #ff5630;
+}
+
+.limitColumnBadge_on_the_limit {
+  background-color: #ffd700;
+}
+
+.limitColumnBadge_below_the_limit {
   background-color: #1b855c;
 }