Mk
/
supersam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(orders): status summary cards with borders + larger text

This commit is contained in:
root 2026-08-06 07:51:32 +00:00
parent 4459d03932
commit 3a402f7f74
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/orders/OrderHistoryTimeline.jsx
View File

@ -353,20 +353,33 @@ const StatusSummary = ({ order }) => {
if (items.length === 0) return null; if (items.length === 0) return null;
const toneStyles = {
ok: "border-[rgba(18,128,92,0.25)] bg-[var(--color-accent-soft)]",
warning: "border-[rgba(245,158,11,0.3)] bg-[rgba(245,158,11,0.06)]",
danger: "border-[rgba(239,68,68,0.3)] bg-[rgba(239,68,68,0.06)]",
muted: "border-[var(--color-border)] bg-[var(--color-surface)]",
};
const textStyles = {
ok: "text-[var(--color-accent)]",
warning: "text-[var(--color-warning)]",
danger: "text-[var(--color-danger)]",
muted: "text-[var(--color-text-muted)]",
};
return ( return (
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
{items.map((item, i) => ( {items.map((item, i) => (
<div key={i} className="flex items-center gap-2 rounded-lg bg-[var(--color-surface)] px-3 py-1.5"> <div
<span className="text-sm flex-shrink-0">{item.icon}</span> key={i}
<span className="text-xs text-[var(--color-text-muted)] flex-shrink-0">{item.label}:</span> className={`flex items-center gap-2.5 rounded-xl border px-3 py-2.5 ${toneStyles[item.tone] || toneStyles.muted}`}
<span className={`text-xs font-medium truncate ${ >
item.tone === "ok" ? "text-[var(--color-accent)]" <span className="text-base flex-shrink-0">{item.icon}</span>
: item.tone === "warning" ? "text-[var(--color-warning)]" <div className="min-w-0 flex-1">
: item.tone === "danger" ? "text-[var(--color-danger)]" <p className="text-[11px] font-medium text-[var(--color-text-muted)] leading-tight">{item.label}</p>
: "text-[var(--color-text-muted)]" <p className={`text-sm font-semibold truncate ${textStyles[item.tone] || textStyles.muted}`}>
}`}> {item.value}
{item.value} </p>
</span> </div>
</div> </div>
))} ))}
</div> </div>