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

feat: replace hardcoded orange hex values with blue equivalents

Browse Source 
BrandLogo gradient, EmptyStateIllustrations SVGs, categoryColors,
landing page, brand SVG assets, and all remaining files.
Warning #eab308 → #fbbf24 (amber). categoryColors deduped.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-29 16:20:52 +00:00
parent 61c410e366
commit 1152b023bf
32 changed files with 118 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/assets/brand/icon.svg
View File

@@ -1,8 +1,8 @@
<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="resolutionflow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ea580c"/>
<stop offset="100%" stop-color="#f97316"/>
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
</defs>
<!-- Input circles (choices) -->
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/src/assets/brand/logo-horizontal.svg
View File

@@ -1,8 +1,8 @@
<svg viewBox="0 0 320 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rf-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ea580c"/>
<stop offset="100%" stop-color="#f97316"/>
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
</defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

4
frontend/src/assets/brand/logo-with-tagline.svg
View File

@@ -1,8 +1,8 @@
<svg viewBox="0 0 320 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rf-gradient-tag" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ea580c"/>
<stop offset="100%" stop-color="#f97316"/>
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
</defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

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-[#ea580c]"
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-[#3b82f6]"
/>
<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: '#eab308',
workaround: '#fbbf24',
unresolved: '#94a3b8',
}

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

@@ -102,14 +102,14 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
yAxisId="hours"
type="monotone"
dataKey="hours"
stroke="#f97316"
stroke="#60a5fa"
fill="url(#psaHoursGradient)"
strokeWidth={2}
/>
<defs>
<linearGradient id="psaHoursGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f97316" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f97316" stopOpacity={0} />
<stop offset="5%" stopColor="#60a5fa" stopOpacity={0.3} />
<stop offset="95%" stopColor="#60a5fa" stopOpacity={0} />
</linearGradient>
</defs>
</ComposedChart>

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

@@ -6,7 +6,7 @@ interface BrandLogoProps {
}
/**
* Brand logo mark: gradient orange square with rounded corners
* Brand logo mark: gradient blue square with rounded corners
* containing a white lightning bolt.
*/
export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
@@ -19,7 +19,7 @@ export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
width: dim,
height: dim,
borderRadius: size === 'sm' ? 8 : 14,
background: 'linear-gradient(135deg, #ea580c, #f97316)',
background: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
}}
>
<svg

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

