From 611cf195f984d7804bdec6c538ab5a26c2f8ade0 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 3 Feb 2026 17:39:52 -0500
Subject: [PATCH] refactor(OrderCard): use design system components and CSS
 variables

Component Integration:
- Replace custom avatar div with Avatar component (name prop for initials)
- Badge component already in use for status display
- Card component already wrapping the content

Theme Support (CSS Variables):
- ring-primary for selected state (was ring-blue-500/400)
- text-foreground for primary text (was text-gray-900/white)
- text-muted-foreground for secondary text (was text-gray-500/400)
- bg-muted for service tags (was bg-gray-100/800)
- border-border for dividers (was border-gray-100/800)
- bg-destructive/10 + text-destructive for rejection (was bg-red-50/900)
- text-primary for links (was text-blue-600/400)
- bg-primary for accept button (was bg-blue-600)

Also adds --color-primary to @theme block in base.css to fix
Tailwind v4 utility generation for text-primary, bg-primary, etc.
---
 src/components/OrderCard/OrderCard.tsx | 41 +++++++++++++-------------
 src/styles/base.css                    |  3 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/OrderCard/OrderCard.tsx b/src/components/OrderCard/OrderCard.tsx
index 90b562b2..c8a1d458 100644
--- a/src/components/OrderCard/OrderCard.tsx
+++ b/src/components/OrderCard/OrderCard.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { Avatar } from '../Avatar/Avatar';
 import { Badge } from '../Badge/Badge';
 import { Card } from '../Card/Card';
 
@@ -172,7 +173,7 @@ export function OrderCard({
 
   return (
     <Card
-      className={`transition-all duration-200 ${onClick ? 'cursor-pointer hover:shadow-md' : ''} ${selected ? 'ring-2 ring-blue-500 dark:ring-blue-400' : ''} ${className} `.trim()}
+      className={`transition-all duration-200 ${onClick ? 'cursor-pointer hover:shadow-md' : ''} ${selected ? 'ring-primary ring-2' : ''} ${className} `.trim()}
       onClick={onClick ? handleCardClick : undefined}
     >
       <div className="p-4">
@@ -180,13 +181,13 @@ export function OrderCard({
         <div className="mb-3 flex items-start justify-between gap-4">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
-              <span className="font-semibold text-gray-900 dark:text-white">
+              <span className="text-foreground font-semibold">
                 #{orderNumber}
               </span>
               <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
             </div>
             <p
-              className="mt-1 text-sm text-gray-500 dark:text-gray-400"
+              className="text-muted-foreground mt-1 text-sm"
               title={formatDate(createdAt)}
             >
               {formatRelativeTime(createdAt)}
@@ -194,7 +195,7 @@ export function OrderCard({
           </div>
           {totalAmount !== undefined && (
             <div className="flex-shrink-0 text-right">
-              <p className="font-semibold text-gray-900 dark:text-white">
+              <p className="text-foreground font-semibold">
                 {formatCurrency(totalAmount, currency)}
               </p>
             </div>
@@ -204,18 +205,16 @@ export function OrderCard({
         {/* Employee Info */}
         <div className="mb-3">
           <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-              <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
-                {employee.firstName[0]}
-                {employee.lastName[0]}
-              </span>
-            </div>
+            <Avatar
+              name={`${employee.firstName} ${employee.lastName}`}
+              size="sm"
+            />
             <div className="min-w-0">
-              <p className="truncate font-medium text-gray-900 dark:text-white">
+              <p className="text-foreground truncate font-medium">
                 {employee.firstName} {employee.lastName}
               </p>
               {employer && (
-                <p className="truncate text-sm text-gray-500 dark:text-gray-400">
+                <p className="text-muted-foreground truncate text-sm">
                   {employer.name}
                 </p>
               )}
@@ -225,20 +224,20 @@ export function OrderCard({
 
         {/* Services */}
         <div className="mb-3">
-          <p className="mb-1 text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400">
+          <p className="text-muted-foreground mb-1 text-xs font-medium tracking-wider uppercase">
             Services ({services.length})
           </p>
           <div className="flex flex-wrap gap-1">
             {services.slice(0, 3).map((service) => (
               <span
                 key={service.id}
-                className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                className="bg-muted text-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
               >
                 {service.name}
               </span>
             ))}
             {services.length > 3 && (
-              <span className="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+              <span className="bg-muted text-muted-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium">
                 +{services.length - 3} more
               </span>
             )}
@@ -247,7 +246,7 @@ export function OrderCard({
 
         {/* Scheduled Date */}
         {scheduledDate && (
-          <div className="mb-3 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          <div className="text-muted-foreground mb-3 flex items-center gap-2 text-sm">
             <svg
               className="h-4 w-4"
               fill="none"
@@ -267,18 +266,18 @@ export function OrderCard({
 
         {/* Rejection Reason */}
         {status === 'rejected' && rejectionReason && (
-          <div className="mb-3 rounded bg-red-50 p-2 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300">
+          <div className="bg-destructive/10 text-destructive mb-3 rounded p-2 text-sm">
             <span className="font-medium">Reason:</span> {rejectionReason}
           </div>
         )}
 
         {/* Actions */}
-        <div className="flex items-center justify-between border-t border-gray-100 pt-3 dark:border-gray-800">
+        <div className="border-border flex items-center justify-between border-t pt-3">
           {onView && (
             <button
               type="button"
               onClick={handleViewClick}
-              className="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+              className="text-primary hover:text-primary/80 text-sm font-medium"
             >
               View Details
             </button>
@@ -289,7 +288,7 @@ export function OrderCard({
                 <button
                   type="button"
                   onClick={handleRejectClick}
-                  className="rounded-md px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+                  className="text-destructive hover:bg-destructive/10 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
                 >
                   Reject
                 </button>
@@ -298,7 +297,7 @@ export function OrderCard({
                 <button
                   type="button"
                   onClick={handleAcceptClick}
-                  className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+                  className="bg-primary hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium text-white transition-colors"
                 >
                   Accept
                 </button>
diff --git a/src/styles/base.css b/src/styles/base.css
index 7f75e3f9..553391b3 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -11,7 +11,8 @@
 
 /* BlueHive brand colors - exposed as Tailwind utilities */
 @theme {
-  /* Primary Color Scale - Reference CSS custom properties for dynamic theming */
+  /* Primary Color - Default + Scale */
+  --color-primary: var(--mieweb-primary-500);
   --color-primary-50: var(--mieweb-primary-50);
   --color-primary-100: var(--mieweb-primary-100);
   --color-primary-200: var(--mieweb-primary-200);