From 7cb465787edd4221b0fe315180ac71ad0656d191 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 31 May 2023 04:00:52 +0300
Subject: [PATCH] Use more specific styling for kinds in ProgressBar

(cherry picked from commit dd31c913d2a974d95f3be251714ce749cfd99a72)
---
 frontend/src/Components/ProgressBar.css | 64 ++++++++++++-------------
 frontend/src/Components/ProgressBar.js  |  4 +-
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css
index 81510545a..d6f9069c0 100644
--- a/frontend/src/Components/ProgressBar.css
+++ b/frontend/src/Components/ProgressBar.css
@@ -16,6 +16,38 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
+
+  &.primary {
+    background-color: var(--primaryColor);
+  }
+
+  &.danger {
+    background-color: var(--dangerColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
+    }
+  }
+
+  &.success {
+    background-color: var(--successColor);
+  }
+
+  &.purple {
+    background-color: var(--purple);
+  }
+
+  &.warning {
+    background-color: var(--warningColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
+    }
+  }
+
+  &.info {
+    background-color: var(--infoColor);
+  }
 }
 
 .frontTextContainer {
@@ -41,38 +73,6 @@
   cursor: default;
 }
 
-.primary {
-  background-color: var(--primaryColor);
-}
-
-.danger {
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
-  }
-}
-
-.success {
-  background-color: var(--successColor);
-}
-
-.purple {
-  background-color: var(--purple);
-}
-
-.warning {
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
-  }
-}
-
-.info {
-  background-color: var(--infoColor);
-}
-
 .small {
   height: $progressBarSmallHeight;
 
diff --git a/frontend/src/Components/ProgressBar.js b/frontend/src/Components/ProgressBar.js
index 8d8eef38c..0cf04da46 100644
--- a/frontend/src/Components/ProgressBar.js
+++ b/frontend/src/Components/ProgressBar.js
@@ -38,7 +38,7 @@ function ProgressBar(props) {
             {
               showText && width ?
                 <div
-                  className={styles.backTextContainer}
+                  className={classNames(styles.backTextContainer, styles[kind])}
                   style={{ width: actualWidth }}
                 >
                   <div className={styles.backText}>
@@ -67,7 +67,7 @@ function ProgressBar(props) {
             {
               showText ?
                 <div
-                  className={styles.frontTextContainer}
+                  className={classNames(styles.frontTextContainer, styles[kind])}
                   style={{ width: progressPercent }}
                 >
                   <div