@@ -1,6 +1,6 @@
/**
* SVG illustrations for EmptyState components.
* Each uses the brand orange palette (#ea580c / #f97316) at low opacity.
* Each uses the brand orange palette (#3b82f6 / #60a5fa) 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(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<circle cx="40" cy="10" r="6" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
{/* Branches */}
<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" />
<line x1="40" y1="16" x2="20" y2="34" stroke="#3b82f6" strokeWidth="1.5" />
<line x1="40" y1="16" x2="60" y2="34" stroke="#3b82f6" strokeWidth="1.5" />
{/* Left child */}
<circle cx="20" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<circle cx="20" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
{/* Right child */}
<circle cx="60" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<circle cx="60" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
{/* Leaf branches */}
<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(96,165,250,0.15)" stroke="#f97316" strokeWidth="1" />
<circle cx="28" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1" />
<line x1="20" y1="43" x2="12" y2="52" stroke="#60a5fa" strokeWidth="1" />
<line x1="20" y1="43" x2="28" y2="52" stroke="#60a5fa" strokeWidth="1" />
<circle cx="12" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1" />
<circle cx="28" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" 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(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<rect x="26" y="28" width="10" height="26" rx="2" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<rect x="40" y="20" width="10" height="34" rx="2" fill="rgba(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<rect x="54" y="10" width="10" height="44" rx="2" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<rect x="12" y="38" width="10" height="16" rx="2" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<rect x="26" y="28" width="10" height="26" rx="2" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
<rect x="40" y="20" width="10" height="34" rx="2" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<rect x="54" y="10" width="10" height="44" rx="2" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
{/* Baseline */}
<line x1="8" y1="56" x2="72" y2="56" stroke="#ea580c" strokeWidth="1" opacity="0.5" />
<line x1="8" y1="56" x2="72" y2="56" stroke="#3b82f6" 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(96,165,250,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" />
<rect x="12" y="8" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<circle cx="22" cy="14" r="2" fill="#3b82f6" />
<line x1="28" y1="14" x2="56" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
{/* Card 2 */}
<rect x="12" y="24" width="56" height="12" rx="3" fill="rgba(96,165,250,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" />
<rect x="12" y="24" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
<circle cx="22" cy="30" r="2" fill="#60a5fa" />
<line x1="28" y1="30" x2="52" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.5" />
{/* Card 3 */}
<rect x="12" y="40" width="56" height="12" rx="3" fill="rgba(96,165,250,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" />
<rect x="12" y="40" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<circle cx="22" cy="46" r="2" fill="#3b82f6" />
<line x1="28" y1="46" x2="48" y2="46" stroke="#3b82f6" 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(96,165,250,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" />
<rect x="6" y="18" width="22" height="24" rx="4" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<line x1="12" y1="26" x2="22" y2="26" stroke="#3b82f6" strokeWidth="1" opacity="0.6" />
<line x1="12" y1="30" x2="20" y2="30" stroke="#3b82f6" strokeWidth="1" opacity="0.4" />
{/* Right box */}
<rect x="52" y="18" width="22" height="24" rx="4" fill="rgba(96,165,250,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" />
<rect x="52" y="18" width="22" height="24" rx="4" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
<line x1="58" y1="26" x2="68" y2="26" stroke="#60a5fa" strokeWidth="1" opacity="0.6" />
<line x1="58" y1="30" x2="66" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.4" />
{/* Dashed arrows */}
<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" />
<line x1="30" y1="26" x2="50" y2="26" stroke="#3b82f6" strokeWidth="1.5" strokeDasharray="3 2" />
<line x1="50" y1="34" x2="30" y2="34" stroke="#60a5fa" strokeWidth="1.5" strokeDasharray="3 2" />
{/* Arrow tips */}
<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" />
<path d="M48 23 L52 26 L48 29" stroke="#3b82f6" strokeWidth="1.5" fill="none" />
<path d="M32 31 L28 34 L32 37" stroke="#60a5fa" 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(96,165,250,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(96,165,250,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(96,165,250,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(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<line x1="26" y1="53" x2="50" y2="53" stroke="#f97316" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="14" r="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<line x1="26" y1="14" x2="62" y2="14" stroke="#3b82f6" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="27" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
<line x1="26" y1="27" x2="58" y2="27" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="40" r="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
<line x1="26" y1="40" x2="54" y2="40" stroke="#3b82f6" strokeWidth="1.5" opacity="0.5" />
<circle cx="18" cy="53" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
<line x1="26" y1="53" x2="50" y2="53" stroke="#60a5fa" 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(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<rect x="8" y="4" width="64" height="52" rx="4" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
{/* Title bar */}
<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" />
<line x1="8" y1="14" x2="72" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.3" />
<circle cx="16" cy="9" r="2" fill="#3b82f6" opacity="0.4" />
<circle cx="23" cy="9" r="2" fill="#60a5fa" opacity="0.4" />
{/* Code lines */}
<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" />
<line x1="16" y1="22" x2="40" y2="22" stroke="#3b82f6" strokeWidth="1.5" opacity="0.6" />
<line x1="20" y1="30" x2="52" y2="30" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
<line x1="20" y1="38" x2="46" y2="38" stroke="#3b82f6" strokeWidth="1.5" opacity="0.4" />
<line x1="16" y1="46" x2="36" y2="46" stroke="#60a5fa" 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(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.5" />
<circle cx="28" cy="30" r="8" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
{/* Top-right node */}
<circle cx="58" cy="14" r="6" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<circle cx="58" cy="14" r="6" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
{/* Bottom-right node */}
<circle cx="58" cy="46" r="6" fill="rgba(96,165,250,0.15)" stroke="#f97316" strokeWidth="1.5" />
<circle cx="58" cy="46" r="6" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
{/* Connecting lines */}
<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" />
<line x1="35" y1="25" x2="52" y2="17" stroke="#3b82f6" strokeWidth="1.5" />
<line x1="35" y1="35" x2="52" y2="43" stroke="#3b82f6" 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-[#f97316]/30 bg-accent-dim text-primary'
? 'border-[#60a5fa]/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/GreetingStatStrip.tsx
View File

@@ -30,7 +30,7 @@ export function GreetingStatStrip() {
const stats: StatItem[] = [
{ icon: CheckCircle, value: resolved, label: 'resolved today', color: '#34d399' },
{ icon: Zap, value: active, label: 'active now', color: '#f97316' },
{ icon: Zap, value: active, label: 'active now', color: '#60a5fa' },
{ icon: Clock, value: avgMttr, label: 'avg MTTR', color: '#848b9b' },
]

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: '#eab308', href: '/review-queue' },
{ label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
]
return (

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: '#f97316',
iconColor: '#60a5fa',
href: '/analytics',
},
{
@@ -59,7 +59,7 @@ export function PerformanceCards() {
label: 'Session Time',
value: totalMinutes > 0 ? `${totalMinutes}m` : '\u2014',
icon: Timer,
iconColor: '#eab308',
iconColor: '#fbbf24',
href: '/analytics',
},
]

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: '#ea580c' },
{ icon: Plus, label: 'New Flow', description: 'Create a new flow', href: '/trees/new', color: '#3b82f6' },
{ 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: '#eab308' },
{ icon: UserPlus, label: 'Invite Team', description: 'Add team members', href: '/account', color: '#ea580c' },
{ 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: '#3b82f6' },
] 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: '#ea580c', iconBg: 'rgba(96, 165, 250, 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(96, 165, 250, 0.1)', description: 'Created new DNS Resolution flow', timestamp: '3 hr ago' },
{ id: '2', icon: CheckCircle, iconColor: '#3b82f6', iconBg: 'rgba(96, 165, 250, 0.1)', description: 'Completed M365 License Provisioning', timestamp: '15 min ago' },
{ id: '3', icon: Edit, iconColor: '#fbbf24', iconBg: 'rgba(234, 179, 8, 0.1)', description: 'Updated Printer Troubleshooting flow', timestamp: '1 hr ago' },
{ id: '4', icon: GitBranch, iconColor: '#3b82f6', iconBg: 'rgba(96, 165, 250, 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: '#eab308' },
escalated: { icon: AlertTriangle, color: '#fbbf24' },
abandoned: { icon: XCircle, color: '#8891a0' },
}

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

@@ -346,7 +346,7 @@ export function StartSessionInput() {
onClick={() => handleSuggestionClick(label)}
className="group flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground transition-all hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)] hover:text-foreground active:scale-[0.97]"
>
<Icon size={11} className="text-muted shrink-0 group-hover:text-[#f97316] transition-colors" />
<Icon size={11} className="text-muted shrink-0 group-hover:text-[#60a5fa] transition-colors" />
{label}
</button>
))}

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: '#eab308', href: '/escalations' },
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#f97316', href: '/analytics' },
{ label: 'Escalations', value: escalationCount, icon: AlertTriangle, color: '#fbbf24', href: '/escalations' },
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#60a5fa', href: '/analytics' },
{ label: 'Members', value: '\u2014', icon: Users, color: '#a78bfa', href: '/account' },
]

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

@@ -53,7 +53,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
<div
className="px-2 py-2 text-center"
style={{
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--color-border-default)',
borderBottom: day.isToday ? '2px solid #3b82f6' : '1px solid var(--color-border-default)',
}}
>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-blue-400' : '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' ? '#eab308' : '#ea580c'}`,
borderLeft: `3px solid ${event.type === 'maintenance' ? '#fbbf24' : '#3b82f6'}`,
background: 'rgba(255, 255, 255, 0.02)',
}}
>

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-[#eab308]">
<span className="font-mono text-[0.6875rem] uppercase tracking-[0.12em] text-[#fbbf24]">
{group.label}
</span>
</div>

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

@@ -450,7 +450,7 @@ export function Sidebar() {
>
{/* Drawer header */}
<div className="px-3 mb-3">
<h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#eab308]">
<h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#fbbf24]">
{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, #ea580c, #f97316)' }}
style={{ background: 'linear-gradient(135deg, #3b82f6, #60a5fa)' }}
title={user?.name || user?.email || 'User'}
>
{initials}

4
frontend/src/components/library/FolderEditModal.tsx
View File

@@ -12,8 +12,8 @@ const FOLDER_COLORS = [
'#8b5cf6', // Violet
'#ec4899', // Pink
'#ef4444', // Red
'#f97316', // Orange
'#eab308', // Yellow
'#60a5fa', // Orange
'#fbbf24', // Yellow
'#22c55e', // Green
'#14b8a6', // Teal
'#3b82f6', // Blue

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

@@ -69,7 +69,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: '#f97316' }}
style={{ color: '#60a5fa' }}
aria-label={`${active} active sessions`}
>
{active}

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

@@ -23,7 +23,7 @@ const NODE_TYPE_CONFIG: Record<Exclude<NodeType, 'answer'>, {
label: 'Action',
borderClass: 'border-l-4 border-l-yellow-500',
badgeClass: 'bg-yellow-500/20 text-yellow-400',
minimapColor: '#eab308',
minimapColor: '#fbbf24',
},
solution: {
icon: CheckCircle,

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

@@ -54,14 +54,14 @@ export function GlowEdgeDefs() {
{/* Downstream: accent brand */}
<linearGradient id="edge-gradient-downstream" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#ea580c" />
<stop offset="100%" stopColor="#f97316" />
<stop offset="0%" stopColor="#3b82f6" />
<stop offset="100%" stopColor="#60a5fa" />
</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="#eab308" />
<stop offset="100%" stopColor="#fbbf24" />
</linearGradient>
{/* Glow filters */}

4
frontend/src/constants/categoryColors.ts
View File

@@ -4,9 +4,9 @@ export const CATEGORY_COLORS = [
'#f59e0b', // amber
'#ef4444', // red
'#8b5cf6', // violet
'#ea580c', // deep orange
'#0891b2', // cyan
'#ec4899', // pink
'#f97316', // orange
'#60a5fa', // sky blue
'#14b8a6', // teal
'#6366f1', // indigo
] as const

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

@@ -217,7 +217,7 @@ export default function FlowPilotAnalyticsPage() {
icon={BarChart3}
label="Total Sessions"
value={dashboard.total_sessions}
iconColor="#f97316"
iconColor="#60a5fa"
/>
<MetricCard
icon={CheckCircle2}
@@ -235,7 +235,7 @@ export default function FlowPilotAnalyticsPage() {
icon={Star}
label="Avg Rating"
value={dashboard.avg_rating ? `${dashboard.avg_rating.toFixed(1)}/5` : '—'}
iconColor="#eab308"
iconColor="#fbbf24"
/>
<MetricCard
icon={Ticket}
@@ -273,14 +273,14 @@ export default function FlowPilotAnalyticsPage() {
<Area
type="monotone"
dataKey="mttr_minutes"
stroke="#f97316"
stroke="#60a5fa"
fill="url(#mttrGradient)"
strokeWidth={2}
/>
<defs>
<linearGradient id="mttrGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f97316" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f97316" stopOpacity={0} />
<stop offset="5%" stopColor="#60a5fa" stopOpacity={0.3} />
<stop offset="95%" stopColor="#60a5fa" stopOpacity={0} />
</linearGradient>
</defs>
</AreaChart>
@@ -313,7 +313,7 @@ export default function FlowPilotAnalyticsPage() {
labelStyle={{ color: '#f0f2f5' }}
/>
<Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
<Bar dataKey="escalated" name="Escalated" fill="#eab308" radius={[0, 4, 4, 0]} />
<Bar dataKey="escalated" name="Escalated" fill="#fbbf24" radius={[0, 4, 4, 0]} />
</BarChart>
</ResponsiveContainer>
) : (
@@ -343,7 +343,7 @@ export default function FlowPilotAnalyticsPage() {
label="Exploring"
count={conf.exploring_sessions}
rate={conf.exploring_resolution_rate}
color="#eab308"
color="#fbbf24"
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
/>
<ConfidenceTierRow

8
frontend/src/pages/LandingPage.tsx
View File

@@ -194,7 +194,7 @@ export default function LandingPage() {
<div className="landing-preview-body">
<div className="landing-preview-sidebar">
<div className="landing-preview-sidebar-item active">
<div className="dot" style={{ background: '#f97316' }} />
<div className="dot" style={{ background: '#60a5fa' }} />
FlowPilot
</div>
<div className="landing-preview-sidebar-item">
@@ -221,15 +221,15 @@ export default function LandingPage() {
<span className="text">User can&apos;t access shared drive after password reset</span>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#f97316' }}>FlowPilot:</span>
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#f97316' }}>FlowPilot:</span>
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
</div>
<div className="landing-mock-chat-line">
<span className="label" style={{ color: '#f97316' }}>FlowPilot:</span>
<span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
<span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
</div>
<div className="landing-mock-chat-line doc">

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

@@ -20,7 +20,7 @@ import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
const OUTCOME_COLORS: Record<string, string> = {
resolved: '#34d399',
escalated: '#f87171',
workaround: '#eab308',
workaround: '#fbbf24',
unresolved: '#94a3b8',
}

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

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

6
frontend/src/pages/account/BrandingSettingsPage.tsx
View File

@@ -11,7 +11,7 @@ interface AccountBranding {
company_name: string | null
}
const DEFAULT_COLOR = '#ea580c'
const DEFAULT_COLOR = '#3b82f6'
export function BrandingSettingsPage() {
const [branding, setBranding] = useState<AccountBranding | null>(null)
@@ -207,7 +207,7 @@ export function BrandingSettingsPage() {
const val = e.target.value
setPrimaryColor(val)
}}
placeholder="#ea580c"
placeholder="#3b82f6"
maxLength={7}
className={cn(
'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
@@ -224,7 +224,7 @@ export function BrandingSettingsPage() {
</button>
</div>
<p className="mt-1 text-xs text-muted-foreground">
Hex color code for the primary accent color (e.g. #ea580c).
Hex color code for the primary accent color (e.g. #3b82f6).
</p>
</div>
</div>

10
frontend/src/styles/landing.css
View File

@@ -978,7 +978,7 @@
}
.landing-pricing-card.featured {
border-color: #f97316;
border-color: #60a5fa;
background: var(--color-bg-card);
position: relative;
}
@@ -1062,7 +1062,7 @@
.landing-pricing-features li::before {
content: '\2713';
color: #f97316;
color: #60a5fa;
font-weight: 700;
font-size: 0.8rem;
margin-top: 2px;
@@ -1142,7 +1142,7 @@
.landing-testimonial-quote::before {
content: '\201C';
font-size: 4rem;
color: #f97316;
color: #60a5fa;
opacity: 0.3;
vertical-align: super;
margin-right: 1rem;
@@ -1154,7 +1154,7 @@
.landing-testimonial-quote::after {
content: '\201D';
font-size: 4rem;
color: #f97316;
color: #60a5fa;
opacity: 0.3;
vertical-align: sub;
margin-left: 1rem;
@@ -1227,7 +1227,7 @@
}
.landing-cta-email-input:focus {
border-color: #f97316;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}