fix(ui): address PR review comments - restore StatusPageLayout wrapper, improve whitelabel detection

Author: waleedlatif1

apps/sim/app/(auth)/components/branded-button.tsx

@@ -34,7 +34,7 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
     ref
   ) => {
     const brand = useBrandConfig()
-    const isWhitelabeled = brand.name !== 'Sim'
+    const isWhitelabeled = brand.isWhitelabeled
     const [isHovered, setIsHovered] = useState(false)
 
     const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {

apps/sim/app/(auth)/components/status-page-layout.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import AuthBackground from '@/app/(auth)/components/auth-background'
+import Navbar from '@/app/(home)/components/navbar/navbar'
 import { SupportFooter } from './support-footer'
 
 export interface StatusPageLayoutProps {
@@ -17,15 +19,24 @@ export function StatusPageLayout({
   showSupportFooter = true,
 }: StatusPageLayoutProps) {
   return (
-    <>
-      <div className='flex flex-col items-center justify-center'>
-        <div className='space-y-1 text-center'>
-          <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
-          <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+    <AuthBackground className='dark font-[430] font-season'>
+      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
+        <header className='shrink-0 bg-[#1C1C1C]'>
+          <Navbar logoOnly />
+        </header>
+        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+          <div className='w-full max-w-lg px-4'>
+            <div className='flex flex-col items-center justify-center'>
+              <div className='space-y-1 text-center'>
+                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
+                <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+              </div>
+              {children && <div className='mt-8 w-full max-w-[410px] space-y-3'>{children}</div>}
+            </div>
+          </div>
         </div>
-        {children && <div className='mt-8 w-full max-w-[410px] space-y-3'>{children}</div>}
-      </div>
-      {showSupportFooter && <SupportFooter position='absolute' />}
-    </>
+        {showSupportFooter && <SupportFooter position='absolute' />}
+      </main>
+    </AuthBackground>
   )
 }

apps/sim/app/not-found.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import Link from 'next/link'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import Navbar from '@/app/(home)/components/navbar/navbar'

apps/sim/components/emails/_styles/base.ts

@@ -8,7 +8,7 @@ import { getBrandConfig } from '@/ee/whitelabeling'
 /** Color tokens from globals.css (light mode), brand-aware for whitelabeled instances */
 function buildColors() {
   const brand = getBrandConfig()
-  const isWhitelabeled = brand.name !== 'Sim'
+  const isWhitelabeled = brand.isWhitelabeled
   const accentColor =
     isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#33C482'
 

apps/sim/components/emails/components/email-footer.tsx

@@ -28,7 +28,7 @@ export function EmailFooter({
   showUnsubscribe = true,
 }: EmailFooterProps) {
   const brand = getBrandConfig()
-  const isWhitelabeled = brand.name !== 'Sim'
+  const isWhitelabeled = brand.isWhitelabeled
 
   const footerLinkStyle = {
     color: colors.textMuted,

apps/sim/ee/whitelabeling/branding.ts

@@ -23,6 +23,12 @@ const getThemeColors = (): ThemeColors => {
  * Supports runtime configuration via Docker/Kubernetes
  */
 export const getBrandConfig = (): BrandConfig => {
+  const hasCustomBrand = Boolean(
+    getEnv('NEXT_PUBLIC_BRAND_NAME') ||
+      getEnv('NEXT_PUBLIC_BRAND_LOGO_URL') ||
+      getEnv('NEXT_PUBLIC_BRAND_PRIMARY_COLOR')
+  )
+
   return {
     name: getEnv('NEXT_PUBLIC_BRAND_NAME') || defaultBrandConfig.name,
     logoUrl: getEnv('NEXT_PUBLIC_BRAND_LOGO_URL') || defaultBrandConfig.logoUrl,
@@ -34,6 +40,7 @@ export const getBrandConfig = (): BrandConfig => {
     termsUrl: getEnv('NEXT_PUBLIC_TERMS_URL') || defaultBrandConfig.termsUrl,
     privacyUrl: getEnv('NEXT_PUBLIC_PRIVACY_URL') || defaultBrandConfig.privacyUrl,
     theme: getThemeColors(),
+    isWhitelabeled: hasCustomBrand,
   }
 }
 

apps/sim/ee/whitelabeling/inject-theme.ts

@@ -15,6 +15,7 @@ export function generateThemeCSS(): string {
 
   if (process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR) {
     cssVars.push(`--brand-primary-hex: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
+    // Override tertiary-2 so Run/Deploy buttons and other tertiary-styled elements use the brand color
     cssVars.push(`--brand-tertiary-2: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
   }
 

apps/sim/lib/branding/defaults.ts

@@ -19,4 +19,5 @@ export const defaultBrandConfig: BrandConfig = {
     accentHoverColor: '#a66fff',
     backgroundColor: '#0c0c0c',
   },
+  isWhitelabeled: false,
 }

apps/sim/lib/branding/types.ts

@@ -16,4 +16,6 @@ export interface BrandConfig {
   termsUrl?: string
   privacyUrl?: string
   theme?: ThemeColors
+  /** Whether this instance has custom branding applied (any brand env var is set) */
+  isWhitelabeled: boolean
 }