improvement(ui): use outline chips for auth actions (#8133)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

Author: BillLeoutsakosvl346

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/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}
     >

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>

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'>

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'