diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx index 74becaec203..b79fa8bf54b 100644 --- a/apps/login/app/layout.tsx +++ b/apps/login/app/layout.tsx @@ -8,6 +8,7 @@ import Byline from "#/ui/Byline"; import { LayoutProviders } from "#/ui/LayoutProviders"; import { Analytics } from "@vercel/analytics/react"; import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist"; +import ThemeWrapper from "#/ui/ThemeWrapper"; const lato = Lato({ weight: "400", @@ -23,33 +24,36 @@ export default function RootLayout({ - -
- + {/* @ts-expect-error Server Component */} + + +
+ -
-
-
-
- +
+
+
+
+ +
-
-
-
- {children} +
+
+ {children} +
-
-
-
- +
+
+ +
-
- + + diff --git a/apps/login/lib/zitadel.ts b/apps/login/lib/zitadel.ts index 360e8d27b2c..34ee318a0eb 100644 --- a/apps/login/lib/zitadel.ts +++ b/apps/login/lib/zitadel.ts @@ -28,6 +28,7 @@ export function getBranding( server: ZitadelServer ): Promise { const mgmt = getManagement(server); + console.log(process.env.ZITADEL_ORG_ID); return mgmt .getLabelPolicy( {}, diff --git a/apps/login/ui/LayoutProviders.tsx b/apps/login/ui/LayoutProviders.tsx index a99b74894af..620ff9085ff 100644 --- a/apps/login/ui/LayoutProviders.tsx +++ b/apps/login/ui/LayoutProviders.tsx @@ -1,19 +1,24 @@ -import ThemeWrapper from "./ThemeWrapper"; +"use client"; + +import { ThemeProvider, useTheme } from "next-themes"; type Props = { children: React.ReactNode; }; export function LayoutProviders({ children }: Props) { + const { resolvedTheme } = useTheme(); + const isDark = resolvedTheme && resolvedTheme === "dark"; + + console.log(isDark); return ( - // - /* @ts-expect-error Server Component */ - {children} - // + +
{children}
+ ); } diff --git a/apps/login/ui/ThemeWrapper.tsx b/apps/login/ui/ThemeWrapper.tsx index 818285a0ffb..6104a6d4d70 100644 --- a/apps/login/ui/ThemeWrapper.tsx +++ b/apps/login/ui/ThemeWrapper.tsx @@ -1,32 +1,35 @@ import { getBranding } from "#/lib/zitadel"; import { server } from "../lib/zitadel"; -import { use } from "react"; const ThemeWrapper = async ({ children }: any) => { console.log("hehe"); - // const { resolvedTheme } = useTheme(); - const isDark = true; //resolvedTheme && resolvedTheme === "dark"; + + const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600"; try { const policy = await getBranding(server); - const backgroundStyle = { - backgroundColor: `${policy?.backgroundColorDark}.`, + const darkStyles = { + backgroundColor: `${policy?.backgroundColorDark}`, + color: `${policy?.fontColorDark}`, + }; + + const lightStyles = { + backgroundColor: `${policy?.backgroundColor}`, + color: `${policy?.fontColor}`, }; console.log(policy); return ( -
-
{children}
+
+ {children}
); } catch (error) { console.error(error); - return ( -
{children}
- ); + return
{children}
; } }; diff --git a/apps/login/ui/ZitadelLogo.tsx b/apps/login/ui/ZitadelLogo.tsx index 20c7e066bdd..a260424e93d 100644 --- a/apps/login/ui/ZitadelLogo.tsx +++ b/apps/login/ui/ZitadelLogo.tsx @@ -17,22 +17,16 @@ export function ZitadelLogo({ height = 40, width = 147.5 }: Props) { width={width} src="/zitadel-logo-light.svg" alt="zitadel logo" - style={{ - maxWidth: "100%", - height: "auto", - }} + priority={true} />
zitadel logo
diff --git a/turbo.json b/turbo.json index 4a2739d194d..0bc48825df1 100644 --- a/turbo.json +++ b/turbo.json @@ -26,6 +26,7 @@ "ZITADEL_API_URL", "ZITADEL_PROJECT_ID", "ZITADEL_APP_ID", - "ZITADEL_SERVICE_USER_TOKEN" + "ZITADEL_SERVICE_USER_TOKEN", + "ZITADEL_ORG_ID" ] }