improvement(ui): use shared sizing for auth controls

Author: Bill Leoutsakos

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/constants.ts

@@ -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/password-input.tsx

@@ -7,7 +7,6 @@ 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')
 
@@ -74,7 +73,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={GithubIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -87,7 +87,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={GoogleIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -100,7 +101,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={MicrosoftIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!microsoftAvailable || isMicrosoftLoading}
       onClick={signInWithMicrosoft}
     >

apps/sim/app/(auth)/components/social-login-buttons.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
@@ -31,7 +30,9 @@ export function SSOLoginButton({
       variant={variant}
       fullWidth
       onClick={handleSSOClick}
-      className={cn(AUTH_BUTTON_CLASS, className)}
+      size='lg'
+      align='center'
+      className={className}
     >
       Sign in with SSO
     </Chip>

apps/sim/app/(auth)/components/sso-login-button.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/(auth)/oauth/consent/consent-view.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/email/email-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/(interfaces)/chat/components/auth/password/password-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-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}