34b0f2ade9
- Replace all rgba(6,182,212,...) cyan focus borders and accents with rgba(249,115,22,...) ember orange across 21+ component files - Remove all var(--glass-border) references (undefined variable) with var(--color-border-default) across 24 files - Remove deprecated blur orbs and glass-morphism effects from SurveyPage, SurveyThankYouPage, and LoginPage - Migrate landing.css from hardcoded hex to CSS custom properties (~97 replacements for single-source theming) - Fix off-palette grays in FlowPilotAnalyticsPage chart styling (#8891a0 → #848b9b, #18191f → var(--color-bg-card)) - Update stale comments: "cyan brand" → "accent brand" in GlowEdge, "gradient cyan square" → "gradient orange square" in BrandLogo - Rename glow-cyan SVG filter ID to glow-accent - Fix category color comment: "cyan" → "deep orange" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
import { GitBranch, Play, CheckCircle, FileText, Edit } from 'lucide-react'
|
|
|
|
interface ActivityItem {
|
|
id: string
|
|
icon: LucideIcon
|
|
iconColor: string
|
|
iconBg: string
|
|
description: string
|
|
timestamp: string
|
|
}
|
|
|
|
interface RecentActivityProps {
|
|
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: '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' },
|
|
]
|
|
|
|
export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
|
|
return (
|
|
<div className="card-flat">
|
|
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
|
|
<h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
|
|
</div>
|
|
<div>
|
|
{activities.map((item, i) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex items-start gap-3 px-5 py-3 fade-in"
|
|
style={{
|
|
animationDelay: `${750 + i * 40}ms`,
|
|
borderBottom: i < activities.length - 1 ? '1px solid var(--color-border-default)' : undefined,
|
|
}}
|
|
>
|
|
<span
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
|
|
style={{ background: item.iconBg }}
|
|
>
|
|
<item.icon size={16} style={{ color: item.iconColor }} />
|
|
</span>
|
|
<div className="flex-1 min-w-0 pt-0.5">
|
|
<p className="text-sm text-foreground">{item.description}</p>
|
|
</div>
|
|
<span className="shrink-0 font-sans text-xs text-[0.625rem] text-muted-foreground pt-1">
|
|
{item.timestamp}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|