chore: only color with COLORS

across-protocol · Nov 2, 2023 · bd09774 · bd09774
1 parent 4d93841
commit bd09774
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/GlobalStyles/GlobalStyles.tsx b/src/components/GlobalStyles/GlobalStyles.tsx
@@ -42,6 +42,7 @@ const variables = css`
 
     --color-brand-aqua: #6cf9d8;
     --color-interface-aqua: #6cf9d8;
+    --color-interface-aqua-5: #6cf9d80d;
     --color-interface-aqua-15: #6cf9d826;
 
     --color-interface-teal: #44d2ff;

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -565,6 +565,7 @@ export const COLORS = {
   red: "var(--color-interface-red)",
   yellow: "var(--color-interface-yellow)",
   aqua: "var(--color-interface-aqua)",
+  "aqua-5": "var(--color-interface-aqua-5)",
   "aqua-15": "var(--color-interface-aqua-15)",
   teal: "var(--color-interface-teal)",
   "teal-5": "var(--color-interface-teal-5)",

diff --git a/src/views/Bridge/components/EstimatedTable.tsx b/src/views/Bridge/components/EstimatedTable.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as UnstyledArrowIcon } from "assets/icons/arrow-16.svg";
 import {
   bridgedUSDCSymbolsMap,
   capitalizeFirstLetter,
+  COLORS,
   formatUnits,
   formatUnitsFnBuilder,
   getChainInfo,
@@ -319,7 +320,7 @@ const ShiftedRow = styled(Row)`
 `;
 
 const WhiteText = styled.span`
-  color: #e0f3ff;
+  color: ${COLORS.white};
 `;
 
 const TotalReceiveRow = styled.div`
@@ -332,7 +333,7 @@ const TotalReceiveRow = styled.div`
 const WarningInfoIcon = styled(InfoIcon)`
   margin-top: 8px;
   path {
-    stroke: #f9d26c;
+    stroke: ${COLORS.warning};
   }
 `;
 
@@ -362,8 +363,8 @@ const ReferralRewardWrapper = styled.div`
 
   // Style
   border-radius: 22px;
-  border: 1px solid var(--color-interface-aqua-15, rgba(108, 249, 216, 0.15));
-  background: var(--color-interface-aqua-5, rgba(108, 249, 216, 0.05));
+  border: 1px solid ${COLORS["aqua-15"]};
+  background: ${COLORS["aqua-5"]};
 `;
 
 const BaseCurrencyWrapper = styled.div`
@@ -380,13 +381,13 @@ const Divider = styled.div`
   align-items: center;
   gap: 10px;
   align-self: stretch;
-  background: var(--color-neutrals-grey-600, #3e4047);
+  background: ${COLORS["grey-600"]};
   width: 100%;
 `;
 
 const ArrowIconDown = styled(UnstyledArrowIcon)`
   path {
-    stroke: #9daab2;
+    stroke: ${COLORS["white-70"]};
   }
 `;