chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: replace bg-accent with neutral backgrounds on code/kbd elements

Browse Source 
bg-accent maps to bright cyan (#22d3ee) in Tailwind v4 — wrong for
code elements and keyboard shortcut badges. This was a recurring issue
across the app where every backticked term glowed cyan.

- Code blocks: bg-accent → bg-code (#14161e)
- Inline code: bg-accent → bg-white/[0.08] (subtle neutral tint)
- Kbd badges: bg-accent → bg-white/[0.08]
- AI chat markdown: same fixes in MarkdownContent.tsx

Cyan remains reserved for interactive elements (buttons, active nav,
links) per the design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-24 05:45:58 +00:00
parent 8e7f13d2f8
commit c5bf0ad00e
7 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/procedural-editor/StepEditor.tsx
View File

@@ -112,7 +112,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
<button <button
key={v.variable_name} key={v.variable_name}
onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })} onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground" className="rounded bg-white/[0.06] px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-white/[0.10] hover:text-muted-foreground"
> >
{v.variable_name} {v.variable_name}
</button> </button>

2
frontend/src/components/tree-editor/NodeEditorModal.tsx
View File

@@ -86,7 +86,7 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
<Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent} allowFullScreen={true}> <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent} allowFullScreen={true}>
{/* Node ID display */} {/* Node ID display */}
<div className="mb-4 text-xs text-muted-foreground"> <div className="mb-4 text-xs text-muted-foreground">
Node ID: <code className="rounded bg-accent px-1 py-0.5">{node.id}</code> Node ID: <code className="rounded bg-white/[0.08] px-1 py-0.5">{node.id}</code>
</div> </div>
{/* Validation errors */} {/* Validation errors */}

2
frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
View File

@@ -103,7 +103,7 @@ function Row({ label, code }: { label: string; code: string }) {
return ( return (
<div className="flex items-center justify-between py-0.5"> <div className="flex items-center justify-between py-0.5">
<span className="text-muted-foreground">{label}</span> <span className="text-muted-foreground">{label}</span>
<code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code> <code className="rounded bg-white/[0.08] px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
</div> </div>
) )
} }

6
frontend/src/components/ui/MarkdownContent.tsx
View File

@@ -43,7 +43,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
return ( return (
<code <code
className={cn( className={cn(
'block rounded bg-accent p-3 font-mono text-sm overflow-x-auto', 'block rounded bg-code p-3 font-mono text-sm text-foreground overflow-x-auto',
className className
)} )}
{...props} {...props}
@@ -54,7 +54,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
} }
return ( return (
<code <code
className="rounded bg-accent px-1.5 py-0.5 font-mono text-sm" className="rounded bg-white/[0.08] px-1.5 py-0.5 font-mono text-sm text-secondary"
{...props} {...props}
> >
{children} {children}
@@ -63,7 +63,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
}, },
// Style code blocks (pre) // Style code blocks (pre)
pre: ({ children }) => ( pre: ({ children }) => (
<pre className="mb-3 overflow-x-auto rounded bg-accent p-0 last:mb-0"> <pre className="mb-3 overflow-x-auto rounded bg-code p-0 last:mb-0">
{children} {children}
</pre> </pre>
), ),

2
frontend/src/pages/MaintenanceFlowDetailPage.tsx
View File

@@ -193,7 +193,7 @@ export default function MaintenanceFlowDetailPage() {
: <AlertCircle className="h-3 w-3" />} : <AlertCircle className="h-3 w-3" />}
{schedule.is_active ? 'Active' : 'Paused'} {schedule.is_active ? 'Active' : 'Paused'}
</span> </span>
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground"> <code className="rounded bg-white/[0.08] px-1.5 py-0.5 text-[0.8125rem] text-foreground">
{schedule.cron_expression} {schedule.cron_expression}
</code> </code>
<span className="text-muted-foreground">({schedule.timezone})</span> <span className="text-muted-foreground">({schedule.timezone})</span>

14
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -954,7 +954,7 @@ export function TreeNavigationPage() {
<div key={index}> <div key={index}>
<p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p> <p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
<div className="group relative"> <div className="group relative">
<code className="block rounded bg-accent p-2 pr-8 text-sm font-mono"> <code className="block rounded bg-code p-2 pr-8 text-sm font-mono">
{cmd.command} {cmd.command}
</code> </code>
<button <button
@@ -1076,7 +1076,7 @@ export function TreeNavigationPage() {
<div className="space-y-1"> <div className="space-y-1">
{currentNode.commands.map((cmd, index) => ( {currentNode.commands.map((cmd, index) => (
<div key={index} className="group relative"> <div key={index} className="group relative">
<code className="block rounded bg-accent p-2 pr-8 text-sm font-mono"> <code className="block rounded bg-code p-2 pr-8 text-sm font-mono">
{cmd} {cmd}
</code> </code>
<button <button
@@ -1302,23 +1302,23 @@ export function TreeNavigationPage() {
<div className="space-y-3 text-sm"> <div className="space-y-3 text-sm">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Select option</span> <span className="text-muted-foreground">Select option</span>
<span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">1-9</span> <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">1-9</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Go back</span> <span className="text-muted-foreground">Go back</span>
<span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Esc</span> <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Esc</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Continue / Complete</span> <span className="text-muted-foreground">Continue / Complete</span>
<span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Enter</span> <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Enter</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Focus notes</span> <span className="text-muted-foreground">Focus notes</span>
<span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Tab</span> <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Tab</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Show shortcuts</span> <span className="text-muted-foreground">Show shortcuts</span>
<span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">?</span> <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">?</span>
</div> </div>
</div> </div>
</Modal> </Modal>

2
frontend/src/pages/admin/InviteCodesPage.tsx
View File

@@ -119,7 +119,7 @@ export function InviteCodesPage() {
key: 'code', key: 'code',
header: 'Code', header: 'Code',
render: (c) => ( render: (c) => (
<code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code> <code className="rounded bg-white/[0.08] px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
), ),
}, },
{ {