Merge pull request #301 from porters-xyz/theme-update-connectkit

web-portal/frontend/styles/connectkit-theme.ts

@@ -0,0 +1,99 @@
+import { karla } from "@frontend/utils/theme"
+export const connectKitTheme = {
+  "--ck-font-family": karla.style.fontFamily,
+  "--ck-font-weight": "500",
+  "--ck-border-radius": "5px",
+  "--ck-overlay-backdrop-filter": "blur(2px)",
+  "--ck-modal-heading-font-weight": "800",
+  "--ck-qr-border-radius": "16px",
+  "--ck-connectbutton-font-size": "15px",
+  "--ck-connectbutton-color": "#ffffff",
+  "--ck-connectbutton-background": "#FFA44B",
+  "--ck-connectbutton-background-secondary": "#FFFFFF",
+  "--ck-connectbutton-border-radius": "5px",
+  "--ck-connectbutton-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-connectbutton-hover-color": "#ffffff",
+  "--ck-connectbutton-hover-background": "#F19337",
+  "--ck-connectbutton-hover-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-connectbutton-active-color": "#ffffff",
+  "--ck-connectbutton-active-background": "#EAECF1",
+  "--ck-connectbutton-active-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-connectbutton-balance-color": "#373737",
+  "--ck-connectbutton-balance-background": "#fff",
+  "--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px #F6F7F9",
+  "--ck-connectbutton-balance-hover-background": "#F6F7F9",
+  "--ck-connectbutton-balance-hover-box-shadow": "inset 0 0 0 1px #F0F2F5",
+  "--ck-connectbutton-balance-active-background": "#F0F2F5",
+  "--ck-connectbutton-balance-active-box-shadow": "inset 0 0 0 1px #EAECF1",
+  "--ck-primary-button-font-weight": "600",
+  "--ck-primary-button-border-radius": "5px",
+  "--ck-primary-button-color": "#3C2B27",
+  "--ck-primary-button-background": "#F6EEE6",
+  "--ck-primary-button-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-primary-button-hover-color": "#3C2B27",
+  "--ck-primary-button-hover-background": "#F3E4D5",
+  "--ck-primary-button-hover-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-primary-button-active-color": "#373737",
+  "--ck-primary-button-active-background": "#F3E4D5",
+  "--ck-primary-button-active-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-secondary-button-font-weight": "800",
+  "--ck-secondary-button-border-radius": "5px",
+  "--ck-secondary-button-color": "#ffffff",
+  "--ck-secondary-button-background": "#FFA44B",
+  "--ck-secondary-button-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-secondary-button-hover-color": "#Ffffff",
+  "--ck-secondary-button-hover-background": "#F89230",
+  "--ck-secondary-button-hover-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-secondary-button-active-color": "#373737",
+  "--ck-secondary-button-active-background": "#F89230",
+  "--ck-secondary-button-active-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-tertiary-button-font-weight": "500",
+  "--ck-tertiary-button-border-radius": "16px",
+  "--ck-tertiary-button-color": "#ffffff",
+  "--ck-tertiary-button-background": "#AA866E",
+  "--ck-tertiary-button-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-tertiary-button-hover-color": "#ffffff",
+  "--ck-tertiary-button-hover-background": "#8E674C",
+  "--ck-tertiary-button-hover-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-tertiary-button-active-color": "#373737",
+  "--ck-tertiary-button-active-background": "#F6F7F9",
+  "--ck-tertiary-button-active-box-shadow": "0 0 0 0 #ffffff",
+  "--ck-modal-box-shadow": "0px 2px 4px 0px #00000005",
+  "--ck-overlay-background": "#e4761d08",
+  "--ck-body-color": "#3C2B27",
+  "--ck-body-color-muted": "#AA866E",
+  "--ck-body-color-muted-hover": "#111111",
+  "--ck-body-background": "#ffffff",
+  "--ck-body-background-transparent": "rgba(255,255,255,0)",
+  "--ck-body-background-secondary": "#f6f7f9",
+  "--ck-body-background-secondary-hover-background": "#e0e4eb",
+  "--ck-body-background-secondary-hover-outline": "#4282FF",
+  "--ck-body-background-tertiary": "#F3F4F7",
+  "--ck-body-action-color": "#AA866E",
+  "--ck-body-divider": "#f7f6f8",
+  "--ck-body-color-danger": "#FF4E4E",
+  "--ck-body-color-valid": "#32D74B",
+  "--ck-siwe-border": "#F0F0F0",
+  "--ck-body-disclaimer-background": "#f6f7f9",
+  "--ck-body-disclaimer-color": "#AAAAAB",
+  "--ck-body-disclaimer-link-color": "#838485",
+  "--ck-body-disclaimer-link-hover-color": "#000000",
+  "--ck-tooltip-background": "#ffffff",
+  "--ck-tooltip-background-secondary": "#ffffff",
+  "--ck-tooltip-color": "#7C6353",
+  "--ck-tooltip-shadow": "0px 2px 10px 0 #00000014",
+  "--ck-dropdown-button-color": "#999999",
+  "--ck-dropdown-button-box-shadow": "0 0 0 1px rgba(0,0,0,0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)",
+  "--ck-dropdown-button-background": "#fff",
+  "--ck-dropdown-button-hover-color": "#8B8B8B",
+  "--ck-dropdown-button-hover-background": "#F5F7F9",
+  "--ck-qr-dot-color": "#AA866E",
+  "--ck-qr-background": "#ffffff",
+  "--ck-qr-border-color": "#F7F0EA",
+  "--ck-focus-color": "#1A88F8",
+  "--ck-spinner-color": "#AA866E",
+  "--ck-copytoclipboard-stroke": "#CCCCCC",
+  "--ck-recent-badge-color": "#777",
+  "--ck-recent-badge-background": "#F6F7F9",
+  "--ck-recent-badge-border-radius": "32px"
+}

web-portal/frontend/utils/Web3Provider.tsx

@@ -5,6 +5,7 @@ import { Provider as JotaiProvider } from "jotai";
 import {  WagmiProvider, createConfig, http } from "wagmi";
 import { ReactNode } from "react";
 import { siweConfig } from "./siwe";
+import { connectKitTheme } from "@frontend/styles/connectkit-theme";
 
 export const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!;
 export const NEXT_PUBLIC_APP_URL = process.env.NEXT_PUBLIC_APP_URL!;
@@ -50,7 +51,7 @@ export default function Web3Provider({
       <QueryClientProvider client={queryClient}>
         <JotaiProvider>
         <SIWEProvider {...siweConfig}>
-        <ConnectKitProvider>
+        <ConnectKitProvider customTheme={connectKitTheme}>
         {children}
         </ConnectKitProvider>
         </SIWEProvider>