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

2
frontend/src/components/account/NotificationSettings.tsx
View File

@@ -294,7 +294,7 @@ export function NotificationSettings() {
type="checkbox"
checked={config.events_enabled[eventKey] ?? false}
onChange={() => handleToggleEvent(config, eventKey)}
className="h-3.5 w-3.5 rounded border-border bg-card text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer accent-[#06b6d4]"
className="h-3.5 w-3.5 rounded border-border bg-card text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer accent-[#ea580c]"
/>
<span className="text-sm text-foreground">{eventLabel}</span>
</label>

2
frontend/src/components/analytics/FlowAnalyticsPanel.tsx
View File

@@ -16,7 +16,7 @@ import type { FlowAnalyticsResponse, AnalyticsPeriod } from '@/types'
const CHART_COLORS = {
resolved: '#34d399',
escalated: '#f87171',
workaround: '#fbbf24',
workaround: '#eab308',
unresolved: '#94a3b8',
}

8
frontend/src/components/analytics/PsaMetricsPanel.tsx
View File

@@ -95,21 +95,21 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
<Bar
yAxisId="entries"
dataKey="entries"
fill="rgba(34,211,238,0.3)"
fill="rgba(249,115,22,0.3)"
radius={[4, 4, 0, 0]}
/>
<Area
yAxisId="hours"
type="monotone"
dataKey="hours"
stroke="#22d3ee"
stroke="#f97316"
fill="url(#psaHoursGradient)"
strokeWidth={2}
/>
<defs>
<linearGradient id="psaHoursGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
<stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
<stop offset="5%" stopColor="#f97316" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f97316" stopOpacity={0} />
</linearGradient>
</defs>
</ComposedChart>

2
frontend/src/components/common/BrandLogo.tsx
View File

@@ -19,7 +19,7 @@ export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
width: dim,
height: dim,
borderRadius: size === 'sm' ? 8 : 14,
background: 'linear-gradient(135deg, #06b6d4, #22d3ee)',
background: 'linear-gradient(135deg, #ea580c, #f97316)',
}}
>
<svg

110
frontend/src/components/common/EmptyStateIllustrations.tsx
View File

