merge: integrate fix/color-audit-cleanup into dashboard redesign

Resolve focus ring conflict in StartSessionInput — keep explicit
rgba values over Tailwind primary/20 for consistency with design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-27 06:09:33 +00:00
51 changed files with 209 additions and 265 deletions

View File

@@ -23,7 +23,7 @@ export function KnowledgeBaseCards() {
<div className="card-flat">
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
<button
@@ -33,7 +33,7 @@ export function KnowledgeBaseCards() {
Browse <ArrowRight size={10} />
</button>
</div>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
{items.map((item) => (
<button
key={item.label}

View File

@@ -18,7 +18,7 @@ interface OpenSessionsProps {
export function OpenSessions({ sessions }: OpenSessionsProps) {
return (
<div className="card-flat flex flex-col h-full">
<div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
View All
@@ -35,7 +35,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
key={session.id}
className="flex items-center gap-3 px-5 py-3"
style={{
borderBottom: i < sessions.length - 1 ? '1px solid var(--glass-border)' : undefined,
borderBottom: i < sessions.length - 1 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />

View File

@@ -33,7 +33,7 @@ export function PendingEscalations() {
>
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<div className="flex items-center gap-2">
<AlertTriangle size={14} className="text-amber-400" />
@@ -58,7 +58,7 @@ export function PendingEscalations() {
className="flex items-center gap-3 px-5 py-3"
style={{
borderBottom: i < Math.min(escalations.length, 3) - 1
? '1px solid var(--glass-border)'
? '1px solid var(--color-border-default)'
: undefined,
}}
>

View File

@@ -13,7 +13,7 @@ export function QuickActions() {
return (
<div className="card-flat flex flex-col h-full">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
</div>
<div className="flex-1 flex flex-col justify-between p-3 gap-2">

View File

@@ -25,7 +25,7 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
return (
<div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<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>
@@ -35,7 +35,7 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
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(--glass-border)' : undefined,
borderBottom: i < activities.length - 1 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<span

View File

@@ -22,7 +22,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
return (
<div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
View All

View File

@@ -278,7 +278,7 @@ export function StartSessionInput() {
onChange={(e) => setLogContent(e.target.value)}
placeholder="Paste event viewer logs, error messages, PowerShell output..."
rows={4}
className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
/>
</div>
)}

View File

@@ -28,7 +28,7 @@ export function TeamSummary() {
<div className="card-flat">
<div
className="flex items-center justify-between px-5 py-3"
style={{ borderBottom: '1px solid var(--glass-border)' }}
style={{ borderBottom: '1px solid var(--color-border-default)' }}
>
<h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
<button
@@ -38,7 +38,7 @@ export function TeamSummary() {
Manage <ArrowRight size={10} />
</button>
</div>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
{items.map((item) => (
<button
key={item.label}

View File

@@ -35,7 +35,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
return (
<div className="card-flat flex flex-col h-full">
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<Calendar size={16} className="text-muted-foreground" />
<h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
</div>
@@ -47,13 +47,13 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
key={day.dateStr}
className="flex-1 flex flex-col min-h-0"
style={{
borderRight: i < 4 ? '1px solid var(--glass-border)' : undefined,
borderRight: i < 4 ? '1px solid var(--color-border-default)' : undefined,
}}
>
<div
className="px-2 py-2 text-center"
style={{
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--glass-border)',
borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--color-border-default)',
}}
>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-orange-400' : 'text-muted-foreground'}`}>