From e910491a3cdaa9096877a5d774eb431994eaaa3e Mon Sep 17 00:00:00 2001
From: yyorkchan <yyorkchan@gmail.com>
Date: Fri, 16 Aug 2024 15:43:52 +0800
Subject: [PATCH 1/6] Make design theme customization update class instead of
 url param

---
 authui/src/inline-preview.ts                            | 5 +++++
 portal/src/graphql/portal/DesignScreen/DesignScreen.tsx | 1 -
 portal/src/graphql/portal/DesignScreen/viewModel.ts     | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/authui/src/inline-preview.ts b/authui/src/inline-preview.ts
index a3828d1d5b..06f0e37d59 100644
--- a/authui/src/inline-preview.ts
+++ b/authui/src/inline-preview.ts
@@ -3,6 +3,7 @@ import { PreviewableResourceController } from "./previewable-resource";
 import { injectCSSAttrs } from "./cssattrs";
 
 interface PreviewCustomisationMessage {
+  theme: string;
   cssVars: Record<string, string>;
   images: Record<string, string | null>;
   translations: Record<string, string>;
@@ -15,6 +16,7 @@ function parsePreviewCustomisationMessage(
     return null;
   }
   return {
+    theme: message.theme ?? "",
     cssVars: message.cssVars ?? {},
     images: message.images ?? {},
     translations: message.translations ?? {},
@@ -89,6 +91,9 @@ export class InlinePreviewController extends Controller {
       outlet?.setValue(value);
     }
 
+    el.classList.remove("light", "dark", "auto");
+    el.setAttribute("class", customisationMessage.theme);
+
     injectCSSAttrs(document.documentElement);
   };
 }
diff --git a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
index bcd3f16980..ca480c1683 100644
--- a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
+++ b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
@@ -834,7 +834,6 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
   const src = useMemo(() => {
     const url = new URL(effectiveAppConfig.http?.public_origin ?? "");
     url.pathname = selectedPreviewPage;
-    url.searchParams.append("x_color_scheme", designForm.state.selectedTheme);
     url.searchParams.append("ui_locales", designForm.state.selectedLanguage);
     return url.toString();
   }, [
diff --git a/portal/src/graphql/portal/DesignScreen/viewModel.ts b/portal/src/graphql/portal/DesignScreen/viewModel.ts
index fbbccae311..f2c47d0c77 100644
--- a/portal/src/graphql/portal/DesignScreen/viewModel.ts
+++ b/portal/src/graphql/portal/DesignScreen/viewModel.ts
@@ -59,6 +59,7 @@ export function getSupportedPreviewPagesFromConfig(
 
 export interface PreviewCustomisationMessage {
   type: "PreviewCustomisationMessage";
+  theme: string;
   cssVars: Record<string, string>;
   images: Record<string, string | null>;
   translations: Record<string, string>;
@@ -123,6 +124,8 @@ export function mapDesignFormStateToPreviewCustomisationMessage(
     }
   }
 
+  const theme = state.selectedTheme;
+
   cssVars[CSSVariable.WatermarkDisplay] = state.showAuthgearLogo
     ? WatermarkEnabledDisplay
     : WatermarkDisabledDisplay;
@@ -142,6 +145,7 @@ export function mapDesignFormStateToPreviewCustomisationMessage(
 
   return {
     type: "PreviewCustomisationMessage",
+    theme,
     cssVars,
     images,
     translations,

From d4b21158a5373b3a20dbc0b7012750f26c3ebc96 Mon Sep 17 00:00:00 2001
From: yyorkchan <yyorkchan@gmail.com>
Date: Fri, 16 Aug 2024 15:44:09 +0800
Subject: [PATCH 2/6] Add loading state when preview is pending change
 selectedPreviewPage

---
 portal/src/graphql/portal/DesignScreen/DesignScreen.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
index ca480c1683..1dcb54d90e 100644
--- a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
+++ b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
@@ -797,6 +797,8 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
 
   const authUIIframeRef = useRef<HTMLIFrameElement | null>(null);
 
+  const [isIframeLoading, setIsIframeLoading] = useState(true);
+
   useEffect(() => {
     const message = mapDesignFormStateToPreviewCustomisationMessage(
       designForm.state
@@ -827,6 +829,7 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
         return;
       }
       setSelectedPreviewPage(option.key as PreviewPage);
+      setIsIframeLoading(true);
     },
     []
   );
@@ -839,7 +842,6 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
   }, [
     effectiveAppConfig.http?.public_origin,
     designForm.state.selectedLanguage,
-    designForm.state.selectedTheme,
     selectedPreviewPage,
   ]);
 
@@ -847,6 +849,7 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
     const message = mapDesignFormStateToPreviewCustomisationMessage(
       designForm.state
     );
+    setIsIframeLoading(false);
     authUIIframeRef.current?.contentWindow?.postMessage(message, "*");
   }, [designForm.state]);
 
@@ -881,6 +884,7 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
           />
         ) : null}
       </div>