@@ -1,6 +1,6 @@
/**
* SVG illustrations for EmptyState components.
* Each uses the brand cyan palette (#06b6d4 / #22d3ee) at low opacity.
* Each uses the brand orange palette (#ea580c / #f97316) at low opacity.
* ViewBox: 80x60, simple line art style.
*/
@@ -8,19 +8,19 @@ export function FlowIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Root node */}
<circle cx="40" cy="10" r="6" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<circle cx="40" cy="10" r="6" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
{/* Branches */}
<line x1="40" y1="16" x2="20" y2="34" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="40" y1="16" x2="60" y2="34" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="40" y1="16" x2="20" y2="34" stroke="#ea580c" strokeWidth="1.5" />
<line x1="40" y1="16" x2="60" y2="34" stroke="#ea580c" strokeWidth="1.5" />
{/* Left child */}
<circle cx="20" cy="38" r="5" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<circle cx="20" cy="38" r="5" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
{/* Right child */}
<circle cx="60" cy="38" r="5" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<circle cx="60" cy="38" r="5" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
{/* Leaf branches */}
<line x1="20" y1="43" x2="12" y2="52" stroke="#22d3ee" strokeWidth="1" />
<line x1="20" y1="43" x2="28" y2="52" stroke="#22d3ee" strokeWidth="1" />
<circle cx="12" cy="54" r="3" fill="rgba(34,211,238,0.15)" stroke="#22d3ee" strokeWidth="1" />
<circle cx="28" cy="54" r="3" fill="rgba(34,211,238,0.15)" stroke="#22d3ee" strokeWidth="1" />
<line x1="20" y1="43" x2="12" y2="52" stroke="#f97316" strokeWidth="1" />
<line x1="20" y1="43" x2="28" y2="52" stroke="#f97316" strokeWidth="1" />
<circle cx="12" cy="54" r="3" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1" />
<circle cx="28" cy="54" r="3" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1" />
</svg>
)
}
@@ -29,12 +29,12 @@ export function AnalyticsIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Bars */}
<rect x="12" y="38" width="10" height="16" rx="2" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<rect x="26" y="28" width="10" height="26" rx="2" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<rect x="40" y="20" width="10" height="34" rx="2" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<rect x="54" y="10" width="10" height="44" rx="2" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<rect x="12" y="38" width="10" height="16" rx="2" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<rect x="26" y="28" width="10" height="26" rx="2" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
<rect x="40" y="20" width="10" height="34" rx="2" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<rect x="54" y="10" width="10" height="44" rx="2" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
{/* Baseline */}
<line x1="8" y1="56" x2="72" y2="56" stroke="#06b6d4" strokeWidth="1" opacity="0.5" />
<line x1="8" y1="56" x2="72" y2="56" stroke="#ea580c" strokeWidth="1" opacity="0.5" />
</svg>
)
}
@@ -43,17 +43,17 @@ export function SessionIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Card 1 */}
<rect x="12" y="8" width="56" height="12" rx="3" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<circle cx="22" cy="14" r="2" fill="#06b6d4" />
<line x1="28" y1="14" x2="56" y2="14" stroke="#06b6d4" strokeWidth="1" opacity="0.5" />
<rect x="12" y="8" width="56" height="12" rx="3" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<circle cx="22" cy="14" r="2" fill="#ea580c" />
<line x1="28" y1="14" x2="56" y2="14" stroke="#ea580c" strokeWidth="1" opacity="0.5" />
{/* Card 2 */}
<rect x="12" y="24" width="56" height="12" rx="3" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<circle cx="22" cy="30" r="2" fill="#22d3ee" />
<line x1="28" y1="30" x2="52" y2="30" stroke="#22d3ee" strokeWidth="1" opacity="0.5" />
<rect x="12" y="24" width="56" height="12" rx="3" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
<circle cx="22" cy="30" r="2" fill="#f97316" />
<line x1="28" y1="30" x2="52" y2="30" stroke="#f97316" strokeWidth="1" opacity="0.5" />
{/* Card 3 */}
<rect x="12" y="40" width="56" height="12" rx="3" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<circle cx="22" cy="46" r="2" fill="#06b6d4" />
<line x1="28" y1="46" x2="48" y2="46" stroke="#06b6d4" strokeWidth="1" opacity="0.5" />
<rect x="12" y="40" width="56" height="12" rx="3" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<circle cx="22" cy="46" r="2" fill="#ea580c" />
<line x1="28" y1="46" x2="48" y2="46" stroke="#ea580c" strokeWidth="1" opacity="0.5" />
</svg>
)
}
@@ -62,19 +62,19 @@ export function IntegrationIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Left box */}
<rect x="6" y="18" width="22" height="24" rx="4" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="12" y1="26" x2="22" y2="26" stroke="#06b6d4" strokeWidth="1" opacity="0.6" />
<line x1="12" y1="30" x2="20" y2="30" stroke="#06b6d4" strokeWidth="1" opacity="0.4" />
<rect x="6" y="18" width="22" height="24" rx="4" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<line x1="12" y1="26" x2="22" y2="26" stroke="#ea580c" strokeWidth="1" opacity="0.6" />
<line x1="12" y1="30" x2="20" y2="30" stroke="#ea580c" strokeWidth="1" opacity="0.4" />
{/* Right box */}
<rect x="52" y="18" width="22" height="24" rx="4" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<line x1="58" y1="26" x2="68" y2="26" stroke="#22d3ee" strokeWidth="1" opacity="0.6" />
<line x1="58" y1="30" x2="66" y2="30" stroke="#22d3ee" strokeWidth="1" opacity="0.4" />
<rect x="52" y="18" width="22" height="24" rx="4" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
<line x1="58" y1="26" x2="68" y2="26" stroke="#f97316" strokeWidth="1" opacity="0.6" />
<line x1="58" y1="30" x2="66" y2="30" stroke="#f97316" strokeWidth="1" opacity="0.4" />
{/* Dashed arrows */}
<line x1="30" y1="26" x2="50" y2="26" stroke="#06b6d4" strokeWidth="1.5" strokeDasharray="3 2" />
<line x1="50" y1="34" x2="30" y2="34" stroke="#22d3ee" strokeWidth="1.5" strokeDasharray="3 2" />
<line x1="30" y1="26" x2="50" y2="26" stroke="#ea580c" strokeWidth="1.5" strokeDasharray="3 2" />
<line x1="50" y1="34" x2="30" y2="34" stroke="#f97316" strokeWidth="1.5" strokeDasharray="3 2" />
{/* Arrow tips */}
<path d="M48 23 L52 26 L48 29" stroke="#06b6d4" strokeWidth="1.5" fill="none" />
<path d="M32 31 L28 34 L32 37" stroke="#22d3ee" strokeWidth="1.5" fill="none" />
<path d="M48 23 L52 26 L48 29" stroke="#ea580c" strokeWidth="1.5" fill="none" />
<path d="M32 31 L28 34 L32 37" stroke="#f97316" strokeWidth="1.5" fill="none" />
</svg>
)
}
@@ -83,14 +83,14 @@ export function StepLibraryIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* List items */}
<circle cx="18" cy="14" r="3" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="26" y1="14" x2="62" y2="14" stroke="#06b6d4" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="27" r="3" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<line x1="26" y1="27" x2="58" y2="27" stroke="#22d3ee" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="40" r="3" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="26" y1="40" x2="54" y2="40" stroke="#06b6d4" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="53" r="3" fill="rgba(34,211,238,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<line x1="26" y1="53" x2="50" y2="53" stroke="#22d3ee" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="14" r="3" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<line x1="26" y1="14" x2="62" y2="14" stroke="#ea580c" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="27" r="3" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
<line x1="26" y1="27" x2="58" y2="27" stroke="#f97316" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="40" r="3" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<line x1="26" y1="40" x2="54" y2="40" stroke="#ea580c" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="53" r="3" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
<line x1="26" y1="53" x2="50" y2="53" stroke="#f97316" strokeWidth="1.5" opacity="0.5" />
</svg>
)
}
@@ -99,16 +99,16 @@ export function ScriptIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Terminal window */}
<rect x="8" y="4" width="64" height="52" rx="4" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<rect x="8" y="4" width="64" height="52" rx="4" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
{/* Title bar */}
<line x1="8" y1="14" x2="72" y2="14" stroke="#06b6d4" strokeWidth="1" opacity="0.3" />
<circle cx="16" cy="9" r="2" fill="#06b6d4" opacity="0.4" />
<circle cx="23" cy="9" r="2" fill="#22d3ee" opacity="0.4" />
<line x1="8" y1="14" x2="72" y2="14" stroke="#ea580c" strokeWidth="1" opacity="0.3" />
<circle cx="16" cy="9" r="2" fill="#ea580c" opacity="0.4" />
<circle cx="23" cy="9" r="2" fill="#f97316" opacity="0.4" />
{/* Code lines */}
<line x1="16" y1="22" x2="40" y2="22" stroke="#06b6d4" strokeWidth="1.5" opacity="0.6" />
<line x1="20" y1="30" x2="52" y2="30" stroke="#22d3ee" strokeWidth="1.5" opacity="0.5" />
<line x1="20" y1="38" x2="46" y2="38" stroke="#06b6d4" strokeWidth="1.5" opacity="0.4" />
<line x1="16" y1="46" x2="36" y2="46" stroke="#22d3ee" strokeWidth="1.5" opacity="0.5" />
<line x1="16" y1="22" x2="40" y2="22" stroke="#ea580c" strokeWidth="1.5" opacity="0.6" />
<line x1="20" y1="30" x2="52" y2="30" stroke="#f97316" strokeWidth="1.5" opacity="0.5" />
<line x1="20" y1="38" x2="46" y2="38" stroke="#ea580c" strokeWidth="1.5" opacity="0.4" />
<line x1="16" y1="46" x2="36" y2="46" stroke="#f97316" strokeWidth="1.5" opacity="0.5" />
</svg>
)
}
@@ -117,14 +117,14 @@ export function ShareIllustration() {
return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Center node */}
<circle cx="28" cy="30" r="8" fill="rgba(6,182,212,0.15)" stroke="#06b6d4" strokeWidth="1.5" />
<circle cx="28" cy="30" r="8" fill="rgba(249,115,22,0.15)" stroke="#ea580c" strokeWidth="1.5" />
{/* Top-right node */}
<circle cx="58" cy="14" r="6" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<circle cx="58" cy="14" r="6" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
{/* Bottom-right node */}
<circle cx="58" cy="46" r="6" fill="rgba(6,182,212,0.15)" stroke="#22d3ee" strokeWidth="1.5" />
<circle cx="58" cy="46" r="6" fill="rgba(249,115,22,0.15)" stroke="#f97316" strokeWidth="1.5" />
{/* Connecting lines */}
<line x1="35" y1="25" x2="52" y2="17" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="35" y1="35" x2="52" y2="43" stroke="#06b6d4" strokeWidth="1.5" />
<line x1="35" y1="25" x2="52" y2="17" stroke="#ea580c" strokeWidth="1.5" />
<line x1="35" y1="35" x2="52" y2="43" stroke="#ea580c" strokeWidth="1.5" />
</svg>
)
}

