feat: replace hardcoded orange hex values with blue equivalents

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

View File

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

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

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

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

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

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -294,7 +294,7 @@ export function NotificationSettings() {
type="checkbox" type="checkbox"
checked={config.events_enabled[eventKey] ?? false} checked={config.events_enabled[eventKey] ?? false}
onChange={() => handleToggleEvent(config, eventKey)} 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> <span className="text-sm text-foreground">{eventLabel}</span>
</label> </label>

View File

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

View File

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

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. * containing a white lightning bolt.
*/ */
export function BrandLogo({ size = 'sm', className }: BrandLogoProps) { export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
@@ -19,7 +19,7 @@ export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
width: dim, width: dim,
height: dim, height: dim,
borderRadius: size === 'sm' ? 8 : 14, borderRadius: size === 'sm' ? 8 : 14,
background: 'linear-gradient(135deg, #ea580c, #f97316)', background: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
}} }}
> >
<svg <svg

View File

@@ -1,6 +1,6 @@
/** /**
* SVG illustrations for EmptyState components. * 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. * ViewBox: 80x60, simple line art style.
*/ */
@@ -8,19 +8,19 @@ export function FlowIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Root node */} {/* 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 */} {/* Branches */}
<line x1="40" y1="16" x2="20" 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="#ea580c" strokeWidth="1.5" /> <line x1="40" y1="16" x2="60" y2="34" stroke="#3b82f6" strokeWidth="1.5" />
{/* Left child */} {/* 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 */} {/* 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 */} {/* Leaf branches */}
<line x1="20" y1="43" x2="12" y2="52" 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="#f97316" 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="#f97316" 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="#f97316" strokeWidth="1" /> <circle cx="28" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1" />
</svg> </svg>
) )
} }
@@ -29,12 +29,12 @@ export function AnalyticsIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Bars */} {/* 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="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="#f97316" 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="#ea580c" 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="#f97316" 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 */} {/* 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> </svg>
) )
} }
@@ -43,17 +43,17 @@ export function SessionIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Card 1 */} {/* 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" /> <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="#ea580c" /> <circle cx="22" cy="14" r="2" fill="#3b82f6" />
<line x1="28" y1="14" x2="56" y2="14" stroke="#ea580c" strokeWidth="1" opacity="0.5" /> <line x1="28" y1="14" x2="56" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
{/* Card 2 */} {/* 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" /> <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="#f97316" /> <circle cx="22" cy="30" r="2" fill="#60a5fa" />
<line x1="28" y1="30" x2="52" y2="30" stroke="#f97316" strokeWidth="1" opacity="0.5" /> <line x1="28" y1="30" x2="52" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.5" />
{/* Card 3 */} {/* 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" /> <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="#ea580c" /> <circle cx="22" cy="46" r="2" fill="#3b82f6" />
<line x1="28" y1="46" x2="48" y2="46" stroke="#ea580c" strokeWidth="1" opacity="0.5" /> <line x1="28" y1="46" x2="48" y2="46" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
</svg> </svg>
) )
} }
@@ -62,19 +62,19 @@ export function IntegrationIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Left box */} {/* 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" /> <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="#ea580c" strokeWidth="1" opacity="0.6" /> <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="#ea580c" strokeWidth="1" opacity="0.4" /> <line x1="12" y1="30" x2="20" y2="30" stroke="#3b82f6" strokeWidth="1" opacity="0.4" />
{/* Right box */} {/* 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" /> <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="#f97316" strokeWidth="1" opacity="0.6" /> <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="#f97316" strokeWidth="1" opacity="0.4" /> <line x1="58" y1="30" x2="66" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.4" />
{/* Dashed arrows */} {/* Dashed arrows */}
<line x1="30" y1="26" x2="50" y2="26" stroke="#ea580c" 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="#f97316" 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 */} {/* Arrow tips */}
<path d="M48 23 L52 26 L48 29" stroke="#ea580c" 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="#f97316" strokeWidth="1.5" fill="none" /> <path d="M32 31 L28 34 L32 37" stroke="#60a5fa" strokeWidth="1.5" fill="none" />
</svg> </svg>
) )
} }
@@ -83,14 +83,14 @@ export function StepLibraryIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* List items */} {/* List items */}
<circle cx="18" cy="14" r="3" fill="rgba(96,165,250,0.15)" stroke="#ea580c" strokeWidth="1.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="#ea580c" strokeWidth="1.5" opacity="0.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="#f97316" strokeWidth="1.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="#f97316" strokeWidth="1.5" opacity="0.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="#ea580c" strokeWidth="1.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="#ea580c" strokeWidth="1.5" opacity="0.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="#f97316" strokeWidth="1.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="#f97316" strokeWidth="1.5" opacity="0.5" /> <line x1="26" y1="53" x2="50" y2="53" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
</svg> </svg>
) )
} }
@@ -99,16 +99,16 @@ export function ScriptIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Terminal window */} {/* 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 */} {/* Title bar */}
<line x1="8" y1="14" x2="72" y2="14" stroke="#ea580c" strokeWidth="1" opacity="0.3" /> <line x1="8" y1="14" x2="72" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.3" />
<circle cx="16" cy="9" r="2" fill="#ea580c" opacity="0.4" /> <circle cx="16" cy="9" r="2" fill="#3b82f6" opacity="0.4" />
<circle cx="23" cy="9" r="2" fill="#f97316" opacity="0.4" /> <circle cx="23" cy="9" r="2" fill="#60a5fa" opacity="0.4" />
{/* Code lines */} {/* Code lines */}
<line x1="16" y1="22" x2="40" y2="22" stroke="#ea580c" strokeWidth="1.5" opacity="0.6" /> <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="#f97316" strokeWidth="1.5" opacity="0.5" /> <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="#ea580c" strokeWidth="1.5" opacity="0.4" /> <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="#f97316" strokeWidth="1.5" opacity="0.5" /> <line x1="16" y1="46" x2="36" y2="46" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
</svg> </svg>
) )
} }
@@ -117,14 +117,14 @@ export function ShareIllustration() {
return ( return (
<svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Center node */} {/* 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 */} {/* 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 */} {/* 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 */} {/* Connecting lines */}
<line x1="35" y1="25" x2="52" y2="17" 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="#ea580c" strokeWidth="1.5" /> <line x1="35" y1="35" x2="52" y2="43" stroke="#3b82f6" strokeWidth="1.5" />
</svg> </svg>
) )
} }

