From be23850dc3073278bf8334e0346be8d338356371 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Mon, 9 Dec 2024 18:07:25 -0500 Subject: [PATCH] add TurnkeyThemeProvider to apply theme to all components --- .../src/app/dashboard/page.tsx | 2 +- examples/react-components/src/app/layout.tsx | 10 ++++--- .../sdk-react/src/components/auth/Auth.tsx | 11 ------- .../components/auth/TurnkeyThemeProvider.tsx | 30 +++++++++++++++++++ .../sdk-react/src/components/auth/index.ts | 1 + .../src/components/export/Export.module.css | 18 +++++------ .../src/components/import/Import.module.css | 18 +++++------ 7 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx index ee572a7c..9502f3c7 100644 --- a/examples/react-components/src/app/dashboard/page.tsx +++ b/examples/react-components/src/app/dashboard/page.tsx @@ -6,6 +6,7 @@ import { useTurnkey, getSuborgs, OtpVerification, + TurnkeyThemeProvider, } from "@turnkey/sdk-react"; import { useEffect, useState } from "react"; import "./dashboard.css"; @@ -431,7 +432,6 @@ export default function Dashboard() { return (
-
diff --git a/examples/react-components/src/app/layout.tsx b/examples/react-components/src/app/layout.tsx index 6ae06089..49704bd3 100644 --- a/examples/react-components/src/app/layout.tsx +++ b/examples/react-components/src/app/layout.tsx @@ -1,7 +1,7 @@ "use client"; import "@turnkey/sdk-react/styles"; -import { TurnkeyProvider } from "@turnkey/sdk-react"; +import { TurnkeyProvider, TurnkeyThemeProvider } from "@turnkey/sdk-react"; const turnkeyConfig = { apiBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!, @@ -22,9 +22,11 @@ function RootLayout({ children }: RootLayoutProps) { Turnkey Auth Demo - - {children} - + + + {children} + + ); } diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index e4180829..e3b6fe08 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -59,7 +59,6 @@ interface AuthProps { googleEnabled: boolean; }; configOrder: string[]; - theme?: Record; } const Auth: React.FC = ({ @@ -67,7 +66,6 @@ const Auth: React.FC = ({ onError, authConfig, configOrder, - theme, }) => { const { passkeyClient, authIframeClient } = useTurnkey(); const [email, setEmail] = useState(""); @@ -82,15 +80,6 @@ const Auth: React.FC = ({ const [loading, setLoading] = useState(true); const [passkeyCreated, setPasskeyCreated] = useState(false); - useEffect(() => { - if (theme) { - const root = document.documentElement.style; - Object.entries(theme).forEach(([key, value]) => { - root.setProperty(key, value); - }); - } - }, [theme]); - const handleResendCode = async () => { if (step === "otpEmail") { await handleOtpLogin("EMAIL", email, "OTP_TYPE_EMAIL"); diff --git a/packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx b/packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx new file mode 100644 index 00000000..724fc389 --- /dev/null +++ b/packages/sdk-react/src/components/auth/TurnkeyThemeProvider.tsx @@ -0,0 +1,30 @@ +import React, { createContext, useContext, useEffect } from "react"; + +const ThemeContext = createContext | null>(null); + +interface ThemeProviderProps { + children: React.ReactNode; + theme?: Record; +} + +export const TurnkeyThemeProvider: React.FC = ({ + children, + theme, +}) => { + useEffect(() => { + if (theme) { + const root = document.documentElement.style; + Object.entries(theme).forEach(([key, value]) => { + root.setProperty(key, value); + }); + } + }, [theme]); + + return ( + + {children} + + ); +}; + +export const useTheme = () => useContext(ThemeContext); diff --git a/packages/sdk-react/src/components/auth/index.ts b/packages/sdk-react/src/components/auth/index.ts index e804f00e..1f4bf3b1 100644 --- a/packages/sdk-react/src/components/auth/index.ts +++ b/packages/sdk-react/src/components/auth/index.ts @@ -1,2 +1,3 @@ export { default as Auth } from "./Auth"; export { default as OtpVerification } from "./OtpVerification"; +export { TurnkeyThemeProvider } from "./TurnkeyThemeProvider"; diff --git a/packages/sdk-react/src/components/export/Export.module.css b/packages/sdk-react/src/components/export/Export.module.css index d3667860..77c03ab8 100644 --- a/packages/sdk-react/src/components/export/Export.module.css +++ b/packages/sdk-react/src/components/export/Export.module.css @@ -42,25 +42,25 @@ justify-content: center; padding: 10px 16px; gap: 8px; - color: #ffffff; + color: var(--button-text); width: 100%; font-size: 1rem; - background: var(--Greyscale-900, #2b2f33); - border: 1px solid var(--Greyscale-800, #3f464b); + background: var(--button-bg); + border: 1px solid var(--button-border); border-radius: 8px; cursor: pointer; - transition: 0.3s ease; + transition: background-color 0.3s ease; } .exportButton:hover { - background-color: var(--Greyscale-700, #4a4f55); + background-color: var(--button-hover-bg); } .exportButton:disabled { - color: var(--Greyscale-700, #a2a7ae); - background: #ffffff; - border-color: var(--Greyscale-400, #a2a7ae); - cursor: not-allowed; + color: var(--button-disabled-text); + background: var(--button-disabled-bg); + border-color: var(--button-disabled-border); + cursor: default; } .rowsContainer { diff --git a/packages/sdk-react/src/components/import/Import.module.css b/packages/sdk-react/src/components/import/Import.module.css index 73fb1859..38b9a406 100644 --- a/packages/sdk-react/src/components/import/Import.module.css +++ b/packages/sdk-react/src/components/import/Import.module.css @@ -38,25 +38,25 @@ justify-content: center; padding: 10px 16px; gap: 8px; - color: #ffffff; + color: var(--button-text); width: 100%; font-size: 1rem; - background: var(--Greyscale-900, #2b2f33); - border: 1px solid var(--Greyscale-800, #3f464b); + background: var(--button-bg); + border: 1px solid var(--button-border); border-radius: 8px; cursor: pointer; - transition: 0.3s ease; + transition: background-color 0.3s ease; } .importButton:hover { - background-color: var(--Greyscale-700, #4a4f55); + background-color: var(--button-hover-bg); } .importButton:disabled { - color: var(--Greyscale-700, #a2a7ae); - background: #ffffff; - border-color: var(--Greyscale-400, #a2a7ae); - cursor: not-allowed; + color: var(--button-disabled-text); + background: var(--button-disabled-bg); + border-color: var(--button-disabled-border); + cursor: default; } .poweredBy {