Skip to content

Commit d2f04f1

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share account status headings
1 parent f8bafb5 commit d2f04f1

7 files changed

Lines changed: 55 additions & 50 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPr
1919
return (
2020
<div className='flex items-center justify-center gap-1 text-sm'>
2121
{prompt && <span className='text-[var(--text-muted)]'>{prompt}</span>}
22-
<ChipLink href={href} onClick={onNavigate} className='border border-[var(--border-1)]'>
22+
<ChipLink href={href} onClick={onNavigate} variant='outline'>
2323
{linkLabel}
2424
</ChipLink>
2525
</div>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { type ReactNode, useState } from 'react'
4-
import { Chip, cn } from '@sim/emcn'
4+
import { Chip } from '@sim/emcn'
55
import { createLogger } from '@sim/logger'
66
import { getErrorMessage } from '@sim/utils/errors'
77
import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
@@ -73,7 +73,8 @@ export function SocialLoginButtons({
7373
<Chip
7474
fullWidth
7575
leftIcon={GithubIcon}
76-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
76+
variant='outline'
77+
className={AUTH_BUTTON_CLASS}
7778
disabled={!githubAvailable || isGithubLoading}
7879
onClick={signInWithGithub}
7980
>
@@ -85,7 +86,8 @@ export function SocialLoginButtons({
8586
<Chip
8687
fullWidth
8788
leftIcon={GoogleIcon}
88-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
89+
variant='outline'
90+
className={AUTH_BUTTON_CLASS}
8991
disabled={!googleAvailable || isGoogleLoading}
9092
onClick={signInWithGoogle}
9193
>
@@ -97,7 +99,8 @@ export function SocialLoginButtons({
9799
<Chip
98100
fullWidth
99101
leftIcon={MicrosoftIcon}
100-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
102+
variant='outline'
103+
className={AUTH_BUTTON_CLASS}
101104
disabled={!microsoftAvailable || isMicrosoftLoading}
102105
onClick={signInWithMicrosoft}
103106
>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,10 @@ export function SSOLoginButton({
2828

2929
return (
3030
<Chip
31-
variant={variant === 'primary' ? 'primary' : undefined}
31+
variant={variant}
3232
fullWidth
3333
onClick={handleSSOClick}
34-
className={cn(
35-
AUTH_BUTTON_CLASS,
36-
variant === 'outline' && 'border border-[var(--border-1)]',
37-
className
38-
)}
34+
className={cn(AUTH_BUTTON_CLASS, className)}
3935
>
4036
Sign in with SSO
4137
</Chip>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { InvitationDisclosure } from '@/app/invite/components/invitation-disclosure'
22
export { InvitationWorkspaceAccess } from '@/app/invite/components/invitation-workspace-access'
3+
export { InviteHeading } from '@/app/invite/components/invite-heading'
34
export { default as InviteLayout } from '@/app/invite/components/layout'
45
export { InviteStatusCard } from '@/app/invite/components/status-card'

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { ReactNode } from 'react'
2+
3+
interface InviteHeadingProps {
4+
title: ReactNode
5+
children: ReactNode
6+
}
7+
8+
/** Heading shared by invitation and email-preference states; subcopy stays with each caller. */
9+
export function InviteHeading({ title, children }: InviteHeadingProps) {
10+
return (
11+
<div className='space-y-1 text-center'>
12+
<h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
13+
{children}
14+
</div>
15+
)
16+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client'
2-
import { Chip, cn, Loader } from '@sim/emcn'
2+
import { Chip, Loader } from '@sim/emcn'
33
import { AuthSubmitButton } from '@/app/(auth)/components'
44
import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
5+
import { InviteHeading } from '@/app/invite/components/invite-heading'
56

67
/** A document navigation, so the marketing surface initializes its own theme store. */
78
function returnHome(): void {
@@ -37,10 +38,9 @@ export function InviteStatusCard({
3738
if (type === 'loading') {
3839
return (
3940
<>
40-
<div className='space-y-1 text-center'>
41-
<h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>Loading</h1>
41+
<InviteHeading title={'Loading'}>
4242
<p className='text-[var(--text-muted)]'>{description}</p>
43-
</div>
43+
</InviteHeading>
4444
<div className='mt-8 flex w-full items-center justify-center py-8'>
4545
<Loader className='size-8 text-[var(--text-muted)]' animate />
4646
</div>
@@ -50,10 +50,9 @@ export function InviteStatusCard({
5050

5151
return (
5252
<>
53-
<div className='space-y-1 text-center'>
54-
<h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
53+
<InviteHeading title={title}>
5554
<p className='text-[var(--text-muted)]'>{description}</p>
56-
</div>
55+
</InviteHeading>
5756

5857
<div className='mt-8 w-full max-w-[410px] space-y-3'>
5958
{details}
@@ -81,7 +80,8 @@ export function InviteStatusCard({
8180
fullWidth
8281
onClick={action.onClick}
8382
disabled={action.disabled || action.loading}
84-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')}
83+
variant='outline'
84+
className={AUTH_BUTTON_CLASS}
8585
>
8686
{action.loading ? (
8787
<span className='flex items-center gap-2'>

‎apps/sim/app/unsubscribe/unsubscribe.tsx‎

Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
'use client'
22

33
import { Suspense } from 'react'
4-
import { Chip, cn, Loader } from '@sim/emcn'
4+
import { Chip, Loader } from '@sim/emcn'
55
import { getErrorMessage } from '@sim/utils/errors'
66
import { useSearchParams } from 'next/navigation'
77
import type { UnsubscribeType } from '@/lib/api/contracts/user'
88
import { AuthSubmitButton } from '@/app/(auth)/components'
99
import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
10-
import { InviteLayout } from '@/app/invite/components'
10+
import { InviteHeading, InviteLayout } from '@/app/invite/components'
1111
import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe'
1212

1313
function UnsubscribeContent() {
@@ -39,10 +39,9 @@ function UnsubscribeContent() {
3939
if (loading) {
4040
return (
4141
<InviteLayout>
42-
<div className='space-y-1 text-center'>
43-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>Loading</h1>
42+
<InviteHeading title={'Loading'}>
4443
<p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
45-
</div>
44+
</InviteHeading>
4645
<div className={'mt-8 flex w-full items-center justify-center py-8'}>
4746
<Loader className='size-8 text-[var(--text-muted)]' animate />
4847
</div>
@@ -53,12 +52,9 @@ function UnsubscribeContent() {
5352
if (error) {
5453
return (
5554
<InviteLayout>
56-
<div className='space-y-1 text-center'>
57-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
58-
Invalid Unsubscribe Link
59-
</h1>
55+
<InviteHeading title={'Invalid Unsubscribe Link'}>
6056
<p className={'text-[var(--text-muted)] text-md'}>{error}</p>
61-
</div>
57+
</InviteHeading>
6258

6359
<div className={'mt-8 w-full max-w-[410px] space-y-3'}>
6460
<AuthSubmitButton type='button' onClick={() => window.history.back()} loadingLabel=''>
@@ -72,15 +68,12 @@ function UnsubscribeContent() {
7268
if (data?.isTransactional) {
7369
return (
7470
<InviteLayout>
75-
<div className='space-y-1 text-center'>
76-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
77-
Important Account Emails
78-
</h1>
71+
<InviteHeading title={'Important Account Emails'}>
7972
<p className={'text-[var(--text-muted)] text-md'}>
8073
Transactional emails like password resets, account confirmations, and security alerts
8174
cannot be unsubscribed from as they contain essential information for your account.
8275
</p>
83-
</div>
76+
</InviteHeading>
8477

8578
<div className={'mt-8 w-full max-w-[410px] space-y-3'}>
8679
<AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
@@ -94,15 +87,12 @@ function UnsubscribeContent() {
9487
if (unsubscribed) {
9588
return (
9689
<InviteLayout>
97-
<div className='space-y-1 text-center'>
98-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
99-
Successfully Unsubscribed
100-
</h1>
90+
<InviteHeading title={'Successfully Unsubscribed'}>
10191
<p className={'text-[var(--text-muted)] text-md'}>
10292
You have been unsubscribed from our emails. You will stop receiving emails within 48
10393
hours.
10494
</p>
105-
</div>
95+
</InviteHeading>
10696

10797
<div className={'mt-8 w-full max-w-[410px] space-y-3'}>
10898
<AuthSubmitButton type='button' onClick={() => window.close()} loadingLabel=''>
@@ -117,15 +107,12 @@ function UnsubscribeContent() {
117107

118108
return (
119109
<InviteLayout>
120-
<div className='space-y-1 text-center'>
121-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
122-
Email Preferences
123-
</h1>
110+
<InviteHeading title={'Email Preferences'}>
124111
<p className={'text-[var(--text-muted)] text-md'}>
125112
Choose which emails you'd like to stop receiving.
126113
</p>
127114
<p className={'text-[var(--text-muted)] text-sm'}>{data?.email}</p>
128-
</div>
115+
</InviteHeading>
129116

130117
<div className={'mt-8 w-full max-w-[410px] space-y-3'}>
131118
<AuthSubmitButton
@@ -152,7 +139,8 @@ function UnsubscribeContent() {
152139
isAlreadyUnsubscribedFromAll ||
153140
data?.currentPreferences.unsubscribeMarketing
154141
}
155-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
142+
variant='outline'
143+
className={AUTH_BUTTON_CLASS}
156144
>
157145
{data?.currentPreferences.unsubscribeMarketing
158146
? 'Unsubscribed from Marketing'
@@ -167,7 +155,8 @@ function UnsubscribeContent() {
167155
isAlreadyUnsubscribedFromAll ||
168156
data?.currentPreferences.unsubscribeUpdates
169157
}
170-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
158+
variant='outline'
159+
className={AUTH_BUTTON_CLASS}
171160
>
172161
{data?.currentPreferences.unsubscribeUpdates
173162
? 'Unsubscribed from Updates'
@@ -182,7 +171,8 @@ function UnsubscribeContent() {
182171
isAlreadyUnsubscribedFromAll ||
183172
data?.currentPreferences.unsubscribeNotifications
184173
}
185-
className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
174+
variant='outline'
175+
className={AUTH_BUTTON_CLASS}
186176
>
187177
{data?.currentPreferences.unsubscribeNotifications
188178
? 'Unsubscribed from Notifications'
@@ -205,10 +195,9 @@ export default function Unsubscribe() {
205195
<Suspense
206196
fallback={
207197
<InviteLayout>
208-
<div className='space-y-1 text-center'>
209-
<h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>Loading</h1>
198+
<InviteHeading title={'Loading'}>
210199
<p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
211-
</div>
200+
</InviteHeading>
212201
<div className={'mt-8 flex w-full items-center justify-center py-8'}>
213202
<Loader className='size-8 text-[var(--text-muted)]' animate />
214203
</div>

0 commit comments

Comments
 (0)