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

refactor: replace cyan accent with ember orange across entire frontend

Browse Source 
Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide.
Cyan caused contrast issues and felt generic — orange brings warmth and
urgency fitting for a troubleshooting tool.

Changes:
- CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring
- Warning color shifted from amber (#fbbf24) to yellow (#eab308) for
  semantic separation from orange accent
- Brand SVGs: logo gradient updated to orange
- 50+ component files: all hardcoded cyan hex values, Tailwind cyan-*
  classes, and rgba(34,211,238,...) glow values replaced
- landing.css: all 45+ cyan references + 5 old border color fixes
- DESIGN-SYSTEM.md bumped to v5 with decisions log
- CLAUDE.md: all color references synced to charcoal palette + orange accent
- PWA theme-color meta tag updated to match sidebar (#10121a)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-24 07:37:44 +00:00
parent 13860ced33
commit ff985fb755
52 changed files with 291 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/script-builder/SaveToLibraryDialog.tsx
View File

@@ -93,7 +93,7 @@ export function SaveToLibraryDialog({
className={cn(
"w-full rounded-lg px-3 py-2 text-sm",
"border border-border bg-card text-foreground placeholder:text-muted-foreground",
"focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
"focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors"
)}
placeholder="Script name"
/>
@@ -111,7 +111,7 @@ export function SaveToLibraryDialog({
className={cn(
"w-full rounded-lg px-3 py-2 text-sm resize-none",
"border border-border bg-card text-foreground placeholder:text-muted-foreground",
"focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
"focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors"
)}
placeholder="What does this script do?"
/>
@@ -128,7 +128,7 @@ export function SaveToLibraryDialog({
className={cn(
"w-full rounded-lg px-3 py-2 text-sm",
"border border-border bg-card text-foreground",
"focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
"focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors"
)}
>
<option value="">No category</option>
@@ -144,7 +144,7 @@ export function SaveToLibraryDialog({
type="checkbox"
checked={shareWithTeam}
onChange={(e) => setShareWithTeam(e.target.checked)}
className="w-4 h-4 rounded border-border bg-card text-cyan-500 focus:ring-cyan-500/20"
className="w-4 h-4 rounded border-border bg-card text-orange-500 focus:ring-orange-500/20"
/>
<span className="text-sm text-foreground">Share with team</span>
</label>

12
frontend/src/components/script-builder/ScriptBuilderChat.tsx
View File

@@ -56,8 +56,8 @@ export function ScriptBuilderChat({
)}
>
{msg.role === 'assistant' && (
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(6,182,212,0.1)] flex items-center justify-center mt-0.5">
<Bot size={16} className="text-cyan-400" />
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(249,115,22,0.1)] flex items-center justify-center mt-0.5">
<Bot size={16} className="text-orange-400" />
</div>
)}
@@ -65,7 +65,7 @@ export function ScriptBuilderChat({
className={cn(
"max-w-[85%] rounded-xl px-4 py-3 text-sm",
msg.role === 'user'
? "bg-[rgba(6,182,212,0.08)] border border-[rgba(6,182,212,0.15)] text-foreground"
? "bg-[rgba(249,115,22,0.08)] border border-[rgba(249,115,22,0.15)] text-foreground"
: "card-flat"
)}
>
@@ -98,11 +98,11 @@ export function ScriptBuilderChat({
{isLoading && (
<div className="flex gap-3 justify-start">
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(6,182,212,0.1)] flex items-center justify-center">
<Bot size={16} className="text-cyan-400" />
<div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(249,115,22,0.1)] flex items-center justify-center">
<Bot size={16} className="text-orange-400" />
</div>
<div className="card-flat rounded-xl px-4 py-3 text-sm flex items-center gap-2">
<Loader2 size={14} className="animate-spin text-cyan-400" />
<Loader2 size={14} className="animate-spin text-orange-400" />
<span className="text-muted-foreground">Generating script...</span>
</div>
</div>

2
frontend/src/components/script-builder/ScriptCodeBlock.tsx
View File

@@ -55,7 +55,7 @@ export function ScriptCodeBlock({
<div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
<span className="font-mono text-xs text-cyan-400 truncate">
<span className="font-mono text-xs text-orange-400 truncate">
{filename || 'script'}
</span>
{lineCount != null && (

2
frontend/src/components/script-builder/ScriptPreviewModal.tsx
View File

@@ -62,7 +62,7 @@ export function ScriptPreviewModal({
{/* Header */}
<div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
<div className="flex items-center gap-3 min-w-0">
<span className="font-mono text-sm text-cyan-400 truncate">
<span className="font-mono text-sm text-orange-400 truncate">
{filename || 'script'}
</span>
<span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">