feat: request card color based on priority

clients/web/src/components/requests/RequestCard.tsx

@@ -1,23 +1,21 @@
 import type { ReactNode } from "react";
-import type { RequestStatus } from "@shared";
 import { cn } from "@/lib/utils";
 
 type RequestCardProps = {
-  status: RequestStatus;
+  priority: string;
   children: ReactNode;
   className?: string;
   onClick?: () => void;
 };
 
-const accentClass: Record<RequestStatus, string> = {
-  pending: "bg-request-pending",
-  "in progress": "bg-request-assigned",
-  completed: "bg-request-completed",
-  archived: "bg-bg-disabled",
+const accentClass: Record<string, string> = {
+  high: "bg-priority-high",
+  medium: "bg-priority-medium",
+  low: "bg-priority-low",
 };
 
 export function RequestCard({
-  status,
+  priority,
   children,
   className,
   onClick,
@@ -34,7 +32,7 @@ export function RequestCard({
       <div
         className={cn(
           "absolute left-0 top-0 bottom-0 w-2 rounded-l-xl",
-          accentClass[status],
+          accentClass[priority] ?? "bg-priority-low",
         )}
       />
       {children}

clients/web/src/components/requests/RequestCardItem.tsx

@@ -83,12 +83,12 @@ export function RequestCardItem({ request, onClick }: RequestCardItemProps) {
           }}
         >
           <RequestCard
-            status={status}
+            priority={request.priority}
             className="w-full"
             onClick={isDragging ? undefined : onClick}
           >
             <RequestCardTimestamp
-              status={status}
+              priority={request.priority}
               time={formatRequestTime(request.created_at)}
             />
 

clients/web/src/components/requests/RequestCardTimestamp.tsx

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 import { Clock } from "lucide-react";
-import type { RequestStatus } from "@shared";
+import type { RequestPriority } from "@shared";
 import { cn } from "@/lib/utils";
 
 type RequestCardTimestampProps = {
-  status: RequestStatus;
+  priority: RequestPriority;
   time: string;
   className?: string;
 };
@@ -13,26 +13,25 @@ const timestampVariants = cva(
   "flex items-center gap-2 self-start rounded-sm px-2 py-1 text-xs font-medium",
   {
     variants: {
-      status: {
-        pending: "bg-request-pending-secondary text-request-pending",
-        "in progress": "bg-request-assigned-secondary text-request-assigned",
-        completed: "bg-request-completed-secondary text-request-completed",
-        archived: "bg-bg-disabled text-text-subtle",
+      priority: {
+        high: "bg-priority-high-secondary text-priority-high",
+        medium: "bg-priority-medium-secondary text-priority-medium",
+        low: "bg-priority-low-secondary text-priority-low",
       },
     },
     defaultVariants: {
-      status: "pending",
+      priority: "low",
     },
   },
 );
 
 export function RequestCardTimestamp({
-  status,
+  priority,
   time,
   className,
 }: RequestCardTimestampProps) {
   return (
-    <div className={cn(timestampVariants({ status }), className)}>
+    <div className={cn(timestampVariants({ priority }), className)}>
       <Clock className="size-3 stroke-[2.5px]" />
       {time}
     </div>

clients/web/src/routes/_protected/home.tsx

@@ -138,11 +138,11 @@ function KanbanColumnData({
 function DragOverlayCard({ request }: { request: RequestFeedItem }) {
   return (
     <RequestCard
-      status={request.status}
+      priority={request.priority}
       className="w-[22rem] shadow-xl rotate-1 opacity-95"
     >
       <RequestCardTimestamp
-        status={request.status}
+        priority={request.priority}
         time={formatRequestTime(request.created_at)}
       />
       <div className="mt-3">

clients/web/src/styles.css

@@ -36,6 +36,12 @@
   --color-danger-hover: #c90505;
   --color-danger-hover-on: #ffffff;
   --color-high-priority: #a21313;
+  --color-priority-high: #a21313;
+  --color-priority-high-secondary: #ffeded;
+  --color-priority-medium: #ff8c3f;
+  --color-priority-medium-secondary: #fff3ed;
+  --color-priority-low: #2f61ce;
+  --color-priority-low-secondary: #e9f2ff;
   --color-info-accent: #e9f2ff;
   --color-info-container: #dfecff;
   --color-info-stroke: #aac7ff;