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
2026-04-06 03:00:16 -04:00 · 2025-09-27 14:03:24 -07:00
parent 1ec5b1bdad
commit 39356f3d74
4 changed files with 59 additions and 68 deletions
--- 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}
--- 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>
  )
 }
--- 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>
  )
 }
--- 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>
  )
 }