+      {isIframeLoading ? <ShowLoading /> : null}
       <iframe
         ref={authUIIframeRef}
         className={cn("w-full", "min-h-0", "flex-1", "border-none")}

From 8f5ca6585786f57b8d9f8385737c6e3768e1e28a Mon Sep 17 00:00:00 2001
From: Louis Chan <louischan@oursky.com>
Date: Fri, 16 Aug 2024 19:50:03 +0800
Subject: [PATCH 3/6] Preserve class of html

---
 authui/src/inline-preview.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/authui/src/inline-preview.ts b/authui/src/inline-preview.ts
index 06f0e37d59..324f8d96d1 100644
--- a/authui/src/inline-preview.ts
+++ b/authui/src/inline-preview.ts
@@ -91,8 +91,10 @@ export class InlinePreviewController extends Controller {
       outlet?.setValue(value);
     }
 
-    el.classList.remove("light", "dark", "auto");
-    el.setAttribute("class", customisationMessage.theme);
+    el.classList.remove("dark");
+    if (customisationMessage.theme === "dark") {
+      el.classList.add("dark");
+    }
 
     injectCSSAttrs(document.documentElement);
   };

From 034c45a99ae652cf3b2f21a6e7576c83ab3f67c3 Mon Sep 17 00:00:00 2001
From: Louis Chan <louischan@oursky.com>
Date: Fri, 16 Aug 2024 19:53:21 +0800
Subject: [PATCH 4/6] Align the dark theme primary button label color to actual
 impl

---
 portal/src/model/themeAuthFlowV2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portal/src/model/themeAuthFlowV2.ts b/portal/src/model/themeAuthFlowV2.ts
index bd420825ff..66c4dbb277 100644
--- a/portal/src/model/themeAuthFlowV2.ts
+++ b/portal/src/model/themeAuthFlowV2.ts
@@ -202,7 +202,7 @@ export const DEFAULT_DARK_THEME: CustomisableTheme = {
     backgroundColor: "#176df3",
     backgroundColorActive: "#235dba",
     backgroundColorHover: "#235dba",
-    labelColor: "#1c1c1e",
+    labelColor: "#f0f1f1",
     borderRadius: {
       type: "rounded",
       radius: "0.875em",

From b3aac11e3603eea1539e181283f1a6b2097cb1c3 Mon Sep 17 00:00:00 2001
From: yyorkchan <yyorkchan@gmail.com>
Date: Fri, 16 Aug 2024 20:51:41 +0800
Subject: [PATCH 5/6] Show loading when language change

---
 portal/src/graphql/portal/DesignScreen/DesignScreen.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
index 1dcb54d90e..9a68cca925 100644
--- a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
+++ b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
@@ -834,6 +834,10 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
     []
   );
 
+  useEffect(() => {
+    setIsIframeLoading(true);
+  }, [designForm.state.selectedLanguage]);
+
   const src = useMemo(() => {
     const url = new URL(effectiveAppConfig.http?.public_origin ?? "");
     url.pathname = selectedPreviewPage;

From 8866cc9b903457dfce9fbfd1f0a3d620999e0c06 Mon Sep 17 00:00:00 2001
From: yyorkchan <yyorkchan@gmail.com>
Date: Fri, 16 Aug 2024 21:39:32 +0800
Subject: [PATCH 6/6] Combine setIsIframeLoading useEffect Hook

---
 portal/src/graphql/portal/DesignScreen/DesignScreen.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
index 9a68cca925..e523f158e8 100644
--- a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
+++ b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
@@ -829,15 +829,10 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
         return;
       }
       setSelectedPreviewPage(option.key as PreviewPage);
-      setIsIframeLoading(true);
     },
     []
   );
 
-  useEffect(() => {
-    setIsIframeLoading(true);
-  }, [designForm.state.selectedLanguage]);
-
   const src = useMemo(() => {
     const url = new URL(effectiveAppConfig.http?.public_origin ?? "");
     url.pathname = selectedPreviewPage;
@@ -849,6 +844,10 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
     selectedPreviewPage,
   ]);
 
+  useEffect(() => {
+    setIsIframeLoading(true);
+  }, [src]);
+
   const onLoadIframe = useCallback(() => {
     const message = mapDesignFormStateToPreviewCustomisationMessage(
       designForm.state