Use more specific styling for kinds in ProgressBar

(cherry picked from commit dd31c913d2a974d95f3be251714ce749cfd99a72)

frontend/src/Components/ProgressBar.css

@@ -16,36 +16,12 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
-}
-
-.frontTextContainer {
-  z-index: 1;
-  color: var(--white);
-}
-
-.backTextContainer,
-.frontTextContainer {
-  position: absolute;
-  overflow: hidden;
-  width: 0;
-  height: 100%;
-}
-
-.backText,
-.frontText {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 12px;
-  cursor: default;
-}
 
-.primary {
+  &.primary {
     background-color: var(--primaryColor);
   }
 
-.danger {
+  &.danger {
     background-color: var(--dangerColor);
 
     &:global(.colorImpaired) {
@@ -53,15 +29,15 @@
     }
   }
 
-.success {
+  &.success {
     background-color: var(--successColor);
   }
 
-.purple {
+  &.purple {
     background-color: var(--purple);
   }
 
-.warning {
+  &.warning {
     background-color: var(--warningColor);
 
     &:global(.colorImpaired) {
@@ -69,9 +45,33 @@
     }
   }
 
-.info {
+  &.info {
     background-color: var(--infoColor);
   }
+}
+
+.frontTextContainer {
+  z-index: 1;
+  color: var(--white);
+}
+
+.backTextContainer,
+.frontTextContainer {
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+  height: 100%;
+}
+
+.backText,
+.frontText {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+  cursor: default;
+}
 
 .small {
   height: $progressBarSmallHeight;

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