Skip to content

fix: emcn component library design engineering polish #3672

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

Open
adithyaakrishna wants to merge 6 commits into
base: staging
Choose a base branch
from
+5,086 −4,694
Open

fix: emcn component library design engineering polish #3672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
447d6dc
feat: icon and hover states
adithyaakrishna Mar 19, 2026
635600d
feat: updated tailwind config
adithyaakrishna Mar 19, 2026
0d43abf
chore: pause marquee
adithyaakrishna Mar 20, 2026
26c0e7e
feat: more updated
adithyaakrishna Mar 20, 2026
ccbc8d8
feat: fix hardcoded values
adithyaakrishna Mar 20, 2026
c6eefee
chore: address review comments
adithyaakrishna Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
4 changes: 2 additions & 2 deletions apps/sim/app/(auth)/auth-layout-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export default function AuthLayoutClient({ children }: { children: React.ReactNo

return (
<AuthBackground className='dark font-[430] font-season'>
<main className='relative flex min-h-full flex-col text-[#ECECEC]'>
<header className='shrink-0 bg-[#1C1C1C]'>
<main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
<header className='shrink-0 bg-[var(--text-primary)]'>
<Navbar logoOnly />
</header>
<div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(auth)/components/auth-background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type AuthBackgroundProps = {
export default function AuthBackground({ className, children }: AuthBackgroundProps) {
return (
<div className={cn('fixed inset-0 overflow-hidden', className)}>
<div className='-z-50 pointer-events-none absolute inset-0 bg-[#1C1C1C]' />
<div className='-z-50 pointer-events-none absolute inset-0 bg-[var(--text-primary)]' />
Copy link

@cursor cursor bot Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auth dark backgrounds become light using text-primary token

High Severity

Auth pages explicitly set the .dark class, where --text-primary resolves to #e6e6e6 (light). Replacing bg-[#1C1C1C] (near-black) with bg-[var(--text-primary)] turns dark backgrounds light — the auth background, header, and "Or continue with" divider span all become light gray instead of near-black, breaking the dark auth page design entirely.

Additional Locations (2)
Fix in Cursor Fix in Web

<AuthBackgroundSVG />
<div className='relative z-20 h-full overflow-auto'>{children}</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/(auth)/components/branded-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={cn(
'group inline-flex h-[32px] items-center justify-center gap-[8px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
'group inline-flex h-[32px] items-center justify-center gap-2 rounded-[5px] border px-2.5 font-[430] font-season text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
!hasCustomColor &&
'border-[#FFFFFF] bg-[#FFFFFF] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
'border-[var(--white)] bg-[var(--white)] text-black hover:border-[var(--border-1)] hover:bg-[var(--border-1)]',
fullWidth && 'w-full',
className
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(auth)/components/sso-login-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function SSOLoginButton({

const primaryBtnClasses = cn(
primaryClassName || 'branded-button-gradient',
'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-base text-white transition-all duration-200'
)

const outlineBtnClasses = cn('w-full rounded-[10px]')
Expand Down
6 changes: 3 additions & 3 deletions apps/sim/app/(auth)/components/status-page-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export function StatusPageLayout({
}: StatusPageLayoutProps) {
return (
<AuthBackground className='dark font-[430] font-season'>
<main className='relative flex min-h-full flex-col text-[#ECECEC]'>
<header className='shrink-0 bg-[#1C1C1C]'>
<main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
<header className='shrink-0 bg-[var(--text-primary)]'>
<Navbar logoOnly />
</header>
<div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
Expand All @@ -31,7 +31,7 @@ export function StatusPageLayout({
<h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
{title}
</h1>
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
<p className='font-[430] font-season text-[var(--text-primary)]/60 text-lg leading-[125%] tracking-[0.02em]'>
{description}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/(auth)/components/support-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {

return (
<div
className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed ${position}`}
className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed ${position}`}
>
Need help?{' '}
<a
href={`mailto:${brandConfig.supportEmail}`}
className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
>
Contact support
</a>
Expand Down
183 changes: 112 additions & 71 deletions apps/sim/app/(auth)/login/login-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,7 @@ export default function LoginPage({
<h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
Sign in
</h1>
<p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
<p className='font-[430] font-season text-[var(--text-primary)]/60 text-lg leading-[125%] tracking-[0.02em]'>
Enter your details
</p>
</div>
Expand All @@ -404,7 +404,7 @@ export default function LoginPage({

{/* Password reset success message */}
{resetSuccessMessage && (
<div className='mt-1 space-y-1 text-[#4CAF50] text-xs'>
<div className='mt-1 space-y-1 text-[var(--success)] text-xs'>
<p>{resetSuccessMessage}</p>
</div>
)}
Expand All @@ -417,76 +417,100 @@ export default function LoginPage({
<div className='flex items-center justify-between'>
<Label htmlFor='email'>Email</Label>
</div>
<Input
id='email'
name='email'
placeholder='Enter your email'
required
autoCapitalize='none'
autoComplete='email'
autoCorrect='off'
value={email}
onChange={handleEmailChange}
className={cn(
showEmailValidationError &&
emailErrors.length > 0 &&
'border-red-500 focus:border-red-500'
)}
/>
{showEmailValidationError && emailErrors.length > 0 && (
<div className='mt-1 space-y-1 text-red-400 text-xs'>
{emailErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
<div className='relative'>
<Input
id='email'
name='email'
placeholder='Enter your email'
required
autoCapitalize='none'
autoComplete='email'
autoCorrect='off'
value={email}
onChange={handleEmailChange}
className={cn(
showEmailValidationError &&
emailErrors.length > 0 &&
'border-red-500 focus:border-red-500'
)}
/>
<div
className={cn(
'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
showEmailValidationError && emailErrors.length > 0
? 'grid-rows-[1fr]'
: 'grid-rows-[0fr]'
)}
aria-live='polite'
>
<div className='overflow-hidden'>
<div className='mt-1 space-y-1 text-red-400 text-xs'>
{emailErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
</div>
</div>
)}
</div>
</div>
<div className='space-y-2'>
<div className='flex items-center justify-between'>
<Label htmlFor='password'>Password</Label>
<button
type='button'
onClick={() => setForgotPasswordOpen(true)}
className='font-medium text-[#999] text-xs transition hover:text-[#ECECEC]'
className='font-medium text-[var(--text-subtle)] text-xs transition hover:text-[var(--landing-text)]'
>
Forgot password?
</button>
</div>
<div className='relative'>
<Input
id='password'
name='password'
required
type={showPassword ? 'text' : 'password'}
autoCapitalize='none'
autoComplete='current-password'
autoCorrect='off'
placeholder='Enter your password'
value={password}
onChange={handlePasswordChange}
<div className='relative'>
<Input
id='password'
name='password'
required
type={showPassword ? 'text' : 'password'}
autoCapitalize='none'
autoComplete='current-password'
autoCorrect='off'
placeholder='Enter your password'
value={password}
onChange={handlePasswordChange}
className={cn(
'pr-10',
showValidationError &&
passwordErrors.length > 0 &&
'border-red-500 focus:border-red-500'
)}
/>
<button
type='button'
onClick={() => setShowPassword(!showPassword)}
className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] transition hover:text-[var(--landing-text)]'
aria-label={showPassword ? 'Hide password' : 'Show password'}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
<div
className={cn(
'pr-10',
showValidationError &&
passwordErrors.length > 0 &&
'border-red-500 focus:border-red-500'
'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
showValidationError && passwordErrors.length > 0
? 'grid-rows-[1fr]'
: 'grid-rows-[0fr]'
)}
/>
<button
type='button'
onClick={() => setShowPassword(!showPassword)}
className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
aria-label={showPassword ? 'Hide password' : 'Show password'}
aria-live='polite'
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{showValidationError && passwordErrors.length > 0 && (
<div className='mt-1 space-y-1 text-red-400 text-xs'>
{passwordErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
<div className='overflow-hidden'>
<div className='mt-1 space-y-1 text-red-400 text-xs'>
{passwordErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
</div>
</div>
)}
</div>
</div>
</div>

Expand All @@ -495,6 +519,7 @@ export default function LoginPage({
disabled={isLoading}
loading={isLoading}
loadingText='Signing in'
className='!mt-6'
>
Sign in
</BrandedButton>
Expand All @@ -505,10 +530,10 @@ export default function LoginPage({
{showDivider && (
<div className='relative my-6 font-light'>
<div className='absolute inset-0 flex items-center'>
<div className='w-full border-[#2A2A2A] border-t' />
<div className='w-full border-[var(--surface-4)] border-t' />
</div>
<div className='relative flex justify-center text-sm'>
<span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
<span className='bg-[var(--text-primary)] px-4 font-[340] text-[var(--text-subtle)]'>Or continue with</span>
</div>
</div>
)}
Expand All @@ -534,24 +559,24 @@ export default function LoginPage({

{/* Only show signup link if email/password signup is enabled */}
{!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
<div className='pt-6 text-center font-light text-[14px]'>
<div className='pt-6 text-center font-light text-sm'>
<span className='font-normal'>Don't have an account? </span>
<Link
href={isInviteFlow ? `/signup?invite_flow=true&callbackUrl=${callbackUrl}` : '/signup'}
className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
>
Sign up
</Link>
</div>
)}

<div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
<div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed sm:px-8 md:px-[44px]'>
By signing in, you agree to our{' '}
<Link
href='/terms'
target='_blank'
rel='noopener noreferrer'
className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
>
Terms of Service
</Link>{' '}
Expand All @@ -560,7 +585,7 @@ export default function LoginPage({
href='/privacy'
target='_blank'
rel='noopener noreferrer'
className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
>
Privacy Policy
</Link>
Expand Down Expand Up @@ -588,17 +613,33 @@ export default function LoginPage({
resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
)}
/>
{resetStatus.type === 'error' && (
<div className='mt-1 text-red-400 text-xs'>
<p>{resetStatus.message}</p>
<div
className={cn(
'grid transition-[grid-template-rows] duration-200 ease-out',
resetStatus.type === 'error' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
)}
aria-live='polite'
>
<div className='overflow-hidden'>
<div className='mt-1 text-red-400 text-xs'>
<p>{resetStatus.message}</p>
</div>
</div>
)}
</div>
</div>
{resetStatus.type === 'success' && (
<div className='mt-1 text-[#4CAF50] text-xs'>
<p>{resetStatus.message}</p>
<div
className={cn(
'grid transition-[grid-template-rows] duration-200 ease-out',
resetStatus.type === 'success' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
)}
aria-live='polite'
>
<div className='overflow-hidden'>
<div className='mt-1 text-[var(--success)] text-xs'>
<p>{resetStatus.message}</p>
</div>
</div>
)}
</div>
<BrandedButton
type='button'
onClick={handleForgotPassword}
Expand All @@ -614,4 +655,4 @@ export default function LoginPage({
</Modal>
</>
)
}
}
Loading