reset connect widget styles

XLabs · Sep 17, 2024 · d3e662d · d3e662d
1 parent ecb0a5f
commit d3e662d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 134 deletions.
diff --git 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"
  />
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet" />
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500&display=swap" rel="stylesheet" /> 
  </head>
  <body>
  <div id="root"></div>

diff --git 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
@@ -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',
- },
+ }
 };