standardized modals

This commit is contained in:
Waleed Latif
2026-01-16 15:34:20 -08:00
parent 80d4853d70
commit c115ced01a
26 changed files with 135 additions and 92 deletions

View File

@@ -392,7 +392,7 @@ export function DocumentTagsModal({
return (
<Modal open={open} onOpenChange={handleClose}>
<ModalContent>
<ModalContent size='sm'>
<ModalHeader>
<div className='flex items-center justify-between'>
<span>Document Tags</span>
@@ -486,7 +486,7 @@ export function DocumentTagsModal({
/>
)}
{tagNameConflict && (
<span className='text-[11px] text-[var(--text-error)]'>
<span className='text-[12px] text-[var(--text-error)]'>
A tag with this name already exists
</span>
)}

View File

@@ -221,14 +221,14 @@ export function AddDocumentsModal({
return (
<Modal open={open} onOpenChange={handleClose}>
<ModalContent>
<ModalContent size='md'>
<ModalHeader>Add Documents</ModalHeader>
<ModalBody>
<div className='min-h-0 flex-1 overflow-y-auto'>
<div className='space-y-[12px]'>
{fileError && (
<p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
<p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
)}
<div className='flex flex-col gap-[8px]'>
@@ -336,7 +336,7 @@ export function AddDocumentsModal({
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{uploadError ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
{uploadError.message}
</p>
) : (

View File

@@ -306,7 +306,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
return (
<>
<Modal open={open} onOpenChange={handleClose}>
<ModalContent>
<ModalContent size='sm'>
<ModalHeader>
<div className='flex items-center justify-between'>
<span>Tags</span>
@@ -400,7 +400,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
}}
/>
{tagNameConflict && (
<span className='text-[11px] text-[var(--text-error)]'>
<span className='text-[12px] text-[var(--text-error)]'>
A tag with this name already exists
</span>
)}
@@ -417,7 +417,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
placeholder='Select type'
/>
{!hasAvailableSlots(createTagForm.fieldType) && (
<span className='text-[11px] text-[var(--text-error)]'>
<span className='text-[12px] text-[var(--text-error)]'>
No available slots for this type. Choose a different type.
</span>
)}

View File

@@ -77,7 +77,7 @@ export function RenameDocumentModal({
return (
<Modal open={open} onOpenChange={onOpenChange}>
<ModalContent>
<ModalContent size='sm'>
<ModalHeader>Rename Document</ModalHeader>
<form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
<ModalBody className='!pb-[16px]'>
@@ -108,7 +108,7 @@ export function RenameDocumentModal({
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{error ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
{error}
</p>
) : (

View File

@@ -332,7 +332,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
return (
<Modal open={open} onOpenChange={handleClose}>
<ModalContent>
<ModalContent size='lg'>
<ModalHeader>Create Knowledge Base</ModalHeader>
<form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -528,7 +528,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
)}
{fileError && (
<p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
<p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
)}
</div>
</div>
@@ -537,7 +537,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{submitStatus?.type === 'error' || uploadError ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
{uploadError?.message || submitStatus?.message}
</p>
) : (

View File

@@ -38,7 +38,7 @@ export function DeleteKnowledgeBaseModal({
}: DeleteKnowledgeBaseModalProps) {
return (
<Modal open={isOpen} onOpenChange={onClose}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete Knowledge Base</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -98,7 +98,7 @@ export function EditKnowledgeBaseModal({
return (
<Modal open={open} onOpenChange={onOpenChange}>
<ModalContent>
<ModalContent size='sm'>
<ModalHeader>Edit Knowledge Base</ModalHeader>
<form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -118,7 +118,7 @@ export function EditKnowledgeBaseModal({
data-form-type='other'
/>
{errors.name && (
<p className='text-[11px] text-[var(--text-error)]'>{errors.name.message}</p>
<p className='text-[12px] text-[var(--text-error)]'>{errors.name.message}</p>
)}
</div>
@@ -132,7 +132,7 @@ export function EditKnowledgeBaseModal({
className={cn(errors.description && 'border-[var(--text-error)]')}
/>
{errors.description && (
<p className='text-[11px] text-[var(--text-error)]'>
<p className='text-[12px] text-[var(--text-error)]'>
{errors.description.message}
</p>
)}
@@ -143,7 +143,7 @@ export function EditKnowledgeBaseModal({
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{error ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
{error}
</p>
) : (

View File

@@ -1261,7 +1261,7 @@ export function NotificationSettings({
</Modal>
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete Notification</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -1,6 +1,6 @@
'use client'
import { useMemo } from 'react'
import { useMemo, useState } from 'react'
import { createLogger } from '@sim/logger'
import { Check } from 'lucide-react'
import {
@@ -308,6 +308,7 @@ export function OAuthRequiredModal({
serviceId,
newScopes = [],
}: OAuthRequiredModalProps) {
const [error, setError] = useState<string | null>(null)
const { baseProvider } = parseProvider(provider)
const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
@@ -348,23 +349,24 @@ export function OAuthRequiredModal({
}, [requiredScopes, newScopesSet])
const handleConnectDirectly = async () => {
setError(null)
try {
const providerId = getProviderIdFromServiceId(serviceId)
onClose()
logger.info('Linking OAuth2:', {
providerId,
requiredScopes,
})
if (providerId === 'trello') {
onClose()
window.location.href = '/api/auth/trello/authorize'
return
}
if (providerId === 'shopify') {
// Pass the current URL so we can redirect back after OAuth
onClose()
const returnUrl = encodeURIComponent(window.location.href)
window.location.href = `/api/auth/shopify/authorize?returnUrl=${returnUrl}`
return
@@ -374,8 +376,10 @@ export function OAuthRequiredModal({
providerId,
callbackURL: window.location.href,
})
} catch (error) {
logger.error('Error initiating OAuth flow:', { error })
onClose()
} catch (err) {
logger.error('Error initiating OAuth flow:', { error: err })
setError('Failed to connect. Please try again.')
}
}
@@ -425,10 +429,12 @@ export function OAuthRequiredModal({
</ul>
</div>
)}
{error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
</div>
</ModalBody>
<ModalFooter>
<Button variant='active' onClick={onClose}>
<Button variant='default' onClick={onClose}>
Cancel
</Button>
<Button variant='tertiary' type='button' onClick={handleConnectDirectly}>

View File

@@ -1,10 +1,11 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { createLogger } from '@sim/logger'
import { AlertCircle, Wand2 } from 'lucide-react'
import { AlertCircle, ArrowUp } from 'lucide-react'
import { useParams } from 'next/navigation'
import {
Badge,
Button,
Input,
Modal,
ModalBody,
ModalContent,
@@ -878,35 +879,53 @@ try {
JSON Schema
</Label>
{schemaError && (
<div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
<div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
<AlertCircle className='h-3 w-3 flex-shrink-0' />
<span className='truncate'>{schemaError}</span>
</div>
)}
</div>
<div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
<div className='flex min-w-0 items-center justify-end gap-[4px]'>
{!isSchemaPromptActive ? (
<button
type='button'
<Button
variant='active'
className='-my-1 h-5 px-2 py-0 text-[11px]'
onClick={handleSchemaWandClick}
disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
aria-label='Generate schema with AI'
>
<Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
</button>
Generate
</Button>
) : (
<input
ref={schemaPromptInputRef}
type='text'
value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
onChange={(e) => handleSchemaPromptChange(e.target.value)}
onBlur={handleSchemaPromptBlur}
onKeyDown={handleSchemaPromptKeyDown}
disabled={schemaGeneration.isStreaming}
className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
placeholder='Describe schema...'
/>
<div className='-my-1 flex items-center gap-[4px]'>
<Input
ref={schemaPromptInputRef}
value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
onChange={(e) => handleSchemaPromptChange(e.target.value)}
onBlur={handleSchemaPromptBlur}
onKeyDown={handleSchemaPromptKeyDown}
disabled={schemaGeneration.isStreaming}
className={cn(
'h-5 max-w-[200px] flex-1 text-[11px]',
schemaGeneration.isStreaming && 'text-muted-foreground'
)}
placeholder='Generate...'
/>
<Button
variant='tertiary'
disabled={!schemaPromptInput.trim() || schemaGeneration.isStreaming}
onMouseDown={(e) => {
e.preventDefault()
e.stopPropagation()
}}
onClick={(e) => {
e.stopPropagation()
handleSchemaPromptSubmit()
}}
className='h-[20px] w-[20px] flex-shrink-0 p-0'
>
<ArrowUp className='h-[12px] w-[12px]' />
</Button>
</div>
)}
</div>
</div>
@@ -952,35 +971,53 @@ try {
Code
</Label>
{codeError && !codeGeneration.isStreaming && (
<div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
<div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
<AlertCircle className='h-3 w-3 flex-shrink-0' />
<span className='truncate'>{codeError}</span>
</div>
)}
</div>
<div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
<div className='flex min-w-0 items-center justify-end gap-[4px]'>
{!isCodePromptActive ? (
<button
type='button'
<Button
variant='active'
className='-my-1 h-5 px-2 py-0 text-[11px]'
onClick={handleCodeWandClick}
disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
aria-label='Generate code with AI'
>
<Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
</button>
Generate
</Button>
) : (
<input
ref={codePromptInputRef}
type='text'
value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
onChange={(e) => handleCodePromptChange(e.target.value)}
onBlur={handleCodePromptBlur}
onKeyDown={handleCodePromptKeyDown}
disabled={codeGeneration.isStreaming}
className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
placeholder='Describe code...'
/>
<div className='-my-1 flex items-center gap-[4px]'>
<Input
ref={codePromptInputRef}
value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
onChange={(e) => handleCodePromptChange(e.target.value)}
onBlur={handleCodePromptBlur}
onKeyDown={handleCodePromptKeyDown}
disabled={codeGeneration.isStreaming}
className={cn(
'h-5 max-w-[200px] flex-1 text-[11px]',
codeGeneration.isStreaming && 'text-muted-foreground'
)}
placeholder='Generate...'
/>
<Button
variant='tertiary'
disabled={!codePromptInput.trim() || codeGeneration.isStreaming}
onMouseDown={(e) => {
e.preventDefault()
e.stopPropagation()
}}
onClick={(e) => {
e.stopPropagation()
handleCodePromptSubmit()
}}
className='h-[20px] w-[20px] flex-shrink-0 p-0'
>
<ArrowUp className='h-[12px] w-[12px]' />
</Button>
</div>
)}
</div>
</div>

View File

@@ -420,7 +420,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
return (
<Modal open={open} onOpenChange={onOpenChange}>
<ModalContent>
<ModalContent size='md'>
<ModalHeader>Help &amp; Support</ModalHeader>
<form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>

View File

@@ -1069,7 +1069,7 @@ export function AccessControl() {
</Modal>
<Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Unsaved Changes</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -1185,7 +1185,7 @@ export function AccessControl() {
</div>
<Modal open={showCreateModal} onOpenChange={handleCloseCreateModal}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Create Permission Group</ModalHeader>
<ModalBody>
<div className='flex flex-col gap-[12px]'>
@@ -1237,7 +1237,7 @@ export function AccessControl() {
</Modal>
<Modal open={!!deletingGroup} onOpenChange={() => setDeletingGroup(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete Permission Group</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -392,7 +392,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
{/* Delete Confirmation Dialog */}
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete API key</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -112,7 +112,7 @@ export function CreateApiKeyModal({
<>
{/* Create API Key Dialog */}
<Modal open={open} onOpenChange={onOpenChange}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Create new API key</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -176,7 +176,7 @@ export function CreateApiKeyModal({
data-form-type='other'
/>
{createError && (
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
<p className='text-[12px] text-[var(--text-error)] leading-tight'>
{createError}
</p>
)}
@@ -215,7 +215,7 @@ export function CreateApiKeyModal({
}
}}
>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Your API key has been created</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>

View File

@@ -306,7 +306,7 @@ export function BYOK() {
</Modal>
<Modal open={!!deleteConfirmProvider} onOpenChange={() => setDeleteConfirmProvider(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete API Key</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>

View File

@@ -211,7 +211,7 @@ export function Copilot() {
{/* Create API Key Dialog */}
<Modal open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Create new API key</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -273,7 +273,7 @@ export function Copilot() {
}
}}
>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Your API key has been created</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -310,7 +310,7 @@ export function Copilot() {
{/* Delete Confirmation Dialog */}
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete API key</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -824,7 +824,7 @@ export function CredentialSets() {
{/* Create Polling Group Modal */}
<Modal open={showCreateModal} onOpenChange={handleCloseCreateModal}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Create Polling Group</ModalHeader>
<ModalBody>
<div className='flex flex-col gap-[12px]'>
@@ -897,7 +897,7 @@ export function CredentialSets() {
{/* Leave Confirmation Modal */}
<Modal open={!!leavingMembership} onOpenChange={() => setLeavingMembership(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Leave Polling Group</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>
@@ -925,7 +925,7 @@ export function CredentialSets() {
{/* Delete Confirmation Modal */}
<Modal open={!!deletingSet} onOpenChange={() => setDeletingSet(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete Polling Group</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -206,7 +206,7 @@ export function CustomTools() {
/>
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete Custom Tool</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -821,7 +821,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
</div>
<Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Unsaved Changes</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-tertiary)]'>

View File

@@ -390,7 +390,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
</div>
<Modal open={showDisconnectDialog} onOpenChange={setShowDisconnectDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Disconnect Service</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -1170,7 +1170,7 @@ export function MCP({ initialServerId }: MCPProps) {
</div>
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete MCP Server</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -33,7 +33,7 @@ export function RemoveMemberDialog({
}: RemoveMemberDialogProps) {
return (
<Modal open={open} onOpenChange={onOpenChange}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>{isSelfRemoval ? 'Leave Organization' : 'Remove Team Member'}</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -532,7 +532,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
</div>
<Modal open={!!toolToDelete} onOpenChange={(open) => !open && setToolToDelete(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Remove Workflow</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>
@@ -1109,7 +1109,7 @@ export function WorkflowMcpServers() {
</div>
<Modal open={!!serverToDelete} onOpenChange={(open) => !open && setServerToDelete(null)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Delete MCP Server</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -102,7 +102,7 @@ export function DeleteModal({
return (
<Modal open={isOpen} onOpenChange={onClose}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>{title}</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -607,7 +607,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
onOpenChange(newOpen)
}}
>
<ModalContent className='w-[500px]'>
<ModalContent size='md'>
<ModalHeader>Invite members to {workspaceName || 'Workspace'}</ModalHeader>
<form
@@ -740,7 +740,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
{/* Remove Member Confirmation Dialog */}
<Modal open={!!memberToRemove} onOpenChange={handleRemoveMemberCancel}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Remove Member</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>
@@ -773,7 +773,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
{/* Remove Invitation Confirmation Dialog */}
<Modal open={!!invitationToRemove} onOpenChange={handleRemoveInvitationCancel}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Cancel Invitation</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>

View File

@@ -605,7 +605,7 @@ export function WorkspaceHeader({
/>
{/* Leave Confirmation Modal */}
<Modal open={isLeaveModalOpen} onOpenChange={() => setIsLeaveModalOpen(false)}>
<ModalContent className='w-[400px]'>
<ModalContent size='sm'>
<ModalHeader>Leave Workspace</ModalHeader>
<ModalBody>
<p className='text-[12px] text-[var(--text-secondary)]'>