From 546fd7c950a755d53132cbdb1574bc0fcb20367a Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:15:50 +0100
Subject: [PATCH] feat: style progress bar

---
 .../OrdersTableContainer/OrderRow/styled.tsx  | 23 +++++++++++++++-
 .../pure/ReceiptModal/FilledField.tsx         |  7 ++++-
 .../ordersTable/pure/ReceiptModal/styled.ts   | 27 +------------------
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx b/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
index fb197e679e..f52d012e8d 100644
--- a/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
+++ b/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
@@ -159,9 +159,30 @@ export const CurrencyAmountWrapper = styled.div`
   gap: 2px;
 `
 
+export const ProgressBarWrapper = styled.div`
+  width: 100%;
+  max-width: 50%;
+  align-items: center;
+  flex-flow: row nowrap;
+  gap: 8px;
+  flex-direction: row-reverse;
+  padding: 0 0;
+  font-size: 12px;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  text-align: left;
+  background: transparent;
+  justify-content: center;
+
+  > b {
+    line-height: 1;
+  }
+`
+
 export const ProgressBar = styled.div<{ value: number }>`
   position: relative;
-  margin: 2px 0 0;
+  margin: 0;
   height: 5px;
   width: 100%;
   background: ${({ theme }) => (theme.darkMode ? theme.bg1 : transparentize(0.92, theme.text1))};
diff --git a/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx b/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx
index b9ac819eb3..5c2752ac09 100644
--- a/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx
+++ b/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx
@@ -1,5 +1,7 @@
 // Code based on https://github.com/cowprotocol/explorer/blob/develop/src/components/orders/FilledProgress/index.tsx
 
+import { ProgressBarWrapper, ProgressBar } from 'modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled'
+
 import { TokenAmount } from 'common/pure/TokenAmount'
 import { getFilledAmounts } from 'utils/orderUtils/getFilledAmounts'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
@@ -21,7 +23,10 @@ export function FilledField({ order }: Props) {
   return (
     <styledEl.Value>
       <styledEl.InlineWrapper>
-        <styledEl.Progress active={filledPercentDisplay || 0} />
+        <ProgressBarWrapper>
+          <b>{filledPercentDisplay}%</b>
+          <ProgressBar value={filledPercentDisplay || 0}></ProgressBar>
+        </ProgressBarWrapper>
       </styledEl.InlineWrapper>
 
       <styledEl.InlineWrapper>
diff --git a/src/modules/ordersTable/pure/ReceiptModal/styled.ts b/src/modules/ordersTable/pure/ReceiptModal/styled.ts
index dce6acf859..836c5be695 100644
--- a/src/modules/ordersTable/pure/ReceiptModal/styled.ts
+++ b/src/modules/ordersTable/pure/ReceiptModal/styled.ts
@@ -147,38 +147,13 @@ export const Value = styled.div`
   font-weight: 500;
 `
 
-export const Progress = styled.div<{ active: number | string }>`
-  --height: 4px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-  height: var(--height);
-  width: 150px;
-
-  &::before {
-    display: inline-block;
-    content: '';
-    height: 100%;
-    width: 100%;
-    border-radius: var(--height);
-    background: ${({ theme, active }) =>
-      `linear-gradient(90deg, ${theme.success} ${active}%, ${theme.bg3} ${active}%)`};
-  }
-
-  &::after {
-    display: inline-block;
-    content: '${({ active }) => `${active}%`}';
-    color: ${({ theme }) => theme.success};
-  }
-`
-
 export const InlineWrapper = styled.div`
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 6px;
+  width: 100%;
 `
 
 export const Surplus = styled.span`