fix: adding dynamic css settings for page layout and card layout

Author: amberkamboj77

src/common/Logo/index.tsx

@@ -13,27 +13,42 @@ const Logo: React.FC<LogoProps> = ({
   className,
   imageClassName,
 }) => {
-  // Get logo URL from CSS variable (theme system sets this)
-  const getCSSVariable = (varName: string): string => {
+  // Get logo URL from Auth0 theme system
+  const getThemeLogoUrl = (): string => {
     return getComputedStyle(document.documentElement)
-      .getPropertyValue(varName)
+      .getPropertyValue("--ul-theme-widget-logo-url")
       .trim()
-      .replace(/^"(.*)"$/, "$1"); // Remove quotes
+      .replace(/^"(.*)"$/, "$1"); // Remove quotes from CSS string
   };
 
-  const logoFromCSS = getCSSVariable("--ul-theme-widget-logo-url");
-  const logoSrc = imageUrl || logoFromCSS;
+  // Get logo position from Auth0 theme system (via Tailwind semantic variable)
+  const getLogoPosition = (): string => {
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue("--ul-theme-widget-logo-position")
+      .trim();
+  };
+
+  const logoSrc = imageUrl || getThemeLogoUrl();
+  const logoPosition = getLogoPosition();
+
+  // Hide logo completely when position is "none"
+  if (logoPosition === "none") {
+    return null;
+  }
 
   return (
-    <div className={cn("flex justify-center items-center mb-6", className)}>
+    <div
+      className={cn("flex items-center mb-6", className)}
+      style={{ justifyContent: "var(--justify-widget-logo)" }}
+    >
       <img
         src={logoSrc}
         alt={altText}
         loading="eager"
         decoding="async"
         fetchPriority="high"
         className={cn(
-          "object-contain max-w-full max-h-full aspect-square",
+          "object-contain max-w-full aspect-square h-widget-logo",
           imageClassName,
         )}
       />

src/index.css

@@ -27,6 +27,9 @@
   --color-input-bg: var(--ul-theme-color-input-background);
   --color-page-bg: var(--ul-theme-page-bg-background-color);
 
+  /* Background images */
+  --image-page-bg: var(--ul-theme-page-bg-background-image-url);
+
   /* Border colors */
   --color-widget-border: var(--ul-theme-color-widget-border);
   --color-input-border: var(--ul-theme-color-input-border);
@@ -38,6 +41,9 @@
   --color-info: var(--ul-theme-color-primary-button);
   --color-icons: var(--ul-theme-color-icons);
 
+  /* Captcha theme */
+  --captcha-widget-theme: var(--ul-theme-color-captcha-widget-theme);
+
   /* Border radius - using CSS variables */
   --radius-button: var(--ul-theme-border-button-border-radius);
   --radius-input: var(--ul-theme-border-input-border-radius);
@@ -49,6 +55,15 @@
   /* Spacing tokens - semantic spacing for components */
   --spacing-widget-padding: 2.5rem; /* 40px - standard widget padding */
 
+  /* Widget */
+  --height-widget-logo: var(--ul-theme-widget-logo-height);
+  --justify-widget-logo: var(--ul-theme-widget-logo-position);
+  --text-align-header: var(--ul-theme-widget-header-text-alignment);
+  --social-buttons-layout: var(--ul-theme-widget-social-buttons-layout);
+
+  /* Page Layout */
+  --justify-page-layout: var(--ul-theme-page-bg-page-layout);
+
   /* Typography */
   --text-title: var(--ul-theme-font-title-size);
   --text-subtitle: var(--ul-theme-font-subtitle-size);
@@ -126,6 +141,7 @@
   /* Page Background */
   --ul-theme-page-bg-page-layout: center;
   --ul-theme-page-bg-background-color: #bababa;
+  --ul-theme-page-bg-background-image-url: none;
 
   /* Widget */
   --ul-theme-widget-logo-position: center;
@@ -158,6 +174,10 @@
 body {
   margin: 0;
   background-color: var(--ul-theme-page-bg-background-color);
+  background-image: var(--ul-theme-page-bg-background-image-url);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   color: var(--ul-theme-color-body-text);
   min-height: 100vh;
 }

src/screens/login-id/components/AlternativeLogins.tsx

@@ -6,8 +6,13 @@ import type { SocialConnection } from "@/utils/helpers/socialUtils";
 import { getIcon } from "@/utils/helpers/iconUtils";
 import { useLoginIdManager } from "../hooks/useLoginIdManager";
 
-// No props needed as it uses hooks internally
-const AlternativeLogins: React.FC = () => {
+interface AlternativeLoginsProps {
+  layout?: "top" | "bottom";
+}
+
+const AlternativeLogins: React.FC<AlternativeLoginsProps> = ({
+  layout = "top",
+}) => {
   const { loginIdInstance, handleSocialLogin, handlePasskeyLogin, texts } =
     useLoginIdManager();
 
@@ -26,7 +31,10 @@ const AlternativeLogins: React.FC = () => {
 
   return (
     <>
-      {showSeparator && <Separator text={separatorText} />}
+      {/* Separator at top when layout is bottom */}
+      {showSeparator && layout === "bottom" && (
+        <Separator text={separatorText} />
+      )}
 
       <div className="space-y-3 mt-4">
         {isPasskeyAvailable && (
@@ -55,6 +63,9 @@ const AlternativeLogins: React.FC = () => {
           );
         })}
       </div>
+
+      {/* Separator at bottom when layout is top */}
+      {showSeparator && layout === "top" && <Separator text={separatorText} />}
     </>
   );
 };

src/screens/login-id/components/Header.tsx

@@ -10,11 +10,11 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <Logo imageClassName="h-13" altText={logoAltText} />
-      <h1 className="text-2xl font-normal text-center [color:var(--ul-theme-color-header)] mt-6 mb-4">
+      <Logo altText={logoAltText} />
+      <h1 className="text-2xl font-normal [text-align:var(--text-align-header)] [color:var(--ul-theme-color-header)] mt-6 mb-4">
         {title}
       </h1>
-      <p className="text-center [color:var(--ul-theme-color-body-text)] text-sm mb-4">
+      <p className="[text-align:var(--text-align-header)] [color:var(--ul-theme-color-body-text)] text-sm mb-4">
         {description}
       </p>
     </>

src/screens/login-id/index.tsx

@@ -16,13 +16,28 @@ const LoginIdScreen: React.FC = () => {
   // Apply theme from SDK instance when screen loads
   applyAuth0Theme(loginIdInstance);
 
+  // Get social buttons layout from theme
+  const socialButtonsLayout =
+    getComputedStyle(document.documentElement)
+      .getPropertyValue("--social-buttons-layout")
+      .trim() || "bottom";
+
+  // Get page layout from theme
+  const pageLayout =
+    getComputedStyle(document.documentElement)
+      .getPropertyValue("--justify-page-layout")
+      .trim() || "center";
+
   return (
-    <div className="min-h-screen flex items-center justify-center px-10 py-20">
+    <div className={`min-h-screen flex items-center px-20 py-20`} style={{ justifyContent: pageLayout }}>
       <Card className="w-full max-w-[400px]">
         <Header />
+        {socialButtonsLayout === "top" && <AlternativeLogins layout="top" />}
         <IdentifierForm />
         <Footer />
-        <AlternativeLogins />
+        {socialButtonsLayout === "bottom" && (
+          <AlternativeLogins layout="bottom" />
+        )}
       </Card>
     </div>
   );

src/utils/theme/themeEngine.ts

@@ -44,7 +44,7 @@ function extractSettingsOverrides(screenInstance: any): Record<string, string> {
   // Essential variable mappings for precedence overrides
   const variableMapping = {
     "colors.primary": "--ul-theme-color-primary-button",
-    "colors.pageBackground": "--ul-theme-page-bg-background-color",
+    "colors.page_background": "--ul-theme-page-bg-background-color",
     logoUrl: "--ul-theme-widget-logo-url",
   };
 
@@ -64,7 +64,7 @@ function extractOrganizationOverrides(
   // Essential variable mappings for precedence overrides
   const variableMapping = {
     "colors.primary": "--ul-theme-color-primary-button",
-    "colors.pageBackground": "--ul-theme-page-bg-background-color",
+    "colors.page_background": "--ul-theme-page-bg-background-color",
     logoUrl: "--ul-theme-widget-logo-url",
   };
 

src/utils/theme/themeFlatteners.ts

@@ -189,8 +189,23 @@ export function flattenPageBackground(
   if (pageBackground.background_color)
     result["--ul-theme-page-bg-background-color"] =
       pageBackground.background_color;
-  if (pageBackground.page_layout)
+  if (pageBackground.background_image_url) {
+    result["--ul-theme-page-bg-background-image-url"] = 
+      pageBackground.background_image_url === null || pageBackground.background_image_url === "" 
+        ? "none" 
+        : `url("${pageBackground.background_image_url}")`;
+  }
+  if (pageBackground.page_layout) {
     result["--ul-theme-page-bg-page-layout"] = pageBackground.page_layout;
+    
+    // Convert to CSS justify-content values for use with arbitrary properties
+    const layoutMap: Record<string, string> = {
+      "center": "center",
+      "left": "flex-start",
+      "right": "flex-end"
+    };
+    result["--justify-page-layout"] = layoutMap[pageBackground.page_layout] || "center";
+  }
 
   return result;
 }
@@ -201,18 +216,41 @@ export function flattenPageBackground(
 export function flattenWidget(widget: any): Record<string, string> {
   const result: Record<string, string> = {};
 
-  if (widget.logo_position)
+  // Logo position: convert Auth0 values to Tailwind justify values
+  if (widget.logo_position) {
     result["--ul-theme-widget-logo-position"] = widget.logo_position;
+
+    // Convert to Tailwind semantic variable
+    const positionMap: Record<string, string> = {
+      center: "center",
+      left: "flex-start",
+      right: "flex-end",
+      none: "none",
+    };
+    result["--justify-widget-logo"] =
+      positionMap[widget.logo_position] || "center";
+  }
   if (widget.logo_url)
     result["--ul-theme-widget-logo-url"] = `"${widget.logo_url}"`;
 
   // Logo height needs px units
   if (widget.logo_height)
     result["--ul-theme-widget-logo-height"] = `${widget.logo_height}px`;
 
-  if (widget.header_text_alignment)
+  // Header text alignment: convert Auth0 values to CSS text-align values
+  if (widget.header_text_alignment) {
     result["--ul-theme-widget-header-text-alignment"] =
       widget.header_text_alignment;
+
+    // Convert to CSS text-align values for use with arbitrary properties
+    const alignmentMap: Record<string, string> = {
+      center: "center",
+      left: "left",
+      right: "right",
+    };
+    result["--text-align-header"] =
+      alignmentMap[widget.header_text_alignment] || "center";
+  }
   if (widget.social_buttons_layout)
     result["--ul-theme-widget-social-buttons-layout"] =
       widget.social_buttons_layout;