Skip to content

fix(branding): align auth and deploy UI colors #4669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
May 19, 2026
Merged

fix(branding): align auth and deploy UI colors #4669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/sim/app/(auth)/components/auth-button-classes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@ export const AUTH_PRIMARY_CTA_BASE =

/** Full-width variant used for primary auth form submit buttons. */
export const AUTH_SUBMIT_BTN = `${AUTH_PRIMARY_CTA_BASE} w-full` as const

/** Shared className for inline auth action links on dark auth surfaces. */
export const AUTH_TEXT_LINK =
'font-medium text-[var(--brand-accent)] underline-offset-4 transition hover:text-[var(--brand-accent-hover)] hover:underline disabled:cursor-not-allowed disabled:opacity-50' as const
17 changes: 4 additions & 13 deletions apps/sim/app/_styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
--shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
--shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
--shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
--shadow-brand-inset: inset 0 1.25px 2.5px 0 #9b77ff;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
}

Expand Down Expand Up @@ -762,12 +761,8 @@ input[type="search"]::-ms-clear {
--card-text: 0 0% 3.9%;
--card-hover: 0 0% 96.1%;
--base-muted-foreground: #737373;
--gradient-primary: 263 85% 70%;
--gradient-secondary: 336 95% 65%;
--brand: #6f3dfa;
--brand-hover: #6338d9;
--brand-link: #6f3dfa;
--brand-link-hover: #6f3dfa;
--brand: #33c482;
--brand-hover: #2dac72;
}

.dark {
Expand Down Expand Up @@ -799,12 +794,8 @@ input[type="search"]::-ms-clear {
--card-text: 0 0% 98%;
--card-hover: 0 0% 12.0%;
--base-muted-foreground: #a3a3a3;
--gradient-primary: 263 90% 75%;
--gradient-secondary: 336 100% 72%;
--brand: #701ffc;
--brand-hover: #802fff;
--brand-link: #9d54ff;
--brand-link-hover: #a66fff;
--brand: #33c482;
--brand-hover: #2dac72;
Comment thread
waleedlatif1 marked this conversation as resolved.
}
}

Expand Down
16 changes: 8 additions & 8 deletions apps/sim/app/chat/components/auth/email/email-auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@/c
import { cn } from '@/lib/core/utils/cn'
import { quickValidateEmail } from '@/lib/messaging/email/validation'
import AuthBackground from '@/app/(auth)/components/auth-background'
import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
import { SupportFooter } from '@/app/(auth)/components/support-footer'
import Navbar from '@/app/(landing)/components/navbar/navbar'
import { useChatEmailOtpRequest, useChatEmailOtpVerify } from '@/hooks/queries/chats'
Expand Down Expand Up @@ -123,7 +123,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
<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='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
<h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'>
{showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
</h1>
<p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
Expand Down Expand Up @@ -159,11 +159,11 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
className={cn(
showEmailValidationError &&
emailErrors.length > 0 &&
'border-red-500 focus:border-red-500'
'border-[var(--text-error)] focus:border-[var(--text-error)]'
)}
/>
{showEmailValidationError && emailErrors.length > 0 && (
<div className='mt-1 space-y-1 text-red-400 text-xs'>
<div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
{emailErrors.map((error) => (
<p key={error}>{error}</p>
))}
Expand Down Expand Up @@ -211,15 +211,15 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
<InputOTPSlot
key={index}
index={index}
className={cn(authError && 'border-red-500')}
className={cn(authError && 'border-[var(--text-error)]')}
/>
))}
</InputOTPGroup>
</InputOTP>
</div>

{authError && (
<div className='mt-1 space-y-1 text-center text-red-400 text-xs'>
<div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
<p>{authError}</p>
</div>
)}
Expand Down Expand Up @@ -251,7 +251,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
</span>
) : (
<button
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
className={AUTH_TEXT_LINK}
onClick={handleResendOtp}
disabled={verifyOtp.isPending || requestOtp.isPending}
>
Expand All @@ -268,7 +268,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
setOtpValue('')
setAuthError(null)
}}
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
className={AUTH_TEXT_LINK}
>
Change email
</button>
Expand Down
16 changes: 8 additions & 8 deletions apps/sim/app/form/[identifier]/components/email-auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@/c
import { cn } from '@/lib/core/utils/cn'
import { quickValidateEmail } from '@/lib/messaging/email/validation'
import AuthBackground from '@/app/(auth)/components/auth-background'
import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
import { SupportFooter } from '@/app/(auth)/components/support-footer'
import Navbar from '@/app/(landing)/components/navbar/navbar'
import { useFormEmailOtpRequest, useFormEmailOtpVerify } from '@/hooks/queries/forms'
Expand Down Expand Up @@ -120,7 +120,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
<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='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
<h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'>
{showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
</h1>
<p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
Expand Down Expand Up @@ -154,11 +154,11 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
className={cn(
showEmailValidationError &&
emailErrors.length > 0 &&
'border-red-500 focus:border-red-500'
'border-[var(--text-error)] focus:border-[var(--text-error)]'
)}
/>
{showEmailValidationError && emailErrors.length > 0 && (
<div className='mt-1 space-y-1 text-red-400 text-xs'>
<div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
{emailErrors.map((error) => (
<p key={error}>{error}</p>
))}
Expand Down Expand Up @@ -206,15 +206,15 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
<InputOTPSlot
key={index}
index={index}
className={cn(authError && 'border-red-500')}
className={cn(authError && 'border-[var(--text-error)]')}
/>
))}
</InputOTPGroup>
</InputOTP>
</div>

{authError && (
<div className='mt-1 space-y-1 text-center text-red-400 text-xs'>
<div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
<p>{authError}</p>
</div>
)}
Expand Down Expand Up @@ -248,7 +248,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
) : (
<button
type='button'
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
className={AUTH_TEXT_LINK}
onClick={handleResendOtp}
disabled={verifyOtp.isPending || requestOtp.isPending}
>
Expand All @@ -266,7 +266,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
setOtpValue('')
setAuthError(null)
}}
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
className={AUTH_TEXT_LINK}
>
Change email
</button>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/manifest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function manifest(): MetadataRoute.Manifest {
scope: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: brand.theme?.primaryColor || '#6F3DFA',
theme_color: brand.theme?.primaryColor || '#33C482',
orientation: 'portrait-primary',
icons: [
{
Expand Down
Loading
Loading