View File

@@ -22,7 +22,7 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
className={cn( className={cn(
'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors', 'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
activeFilter === f.id 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' : 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
)} )}
> >

View File

@@ -30,7 +30,7 @@ export function GreetingStatStrip() {
const stats: StatItem[] = [ const stats: StatItem[] = [
{ icon: CheckCircle, value: resolved, label: 'resolved today', color: '#34d399' }, { 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' }, { icon: Clock, value: avgMttr, label: 'avg MTTR', color: '#848b9b' },
] ]

View File

@@ -16,7 +16,7 @@ export function KnowledgeBaseCards() {
const items = [ const items = [
{ label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' }, { label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
{ label: 'Scripts', value: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' }, { 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 ( return (

View File

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

View File

@@ -2,10 +2,10 @@ import { useNavigate } from 'react-router-dom'
import { Plus, Play, BookOpen, UserPlus } from 'lucide-react' import { Plus, Play, BookOpen, UserPlus } from 'lucide-react'
const ACTIONS = [ 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: 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: 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: '#ea580c' }, { icon: UserPlus, label: 'Invite Team', description: 'Add team members', href: '/account', color: '#3b82f6' },
] as const ] as const
export function QuickActions() { export function QuickActions() {

View File

@@ -16,9 +16,9 @@ interface RecentActivityProps {
const DEFAULT_ACTIVITIES: ActivityItem[] = [ 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: '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: '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: '#eab308', iconBg: 'rgba(234, 179, 8, 0.1)', description: 'Updated Printer Troubleshooting flow', timestamp: '1 hr 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: '#ea580c', iconBg: 'rgba(96, 165, 250, 0.1)', description: 'Created new DNS Resolution flow', timestamp: '3 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' }, { id: '5', icon: FileText, iconColor: '#8891a0', iconBg: 'rgba(136, 145, 160, 0.1)', description: 'Exported session report #TK-4821', timestamp: 'Yesterday' },
] ]

View File

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

View File

@@ -346,7 +346,7 @@ export function StartSessionInput() {
onClick={() => handleSuggestionClick(label)} 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]" 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} {label}
</button> </button>
))} ))}

View File

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

View File

@@ -53,7 +53,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
<div <div
className="px-2 py-2 text-center" className="px-2 py-2 text-center"
style={{ 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'}`}> <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} key={event.id}
className="rounded-md px-2 py-1.5 text-[0.6875rem] cursor-pointer hover:bg-accent/30 transition-colors" className="rounded-md px-2 py-1.5 text-[0.6875rem] cursor-pointer hover:bg-accent/30 transition-colors"
style={{ style={{
borderLeft: `3px solid ${event.type === 'maintenance' ? '#eab308' : '#ea580c'}`, borderLeft: `3px solid ${event.type === 'maintenance' ? '#fbbf24' : '#3b82f6'}`,
background: 'rgba(255, 255, 255, 0.02)', background: 'rgba(255, 255, 255, 0.02)',
}} }}
> >

View File

@@ -355,7 +355,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
<div key={group.type}> <div key={group.type}>
{/* Section label */} {/* Section label */}
<div className="px-3 pt-3 pb-1"> <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} {group.label}
</span> </span>
</div> </div>

View File

@@ -450,7 +450,7 @@ export function Sidebar() {
> >
{/* Drawer header */} {/* Drawer header */}
<div className="px-3 mb-3"> <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} {activeFlyoutGroup.label}
</h3> </h3>
</div> </div>

View File

@@ -126,7 +126,7 @@ export function TopBar() {
<button <button
onClick={() => setUserMenuOpen(!userMenuOpen)} 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" 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'} title={user?.name || user?.email || 'User'}
> >
{initials} {initials}

View File

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

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="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
<div <div
className="font-mono text-sm font-semibold leading-none" className="font-mono text-sm font-semibold leading-none"
style={{ color: '#f97316' }} style={{ color: '#60a5fa' }}
aria-label={`${active} active sessions`} aria-label={`${active} active sessions`}
> >
{active} {active}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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