diff --git a/apps/connect/index.html b/apps/connect/index.html index c091cd803..f694f9311 100644 --- a/apps/connect/index.html +++ b/apps/connect/index.html @@ -19,6 +19,8 @@ href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet" /> + +
diff --git a/apps/connect/src/components/atoms/Connect.tsx b/apps/connect/src/components/atoms/Connect.tsx index 5a6fdac70..8ba1178e2 100644 --- a/apps/connect/src/components/atoms/Connect.tsx +++ b/apps/connect/src/components/atoms/Connect.tsx @@ -18,7 +18,7 @@ export const Connect = memo(() => { useEffect(() => { if (config) { - localStorage.setItem("Connect Config", JSON.stringify(config, null, 2)); + localStorage.setItem(`${window.location.href}?${import.meta.env.VITE_APP_VERSION}`, JSON.stringify(config, null, 2)); } }, [config]); diff --git a/apps/connect/src/theme/connect.ts b/apps/connect/src/theme/connect.ts index 8da6dff2e..73595065b 100644 --- a/apps/connect/src/theme/connect.ts +++ b/apps/connect/src/theme/connect.ts @@ -1,139 +1,7 @@ import type { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect"; export const theme: WormholeConnectConfig["customTheme"] = { - mode: "dark", - primary: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#424242", - 900: "#212121", - A100: "#f5f5f5", - A200: "#eeeeee", - A400: "#bdbdbd", - A700: "#616161", - }, - secondary: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#424242", - 900: "#212121", - A100: "#f5f5f5", - A200: "#eeeeee", - A400: "#bdbdbd", - A700: "#616161", - }, - divider: "#ffffff33", background: { default: "rgba(12, 9, 60, 0)", - }, - text: { - primary: "rgba(255, 255, 255, 0.9)", - secondary: "rgba(156, 157, 191, 1)", - }, - error: { - 50: "#ffebee", - 100: "#ffcdd2", - 200: "#ef9a9a", - 300: "#e57373", - 400: "#ef5350", - 500: "#f44336", - 600: "#e53935", - 700: "#d32f2f", - 800: "#c62828", - 900: "#b71c1c", - A100: "#ff8a80", - A200: "#ff5252", - A400: "#ff1744", - A700: "#d50000", - }, - info: { - 50: "#97a5b7", - 100: "#8293a9", - 200: "#6e819a", - 300: "#596f8c", - 400: "#445d7e", - 500: "#304C70", - 600: "#2b4464", - 700: "#263c59", - 800: "#21354e", - 900: "#1c2d43", - A100: "#304C70", - A200: "#304C70", - A400: "#304C70", - A700: "#304C70", - }, - success: { - 50: "#66d6cd", - 100: "#4dcfc4", - 200: "#33c8bc", - 300: "#1ac1b4", - 400: "#01BBAC", - 500: "#00a89a", - 600: "#009589", - 700: "#008278", - 800: "#007067", - 900: "#005d56", - A100: "#00a89a", - A200: "#00a89a", - A400: "#00a89a", - A700: "#00a89a", - }, - warning: { - 50: "#ffe3a4", - 100: "#ffdd91", - 200: "#ffd77f", - 300: "#ffd26d", - 400: "#ffcc5b", - 500: "#FFC749", - 600: "#e5b341", - 700: "#cc9f3a", - 800: "#b28b33", - 900: "#99772b", - A100: "#FFC749", - A200: "#FFC749", - A400: "#FFC749", - A700: "#FFC749", - }, - button: { - primary: "rgba(49, 50, 102, 1)", - primaryText: "#ffffff", - disabled: "#ffffff0F", - disabledText: "#ffffff66", - action: "#e47829", - actionText: "#ffffff", - hover: "#ffffff0F", - }, - options: { - hover: "#ffffff0F", - select: "#ffffff19", - }, - card: { - background: "rgba(31, 32, 69, 1)", - secondary: "#ffffff0C", - elevation: "none", - }, - popover: { - background: "#1b2033", - secondary: "#ffffff0C", - elevation: "none", - }, - modal: { - background: "rgba(15, 9, 44, 1)", - }, - font: { - primary: '"Poppins", regular', - header: '"Poppins", bold', - }, + } };