2
frontend/src/components/dashboard/FiltersBar.tsx
View File

@@ -22,7 +22,7 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
className={cn(
'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
activeFilter === f.id
? 'border-[#22d3ee]/30 bg-accent-dim text-primary'
? 'border-[#f97316]/30 bg-accent-dim text-primary'
: 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
)}
>

2
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
View File

@@ -16,7 +16,7 @@ export function KnowledgeBaseCards() {
const items = [
{ label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
{ label: 'Scripts', value: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' },
{ label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
{ label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#eab308', href: '/review-queue' },
]
return (

2
frontend/src/components/dashboard/PendingEscalations.tsx
View File

@@ -29,7 +29,7 @@ export function PendingEscalations() {
return (
<div
className="card-flat overflow-hidden"
style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
style={{ borderColor: 'rgba(234, 179, 8, 0.2)' }}
>
<div
className="flex items-center justify-between px-5 py-3"

4
frontend/src/components/dashboard/PerformanceCards.tsx
View File

@@ -45,7 +45,7 @@ export function PerformanceCards() {
label: 'Avg Resolution',
value: avgMttr > 0 ? `${avgMttr}m` : '\u2014',
icon: Clock,
iconColor: '#22d3ee',
iconColor: '#f97316',
href: '/analytics',
},
{
@@ -59,7 +59,7 @@ export function PerformanceCards() {
label: 'Session Time',
value: totalMinutes > 0 ? `${totalMinutes}m` : '\u2014',
icon: Timer,
iconColor: '#fbbf24',
iconColor: '#eab308',
href: '/analytics',
},
]

6
frontend/src/components/dashboard/PreparedSessions.tsx
View File

@@ -31,9 +31,9 @@ export function PreparedSessions() {
<div className="card-flat p-5 fade-in" style={{ animationDelay: '200ms' }}>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-cyan-400" />
<ClipboardList className="h-4 w-4 text-orange-400" />
<h3 className="font-heading text-sm font-semibold text-foreground">Prepared for You</h3>
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400">
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-400/20 text-[0.625rem] font-bold text-orange-400">
{sessions.length}
</span>
</div>
@@ -52,7 +52,7 @@ export function PreparedSessions() {
onClick={() => handleStart(session)}
className={cn(
'group flex w-full items-center justify-between gap-3 rounded-lg border border-border px-4 py-3',
'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5'
'text-left transition-all hover:border-orange-500/30 hover:bg-orange-500/5'
)}
>
<div className="min-w-0 flex-1">

6
frontend/src/components/dashboard/QuickActions.tsx
View File

@@ -2,10 +2,10 @@ import { useNavigate } from 'react-router-dom'
import { Plus, Play, BookOpen, UserPlus } from 'lucide-react'
const ACTIONS = [
{ icon: Plus, label: 'New Flow', description: 'Create a new flow', href: '/trees/new', color: '#06b6d4' },
{ icon: Plus, label: 'New Flow', description: 'Create a new flow', href: '/trees/new', color: '#ea580c' },
{ icon: Play, label: 'Resume Session', description: 'Continue where you left off', href: '/sessions', color: '#34d399' },
{ icon: BookOpen, label: 'Browse Solutions', description: 'Explore solutions library', href: '/step-library', color: '#fbbf24' },
{ icon: UserPlus, label: 'Invite Team', description: 'Add team members', href: '/account', color: '#06b6d4' },
{ icon: BookOpen, label: 'Browse Solutions', description: 'Explore solutions library', href: '/step-library', color: '#eab308' },
{ icon: UserPlus, label: 'Invite Team', description: 'Add team members', href: '/account', color: '#ea580c' },
] as const
export function QuickActions() {

6
frontend/src/components/dashboard/RecentActivity.tsx
View File

@@ -16,9 +16,9 @@ interface RecentActivityProps {
const DEFAULT_ACTIVITIES: ActivityItem[] = [
{ id: '1', icon: Play, iconColor: '#34d399', iconBg: 'rgba(52, 211, 153, 0.1)', description: 'Started VPN Connectivity Triage session', timestamp: '2 min ago' },
{ id: '2', icon: CheckCircle, iconColor: '#06b6d4', iconBg: 'rgba(6, 182, 212, 0.1)', description: 'Completed M365 License Provisioning', timestamp: '15 min ago' },
{ id: '3', icon: Edit, iconColor: '#fbbf24', iconBg: 'rgba(251, 191, 36, 0.1)', description: 'Updated Printer Troubleshooting flow', timestamp: '1 hr ago' },
{ id: '4', icon: GitBranch, iconColor: '#06b6d4', iconBg: 'rgba(6, 182, 212, 0.1)', description: 'Created new DNS Resolution flow', timestamp: '3 hr ago' },
{ id: '2', icon: CheckCircle, iconColor: '#ea580c', iconBg: 'rgba(249, 115, 22, 0.1)', description: 'Completed M365 License Provisioning', timestamp: '15 min ago' },
{ id: '3', icon: Edit, iconColor: '#eab308', iconBg: 'rgba(234, 179, 8, 0.1)', description: 'Updated Printer Troubleshooting flow', timestamp: '1 hr ago' },
{ id: '4', icon: GitBranch, iconColor: '#ea580c', iconBg: 'rgba(249, 115, 22, 0.1)', description: 'Created new DNS Resolution flow', timestamp: '3 hr ago' },
{ id: '5', icon: FileText, iconColor: '#8891a0', iconBg: 'rgba(136, 145, 160, 0.1)', description: 'Exported session report #TK-4821', timestamp: 'Yesterday' },
]

2
frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
View File

@@ -18,7 +18,7 @@ function timeAgo(dateStr: string): string {
const STATUS_CONFIG: Record<string, { icon: typeof CheckCircle; color: string }> = {
resolved: { icon: CheckCircle, color: '#34d399' },
escalated: { icon: AlertTriangle, color: '#fbbf24' },
escalated: { icon: AlertTriangle, color: '#eab308' },
abandoned: { icon: XCircle, color: '#8891a0' },
}

4
frontend/src/components/dashboard/TeamSummary.tsx
View File

@@ -19,8 +19,8 @@ export function TeamSummary() {
if (!isAccountOwner) return null
const items = [
{ label: 'Escalations', value: escalationCount, icon: AlertTriangle, color: '#fbbf24', href: '/escalations' },
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#22d3ee', href: '/analytics' },
{ label: 'Escalations', value: escalationCount, icon: AlertTriangle, color: '#eab308', href: '/escalations' },
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#f97316', href: '/analytics' },
{ label: 'Members', value: '\u2014', icon: Users, color: '#a78bfa', href: '/account' },
]

6
frontend/src/components/dashboard/WeeklyCalendar.tsx
View File

@@ -53,10 +53,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
<div
className="px-2 py-2 text-center"
style={{
borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--glass-border)',
}}
>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-orange-400' : 'text-muted-foreground'}`}>
{day.label}
</span>
<div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
@@ -72,7 +72,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
key={event.id}
className="rounded-md px-2 py-1.5 text-[0.6875rem] cursor-pointer hover:bg-accent/30 transition-colors"
style={{
borderLeft: `3px solid ${event.type === 'maintenance' ? '#fbbf24' : '#06b6d4'}`,
borderLeft: `3px solid ${event.type === 'maintenance' ? '#eab308' : '#ea580c'}`,
background: 'rgba(255, 255, 255, 0.02)',
}}
>

4
frontend/src/components/flowpilot/FlowPilotActionBar.tsx
View File

@@ -108,7 +108,7 @@ export function FlowPilotActionBar({
<button
onClick={() => setShowStatusUpdate(true)}
disabled={isProcessing}
className="flex items-center justify-center gap-1.5 rounded-lg bg-cyan-500/10 border border-cyan-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
className="flex items-center justify-center gap-1.5 rounded-lg bg-orange-500/10 border border-orange-500/20 px-2.5 sm:px-4 py-2 min-h-[40px] sm:min-h-[44px] text-xs sm:text-sm font-medium text-orange-400 hover:bg-orange-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
title="Share Update"
>
<FileText size={15} />
@@ -152,7 +152,7 @@ export function FlowPilotActionBar({
value={resolutionSummary}
onChange={(e) => setResolutionSummary(e.target.value)}
placeholder="What resolved the issue?"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
rows={4}
autoFocus
/>

2
frontend/src/components/flowpilot/FlowPilotSession.tsx
View File

@@ -118,7 +118,7 @@ export function FlowPilotSession({
<div className="mb-4">
<button
onClick={() => setShowShareCommunication(true)}
className="flex items-center gap-2 rounded-lg bg-cyan-500/10 border border-cyan-500/20 px-4 py-2.5 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
className="flex items-center gap-2 rounded-lg bg-orange-500/10 border border-orange-500/20 px-4 py-2.5 text-sm font-medium text-orange-400 hover:bg-orange-500/20 transition-colors"
>
<FileText size={16} />
{shareLabel}

6
frontend/src/components/flowpilot/StatusUpdateModal.tsx
View File

@@ -168,7 +168,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
{/* Step 3: Generating */}
{step === 'generating' && (
<div className="flex flex-col items-center justify-center py-8 gap-3">
<Loader2 size={24} className="animate-spin text-cyan-400" />
<Loader2 size={24} className="animate-spin text-orange-400" />
<p className="text-sm text-muted-foreground">
Generating {audience === 'email_draft' ? 'email draft' : audience === 'client_update' ? 'client update' : 'ticket notes'}...
</p>
@@ -180,7 +180,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
<div className="space-y-4">
{/* Meta badges */}
<div className="flex items-center gap-2 flex-wrap">
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20">
{AUDIENCES.find(a => a.value === result.audience)?.label}
</span>
<span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-[rgba(255,255,255,0.06)] text-muted-foreground border border-[rgba(255,255,255,0.08)]">
@@ -209,7 +209,7 @@ export function StatusUpdateModal({ open, onClose, onGenerate, context = 'status
'flex items-center gap-2 rounded-lg px-4 py-2 min-h-[44px] text-sm font-medium transition-colors',
copied
? 'bg-emerald-500/20 border border-emerald-500/30 text-emerald-400'
: 'bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20'
: 'bg-orange-500/10 border border-orange-500/20 text-orange-400 hover:bg-orange-500/20'
)}
>
{copied ? <Check size={16} /> : <Copy size={16} />}

2
frontend/src/components/layout/CommandPalette.tsx
View File

@@ -355,7 +355,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
<div key={group.type}>
{/* Section label */}
<div className="px-3 pt-3 pb-1">
<span className="font-mono text-[0.6875rem] uppercase tracking-[0.12em] text-[#fbbf24]">
<span className="font-mono text-[0.6875rem] uppercase tracking-[0.12em] text-[#eab308]">
{group.label}
</span>
</div>

4
frontend/src/components/layout/Sidebar.tsx
View File

@@ -288,7 +288,7 @@ export function Sidebar() {
'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-150',
active
? isParentDimmed
? 'bg-[rgba(34,211,238,0.05)] text-foreground/70'
? 'bg-[rgba(249,115,22,0.05)] text-foreground/70'
: 'bg-accent-dim text-foreground'
: 'text-muted-foreground hover:bg-input hover:text-foreground'
)}
@@ -473,7 +473,7 @@ export function Sidebar() {
>
{/* Drawer header */}
<div className="px-3 mb-3">
<h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#fbbf24]">
<h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#eab308]">
{activeFlyoutGroup.label}
</h3>
</div>

2
frontend/src/components/layout/TopBar.tsx
View File

@@ -126,7 +126,7 @@ export function TopBar() {
<button
onClick={() => setUserMenuOpen(!userMenuOpen)}
className="flex h-8 w-8 items-center justify-center rounded-[10px] text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
style={{ background: 'linear-gradient(135deg, #06b6d4, #22d3ee)' }}
style={{ background: 'linear-gradient(135deg, #ea580c, #f97316)' }}
title={user?.name || user?.email || 'User'}
>
{initials}

2
frontend/src/components/library/TreeGridView.tsx
View File

@@ -145,7 +145,7 @@ export function TreeGridView({
onClick={() => onPrepareSession(tree)}
className={cn(
'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
'hover:bg-orange-500/10 hover:text-orange-400 hover:border-orange-500/30'
)}
title="Prepare session for engineer"
aria-label="Prepare session"

2
frontend/src/components/library/TreeListView.tsx
View File

@@ -148,7 +148,7 @@ export function TreeListView({
onClick={() => onPrepareSession(tree)}
className={cn(
'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
'hover:bg-orange-500/10 hover:text-orange-400 hover:border-orange-500/30'
)}
title="Prepare session for engineer"
aria-label="Prepare session"

2
frontend/src/components/library/TreeTableView.tsx
View File

@@ -252,7 +252,7 @@ export function TreeTableView({
onClick={() => onPrepareSession(tree)}
className={cn(
'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
'hover:bg-orange-500/10 hover:text-orange-400 hover:border-orange-500/30'
)}
title="Prepare session for engineer"
aria-label="Prepare session"

10
frontend/src/components/procedural/InlineVariablePrompt.tsx
View File

@@ -59,10 +59,10 @@ export function InlineVariablePrompt({
disabled={disabled}
className={cn(
'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-sm font-medium transition-all',
'border-cyan-500/40 bg-cyan-500/5 text-cyan-400',
'hover:border-cyan-400/60 hover:bg-cyan-500/10 hover:shadow-[0_0_12px_rgba(6,182,212,0.15)]',
'border-orange-500/40 bg-orange-500/5 text-orange-400',
'hover:border-orange-400/60 hover:bg-orange-500/10 hover:shadow-[0_0_12px_rgba(249,115,22,0.15)]',
'disabled:opacity-50 disabled:cursor-not-allowed',
isRequired && 'ring-1 ring-cyan-500/20'
isRequired && 'ring-1 ring-orange-500/20'
)}
>
<Variable className="h-3.5 w-3.5" />
@@ -88,7 +88,7 @@ export function InlineVariablePrompt({
onBlur={() => {
if (!value) setIsEditing(false)
}}
className="rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
className="rounded-md border border-orange-500/40 bg-orange-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(249,115,22,0.15)] focus:border-orange-400 focus:outline-hidden focus:ring-1 focus:ring-orange-400/30"
>
<option value="">{placeholder}</option>
{options.map((opt) => (
@@ -117,7 +117,7 @@ export function InlineVariablePrompt({
onBlur={handleSubmit}
onKeyDown={handleKeyDown}
placeholder={placeholder}
className="w-48 rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
className="w-48 rounded-md border border-orange-500/40 bg-orange-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(249,115,22,0.15)] placeholder:text-muted-foreground focus:border-orange-400 focus:outline-hidden focus:ring-1 focus:ring-orange-400/30"
/>
{helpText && (
<span className="absolute -bottom-5 left-0 text-[0.625rem] text-muted-foreground whitespace-nowrap">

14
frontend/src/components/procedural/PrepareSessionModal.tsx
View File

@@ -94,7 +94,7 @@ export function PrepareSessionModal({
{/* Header */}
<div className="flex items-center justify-between border-b border-border px-5 py-4">
<div className="flex items-center gap-2">
<FileText className="h-4 w-4 text-cyan-400" />
<FileText className="h-4 w-4 text-orange-400" />
<h3 className="text-sm font-semibold text-foreground">Prepare Session</h3>
</div>
<button
@@ -122,7 +122,7 @@ export function PrepareSessionModal({
value={ticketNumber}
onChange={(e) => setTicketNumber(e.target.value)}
placeholder="e.g. TKT-12345"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
<div>
@@ -132,7 +132,7 @@ export function PrepareSessionModal({
value={clientName}
onChange={(e) => setClientName(e.target.value)}
placeholder="e.g. Acme Corp"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
</div>
@@ -147,7 +147,7 @@ export function PrepareSessionModal({
<select
value={assignedToId}
onChange={(e) => setAssignedToId(e.target.value)}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">Unassigned (visible to all)</option>
{teamMembers.map(m => (
@@ -178,7 +178,7 @@ export function PrepareSessionModal({
<select
value={values[field.variable_name] || ''}
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">{field.placeholder || 'Select...'}</option>
{field.options.map(opt => (
@@ -191,7 +191,7 @@ export function PrepareSessionModal({
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
placeholder={field.placeholder}
rows={3}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
) : (
<input
@@ -199,7 +199,7 @@ export function PrepareSessionModal({
value={values[field.variable_name] || ''}
onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
placeholder={field.placeholder}
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
)}
{field.help_text && (

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">

2
frontend/src/components/session/TicketContextPanel.tsx
View File

@@ -62,7 +62,7 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
return (
<div className="card-flat overflow-hidden rounded-lg">
{/* Header */}
<div className="flex items-center gap-2 bg-[rgba(34,211,238,0.05)] px-3 py-2.5">
<div className="flex items-center gap-2 bg-[rgba(249,115,22,0.05)] px-3 py-2.5">
<Ticket className="h-3.5 w-3.5 text-primary" />
<span className="flex-1 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-primary">
Ticket Context

2
frontend/src/components/session/TicketLinkIndicator.tsx
View File

@@ -36,7 +36,7 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
// Ticket linked
return (
<div className="card-flat inline-flex items-start gap-2.5 rounded-lg border border-border px-3 py-2">
<Ticket className="mt-0.5 h-4 w-4 shrink-0 text-cyan-400" />
<Ticket className="mt-0.5 h-4 w-4 shrink-0 text-orange-400" />
<div className="min-w-0">
<p className="text-sm font-medium text-foreground">
CW #{session.psa_ticket_id}

2
frontend/src/components/session/UpdateTicketModal.tsx
View File

@@ -259,7 +259,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
value={opt.value}
checked={noteType === opt.value}
onChange={() => setNoteType(opt.value)}
className="mt-0.5 accent-cyan-400"
className="mt-0.5 accent-orange-400"
/>
<div className="min-w-0">
<span className="text-sm font-medium text-foreground">{opt.label}</span>

2
frontend/src/components/sidebar/SidebarStatsBar.tsx
View File

@@ -68,7 +68,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
<div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
<div
className="font-mono text-sm font-semibold leading-none"
style={{ color: '#22d3ee' }}
style={{ color: '#f97316' }}
aria-label={`${active} active sessions`}
>
{active}

6
frontend/src/components/tree-editor/GlowEdge.tsx
View File

@@ -54,14 +54,14 @@ export function GlowEdgeDefs() {
{/* Downstream: cyan brand */}
<linearGradient id="edge-gradient-downstream" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#06b6d4" />
<stop offset="100%" stopColor="#22d3ee" />
<stop offset="0%" stopColor="#ea580c" />
<stop offset="100%" stopColor="#f97316" />
</linearGradient>
{/* Upstream: amber */}
<linearGradient id="edge-gradient-upstream" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stopColor="#f59e0b" />
<stop offset="100%" stopColor="#fbbf24" />
<stop offset="100%" stopColor="#eab308" />
</linearGradient>
{/* Glow filters */}