TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 22:33:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

apply label policy

Browse Source
This commit is contained in:
Max Peintner
2023-04-21 16:13:52 +02:00
parent 12b9042392
commit f2b3d5ef7e
6 changed files with 55 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/login/app/layout.tsx
View File

@@ -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({
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head />
<body>
<LayoutProviders>
<div className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<GlobalNav />
{/* @ts-expect-error Server Component */}
<ThemeWrapper>
<LayoutProviders>
<div className="overflow-y-scroll bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<GlobalNav />
<div className="lg:pl-72">
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<AddressBar />
<div className="lg:pl-72">
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<AddressBar />
</div>
</div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
{children}
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
{children}
</div>
</div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<Byline />
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<Byline />
</div>
</div>
</div>
</div>
</div>
</div>
</LayoutProviders>
</LayoutProviders>
</ThemeWrapper>
<Analytics />
</body>
</html>

1
apps/login/lib/zitadel.ts
View File

@@ -28,6 +28,7 @@ export function getBranding(
server: ZitadelServer
): Promise<LabelPolicy | undefined> {
const mgmt = getManagement(server);
console.log(process.env.ZITADEL_ORG_ID);
return mgmt
.getLabelPolicy(
{},

25
apps/login/ui/LayoutProviders.tsx
View File

@@ -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 (
// <ThemeProvider
// attribute="class"
// defaultTheme="system"
// storageKey="cp-theme"
// value={{ dark: "dark" }}
// >
/* @ts-expect-error Server Component */
<ThemeWrapper>{children}</ThemeWrapper>
// </ThemeProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
storageKey="cp-theme"
value={{ dark: "dark" }}
>
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
</ThemeProvider>
);
}

23
apps/login/ui/ThemeWrapper.tsx
View File

@@ -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 (
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>
<div style={backgroundStyle}>{children}</div>
<div className={defaultClasses} style={darkStyles}>
{children}
</div>
);
} catch (error) {
console.error(error);
return (
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
);
return <div className={defaultClasses}>{children}</div>;
}
};

10
apps/login/ui/ZitadelLogo.tsx
View File

@@ -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}
/>
</div>
<div className="flex dark:hidden">
<Image
height={height}
width={width}
priority={true}
src="/zitadel-logo-dark.svg"
alt="zitadel logo"
style={{
maxWidth: "100%",
height: "auto",
}}
/>
</div>
</>