From 280e0962f7dcccc9516c9b1fec0c6b1c89fe5d06 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Tue, 22 Sep 2026 01:16:00 -0700
Subject: [PATCH] improvement(ui): use outline chips for auth actions

---
 apps/sim/app/(auth)/components/auth-nav-prompt.tsx    |  2 +-
 .../app/(auth)/components/social-login-buttons.tsx    | 11 +++++++----
 apps/sim/app/(auth)/components/sso-login-button.tsx   |  8 ++------
 apps/sim/app/invite/components/status-card.tsx        |  5 +++--
 apps/sim/app/unsubscribe/unsubscribe.tsx              | 11 +++++++----
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
index d479a273b4a..bdea32fa50f 100644
--- a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx
+++ b/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>
diff --git a/apps/sim/app/(auth)/components/social-login-buttons.tsx b/apps/sim/app/(auth)/components/social-login-buttons.tsx
index 37df7815ed7..8e701629cf8 100644
--- a/apps/sim/app/(auth)/components/social-login-buttons.tsx
+++ b/apps/sim/app/(auth)/components/social-login-buttons.tsx
@@ -1,7 +1,7 @@
 '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'
@@ -73,7 +73,8 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GithubIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      className={AUTH_BUTTON_CLASS}
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -85,7 +86,8 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={GoogleIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      className={AUTH_BUTTON_CLASS}
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -97,7 +99,8 @@ export function SocialLoginButtons({
     <Chip
       fullWidth
       leftIcon={MicrosoftIcon}
-      className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+      variant='outline'
+      className={AUTH_BUTTON_CLASS}
       disabled={!microsoftAvailable || isMicrosoftLoading}
       onClick={signInWithMicrosoft}
     >
diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
index 1bbd06d5591..152abcdd17e 100644
--- a/apps/sim/app/(auth)/components/sso-login-button.tsx
+++ b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -28,14 +28,10 @@ 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
-      )}
+      className={cn(AUTH_BUTTON_CLASS, className)}
     >
       Sign in with SSO
     </Chip>
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 77bda9668b1..aed182d7fa3 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -1,5 +1,5 @@
 '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'
@@ -80,7 +80,8 @@ export function InviteStatusCard({
               fullWidth
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
-              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
+              variant='outline'
+              className={AUTH_BUTTON_CLASS}
             >
               {action.loading ? (
                 <span className='flex items-center gap-2'>
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index 2d6bbbe654f..a9e086bb033 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Suspense } from 'react'
-import { Chip, cn, Loader } from '@sim/emcn'
+import { Chip, Loader } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useSearchParams } from 'next/navigation'
 import type { UnsubscribeType } from '@/lib/api/contracts/user'
@@ -139,7 +139,8 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeMarketing
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          className={AUTH_BUTTON_CLASS}
         >
           {data?.currentPreferences.unsubscribeMarketing
             ? 'Unsubscribed from Marketing'
@@ -154,7 +155,8 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeUpdates
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          className={AUTH_BUTTON_CLASS}
         >
           {data?.currentPreferences.unsubscribeUpdates
             ? 'Unsubscribed from Updates'
@@ -169,7 +171,8 @@ function UnsubscribeContent() {
             isAlreadyUnsubscribedFromAll ||
             data?.currentPreferences.unsubscribeNotifications
           }
-          className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+          variant='outline'
+          className={AUTH_BUTTON_CLASS}
         >
           {data?.currentPreferences.unsubscribeNotifications
             ? 'Unsubscribed from Notifications'