Changed text button. Added ability to change color via environment va…

…riables.
gateway-fm · Aug 5, 2024 · 17d9300 · 17d9300
1 parent 5ac9bc8
commit 17d9300
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 22 deletions.
diff --git a/.env.example b/.env.example
@@ -46,3 +46,20 @@ VITE_REPORT_FORM_ERROR_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_PLATFORM_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_URL_ENTRY=entry.xxxxxx
 
+#CUSTOMIZABLE ENV VARIABLES COLORS
+
+VITE_THEME_COLOR_BLACK=#0a0b0d
+VITE_THEME_COLOR_ERROR_LIGHT=rgba(232,67,12,0.1)
+VITE_THEME_COLOR_ERROR_MAIN=#e8430d
+VITE_THEME_COLOR_GREY_DARK=#78798d
+VITE_THEME_COLOR_GREY_LIGHT=#f0f1f6
+VITE_THEME_COLOR_GREY_MAIN=#e2e5ee
+VITE_THEME_COLOR_GREY_VERY_DARK=#363740
+VITE_THEME_COLOR_PRIMARY_DARK=#5a1cc3
+VITE_THEME_COLOR_PRIMARY_MAIN=#7b3fe4
+VITE_THEME_COLOR_SUCCESS_LIGHT=rgba(0,255,0,0.1)
+VITE_THEME_COLOR_SUCCESS_MAIN=#1ccc8d
+VITE_THEME_COLOR_TRANSPARENCY=rgba(8,17,50,0.5)
+VITE_THEME_COLOR_WARNING_LIGHT=rgba(225,126,38,0.1)
+VITE_THEME_COLOR_WARNING_MAIN=#e17e26
+VITE_THEME_COLOR_WHITE=#ffffff
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -1,35 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 export const theme = {
   breakpoints: {
     upSm: "@media (min-width: 480px)",
   },
   hoverTransition: "all 150ms",
   maxWidth: 644,
   palette: {
-    black: "#0a0b0d",
+    black: import.meta.env.VITE_THEME_COLOR_BLACK || "#0a0b0d",
     error: {
-      light: "rgba(232,67,12,0.1)",
-      main: "#e8430d",
+      light: import.meta.env.VITE_THEME_COLOR_ERROR_LIGHT || "rgba(232,67,12,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_ERROR_MAIN || "#e8430d",
     },
     grey: {
-      dark: "#78798d",
-      light: "#f0f1f6",
-      main: "#e2e5ee",
-      veryDark: "#363740",
+      dark: import.meta.env.VITE_THEME_COLOR_GREY_DARK || "#78798d",
+      light: import.meta.env.VITE_THEME_COLOR_GREY_LIGHT || "#f0f1f6",
+      main: import.meta.env.VITE_THEME_COLOR_GREY_MAIN || "#e2e5ee",
+      veryDark: import.meta.env.VITE_THEME_COLOR_GREY_VERY_DARK || "#363740",
     },
     primary: {
-      dark: "#5a1cc3",
-      main: "#7b3fe4",
+      dark: import.meta.env.VITE_THEME_COLOR_PRIMARY_DARK || "#5a1cc3",
+      main: import.meta.env.VITE_THEME_COLOR_PRIMARY_MAIN || "#7b3fe4",
     },
     success: {
-      light: "rgba(0,255,0,0.1)",
-      main: "#1ccc8d",
+      light: import.meta.env.VITE_THEME_COLOR_SUCCESS_LIGHT || "rgba(0,255,0,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_SUCCESS_MAIN || "#54DC04",
     },
-    transparency: "rgba(8,17,50,0.5)",
+    transparency: import.meta.env.VITE_THEME_COLOR_TRANSPARENCY || "rgba(8,17,50,0.5)",
     warning: {
-      light: "rgba(225,126,38,0.1)",
-      main: "#e17e26",
+      light: import.meta.env.VITE_THEME_COLOR_WARNING_LIGHT || "rgba(225,126,38,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_WARNING_MAIN || "#e17e26",
     },
-    white: "#ffffff",
+    white: import.meta.env.VITE_THEME_COLOR_WHITE || "#ffffff",
   },
   spacing: (value: number): number => value * 8,
 };

diff --git a/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx b/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx
@@ -31,7 +31,7 @@ export const BridgeButton: FC<BridgeButtonProps> = ({
       case "pending": {
         return (
           <Button onClick={onApprove}>
-            {`Allow Polygon zkEVM Bridge to spend my ${token.symbol}`}
+            {`Allow Bridge to spend my ${token.name}`}
           </Button>
         );
       }