From 186fa17fe26c120e605972fa012848c412405a20 Mon Sep 17 00:00:00 2001
From: Max Peintner
Date: Mon, 24 Apr 2023 16:30:21 +0200
Subject: [PATCH] single exec of theme setter
---
apps/login/app/layout.tsx | 22 +++++--
apps/login/package.json | 2 +-
apps/login/ui/LayoutProviders.tsx | 9 ++-
apps/login/ui/Theme.tsx | 2 +-
apps/login/ui/ThemeWrapper.tsx | 21 +------
apps/login/utils/colors.ts | 98 ++++++++++++++++---------------
pnpm-lock.yaml | 76 ++++++++++++------------
7 files changed, 117 insertions(+), 113 deletions(-)
diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx
index 1edc6f07750..74f890c89e4 100644
--- a/apps/login/app/layout.tsx
+++ b/apps/login/app/layout.tsx
@@ -10,6 +10,7 @@ import { Analytics } from "@vercel/analytics/react";
import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
+import { LabelPolicyColors } from "#/utils/colors";
const lato = Lato({
weight: "400",
@@ -22,19 +23,32 @@ export default async function RootLayout({
children: React.ReactNode;
}) {
const branding = await getBranding(server);
+ let partialPolicy: LabelPolicyColors | undefined;
+ if (branding) {
+ partialPolicy = {
+ backgroundColor: branding?.backgroundColor,
+ backgroundColorDark: branding?.backgroundColorDark,
+ primaryColor: branding?.primaryColor,
+ primaryColorDark: branding?.primaryColorDark,
+ warnColor: branding?.warnColor,
+ warnColorDark: branding?.warnColorDark,
+ fontColor: branding?.fontColor,
+ fontColorDark: branding?.fontColorDark,
+ };
+ }
return (
-
+
-
+
-
@@ -46,7 +60,7 @@ export default async function RootLayout({
-
diff --git a/apps/login/package.json b/apps/login/package.json
index 51e2a1b6643..4b1e51415e4 100644
--- a/apps/login/package.json
+++ b/apps/login/package.json
@@ -26,7 +26,7 @@
"@zitadel/server": "workspace:*",
"clsx": "1.2.1",
"date-fns": "2.29.3",
- "next": "13.3.1-canary.13",
+ "next": "13.3.2-canary.2",
"next-themes": "^0.2.1",
"nice-grpc": "2.0.1",
"react": "18.2.0",
diff --git a/apps/login/ui/LayoutProviders.tsx b/apps/login/ui/LayoutProviders.tsx
index 5d0729b362e..38e21823b9b 100644
--- a/apps/login/ui/LayoutProviders.tsx
+++ b/apps/login/ui/LayoutProviders.tsx
@@ -1,8 +1,6 @@
"use client";
-import { ColorService } from "#/utils/colors";
import { ThemeProvider, useTheme } from "next-themes";
-import { useEffect } from "react";
type Props = {
children: React.ReactNode;
@@ -12,9 +10,10 @@ export function LayoutProviders({ children }: Props) {
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
- useEffect(() => {
- new ColorService(document);
- });
+ // useEffect(() => {
+ // console.log("layoutproviders useeffect");
+ // setTheme(document);
+ // });
return (
diff --git a/apps/login/ui/ThemeWrapper.tsx b/apps/login/ui/ThemeWrapper.tsx
index 06e4261e71b..b71fd6ef2ec 100644
--- a/apps/login/ui/ThemeWrapper.tsx
+++ b/apps/login/ui/ThemeWrapper.tsx
@@ -1,35 +1,20 @@
"use client";
-import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
-import { ColorService } from "#/utils/colors";
+import { setTheme, LabelPolicyColors } from "#/utils/colors";
import { useEffect } from "react";
type Props = {
- branding: LabelPolicy | undefined;
+ branding: LabelPolicyColors | undefined;
children: React.ReactNode;
};
const ThemeWrapper = ({ children, branding }: Props) => {
useEffect(() => {
- const colorService = new ColorService(document, branding);
+ setTheme(document, branding);
}, []);
const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
- // console.log(branding);
- // useEffect(() => {
- // if (branding) {
- // document.documentElement.style.setProperty(
- // "--background-color",
- // branding?.backgroundColor
- // );
- // document.documentElement.style.setProperty(
- // "--dark-background-color",
- // branding?.backgroundColorDark
- // );
- // }
- // }, []);
-
return {children}
;
};
diff --git a/apps/login/utils/colors.ts b/apps/login/utils/colors.ts
index 583fb2219f7..e3d5ae2ff3d 100644
--- a/apps/login/utils/colors.ts
+++ b/apps/login/utils/colors.ts
@@ -43,55 +43,61 @@ export const BACKGROUND = "#fafafa";
export const DARK_TEXT = "#ffffff";
export const TEXT = "#000000";
-export class ColorService {
- dark: ColorMap;
- light: ColorMap;
+export type LabelPolicyColors = {
+ backgroundColor: string;
+ backgroundColorDark: string;
+ fontColor: string;
+ fontColorDark: string;
+ warnColor: string;
+ warnColorDark: string;
+ primaryColor: string;
+ primaryColorDark: string;
+};
- constructor(document: any, policy?: LabelPolicy) {
- const lP = {
- backgroundColor: BACKGROUND,
- backgroundColorDark: DARK_BACKGROUND,
- primaryColor: PRIMARY,
- primaryColorDark: DARK_PRIMARY,
- warnColor: WARN,
- warnColorDark: DARK_WARN,
- fontColor: TEXT,
- fontColorDark: DARK_TEXT,
- linkColor: TEXT,
- linkColorDark: DARK_TEXT,
- };
+export function setTheme(document: any, policy?: LabelPolicyColors) {
+ const lP = {
+ backgroundColor: BACKGROUND,
+ backgroundColorDark: DARK_BACKGROUND,
+ primaryColor: PRIMARY,
+ primaryColorDark: DARK_PRIMARY,
+ warnColor: WARN,
+ warnColorDark: DARK_WARN,
+ fontColor: TEXT,
+ fontColorDark: DARK_TEXT,
+ linkColor: TEXT,
+ linkColorDark: DARK_TEXT,
+ };
- if (policy) {
- lP.backgroundColor = policy.backgroundColor;
- lP.backgroundColorDark = policy.backgroundColorDark;
- lP.primaryColor = policy.primaryColor;
- lP.primaryColorDark = policy.primaryColorDark;
- lP.warnColor = policy.warnColor;
- lP.warnColorDark = policy.warnColorDark;
- lP.fontColor = policy.fontColor;
- lP.fontColorDark = policy.fontColorDark;
- lP.linkColor = policy.fontColor;
- lP.linkColorDark = policy.fontColorDark;
- }
-
- this.dark = computeMap(lP, true);
- this.light = computeMap(lP, false);
-
- setColors(this.dark.background, "background", "dark", document);
- setColors(this.light.background, "background", "light", document);
-
- setColors(this.dark.primary, "primary", "dark", document);
- setColors(this.light.primary, "primary", "light", document);
-
- setColors(this.dark.text, "primary", "dark", document);
- setColors(this.light.text, "primary", "light", document);
-
- setColors(this.dark.link, "link", "dark", document);
- setColors(this.light.link, "link", "light", document);
-
- setColors(this.dark.warn, "warn", "dark", document);
- setColors(this.light.warn, "warn", "light", document);
+ if (policy) {
+ lP.backgroundColor = policy.backgroundColor;
+ lP.backgroundColorDark = policy.backgroundColorDark;
+ lP.primaryColor = policy.primaryColor;
+ lP.primaryColorDark = policy.primaryColorDark;
+ lP.warnColor = policy.warnColor;
+ lP.warnColorDark = policy.warnColorDark;
+ lP.fontColor = policy.fontColor;
+ lP.fontColorDark = policy.fontColorDark;
+ lP.linkColor = policy.fontColor;
+ lP.linkColorDark = policy.fontColorDark;
}
+
+ const dark = computeMap(lP, true);
+ const light = computeMap(lP, false);
+
+ setColors(dark.background, "background", "dark", document);
+ setColors(light.background, "background", "light", document);
+
+ setColors(dark.primary, "primary", "dark", document);
+ setColors(light.primary, "primary", "light", document);
+
+ setColors(dark.text, "primary", "dark", document);
+ setColors(light.text, "primary", "light", document);
+
+ setColors(dark.link, "link", "dark", document);
+ setColors(light.link, "link", "light", document);
+
+ setColors(dark.warn, "warn", "dark", document);
+ setColors(light.warn, "warn", "light", document);
}
function setColors(map: Color[], type: string, theme: string, document: any) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22e588d0471..61cf2c2dee2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,7 +41,7 @@ importers:
grpc-tools: 1.11.3
lint-staged: 13.0.3
make-dir-cli: 3.0.0
- next: 13.3.1-canary.13
+ next: 13.3.2-canary.2
next-themes: ^0.2.1
nice-grpc: 2.0.1
postcss: 8.4.21
@@ -65,8 +65,8 @@ importers:
'@zitadel/server': link:../../packages/zitadel-server
clsx: 1.2.1
date-fns: 2.29.3
- next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
- next-themes: 0.2.1_amhwfk4ri4rspyzmqtvcofnhfa
+ next: 13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a
+ next-themes: 0.2.1_fbdiuaz6irj67j3n36ky3t2nbi
nice-grpc: 2.0.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@@ -1963,8 +1963,8 @@ packages:
resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
dev: false
- /@next/env/13.3.1-canary.13:
- resolution: {integrity: sha512-Zuwdo2KfGQPw0nTizy6yzj/LgtWl5FcDJJ80gJ/1WHJl9ANkuSsmru6EGUoBVkd481A/dfNP60355zfJjqq3Rg==}
+ /@next/env/13.3.2-canary.2:
+ resolution: {integrity: sha512-/NqWjXLGlNpGkxPAXR8TDWT6ZYsYGwWNfwhpPhtyMtUOU78wwWiT5p/smGd/+h/PFaIeLjrjtqiA7hHqrw0u0A==}
dev: false
/@next/eslint-plugin-next/13.3.0:
@@ -2000,8 +2000,8 @@ packages:
dev: false
optional: true
- /@next/swc-darwin-arm64/13.3.1-canary.13:
- resolution: {integrity: sha512-lwy+zhJnUevo2JxydLUywB3ZWDdQgGGOc5ZWJNxsoef8FVJ3PX8zvZYCWDsD5sGE1BViqjMsbIx/uf4TqaZOhg==}
+ /@next/swc-darwin-arm64/13.3.2-canary.2:
+ resolution: {integrity: sha512-HdqGogdJAF88hzmVLhSXu/msxlkv2MP395natN1MmGxjqfTNGLSJewWmPf4vdOBIP54lDc6Nap/b2joYWOrCDw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -2018,8 +2018,8 @@ packages:
dev: false
optional: true
- /@next/swc-darwin-x64/13.3.1-canary.13:
- resolution: {integrity: sha512-JvwWrWF4Uqm4qEWLQV5Qt96kW1hmlV+8rjJTTOWll6ebCQz9c7/Exv4kCOz0mBkENYRmQlz3Pgd5ZWaooR4ptQ==}
+ /@next/swc-darwin-x64/13.3.2-canary.2:
+ resolution: {integrity: sha512-u9LPNpaRXjKi6WPDqhrXEYW3UJxyf3J2mva8fmb3CGZHR8BrkItRDcn7VDgSZ0jTHRHpCGqYXlPE+z6+bVYdeg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -2054,8 +2054,8 @@ packages:
dev: false
optional: true
- /@next/swc-linux-arm64-gnu/13.3.1-canary.13:
- resolution: {integrity: sha512-OGHPDSjQw4Sqhzgl/fdgZMPPmCj0CJiqIMudyzrBqV9z59vyreIMBzi6sWsC2I5u8EP0Q2+qUFC5AJ4xqyFMZA==}
+ /@next/swc-linux-arm64-gnu/13.3.2-canary.2:
+ resolution: {integrity: sha512-e/aUm7RZoDcvLHrK7sTiRMX3cS+1LVlN2gUKV9PYrrXGftuQGkIwJyZPUm4nsJUX7ozNWXPU50YeHPvt9K0c2Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2072,8 +2072,8 @@ packages:
dev: false
optional: true
- /@next/swc-linux-arm64-musl/13.3.1-canary.13:
- resolution: {integrity: sha512-mvPIWB1WLpyCzZOPgHEPkEtZEdyW6U9VHN8HTmyzybqZx/Lo4AWHobXlujWflBTyHQOu3ft9kfS4TAhdB9XFyg==}
+ /@next/swc-linux-arm64-musl/13.3.2-canary.2:
+ resolution: {integrity: sha512-wDvtL9LcN0pSao+M/A3qSYVHvPcyH1H9d0v7aIbwd6F/JuTIlTeXgKuxVCYY5OBNC6dXbzOyGSREZ8hLCx9Wjw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2090,8 +2090,8 @@ packages:
dev: false
optional: true
- /@next/swc-linux-x64-gnu/13.3.1-canary.13:
- resolution: {integrity: sha512-hTHNN3n94qQcx0YK6bS2/nw99OSZZa/v7s56OOzCfQpYAz2546wiCOoEcOxQy/1Mum23i2Lt3u6km96GyHrD0Q==}
+ /@next/swc-linux-x64-gnu/13.3.2-canary.2:
+ resolution: {integrity: sha512-Z/GTeCcD6YK92rBdrAa5GVLC9TzXkXpGKnlDLJLm/2oY1eBRTVpQT5/vp0vrRcPYjdHXubizquk1Q3eyAtlKTg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2108,8 +2108,8 @@ packages:
dev: false
optional: true
- /@next/swc-linux-x64-musl/13.3.1-canary.13:
- resolution: {integrity: sha512-SW3YdJfJzlin5hp9zMU4HHKKhARq9ojQ1tjUSsgfPtMTG3Gon7dswK/Ap5aguPvqJQK42YaPg7zPr91Ez4piGw==}
+ /@next/swc-linux-x64-musl/13.3.2-canary.2:
+ resolution: {integrity: sha512-P0KCzP17aoxfq3k+rtgDhOl8BILdgw3pw8w88/qD5WA2xK2R9Rg4lRI6pAQSro0++ToNDgnrXpRuJov7n1OfeQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2126,8 +2126,8 @@ packages:
dev: false
optional: true
- /@next/swc-win32-arm64-msvc/13.3.1-canary.13:
- resolution: {integrity: sha512-SHb96TxxtQXJ87DbZVC22mS2jcQfKeDVcrSB5G972JRK/QaUnRrIn/Fr4/OMVgz8wkMDYyJwhVMNPZ1d7FzlQg==}
+ /@next/swc-win32-arm64-msvc/13.3.2-canary.2:
+ resolution: {integrity: sha512-yGpQpU0To4gp/bjhwKHqu3zVJ/Jco+g4Okv95IWnbYUX7sd14kophZGwHiZN4dLErB9Pdd4vvmz8ccJP5h+Ubg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -2144,8 +2144,8 @@ packages:
dev: false
optional: true
- /@next/swc-win32-ia32-msvc/13.3.1-canary.13:
- resolution: {integrity: sha512-+TM2In/8yh6Ze4ADs9HKSg2mIjzB7SLz9i/8VUCY3SdVMKpKCtMHYzlo5BkIOSmtW0QsGVEY38+6WLOpf8lXhQ==}
+ /@next/swc-win32-ia32-msvc/13.3.2-canary.2:
+ resolution: {integrity: sha512-iHtddC48Xdl7RxCdhBWZ6+1hq/eC0duTR4y3yYPELpXpZnIwGjOT5W5N+3nVRXUVLsj6teRf8fEfWBp3WbJ0RQ==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -2162,8 +2162,8 @@ packages:
dev: false
optional: true
- /@next/swc-win32-x64-msvc/13.3.1-canary.13:
- resolution: {integrity: sha512-IFnEsOJIvaC/MytzEsTaWcILy2lzuwFi0aAq0NturKFRH/ykjOnLHd98jBz5D8eCPX9QN2oyB57D6i1wbIAJHA==}
+ /@next/swc-win32-x64-msvc/13.3.2-canary.2:
+ resolution: {integrity: sha512-Ctw3gL8cBMvREpJM09xvC+pPKsG8TVSWxsQPTLvD33qFED0gtU9HSIacJ09eXd8mqtRGebcXaNjY9fVFfGHZ3A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -5015,14 +5015,14 @@ packages:
/natural-compare/1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
- /next-themes/0.2.1_amhwfk4ri4rspyzmqtvcofnhfa:
+ /next-themes/0.2.1_fbdiuaz6irj67j3n36ky3t2nbi:
resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
peerDependencies:
next: '*'
react: '*'
react-dom: '*'
dependencies:
- next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
+ next: 13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
@@ -5074,9 +5074,9 @@ packages:
- babel-plugin-macros
dev: false
- /next/13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a:
- resolution: {integrity: sha512-nqLvbeAbJiVFWHzfvUM6D5L/nwjUD7+fc0FWPdJc/jLbInKNqQQHc4+0NKNi8tj6Af9cn4MBPrrg/lyMbf0hVA==}
- engines: {node: '>=14.6.0'}
+ /next/13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a:
+ resolution: {integrity: sha512-tAJBdhzzQxzomn2Ge3lR3zCVPBnPSfXy6+fTQTDtZHDQe/pH9xJgnMpwvA8kBYEr5yrCcJn0U3kxeo32LRJUjw==}
+ engines: {node: '>=14.18.0'}
hasBin: true
peerDependencies:
'@opentelemetry/api': ^1.1.0
@@ -5095,7 +5095,7 @@ packages:
sass:
optional: true
dependencies:
- '@next/env': 13.3.1-canary.13
+ '@next/env': 13.3.2-canary.2
'@swc/helpers': 0.5.0
busboy: 1.6.0
caniuse-lite: 1.0.30001473
@@ -5105,15 +5105,15 @@ packages:
sass: 1.62.0
styled-jsx: 5.1.1_duavcg6prxxl5begav3y2fyxcu
optionalDependencies:
- '@next/swc-darwin-arm64': 13.3.1-canary.13
- '@next/swc-darwin-x64': 13.3.1-canary.13
- '@next/swc-linux-arm64-gnu': 13.3.1-canary.13
- '@next/swc-linux-arm64-musl': 13.3.1-canary.13
- '@next/swc-linux-x64-gnu': 13.3.1-canary.13
- '@next/swc-linux-x64-musl': 13.3.1-canary.13
- '@next/swc-win32-arm64-msvc': 13.3.1-canary.13
- '@next/swc-win32-ia32-msvc': 13.3.1-canary.13
- '@next/swc-win32-x64-msvc': 13.3.1-canary.13
+ '@next/swc-darwin-arm64': 13.3.2-canary.2
+ '@next/swc-darwin-x64': 13.3.2-canary.2
+ '@next/swc-linux-arm64-gnu': 13.3.2-canary.2
+ '@next/swc-linux-arm64-musl': 13.3.2-canary.2
+ '@next/swc-linux-x64-gnu': 13.3.2-canary.2
+ '@next/swc-linux-x64-musl': 13.3.2-canary.2
+ '@next/swc-win32-arm64-msvc': 13.3.2-canary.2
+ '@next/swc-win32-ia32-msvc': 13.3.2-canary.2
+ '@next/swc-win32-x64-msvc': 13.3.2-canary.2
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros