Skip to content

Commit 39356f3

Browse files
waleedlatif1waleedlatif1
authored
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
1 parent 1ec5b1b commit 39356f3

File tree

4 files changed

+59
-68
lines changed

4 files changed

+59
-68
lines changed

‎apps/sim/app/(landing)/components/nav/nav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,8 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
148148
)}
149149
</div>
150150

151-
{/* Auth Buttons - respect hideAuthButtons prop and only show on hosted instances for landing pages */}
152-
{!hideAuthButtons && (variant === 'auth' || isHosted) && (
151+
{/* Auth Buttons - show only when hosted, regardless of variant */}
152+
{!hideAuthButtons && isHosted && (
153153
<div className='flex items-center justify-center gap-[16px] pt-[1.5px]'>
154154
<button
155155
onClick={handleLoginClick}

‎apps/sim/app/chat/components/error-state/error-state.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useEffect, useState } from 'react'
44
import { useRouter } from 'next/navigation'
55
import { Button } from '@/components/ui/button'
6+
import { useBrandConfig } from '@/lib/branding/branding'
67
import Nav from '@/app/(landing)/components/nav/nav'
78
import { inter } from '@/app/fonts/inter'
89
import { soehne } from '@/app/fonts/soehne/soehne'
@@ -15,6 +16,7 @@ interface ChatErrorStateProps {
1516
export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
1617
const router = useRouter()
1718
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
19+
const brandConfig = useBrandConfig()
1820

1921
useEffect(() => {
2022
// Check if CSS variable has been customized
@@ -47,7 +49,7 @@ export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
4749
}, [])
4850

4951
return (
50-
<div className='bg-white'>
52+
<div className='min-h-screen bg-white'>
5153
<Nav variant='auth' />
5254
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
5355
<div className='w-full max-w-[410px]'>
@@ -77,6 +79,17 @@ export function ChatErrorState({ error, starCount }: ChatErrorStateProps) {
7779
</div>
7880
</div>
7981
</div>
82+
<div
83+
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`}
84+
>
85+
Need help?{' '}
86+
<a
87+
href={`mailto:${brandConfig.supportEmail}`}
88+
className='auth-link underline-offset-4 transition hover:underline'
89+
>
90+
Contact support
91+
</a>
92+
</div>
8093
</div>
8194
)
8295
}

‎apps/sim/app/invite/components/layout.tsx‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,18 @@
11
'use client'
22

3-
import { useEffect } from 'react'
4-
import AuthBackground from '@/app/(auth)/components/auth-background'
53
import Nav from '@/app/(landing)/components/nav/nav'
64

75
interface InviteLayoutProps {
86
children: React.ReactNode
97
}
108

11-
function isColorDark(hexColor: string): boolean {
12-
const hex = hexColor.replace('#', '')
13-
const r = Number.parseInt(hex.substr(0, 2), 16)
14-
const g = Number.parseInt(hex.substr(2, 2), 16)
15-
const b = Number.parseInt(hex.substr(4, 2), 16)
16-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
17-
return luminance < 0.5
18-
}
19-
209
export default function InviteLayout({ children }: InviteLayoutProps) {
21-
useEffect(() => {
22-
const rootStyle = getComputedStyle(document.documentElement)
23-
const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
24-
25-
if (brandBackground && isColorDark(brandBackground)) {
26-
document.body.classList.add('auth-dark-bg')
27-
} else {
28-
document.body.classList.remove('auth-dark-bg')
29-
}
30-
}, [])
3110
return (
32-
<AuthBackground>
33-
<main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
34-
{/* Header - Nav handles all conditional logic */}
35-
<Nav hideAuthButtons={true} variant='auth' />
36-
37-
{/* Content */}
38-
<div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
39-
<div className='w-full max-w-lg px-4'>{children}</div>
40-
</div>
41-
</main>
42-
</AuthBackground>
11+
<div className='bg-white'>
12+
<Nav variant='auth' />
13+
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
14+
<div className='w-full max-w-[410px]'>{children}</div>
15+
</div>
16+
</div>
4317
)
4418
}

‎apps/sim/app/not-found.tsx‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
'use client'
22

33
import { useEffect, useState } from 'react'
4-
import Link from 'next/link'
4+
import { useRouter } from 'next/navigation'
55
import { Button } from '@/components/ui/button'
66
import { useBrandConfig } from '@/lib/branding/branding'
7-
import AuthBackground from '@/app/(auth)/components/auth-background'
87
import Nav from '@/app/(landing)/components/nav/nav'
9-
10-
function isColorDark(hexColor: string): boolean {
11-
const hex = hexColor.replace('#', '')
12-
const r = Number.parseInt(hex.substring(0, 2), 16)
13-
const g = Number.parseInt(hex.substring(2, 4), 16)
14-
const b = Number.parseInt(hex.substring(4, 6), 16)
15-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
16-
return luminance < 0.5
17-
}
8+
import { inter } from '@/app/fonts/inter'
9+
import { soehne } from '@/app/fonts/soehne/soehne'
1810

1911
export default function NotFound() {
2012
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
2113
const brandConfig = useBrandConfig()
14+
const router = useRouter()
2215

2316
useEffect(() => {
24-
const rootStyle = getComputedStyle(document.documentElement)
25-
const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
26-
27-
if (brandBackground && isColorDark(brandBackground)) {
28-
document.body.classList.add('auth-dark-bg')
29-
} else {
30-
document.body.classList.remove('auth-dark-bg')
17+
const root = document.documentElement
18+
const hadDark = root.classList.contains('dark')
19+
const hadLight = root.classList.contains('light')
20+
root.classList.add('light')
21+
root.classList.remove('dark')
22+
return () => {
23+
if (!hadLight) root.classList.remove('light')
24+
if (hadDark) root.classList.add('dark')
3125
}
3226
}, [])
3327

@@ -55,36 +49,46 @@ export default function NotFound() {
5549
}, [])
5650

5751
return (
58-
<AuthBackground>
59-
<main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
60-
{/* Header */}
61-
<Nav hideAuthButtons={true} variant='auth' />
52+
<div className='min-h-screen bg-white'>
53+
<Nav variant='auth' />
54+
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
55+
<div className='w-full max-w-[410px]'>
56+
<div className='flex flex-col items-center justify-center'>
57+
<div className='space-y-1 text-center'>
58+
<h1
59+
className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
60+
>
61+
Page Not Found
62+
</h1>
63+
<p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
64+
The page you’re looking for doesn’t exist or has been moved.
65+
</p>
66+
</div>
6267

63-
{/* Content */}
64-
<div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
65-
<div className='text-center'>
66-
<div className='mb-4 font-bold text-8xl text-foreground'>404</div>
67-
<div className='mb-8'>
68+
<div className='mt-8 w-full space-y-3'>
6869
<Button
69-
asChild
70+
type='button'
71+
onClick={() => router.push('/')}
7072
className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
7173
>
72-
<Link href='/'>Back to Workspace</Link>
74+
Return to Home
7375
</Button>
7476
</div>
7577

76-
<div className='text-center text-muted-foreground text-sm'>
78+
<div
79+
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`}
80+
>
7781
Need help?{' '}
7882
<a
7983
href={`mailto:${brandConfig.supportEmail}`}
80-
className='underline-offset-4 transition hover:underline'
84+
className='auth-link underline-offset-4 transition hover:underline'
8185
>
8286
Contact support
8387
</a>
8488
</div>
8589
</div>
8690
</div>
87-
</main>
88-
</AuthBackground>
91+
</div>
92+
</div>
8993
)
9094
}

0 commit comments

Comments
 (0)