refactor: replace cyan accent with ember orange across entire frontend
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
@@ -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'
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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' },
|
||||
]
|
||||
|
||||
|
||||
@@ -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' },
|
||||
}
|
||||
|
||||
|
||||
@@ -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' },
|
||||
]
|
||||
|
||||
|
||||
@@ -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)',
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user