diff --git a/canvas/src/app/orgs/page.tsx b/canvas/src/app/orgs/page.tsx index 3672bfa7..81af4fb8 100644 --- a/canvas/src/app/orgs/page.tsx +++ b/canvas/src/app/orgs/page.tsx @@ -327,7 +327,7 @@ function OrgCTA({ org }: { org: Org }) { return ( Open @@ -337,7 +337,7 @@ function OrgCTA({ org }: { org: Org }) { return ( Complete payment diff --git a/canvas/src/components/AuditTrailPanel.tsx b/canvas/src/components/AuditTrailPanel.tsx index 1d20b1bc..fe564e2c 100644 --- a/canvas/src/components/AuditTrailPanel.tsx +++ b/canvas/src/components/AuditTrailPanel.tsx @@ -164,7 +164,10 @@ export function AuditTrailPanel({ workspaceId }: Props) { {/* Error banner */} {error && ( -
+
{error}
)} diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx index 59cfddf2..c458fc53 100644 --- a/canvas/src/components/ConfirmDialog.tsx +++ b/canvas/src/components/ConfirmDialog.tsx @@ -96,7 +96,7 @@ export function ConfirmDialog({ // readable in both light and dark themes. const confirmColors = confirmVariant === "danger" - ? "bg-red-600 hover:bg-red-700 text-white" + ? "bg-red-700 hover:bg-red-600 text-white" : confirmVariant === "warning" ? "bg-amber-800 hover:bg-amber-700 text-white" : "bg-accent hover:bg-accent-strong text-white"; diff --git a/canvas/src/components/DeleteCascadeConfirmDialog.tsx b/canvas/src/components/DeleteCascadeConfirmDialog.tsx index 3dfdc4b1..f7ba9eb8 100644 --- a/canvas/src/components/DeleteCascadeConfirmDialog.tsx +++ b/canvas/src/components/DeleteCascadeConfirmDialog.tsx @@ -164,12 +164,12 @@ export function DeleteCascadeConfirmDialog({ type="button" onClick={onConfirm} disabled={!checked} - // Hover goes DARKER, not lighter — bg-red-500 on white text - // drops contrast below AA vs bg-red-700. Same trap fixed in - // ConfirmDialog and ApprovalBanner. focus-visible ring matches. + // Hover goes DARKER, not lighter — bg-red-600 on white text + // drops contrast below AA. Same trap fixed in ConfirmDialog. + // focus-visible ring matches the canvas chrome. className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken ${checked - ? "bg-red-600 hover:bg-red-700 text-white cursor-pointer" + ? "bg-red-700 hover:bg-red-600 text-white cursor-pointer" : "bg-red-900/30 text-bad/40 cursor-not-allowed" }`} > diff --git a/canvas/src/components/ErrorBoundary.tsx b/canvas/src/components/ErrorBoundary.tsx index bdbf6a98..bd204886 100644 --- a/canvas/src/components/ErrorBoundary.tsx +++ b/canvas/src/components/ErrorBoundary.tsx @@ -51,7 +51,7 @@ export class ErrorBoundary extends React.Component< render() { if (this.state.hasError) { return ( -
+
Remove Workspace diff --git a/canvas/src/components/canvas/DropTargetBadge.tsx b/canvas/src/components/canvas/DropTargetBadge.tsx index a6af4dd7..13423f00 100644 --- a/canvas/src/components/canvas/DropTargetBadge.tsx +++ b/canvas/src/components/canvas/DropTargetBadge.tsx @@ -75,7 +75,7 @@ export function DropTargetBadge() { )}
Drop into: {targetName} diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx index 7b0ee0d2..c6669058 100644 --- a/canvas/src/components/tabs/ChatTab.tsx +++ b/canvas/src/components/tabs/ChatTab.tsx @@ -1011,11 +1011,10 @@ function MyChatPanel({ workspaceId, data }: Props) {
Confirm Delete diff --git a/canvas/src/components/tabs/ExternalConnectionSection.tsx b/canvas/src/components/tabs/ExternalConnectionSection.tsx index 5e847f45..06d2835b 100644 --- a/canvas/src/components/tabs/ExternalConnectionSection.tsx +++ b/canvas/src/components/tabs/ExternalConnectionSection.tsx @@ -131,7 +131,7 @@ export function ExternalConnectionSection({ workspaceId }: Props) { diff --git a/canvas/src/styles/settings-panel.css b/canvas/src/styles/settings-panel.css index 2e4e557c..5d4be451 100644 --- a/canvas/src/styles/settings-panel.css +++ b/canvas/src/styles/settings-panel.css @@ -282,13 +282,17 @@ } .secret-row__save-btn { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; + transition: background-color 0.15s; +} +.secret-row__save-btn:hover { + background: #1e40af; } .secret-row__save-btn:focus-visible { @@ -370,13 +374,17 @@ } .add-key-form__save-btn { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; + transition: background-color 0.15s; +} +.add-key-form__save-btn:hover { + background: #1e40af; } .add-key-form__save-btn:focus-visible { @@ -510,7 +518,7 @@ .empty-state__body { font-size: 14px; color: #a1a1aa; margin: 0 0 24px; line-height: 1.5; } .empty-state__cta { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 10px 20px; @@ -518,6 +526,10 @@ font-size: 14px; font-weight: 500; cursor: pointer; + transition: background-color 0.15s; +} +.empty-state__cta:hover { + background: #1e40af; } .empty-state__cta:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } @@ -561,12 +573,16 @@ .secrets-tab__error p { color: var(--status-invalid); margin: 0 0 12px; } .secrets-tab__refresh-btn { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; + transition: background-color 0.15s; +} +.secrets-tab__refresh-btn:hover { + background: #1e40af; } .secrets-tab__no-results { @@ -690,12 +706,16 @@ } .guard-dialog__discard-btn { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; + transition: background-color 0.15s; +} +.guard-dialog__discard-btn:hover { + background: #1e40af; } .guard-dialog__discard-btn:focus-visible { @@ -747,12 +767,20 @@ .top-bar__name { font-size: 14px; font-weight: 500; color: #d4d4d8; } .top-bar__btn { - background: #2563eb; + background: #1d4ed8; color: #ffffff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; + transition: background-color 0.15s; +} +.top-bar__btn:hover { + background: #1e40af; +} +.top-bar__btn:focus-visible { + outline: none; + box-shadow: 0 0 0 2px #18181b, 0 0 0 4px #3b82f6; }