diff --git a/frontend/src/assets/brand/icon.svg b/frontend/src/assets/brand/icon.svg index 29db5ad9..8091157d 100644 --- a/frontend/src/assets/brand/icon.svg +++ b/frontend/src/assets/brand/icon.svg @@ -1,8 +1,8 @@ - - + + diff --git a/frontend/src/assets/brand/logo-horizontal.svg b/frontend/src/assets/brand/logo-horizontal.svg index 236e4a7d..8b298f0f 100644 --- a/frontend/src/assets/brand/logo-horizontal.svg +++ b/frontend/src/assets/brand/logo-horizontal.svg @@ -1,8 +1,8 @@ - - + + diff --git a/frontend/src/assets/brand/logo-with-tagline.svg b/frontend/src/assets/brand/logo-with-tagline.svg index 7b043bd6..cccbee06 100644 --- a/frontend/src/assets/brand/logo-with-tagline.svg +++ b/frontend/src/assets/brand/logo-with-tagline.svg @@ -1,8 +1,8 @@ - - + + diff --git a/frontend/src/components/account/NotificationSettings.tsx b/frontend/src/components/account/NotificationSettings.tsx index 8cb492f1..6ef79682 100644 --- a/frontend/src/components/account/NotificationSettings.tsx +++ b/frontend/src/components/account/NotificationSettings.tsx @@ -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]" /> {eventLabel} diff --git a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx index 0edca63f..19923775 100644 --- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx +++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx @@ -16,7 +16,7 @@ import type { FlowAnalyticsResponse, AnalyticsPeriod } from '@/types' const CHART_COLORS = { resolved: '#34d399', escalated: '#f87171', - workaround: '#eab308', + workaround: '#fbbf24', unresolved: '#94a3b8', } diff --git a/frontend/src/components/analytics/PsaMetricsPanel.tsx b/frontend/src/components/analytics/PsaMetricsPanel.tsx index 5347d223..c2b5eb1f 100644 --- a/frontend/src/components/analytics/PsaMetricsPanel.tsx +++ b/frontend/src/components/analytics/PsaMetricsPanel.tsx @@ -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} /> - - + + diff --git a/frontend/src/components/common/BrandLogo.tsx b/frontend/src/components/common/BrandLogo.tsx index 52ab9552..f6cadc95 100644 --- a/frontend/src/components/common/BrandLogo.tsx +++ b/frontend/src/components/common/BrandLogo.tsx @@ -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)', }} > {/* Root node */} - + {/* Branches */} - - + + {/* Left child */} - + {/* Right child */} - + {/* Leaf branches */} - - - - + + + + ) } @@ -29,12 +29,12 @@ export function AnalyticsIllustration() { return ( {/* Bars */} - - - - + + + + {/* Baseline */} - + ) } @@ -43,17 +43,17 @@ export function SessionIllustration() { return ( {/* Card 1 */} - - - + + + {/* Card 2 */} - - - + + + {/* Card 3 */} - - - + + + ) } @@ -62,19 +62,19 @@ export function IntegrationIllustration() { return ( {/* Left box */} - - - + + + {/* Right box */} - - - + + + {/* Dashed arrows */} - - + + {/* Arrow tips */} - - + + ) } @@ -83,14 +83,14 @@ export function StepLibraryIllustration() { return ( {/* List items */} - - - - - - - - + + + + + + + + ) } @@ -99,16 +99,16 @@ export function ScriptIllustration() { return ( {/* Terminal window */} - + {/* Title bar */} - - - + + + {/* Code lines */} - - - - + + + + ) } @@ -117,14 +117,14 @@ export function ShareIllustration() { return ( {/* Center node */} - + {/* Top-right node */} - + {/* Bottom-right node */} - + {/* Connecting lines */} - - + + ) } diff --git a/frontend/src/components/dashboard/FiltersBar.tsx b/frontend/src/components/dashboard/FiltersBar.tsx index 3b1d664e..5bde93a5 100644 --- a/frontend/src/components/dashboard/FiltersBar.tsx +++ b/frontend/src/components/dashboard/FiltersBar.tsx @@ -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' )} > diff --git a/frontend/src/components/dashboard/GreetingStatStrip.tsx b/frontend/src/components/dashboard/GreetingStatStrip.tsx index f3c88fe7..901c700f 100644 --- a/frontend/src/components/dashboard/GreetingStatStrip.tsx +++ b/frontend/src/components/dashboard/GreetingStatStrip.tsx @@ -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' }, ] diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx index 93258740..7a83286b 100644 --- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx +++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx @@ -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 ( diff --git a/frontend/src/components/dashboard/PerformanceCards.tsx b/frontend/src/components/dashboard/PerformanceCards.tsx index 60816ba5..6ae67aa6 100644 --- a/frontend/src/components/dashboard/PerformanceCards.tsx +++ b/frontend/src/components/dashboard/PerformanceCards.tsx @@ -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', }, ] diff --git a/frontend/src/components/dashboard/QuickActions.tsx b/frontend/src/components/dashboard/QuickActions.tsx index a9e96588..1dfd30f8 100644 --- a/frontend/src/components/dashboard/QuickActions.tsx +++ b/frontend/src/components/dashboard/QuickActions.tsx @@ -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() { diff --git a/frontend/src/components/dashboard/RecentActivity.tsx b/frontend/src/components/dashboard/RecentActivity.tsx index 023d3b73..4a6f235c 100644 --- a/frontend/src/components/dashboard/RecentActivity.tsx +++ b/frontend/src/components/dashboard/RecentActivity.tsx @@ -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' }, ] diff --git a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx index 26b21a8c..080353a7 100644 --- a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx +++ b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx @@ -18,7 +18,7 @@ function timeAgo(dateStr: string): string { const STATUS_CONFIG: Record = { resolved: { icon: CheckCircle, color: '#34d399' }, - escalated: { icon: AlertTriangle, color: '#eab308' }, + escalated: { icon: AlertTriangle, color: '#fbbf24' }, abandoned: { icon: XCircle, color: '#8891a0' }, } diff --git a/frontend/src/components/dashboard/StartSessionInput.tsx b/frontend/src/components/dashboard/StartSessionInput.tsx index e710cfa7..4b32c2ca 100644 --- a/frontend/src/components/dashboard/StartSessionInput.tsx +++ b/frontend/src/components/dashboard/StartSessionInput.tsx @@ -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]" > - + {label} ))} diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx index bbfa7ccf..a739aaa3 100644 --- a/frontend/src/components/dashboard/TeamSummary.tsx +++ b/frontend/src/components/dashboard/TeamSummary.tsx @@ -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' }, ] diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx index c50bcdb1..96f6caeb 100644 --- a/frontend/src/components/dashboard/WeeklyCalendar.tsx +++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx @@ -53,7 +53,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
@@ -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)', }} > diff --git a/frontend/src/components/layout/CommandPalette.tsx b/frontend/src/components/layout/CommandPalette.tsx index 03fe9f25..a83f8e28 100644 --- a/frontend/src/components/layout/CommandPalette.tsx +++ b/frontend/src/components/layout/CommandPalette.tsx @@ -355,7 +355,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
{/* Section label */}
- + {group.label}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index 1a1a7e7a..c1199dff 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -450,7 +450,7 @@ export function Sidebar() { > {/* Drawer header */}
-

+

{activeFlyoutGroup.label}

diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx index 49c477bf..3555b7db 100644 --- a/frontend/src/components/layout/TopBar.tsx +++ b/frontend/src/components/layout/TopBar.tsx @@ -126,7 +126,7 @@ export function TopBar() {

- Hex color code for the primary accent color (e.g. #ea580c). + Hex color code for the primary accent color (e.g. #3b82f6).

diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css index 266f4ca8..c2bdc99d 100644 --- a/frontend/src/styles/landing.css +++ b/frontend/src/styles/landing.css @@ -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); }