Skip to content

fix(modals): consistent text colors and workspace delete confirmation #4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 2 commits into from
Apr 7, 2026
Merged

fix(modals): consistent text colors and workspace delete confirmation #4017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd29a29
fix(modals): consistent text colors, copy, and workspace delete confi…
waleedlatif1 Apr 7, 2026
f6f601c
fix(modal): replace useEffect with render-time state reset
waleedlatif1 Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions apps/sim/app/workspace/[workspaceId]/files/files.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1232,10 +1232,8 @@ const DeleteConfirmModal = memo(function DeleteConfirmModal({
<ModalBody>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{fileName}</span>?{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
<span className='font-medium text-[var(--text-primary)]'>{fileName}</span>? You can
restore it from Recently Deleted in Settings.
</p>
</ModalBody>
<ModalFooter>
Expand Down
3 changes: 1 addition & 2 deletions ...spaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ export function DeleteChunkModal({
<ModalHeader>Delete Chunk</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete this chunk?{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
Are you sure you want to delete this chunk? This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion ...aceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ export function DocumentTagsModal({

return (
<Modal open={open} onOpenChange={handleClose}>
<ModalContent size='md'>
<ModalContent size='sm'>
<ModalHeader>
<div className='flex items-center justify-between'>
<span>Document Tags</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1187,7 +1187,7 @@ export function Document({
from future syncs. To temporarily hide it from search, disable it instead.
</span>
) : (
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
<>This action cannot be undone.</>
)}
</p>
</ModalBody>
Expand Down
16 changes: 9 additions & 7 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1182,9 +1182,7 @@ export function KnowledgeBase({
The knowledge base and all {pagination.total} document
{pagination.total === 1 ? '' : 's'} within it will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
You can restore it from Recently Deleted in Settings.
</p>
</ModalBody>
<ModalFooter>
Expand Down Expand Up @@ -1221,9 +1219,12 @@ export function KnowledgeBase({
it from future syncs. To temporarily hide it from search, disable it instead.
</span>
) : (
<span className='text-[var(--text-error)]'>
This will permanently delete the document.
</span>
<>
<span className='text-[var(--text-error)]'>
This will permanently delete the document.
</span>{' '}
This action cannot be undone.
</>
)}
</p>
)
Expand Down Expand Up @@ -1256,7 +1257,8 @@ export function KnowledgeBase({
<span className='text-[var(--text-error)]'>
This will permanently delete the selected document
{selectedDocuments.size === 1 ? '' : 's'}.
</span>
</span>{' '}
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 2 additions & 2 deletions ...app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
return (
<>
<Modal open={open} onOpenChange={handleClose}>
<ModalContent size='md'>
<ModalContent size='sm'>
<ModalHeader>
<div className='flex items-center justify-between'>
<span>Tags</span>
Expand Down Expand Up @@ -421,7 +421,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
This will remove this tag from {selectedTagUsage?.documentCount || 0} document
{selectedTagUsage?.documentCount !== 1 ? 's' : ''}.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>

{selectedTagUsage && selectedTagUsage.documentCount > 0 && (
Expand Down
44 changes: 11 additions & 33 deletions apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { useCallback, useRef, useState } from 'react'
import { useCallback, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { Badge, DocumentAttachment, Tooltip } from '@/components/emcn'
import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
Expand Down Expand Up @@ -101,23 +101,6 @@ export function BaseCard({
const [isTagsModalOpen, setIsTagsModalOpen] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)

/**
* Guards against context menu actions triggering card navigation.
* The card's onClick fires synchronously during the click event bubble phase,
* so the ref is checked before the setTimeout-0 callback resets it.
*/
const actionTakenRef = useRef(false)
const withActionGuard = useCallback((fn: () => void) => {
actionTakenRef.current = true
try {
fn()
} finally {
setTimeout(() => {
actionTakenRef.current = false
}, 0)
}
}, [])

const searchParams = new URLSearchParams({
kbName: title,
})
Expand All @@ -127,7 +110,7 @@ export function BaseCard({

const handleClick = useCallback(
(e: React.MouseEvent) => {
if (isContextMenuOpen || actionTakenRef.current) {
if (isContextMenuOpen) {
e.preventDefault()
return
}
Expand All @@ -147,25 +130,20 @@ export function BaseCard({
)

const handleOpenInNewTab = useCallback(() => {
withActionGuard(() => window.open(href, '_blank'))
}, [href, withActionGuard])
window.open(href, '_blank')
}, [href])

const handleViewTags = useCallback(() => {
withActionGuard(() => setIsTagsModalOpen(true))
}, [withActionGuard])
setIsTagsModalOpen(true)
}, [])

const handleEdit = useCallback(() => {
withActionGuard(() => setIsEditModalOpen(true))
}, [withActionGuard])
setIsEditModalOpen(true)
}, [])

const handleDelete = useCallback(() => {
withActionGuard(() => setIsDeleteModalOpen(true))
}, [withActionGuard])

const handleCopyId = useCallback(() => {
if (!id) return
withActionGuard(() => navigator.clipboard.writeText(id))
}, [id, withActionGuard])
setIsDeleteModalOpen(true)
}, [])

const handleConfirmDelete = useCallback(async () => {
if (!id || !onDelete) return
Expand Down Expand Up @@ -262,7 +240,7 @@ export function BaseCard({
onClose={closeContextMenu}
onOpenInNewTab={handleOpenInNewTab}
onViewTags={handleViewTags}
onCopyId={id ? handleCopyId : undefined}
onCopyId={id ? () => navigator.clipboard.writeText(id) : undefined}
onEdit={handleEdit}
onDelete={handleDelete}
showOpenInNewTab={true}
Expand Down
4 changes: 1 addition & 3 deletions ...spaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ export const DeleteKnowledgeBaseModal = memo(function DeleteKnowledgeBaseModal({
</span>
</>
)}{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
You can restore it from Recently Deleted in Settings.
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 2 additions & 2 deletions ...ace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1267,11 +1267,11 @@ export const NotificationSettings = memo(function NotificationSettings({
<ModalContent size='sm'>
<ModalHeader>Delete Notification</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)] text-caption'>
<p className='text-[var(--text-secondary)]'>
<span className='text-[var(--text-error)]'>
This will permanently remove the notification and stop all deliveries.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,12 +447,12 @@ export function ScheduledTasks() {
<ModalContent size='sm'>
<ModalHeader>Delete Scheduled Task</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)] text-caption'>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>
{activeTask?.jobTitle || 'this task'}
</span>
? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ export function ApiKeys() {
<span className='text-[var(--text-error)]'>
will immediately revoke access for any integrations using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
3 changes: 2 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,8 @@ export function BYOK() {
API key?{' '}
<span className='text-[var(--text-error)]'>
This workspace will revert to using platform hosted keys.
</span>
</span>{' '}
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ export function Copilot() {
<span className='text-[var(--text-error)]'>
will immediately revoke access for any integrations using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,7 +880,7 @@ export function CredentialSets() {
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{deletingSet?.name}</span>?{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export function CustomTools() {
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{toolToDelete?.name}</span>?{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,8 @@ export function InboxEnableToggle() {
<span className='font-medium text-[var(--text-primary)]'>{config.address}</span>
</>
)}
? Any emails sent to this address after disabling will not be delivered.{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? Any emails sent to this address after disabling will not be delivered. This action
cannot be undone.
</p>
<p className='mt-2 text-[var(--text-secondary)]'>
Your existing conversations and task history will be preserved.
Expand Down
2 changes: 1 addition & 1 deletion ...sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1136,7 +1136,7 @@ export function IntegrationsManager() {
<span className='font-medium text-[var(--text-primary)]'>
{credentialToDelete?.displayName}
</span>
? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? This action cannot be undone.
</p>
{deleteError && (
<div className='mt-3 rounded-lg border border-red-500/50 bg-red-50 p-3 dark:bg-red-950/30'>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -710,7 +710,7 @@ export function MCP({ initialServerId }: MCPProps) {
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{serverToDelete?.name}</span>
? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export function Skills() {
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{skillToDelete?.name}</span>?{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion ...tings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export function RemoveMemberDialog({
the team?
</>
)}{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>

{!isSelfRemoval && (
Expand Down
2 changes: 1 addition & 1 deletion ...workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1111,7 +1111,7 @@ export function WorkflowMcpServers() {
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{serverToDelete?.name}</span>
? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
<span className='text-[var(--text-error)]'>
This will permanently remove all data in {isSingleRow ? 'this row' : 'these rows'}.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
6 changes: 2 additions & 4 deletions apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1852,9 +1852,7 @@ export function Table({
<span className='text-[var(--text-error)]'>
All {tableData?.rowCount ?? 0} rows will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
You can restore it from Recently Deleted in Settings.
</p>
</ModalBody>
<ModalFooter>
Expand Down Expand Up @@ -1892,7 +1890,7 @@ export function Table({
<span className='text-[var(--text-error)]'>
This will remove all data in this column.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 1 addition & 3 deletions apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -539,9 +539,7 @@ export function Tables() {
<span className='text-[var(--text-error)]'>
All {activeTable?.rowCount} rows will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
You can restore it from Recently Deleted in Settings.
</p>
</ModalBody>
<ModalFooter>
Expand Down
3 changes: 2 additions & 1 deletion ...owId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,8 @@ export function ChatDeploy({
<span className='text-[var(--text-error)]'>
This will remove the chat at "{getEmailDomain()}/chat/{existingChat?.identifier}"
and make it unavailable to all users.
</span>
</span>{' '}
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion ...mponents/panel/components/deploy/components/deploy-modal/components/template/template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ export function TemplateDeploy({
<span className='font-medium text-[var(--text-primary)]'>
{existingTemplate?.name || formData.name || 'this template'}
</span>
? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
? This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
3 changes: 2 additions & 1 deletion .../[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -883,7 +883,8 @@ export function DeployModal({
?{' '}
<span className='text-[var(--text-error)]'>
This will permanently remove the agent configuration.
</span>
</span>{' '}
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
2 changes: 1 addition & 1 deletion ...onents/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1181,7 +1181,7 @@ try {
This will permanently delete the tool and remove it from any workflows that are
using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
This action cannot be undone.
</p>
</ModalBody>
<ModalFooter>
Expand Down
Loading
Loading