web-ui/src/app/approvals/page.tsx

@@ -26,6 +26,15 @@ const SEVERITY_DOT: Record<ApprovalSeverity, string> = {
   ok: "bg-success",
 };
 
+// #2 refresh — a thin severity rail on the card's inline-start edge replaces the
+// old small count-pill; the big count number stays. high=danger…ok=success.
+const SEVERITY_RAIL: Record<ApprovalSeverity, string> = {
+  high: "border-s-danger",
+  medium: "border-s-warn",
+  low: "border-s-info",
+  ok: "border-s-success",
+};
+
 function formatDate(iso?: string | null): string {
   if (!iso) return "";
   try {
@@ -42,7 +51,11 @@ function formatDate(iso?: string | null): string {
 function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
   const cleared = cat.count === 0;
   return (
-    <Card className="bg-surface border-rule shadow-sm flex flex-col overflow-hidden">
+    <Card
+      className={`flex flex-col overflow-hidden rounded-[10px] border-rule border-s-[3px] ${SEVERITY_RAIL[cat.severity]} ${
+        cleared ? "bg-parchment shadow-none" : "bg-surface shadow-sm"
+      }`}
+    >
       <CardContent className="p-0 flex flex-col grow">
         {/* top row — severity dot · title+age · big count number (mockup 01) */}
         <div className="flex items-start gap-3 px-5 pt-5 pb-2">
@@ -54,8 +67,8 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
             <h2 className="text-navy text-base font-semibold mb-0 leading-snug">{cat.label}</h2>
             <div className="text-[0.78rem] text-ink-muted mt-0.5">
               {cleared ? (
-                <span className="inline-block rounded-full bg-success-bg text-success text-[0.72rem] px-2.5 py-0.5 font-medium">
-                  תור נקי
+                <span className="inline-block rounded-full bg-success-bg text-success text-[0.72rem] px-2.5 py-0.5 font-semibold">
+                  ✓ תור נקי
                 </span>
               ) : cat.oldest_at ? (
                 <>הוותיק ביותר — {formatDate(cat.oldest_at)}</>
@@ -65,7 +78,9 @@ function ApprovalCard({ cat }: { cat: ApprovalCategory }) {
             </div>
           </div>
           <span
-            className="text-3xl font-bold text-navy leading-none tabular-nums shrink-0"
+            className={`text-3xl font-bold leading-none tabular-nums shrink-0 ${
+              cleared ? "text-ink-muted" : "text-navy"
+            }`}
             aria-label={`${cat.count} פריטים ממתינים`}
           >
             {cat.count}