[SWA-46] Fix MarketPrice Styles

SwaprHQ · Jun 20, 2023 · a619f5e · a619f5e
1 parent a7a4ac1
commit a619f5e
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/src/pages/Swap/LimitOrder/Components/OrderLimitPriceField/styles.ts b/src/pages/Swap/LimitOrder/Components/OrderLimitPriceField/styles.ts
@@ -1,6 +1,8 @@
 import { Flex } from 'rebass'
 import styled from 'styled-components'
 
+import { ReactComponent as ProgressCircle } from '../../../../../assets/images/progress-circle.svg'
+
 export const LimitLabel = styled.label`
   font-weight: 600;
   font-size: 10px;
@@ -77,3 +79,22 @@ export const ToggleCurrencyButton = styled.span`
 export const MarketPriceDiff = styled.span<{ isPositive: boolean }>`
   color: ${({ isPositive, theme }) => (isPositive ? theme.green2 : theme.red1)};
 `
+
+export const StyledProgressCircle = styled(ProgressCircle)`
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  transform: rotate(-90deg);
+
+  .move {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: dash 15s 0s infinite linear forwards;
+
+    @keyframes dash {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+  }
+`