refactor(ui): share account headings and auth control sizing

apps/sim/app/(auth)/components/auth-nav-prompt.tsx

@@ -19,7 +19,7 @@ export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPr
   return (
     <div className='flex items-center justify-center gap-1 text-sm'>
       {prompt && <span className='text-[var(--text-muted)]'>{prompt}</span>}
-      <ChipLink href={href} onClick={onNavigate} className='border border-[var(--border-1)]'>
+      <ChipLink href={href} onClick={onNavigate} variant='outline'>
         {linkLabel}
       </ChipLink>
     </div>

apps/sim/app/(auth)/components/auth-submit-button.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react'
 import { Chip, Loader } from '@sim/emcn'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface AuthSubmitButtonProps {
   children: ReactNode
@@ -32,7 +31,8 @@ export function AuthSubmitButton({
       onClick={onClick}
       disabled={disabled || loading}
       fullWidth
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
     >
       {loading ? (
         <span className='flex items-center gap-2'>

apps/sim/app/(auth)/components/password-input.tsx

@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 import { Eye, EyeOff } from '@sim/emcn/icons'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
 
-type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment'>
+type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment' | 'size'>
 
 /**
  * A {@link ChipInput} that owns the password reveal toggle — the eye button is
@@ -19,7 +18,8 @@ export function PasswordInput({ error, className, ...props }: PasswordInputProps
   return (
     <ChipInput
       {...props}
-      className={cn(AUTH_CONTROL_HEIGHT, className)}
+      size='lg'
+      className={className}
       type={visible ? 'text' : 'password'}
       error={error}
       endAdornment={

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -1,13 +1,12 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
 import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 const logger = createLogger('SocialLoginButtons')
 
@@ -73,7 +72,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GithubIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -85,7 +86,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GoogleIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -97,7 +100,9 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={MicrosoftIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      size='lg'
+      align='center'
       disabled={!microsoftAvailable || isMicrosoftLoading}
       onClick={signInWithMicrosoft}
     >

apps/sim/app/(auth)/components/sso-login-button.tsx

@@ -1,8 +1,7 @@
 'use client'
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface SSOLoginButtonProps {
   callbackURL?: string
@@ -28,14 +27,12 @@ export function SSOLoginButton({
 
   return (
     <Chip
-      variant={variant === 'primary' ? 'primary' : undefined}
+      variant={variant}
       fullWidth
       onClick={handleSSOClick}
-      className={cn(
-        AUTH_BUTTON_CLASS,
-        variant === 'outline' && 'border border-[var(--border-1)]',
-        className
-      )}
+      size='lg'
+      align='center'
+      className={className}
     >
       Sign in with SSO
     </Chip>

apps/sim/app/(auth)/oauth/consent/consent-view.tsx

@@ -14,7 +14,6 @@ import {
   AuthSubmitButton,
   AuthTextLink,
 } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading'
 import {
   useOAuthConsent,
@@ -166,7 +165,8 @@ export function OAuthConsentView({
           variant='border'
           fullWidth
           disabled={isPending}
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
           onClick={() => decide(false)}
         >
           {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'}

apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx

@@ -143,7 +143,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                     autoCorrect='off'
                     value={email}
                     onChange={handleEmailChange}
-                    className='h-[34px]'
+                    size='lg'
                     error={Boolean(hasEmailError)}
                   />
                   {hasEmailError && (

apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx

@@ -72,7 +72,6 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
                   placeholder='Enter password'
                   value={password}
                   onChange={handlePasswordChange}
-                  className='h-[34px]'
                   error={hasPasswordError}
                 />
                 <div

apps/sim/app/f/[token]/public-file-auth.tsx

@@ -60,7 +60,6 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
               setPassword(e.target.value)
               setError(null)
             }}
-            className='h-[34px]'
             error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

apps/sim/app/f/[token]/public-file-email-auth.tsx

@@ -104,7 +104,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
                 setEmail(e.target.value)
                 setError(null)
               }}
-              className='h-[34px]'
+              size='lg'
               error={Boolean(error)}
             />
             {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

apps/sim/app/f/[token]/public-file-sso-auth.tsx

@@ -82,7 +82,7 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
               setEmail(e.target.value)
               setError(null)
             }}
-            className='h-[34px]'
+            size='lg'
             error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

apps/sim/app/invite/components/index.ts

@@ -1,4 +1,5 @@
 export { InvitationDisclosure } from '@/app/invite/components/invitation-disclosure'
 export { InvitationWorkspaceAccess } from '@/app/invite/components/invitation-workspace-access'
+export { InviteHeading } from '@/app/invite/components/invite-heading'
 export { default as InviteLayout } from '@/app/invite/components/layout'
 export { InviteStatusCard } from '@/app/invite/components/status-card'

apps/sim/app/invite/components/invite-heading.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+interface InviteHeadingProps {
+  title: ReactNode
+  children: ReactNode
+}
+
+/** Heading shared by invitation and email-preference states; subcopy stays with each caller. */
+export function InviteHeading({ title, children }: InviteHeadingProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
+      {children}
+    </div>
+  )
+}

apps/sim/app/invite/components/status-card.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { Chip, cn, Loader } from '@sim/emcn'
+import { Chip, Loader } from '@sim/emcn'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+import { InviteHeading } from '@/app/invite/components/invite-heading'
 
 /** A document navigation, so the marketing surface initializes its own theme store. */
 function returnHome(): void {
@@ -37,10 +37,9 @@ export function InviteStatusCard({
   if (type === 'loading') {
     return (
       <>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>Loading</h1>
+        <InviteHeading title={'Loading'}>
           <p className='text-[var(--text-muted)]'>{description}</p>
-        </div>
+        </InviteHeading>
         <div className='mt-8 flex w-full items-center justify-center py-8'>
           <Loader className='size-8 text-[var(--text-muted)]' animate />
         </div>
@@ -50,10 +49,9 @@ export function InviteStatusCard({
 
   return (
     <>
-      <div className='space-y-1 text-center'>
-        <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
+      <InviteHeading title={title}>
         <p className='text-[var(--text-muted)]'>{description}</p>
-      </div>
+      </InviteHeading>
 
       <div className='mt-8 w-full max-w-[410px] space-y-3'>
         {details}
@@ -81,7 +79,9 @@ export function InviteStatusCard({
               fullWidth
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
-              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
+              variant='outline'
+              size='lg'
+              align='center'
             >
               {action.loading ? (
                 <span className='flex items-center gap-2'>