Skip to content

Commit b152aa2

Browse files
waleedlatif1waleedlatif1
committed
fix(branding): align auth and deploy UI colors
1 parent d7d58ce commit b152aa2

29 files changed

Lines changed: 292 additions & 2118 deletions

File tree

‎apps/sim/app/(auth)/components/auth-button-classes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,7 @@ export const AUTH_PRIMARY_CTA_BASE =
44

55
/** Full-width variant used for primary auth form submit buttons. */
66
export const AUTH_SUBMIT_BTN = `${AUTH_PRIMARY_CTA_BASE} w-full` as const
7+
8+
/** Shared className for inline auth action links on dark auth surfaces. */
9+
export const AUTH_TEXT_LINK =
10+
'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

‎apps/sim/app/_styles/globals.css‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
--shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
3737
--shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
3838
--shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
39-
--shadow-brand-inset: inset 0 1.25px 2.5px 0 #9b77ff;
4039
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
4140
}
4241

@@ -762,12 +761,8 @@ input[type="search"]::-ms-clear {
762761
--card-text: 0 0% 3.9%;
763762
--card-hover: 0 0% 96.1%;
764763
--base-muted-foreground: #737373;
765-
--gradient-primary: 263 85% 70%;
766-
--gradient-secondary: 336 95% 65%;
767-
--brand: #6f3dfa;
768-
--brand-hover: #6338d9;
769-
--brand-link: #6f3dfa;
770-
--brand-link-hover: #6f3dfa;
764+
--brand: #33c482;
765+
--brand-hover: #2dac72;
771766
}
772767

773768
.dark {
@@ -799,12 +794,8 @@ input[type="search"]::-ms-clear {
799794
--card-text: 0 0% 98%;
800795
--card-hover: 0 0% 12.0%;
801796
--base-muted-foreground: #a3a3a3;
802-
--gradient-primary: 263 90% 75%;
803-
--gradient-secondary: 336 100% 72%;
804-
--brand: #701ffc;
805-
--brand-hover: #802fff;
806-
--brand-link: #9d54ff;
807-
--brand-link-hover: #a66fff;
797+
--brand: #33c482;
798+
--brand-hover: #2dac72;
808799
}
809800
}
810801

‎apps/sim/app/chat/components/auth/email/email-auth.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@/c
77
import { cn } from '@/lib/core/utils/cn'
88
import { quickValidateEmail } from '@/lib/messaging/email/validation'
99
import AuthBackground from '@/app/(auth)/components/auth-background'
10-
import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
10+
import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
1111
import { SupportFooter } from '@/app/(auth)/components/support-footer'
1212
import Navbar from '@/app/(landing)/components/navbar/navbar'
1313
import { useChatEmailOtpRequest, useChatEmailOtpVerify } from '@/hooks/queries/chats'
@@ -123,7 +123,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
123123
<div className='w-full max-w-lg px-4'>
124124
<div className='flex flex-col items-center justify-center'>
125125
<div className='space-y-1 text-center'>
126-
<h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
126+
<h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'>
127127
{showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
128128
</h1>
129129
<p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
@@ -159,11 +159,11 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
159159
className={cn(
160160
showEmailValidationError &&
161161
emailErrors.length > 0 &&
162-
'border-red-500 focus:border-red-500'
162+
'border-[var(--text-error)] focus:border-[var(--text-error)]'
163163
)}
164164
/>
165165
{showEmailValidationError && emailErrors.length > 0 && (
166-
<div className='mt-1 space-y-1 text-red-400 text-xs'>
166+
<div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
167167
{emailErrors.map((error) => (
168168
<p key={error}>{error}</p>
169169
))}
@@ -211,15 +211,15 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
211211
<InputOTPSlot
212212
key={index}
213213
index={index}
214-
className={cn(authError && 'border-red-500')}
214+
className={cn(authError && 'border-[var(--text-error)]')}
215215
/>
216216
))}
217217
</InputOTPGroup>
218218
</InputOTP>
219219
</div>
220220

