From 3305ec995f4ce782e3320509da7be067acf4060e Mon Sep 17 00:00:00 2001
From: aidencao <aiden.c@nodereal.io>
Date: Wed, 13 Sep 2023 19:48:30 +0800
Subject: [PATCH] feat(dcellar-web-ui): fix progress bar bg

---
 .../src/components/formitems/QuotaItem.tsx          | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx b/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx
index 8c6155e6..6694a665 100644
--- a/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx
+++ b/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx
@@ -78,12 +78,10 @@ export const QuotaItem = memo<QuotaItemProps>(function QuotaItem({ value, curren
   };
 
   const onDragStart = (e: React.MouseEvent<HTMLDivElement>) => {
-    const indicator = e.target as HTMLDivElement;
-    const trackElem = indicator.parentElement as HTMLDivElement;
+    const container = document.getElementById('buy-quota-progress-bar')!;
     const movingClass = 'indicator-moving';
 
-    indicator.classList.add(movingClass);
-    trackElem.classList.add(movingClass);
+    container.classList.add(movingClass);
     document.body.style.cursor = 'pointer';
     document.body.style.userSelect = 'none';
 
@@ -98,8 +96,7 @@ export const QuotaItem = memo<QuotaItemProps>(function QuotaItem({ value, curren
     const mouseup = () => {
       document.body.style.cursor = 'default';
       document.body.style.userSelect = '';
-      indicator.classList.remove(movingClass);
-      trackElem.classList.remove(movingClass);
+      container.classList.remove(movingClass);
       document.removeEventListener('mousemove', mousemove);
       document.removeEventListener('mouseup', mouseup);
     };
@@ -224,7 +221,7 @@ const Indicator = styled(Box)`
   right: -7px;
   top: -3px;
   cursor: pointer;
-  &.indicator-moving {
+  .indicator-moving & {
     background: #009e2c;
   }
 `;
@@ -235,7 +232,7 @@ const Progress = styled(Box)`
   position: absolute;
   left: 0;
   top: 0;
-  &.indicator-moving {
+  .indicator-moving & {
     background: #009e2c;
   }
 `;