improvement(ui): align all public pages with dark landing theme and improve whitelabeling#3604
improvement(ui): align all public pages with dark landing theme and improve whitelabeling#3604waleedlatif1 wants to merge 17 commits intostagingfrom
Conversation
…mprove whitelabeling
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryMedium Risk Overview Refactors shared auth UI primitives. Improves branding/SEO and a few UI interactions. Written by Cursor Bugbot for commit 3cb33e5. Configure here. |
Greptile SummaryThis PR aligns all public-facing pages (auth, 404, invite, form, resume, changelog, blog, legal) to the dark landing theme by replacing old Key changes and findings:
Confidence Score: 4/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Public Page Request] --> B{Page Type}
B --> |Auth pages| C[auth-layout-client.tsx]
B --> |404| D[not-found.tsx]
B --> |Invite| E[invite/layout.tsx]
B --> |Status pages| F[status-page-layout.tsx]
B --> |Landing/Legal/Blog| G[Landing layouts]
C --> H[AuthBackground + Navbar logoOnly]
D --> H
E --> I[Plain div + Navbar logoOnly]
F --> H
H --> J[getBrandConfig]
I --> J
J --> K{isWhitelabeled?}
K --> |Yes + primaryColor| L[BrandedButton uses brand color]
K --> |No| M[BrandedButton uses white default]
K --> |Yes, no primaryColor| M
J --> N[Navbar]
N --> O{brand.logoUrl?}
O --> |Yes| P[Custom logo image]
O --> |No| Q[Default sim-landing.svg]
J --> R[Email Templates]
R --> S{isWhitelabeled?}
S --> |Yes| T[Hide socials + address rows]
S --> |No| U[Show all footer rows]
R --> V[Privacy/Terms links - always baseUrl/privacy + baseUrl/terms]
|
…r, improve whitelabel detection
|
@greptile |
|
@cursor review |
… to invite layout
|
@greptile |
|
@cursor review |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Autofix Details
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: OTP inputs render white on dark background
- Removed light-theme styles (bg-white, border-gray-300, focus:ring-gray-100) from OTP inputs and email Input, keeping only error states for proper dark theme display.
- ✅ Fixed: Chat password input keeps light-theme focus styling
- Updated Label import to @/components/emcn and removed light-theme focus styles (focus:ring-gray-100, focus:border-gray-400, shadow-sm) from password Input, consistent with other migrated auth pages.
Or push these changes by commenting:
@cursor push ba5d1575b3
Preview (ba5d1575b3)
diff --git a/apps/sim/app/chat/components/auth/email/email-auth.tsx b/apps/sim/app/chat/components/auth/email/email-auth.tsx
--- a/apps/sim/app/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/chat/components/auth/email/email-auth.tsx
@@ -225,10 +225,9 @@
onChange={handleEmailChange}
onKeyDown={handleEmailKeyDown}
className={cn(
- 'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
showEmailValidationError &&
emailErrors.length > 0 &&
- 'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+ 'border-red-500 focus:border-red-500'
)}
autoFocus
/>
@@ -270,13 +269,7 @@
<InputOTPSlot
key={index}
index={index}
- className={cn(
- '!rounded-[10px] h-12 w-12 border bg-white text-center font-medium text-lg shadow-sm transition-all duration-200',
- 'border-gray-300 hover:border-gray-400',
- 'focus:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-100',
- authError &&
- 'border-red-500 focus:border-red-500 focus:ring-red-100'
- )}
+ className={cn('!rounded-[10px] h-12 w-12', authError && 'border-red-500')}
/>
))}
</InputOTPGroup>
diff --git a/apps/sim/app/chat/components/auth/password/password-auth.tsx b/apps/sim/app/chat/components/auth/password/password-auth.tsx
--- a/apps/sim/app/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/chat/components/auth/password/password-auth.tsx
@@ -3,8 +3,7 @@
import { type KeyboardEvent, useState } from 'react'
import { createLogger } from '@sim/logger'
import { Eye, EyeOff } from 'lucide-react'
-import { Input } from '@/components/emcn'
-import { Label } from '@/components/ui/label'
+import { Input, Label } from '@/components/emcn'
import { cn } from '@/lib/core/utils/cn'
import AuthBackground from '@/app/(auth)/components/auth-background'
import { BrandedButton } from '@/app/(auth)/components/branded-button'
@@ -122,10 +121,10 @@
onChange={handlePasswordChange}
onKeyDown={handleKeyDown}
className={cn(
- 'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
+ 'pr-10',
showValidationError &&
passwordErrors.length > 0 &&
- 'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+ 'border-red-500 focus:border-red-500'
)}
autoFocus
/>This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.
…es on standalone auth pages
|
@greptile |
|
@cursor review |
|
@greptile |
|
@cursor review |
|
@greptile |
|
@cursor review |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
…invite header shrink-0


Summary
Type of Change
Testing
Tested manually
Checklist