221221
{authError && (
222-
<div className='mt-1 space-y-1 text-center text-red-400 text-xs'>
222+
<div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
223223
<p>{authError}</p>
224224
</div>
225225
)}
@@ -251,7 +251,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
251251
</span>
252252
) : (
253253
<button
254-
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
254+
className={AUTH_TEXT_LINK}
255255
onClick={handleResendOtp}
256256
disabled={verifyOtp.isPending || requestOtp.isPending}
257257
>
@@ -268,7 +268,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
268268
setOtpValue('')
269269
setAuthError(null)
270270
}}
271-
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
271+
className={AUTH_TEXT_LINK}
272272
>
273273
Change email
274274
</button>

‎apps/sim/app/form/[identifier]/components/email-auth.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@/c
77
import { cn } from '@/lib/core/utils/cn'
88
import { quickValidateEmail } from '@/lib/messaging/email/validation'
99
import AuthBackground from '@/app/(auth)/components/auth-background'
10-
import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
10+
import { AUTH_SUBMIT_BTN, AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
1111
import { SupportFooter } from '@/app/(auth)/components/support-footer'
1212
import Navbar from '@/app/(landing)/components/navbar/navbar'
1313
import { useFormEmailOtpRequest, useFormEmailOtpVerify } from '@/hooks/queries/forms'
@@ -120,7 +120,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
120120
<div className='w-full max-w-lg px-4'>
121121
<div className='flex flex-col items-center justify-center'>
122122
<div className='space-y-1 text-center'>
123-
<h1 className='text-balance font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
123+
<h1 className='text-balance font-[430] font-season text-[40px] text-[var(--landing-text)] leading-[110%] tracking-[-0.02em]'>
124124
{showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
125125
</h1>
126126
<p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
@@ -154,11 +154,11 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
154154
className={cn(
155155
showEmailValidationError &&
156156
emailErrors.length > 0 &&
157-
'border-red-500 focus:border-red-500'
157+
'border-[var(--text-error)] focus:border-[var(--text-error)]'
158158
)}
159159
/>
160160
{showEmailValidationError && emailErrors.length > 0 && (
161-
<div className='mt-1 space-y-1 text-red-400 text-xs'>
161+
<div className='mt-1 space-y-1 text-[var(--text-error)] text-xs'>
162162
{emailErrors.map((error) => (
163163
<p key={error}>{error}</p>
164164
))}
@@ -206,15 +206,15 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
206206
<InputOTPSlot
207207
key={index}
208208
index={index}
209-
className={cn(authError && 'border-red-500')}
209+
className={cn(authError && 'border-[var(--text-error)]')}
210210
/>
211211
))}
212212
</InputOTPGroup>
213213
</InputOTP>
214214
</div>
215215

216216
{authError && (
217-
<div className='mt-1 space-y-1 text-center text-red-400 text-xs'>
217+
<div className='mt-1 space-y-1 text-center text-[var(--text-error)] text-xs'>
218218
<p>{authError}</p>
219219
</div>
220220
)}
@@ -248,7 +248,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
248248
) : (
249249
<button
250250
type='button'
251-
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
251+
className={AUTH_TEXT_LINK}
252252
onClick={handleResendOtp}
253253
disabled={verifyOtp.isPending || requestOtp.isPending}
254254
>
@@ -266,7 +266,7 @@ export function EmailAuth({ identifier, onAuthenticated }: EmailAuthProps) {
266266
setOtpValue('')
267267
setAuthError(null)
268268
}}
269-
className='font-medium text-[var(--brand-link)] underline-offset-4 transition hover:text-[var(--brand-link-hover)] hover:underline'
269+
className={AUTH_TEXT_LINK}
270270
>
271271
Change email
272272
</button>

‎apps/sim/app/manifest.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function manifest(): MetadataRoute.Manifest {
1818
scope: '/',
1919
display: 'standalone',
2020
background_color: '#ffffff',
21-
theme_color: brand.theme?.primaryColor || '#6F3DFA',
21+
theme_color: brand.theme?.primaryColor || '#33C482',
2222
orientation: 'portrait-primary',
2323
icons: [
2424
{

0 commit comments

Comments
 (0)