From 4612829e5bae82df209a2235c706b0e285c964a7 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 20 May 2023 22:48:14 +0200
Subject: [PATCH] fix: prevent css collision (#404)

---
 .../multi-part-progress-bar/MultiPartProgressBar.scss  | 10 +++++-----
 .../multi-part-progress-bar/MultiPartProgressBar.tsx   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
index 98c97f2bc..4b3ed43cd 100644
--- a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
+++ b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
@@ -3,7 +3,7 @@
 $progress-bar-size: 12px;
 $progress-bar-br: 3px;
 
-.progress-bar {
+.multiprogress-bar {
   position: relative;
   width: 100%;
   height: $progress-bar-size;
@@ -17,7 +17,7 @@ $progress-bar-br: 3px;
   }
 }
 
-.progress-bar__indicator {
+.multiprogress-bar__indicator {
   position: absolute;
   height: inherit;
   background-color: black;
@@ -27,7 +27,7 @@ $progress-bar-br: 3px;
   right: 0;
 }
 
-.progress-bar__bg-normal {
+.multiprogress-bar__bg-normal {
   position: absolute;
   height: inherit;
   right: 0;
@@ -35,14 +35,14 @@ $progress-bar-br: 3px;
   width: 100%;
 }
 
-.progress-bar__bg-warning {
+.multiprogress-bar__bg-warning {
   position: absolute;
   height: inherit;
   right: 0;
   border-radius: 0 $progress-bar-br $progress-bar-br 0;
 }
 
-.progress-bar__bg-danger {
+.multiprogress-bar__bg-danger {
   position: absolute;
   height: inherit;
   right: 0;
diff --git a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
index 9ccd03380..462987b3c 100644
--- a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+++ b/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
@@ -23,11 +23,11 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const warningWidth = clamp((warning / complete) * 100, 0, 100);
 
   return (
-    <div className={`progress-bar ${hidden ? 'progress-bar--hidden' : ''} ${className}`}>
-      <div className='progress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='progress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='progress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
-      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
+      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
     </div>
   );
 }