From 39356f3d740c0e08bfd7184a70faa286f1a9bee1 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Sat, 27 Sep 2025 14:03:24 -0700
Subject: [PATCH] fix(ui): standardized 404, chat, and invite pages (#1472)

* improvement(chat): deployed chat no longer uses subdomains, uses sim.ai/chat/[identifier]

* fix(ui): standardized 404, chat, and invite pages

* Revert "improvement(chat): deployed chat no longer uses subdomains, uses sim.ai/chat/[identifier]"

* fixed ui for 404 page
---
 apps/sim/app/(landing)/components/nav/nav.tsx |  4 +-
 .../components/error-state/error-state.tsx    | 15 +++-
 apps/sim/app/invite/components/layout.tsx     | 38 ++--------
 apps/sim/app/not-found.tsx                    | 70 ++++++++++---------
 4 files changed, 59 insertions(+), 68 deletions(-)

diff --git a/apps/sim/app/(landing)/components/nav/nav.tsx b/apps/sim/app/(landing)/components/nav/nav.tsx
index 5196825776..ed05a58736 100644
--- a/apps/sim/app/(landing)/components/nav/nav.tsx
+++ b/apps/sim/app/(landing)/components/nav/nav.tsx
@@ -148,8 +148,8 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
         )}
       </div>
 
-      {/* Auth Buttons - respect hideAuthButtons prop and only show on hosted instances for landing pages */}
-      {!hideAuthButtons && (variant === 'auth' || isHosted) && (
+      {/* Auth Buttons - show only when hosted, regardless of variant */}
+      {!hideAuthButtons && isHosted && (
         <div className='flex items-center justify-center gap-[16px] pt-[1.5px]'>
           <button
             onClick={handleLoginClick}
diff --git a/apps/sim/app/chat/components/error-state/error-state.tsx b/apps/sim/app/chat/components/error-state/error-state.tsx
index f6bba593f6..66c8127a30 100644
--- a/apps/sim/app/chat/components/error-state/error-state.tsx
+++ b/apps/sim/app/chat/components/error-state/error-state.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
+import { useBrandConfig } from '@/lib/branding/branding'
 import Nav from '@/app/(landing)/components/nav/nav'
 import { inter } from '@/app/fonts/inter'
 import { soehne } from '@/app/fonts/soehne/soehne'
@@ -15,6 +16,7 @@ interface ChatErrorStateProps {
 export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
   const router = useRouter()
   const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+  const brandConfig = useBrandConfig()
 
   useEffect(() => {
     // Check if CSS variable has been customized
@@ -47,7 +49,7 @@ export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
   }, [])
 
   return (
-    <div className='bg-white'>
+    <div className='min-h-screen bg-white'>
       <Nav variant='auth' />
       <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
         <div className='w-full max-w-[410px]'>
@@ -77,6 +79,17 @@ export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
           </div>
         </div>
       </div>
+      <div
+        className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
+      >
+        Need help?{' '}
+        <a
+          href={`mailto:${brandConfig.supportEmail}`}
+          className='auth-link underline-offset-4 transition hover:underline'
+        >
+          Contact support
+        </a>
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
index 0055d1757d..653a3276cd 100644
--- a/apps/sim/app/invite/components/layout.tsx
+++ b/apps/sim/app/invite/components/layout.tsx
@@ -1,44 +1,18 @@
 'use client'
 
-import { useEffect } from 'react'
-import AuthBackground from '@/app/(auth)/components/auth-background'
 import Nav from '@/app/(landing)/components/nav/nav'
 
 interface InviteLayoutProps {
   children: React.ReactNode
 }
 
-function isColorDark(hexColor: string): boolean {
-  const hex = hexColor.replace('#', '')
-  const r = Number.parseInt(hex.substr(0, 2), 16)
-  const g = Number.parseInt(hex.substr(2, 2), 16)
-  const b = Number.parseInt(hex.substr(4, 2), 16)
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return luminance < 0.5
-}
-
 export default function InviteLayout({ children }: InviteLayoutProps) {
-  useEffect(() => {
-    const rootStyle = getComputedStyle(document.documentElement)
-    const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
-
-    if (brandBackground && isColorDark(brandBackground)) {
-      document.body.classList.add('auth-dark-bg')
-    } else {
-      document.body.classList.remove('auth-dark-bg')
-    }
-  }, [])
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
-        {/* Header - Nav handles all conditional logic */}
-        <Nav hideAuthButtons={true} variant='auth' />
-
-        {/* Content */}
-        <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'>{children}</div>
-        </div>
-      </main>
-    </AuthBackground>
+    <div className='bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>{children}</div>
+      </div>
+    </div>
   )
 }
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 8c6792019c..d9756c5a70 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -1,33 +1,27 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { useBrandConfig } from '@/lib/branding/branding'
-import AuthBackground from '@/app/(auth)/components/auth-background'
 import Nav from '@/app/(landing)/components/nav/nav'
-
-function isColorDark(hexColor: string): boolean {
-  const hex = hexColor.replace('#', '')
-  const r = Number.parseInt(hex.substring(0, 2), 16)
-  const g = Number.parseInt(hex.substring(2, 4), 16)
-  const b = Number.parseInt(hex.substring(4, 6), 16)
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return luminance < 0.5
-}
+import { inter } from '@/app/fonts/inter'
+import { soehne } from '@/app/fonts/soehne/soehne'
 
 export default function NotFound() {
   const [buttonClass, setButtonClass] = useState('auth-button-gradient')
   const brandConfig = useBrandConfig()
+  const router = useRouter()
 
   useEffect(() => {
-    const rootStyle = getComputedStyle(document.documentElement)
-    const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
-
-    if (brandBackground && isColorDark(brandBackground)) {
-      document.body.classList.add('auth-dark-bg')
-    } else {
-      document.body.classList.remove('auth-dark-bg')
+    const root = document.documentElement
+    const hadDark = root.classList.contains('dark')
+    const hadLight = root.classList.contains('light')
+    root.classList.add('light')
+    root.classList.remove('dark')
+    return () => {
+      if (!hadLight) root.classList.remove('light')
+      if (hadDark) root.classList.add('dark')
     }
   }, [])
 
@@ -55,36 +49,46 @@ export default function NotFound() {
   }, [])
 
   return (
-    <AuthBackground>
-      <main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
-        {/* Header */}
-        <Nav hideAuthButtons={true} variant='auth' />
+    <div className='min-h-screen bg-white'>
+      <Nav variant='auth' />
+      <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='space-y-1 text-center'>
+              <h1
+                className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
+              >
+                Page Not Found
+              </h1>
+              <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                The page you’re looking for doesn’t exist or has been moved.
+              </p>
+            </div>
 
-        {/* Content */}
-        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='text-center'>
-            <div className='mb-4 font-bold text-8xl text-foreground'>404</div>
-            <div className='mb-8'>
+            <div className='mt-8 w-full space-y-3'>
               <Button
-                asChild
+                type='button'
+                onClick={() => router.push('/')}
                 className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
               >
-                <Link href='/'>Back to Workspace</Link>
+                Return to Home
               </Button>
             </div>
 
-            <div className='text-center text-muted-foreground text-sm'>
+            <div
+              className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
+            >
               Need help?{' '}
               <a
                 href={`mailto:${brandConfig.supportEmail}`}
-                className='underline-offset-4 transition hover:underline'
+                className='auth-link underline-offset-4 transition hover:underline'
               >
                 Contact support
               </a>
             </div>
           </div>
         </div>
-      </main>
-    </AuthBackground>
+      </div>
+    </div>
   )
 }