feat: Dashboard Responsive Web Develop (#184)

gnoswap-labs · Aug 23, 2023 · 910c832 · 910c832
1 parent 13363eb
commit 910c832
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
@@ -128,14 +128,20 @@ export const SupplyInfoWrapper = styled.div`
   }
 `;
 
-export const ProgressBar = styled.div`
+export interface progressBarProps {
+  width?: string;
+}
+
+export const ProgressBar = styled.div<progressBarProps>`
   ${mixins.flexbox("column", "flex-start", "center")};
   width: 100%;
   height: 12px;
   border-radius: 99px;
   background-color: ${({ theme }) => theme.color.background11};
   .progress-bar-rate {
-    width: 245px;
+    width: ${({ width }) => {
+      return width ? width : "0%";
+    }};
     height: 12px;
     border-radius: 8px;
     background-color: ${({ theme }) => theme.color.point};

diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx
@@ -30,7 +30,7 @@ const SupplyOverview: React.FC<SupplyOverviewInfoProps> = ({
           </div>
           <div>{supplyOverviewInfo.circulatingSupply}</div>
         </div>
-        <ProgressBar>
+        <ProgressBar width={"60%"}>
           <div className="progress-bar-rate" />
         </ProgressBar>
       </div>