arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix(chat-ui): replace remaining var(--chat-*) in layouts.tsx

Browse source 
Replace leftover chatcn CSS variables in ticket status/priority
configs and filter tabs with xtablo design tokens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-04-12 14:14:39 +02:00
parent ca8492d37e
commit 919001fd15
No known key found for this signature in database
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/chat-ui/src/components/layouts.tsx
View file

@ -388,7 +388,7 @@ function ChatBoard({
onClick={() => onSelectTopic(t.id)}
className="flex w-full items-start gap-3 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent"
>
{t.isPinned && <Pin className="mt-0.5 size-3.5 shrink-0 text-[var(--chat-orange)]" />}
{t.isPinned && <Pin className="mt-0.5 size-3.5 shrink-0 text-orange-500" />}
<div className="min-w-0 flex-1">
<p className="text-[14px] font-semibold text-foreground">{t.title}</p>
<div className="mt-0.5 flex items-center gap-2 text-[12px] text-muted-foreground">
@ -496,16 +496,16 @@ interface SupportTicketsProps {
// ─── Internal helpers ────────────────────────────────────────────────────────
const ticketStatusConfig: Record<TicketStatus, { icon: typeof Circle; label: string; color: string }> = {
open: { icon: Circle, label: "Open", color: "var(--chat-orange)" },
"in-progress": { icon: Clock, label: "In Progress", color: "var(--chat-accent)" },
resolved: { icon: CheckCircle2, label: "Resolved", color: "var(--chat-green)" },
open: { icon: Circle, label: "Open", color: "var(--color-chart-4)" },
"in-progress": { icon: Clock, label: "In Progress", color: "var(--color-primary)" },
resolved: { icon: CheckCircle2, label: "Resolved", color: "#22c55e" },
}
const ticketPriorityColors: Record<TicketPriority, string> = {
urgent: "var(--chat-red)",
high: "var(--chat-orange)",
medium: "var(--chat-accent)",
low: "var(--chat-text-tertiary)",
urgent: "var(--color-destructive)",
high: "var(--color-chart-4)",
medium: "var(--color-primary)",
low: "var(--color-muted-foreground)",
}
function TicketStatusBadge({ status }: { status: TicketStatus }) {
@ -562,8 +562,8 @@ function TicketFilterTabs({
onClick={() => onChange(t.key)}
className="rounded-md px-2 py-1 text-[10px] font-medium transition-colors"
style={{
background: value === t.key ? "var(--chat-accent-soft)" : "transparent",
color: value === t.key ? "var(--chat-accent)" : "var(--chat-text-tertiary)",
background: value === t.key ? "var(--color-accent)" : "transparent",
color: value === t.key ? "var(--color-primary)" : "var(--color-muted-foreground)",
}}
>
{t.label}