Restyle cards and skeletons to match

dashboard/src/components/dashboard/MiniEventFeed.jsx

@@ -36,33 +36,45 @@ const METRIC_IDS = {
 const EVENT_TYPES = {
   [METRIC_IDS.PLACED_ORDER]: {
     label: "Order Placed",
-    color: "bg-green-500 dark:bg-green-600",
-    textColor: "text-green-600 dark:text-green-400",
+    color: "bg-green-300",
+    textColor: "text-green-100",
+    iconColor: "text-green-900",
+    gradient: "from-green-900 to-green-800",
   },
   [METRIC_IDS.SHIPPED_ORDER]: {
     label: "Order Shipped",
-    color: "bg-blue-500 dark:bg-blue-600",
-    textColor: "text-blue-600 dark:text-blue-400",
+    color: "bg-blue-300",
+    textColor: "text-blue-100",
+    iconColor: "text-blue-900",
+    gradient: "from-blue-900 to-blue-800",
   },
   [METRIC_IDS.ACCOUNT_CREATED]: {
     label: "New Account",
-    color: "bg-purple-500 dark:bg-purple-600",
-    textColor: "text-purple-600 dark:text-purple-400",
+    color: "bg-purple-300",
+    textColor: "text-purple-100",
+    iconColor: "text-purple-900",
+    gradient: "from-purple-900 to-purple-800",
   },
   [METRIC_IDS.CANCELED_ORDER]: {
     label: "Order Canceled",
-    color: "bg-red-500 dark:bg-red-600",
-    textColor: "text-red-600 dark:text-red-400",
+    color: "bg-red-300",
+    textColor: "text-red-100",
+    iconColor: "text-red-900",
+    gradient: "from-red-900 to-red-800",
   },
   [METRIC_IDS.PAYMENT_REFUNDED]: {
     label: "Payment Refunded",
-    color: "bg-orange-500 dark:bg-orange-600",
-    textColor: "text-orange-600 dark:text-orange-400",
+    color: "bg-orange-300",
+    textColor: "text-orange-100",
+    iconColor: "text-orange-900",
+    gradient: "from-orange-900 to-orange-800",
   },
   [METRIC_IDS.NEW_BLOG_POST]: {
     label: "New Blog Post",
-    color: "bg-indigo-500 dark:bg-indigo-600",
-    textColor: "text-indigo-600 dark:text-indigo-400",
+    color: "bg-indigo-300",
+    textColor: "text-indigo-100",
+    iconColor: "text-indigo-900",
+    gradient: "from-indigo-900 to-indigo-800",
   },
 };
 
@@ -77,22 +89,25 @@ const EVENT_ICONS = {
 
 // Loading State Component
 const LoadingState = () => (
-  <div className="flex gap-4 px-4">
-    {[...Array(4)].map((_, i) => (
-      <Card key={i} className="w-[280px] shrink-0">
-        <CardHeader className="p-3 pb-2">
-          <div className="flex items-center gap-3">
-            <Skeleton className="h-10 w-10 rounded-full bg-muted" />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-24 bg-muted" />
-              <Skeleton className="h-3 w-16 bg-muted" />
+  <div className="flex gap-3 px-4">
+    {[...Array(6)].map((_, i) => (
+      <Card key={i} className="w-[210px] h-[125px] shrink-0 bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-sm">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 px-3 py-2 pb-0">
+          <div className="flex items-baseline justify-between w-full pr-1">
+            <Skeleton className="h-4 w-20 bg-gray-700" />
+            <Skeleton className="h-3 w-14 bg-gray-700" />
           </div>
+          <div className="relative p-2">
+            <div className="absolute inset-0 rounded-full bg-gray-300" />
+            <Skeleton className="h-4 w-4 bg-gray-700 relative rounded-full" />
           </div>
         </CardHeader>
-        <CardContent className="p-3 pt-2">
+        <CardContent className="p-3 pt-1">
           <div className="space-y-2">
-            <Skeleton className="h-4 w-full bg-muted" />
-            <Skeleton className="h-4 w-3/4 bg-muted" />
+            <Skeleton className="h-7 w-36 bg-gray-700" />
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-28 bg-gray-700" />
+            </div>
           </div>
         </CardContent>
       </Card>
@@ -102,16 +117,13 @@ const LoadingState = () => (
 
 // Empty State Component
 const EmptyState = () => (
-  <Card className="w-full">
-    <CardContent className="flex flex-col items-center justify-center py-6 px-4 text-center">
-      <div className="bg-gray-100 dark:bg-gray-800 rounded-full p-3 mb-4">
-        <Activity className="h-6 w-6 text-muted-foreground" />
+  <Card className="w-[210px] h-[125px] bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-sm">
+    <CardContent className="flex flex-col items-center justify-center h-full text-center p-4">
+      <div className="bg-gray-800 rounded-full p-2 mb-2">
+        <Activity className="h-4 w-4 text-gray-400" />
       </div>
-      <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-        No activity yet
-      </h3>
-      <p className="text-sm text-muted-foreground max-w-sm">
-        Recent activity will appear here as it happens
+      <p className="text-sm text-gray-400 font-medium">
+        No recent activity
       </p>
     </CardContent>
   </Card>
@@ -124,52 +136,33 @@ const EventCard = ({ event }) => {
   const Icon = EVENT_ICONS[event.metric_id] || Package;
   const details = event.event_properties || {};
 
-  const getBgGradient = (type) => {
-    switch (type) {
-      case METRIC_IDS.PLACED_ORDER:
-        return 'from-green-900 to-green-800';
-      case METRIC_IDS.SHIPPED_ORDER:
-        return 'from-blue-900 to-blue-800';
-      case METRIC_IDS.ACCOUNT_CREATED:
-        return 'from-purple-900 to-purple-800';
-      case METRIC_IDS.CANCELED_ORDER:
-        return 'from-red-900 to-red-800';
-      case METRIC_IDS.PAYMENT_REFUNDED:
-        return 'from-orange-900 to-orange-800';
-      case METRIC_IDS.NEW_BLOG_POST:
-        return 'from-indigo-900 to-indigo-800';
-      default:
-        return 'from-gray-900 to-gray-800';
-    }
-  };
-
   return (
     <EventDialog event={event}>
-      <Card className={`w-[210px] shrink-0 hover:brightness-110 cursor-pointer transition-colors h-[125px] bg-gradient-to-br ${getBgGradient(event.metric_id)} backdrop-blur-sm`}>
+      <Card className={`w-[210px] shrink-0 hover:brightness-110 cursor-pointer transition-colors h-[125px] bg-gradient-to-br ${eventType.gradient} backdrop-blur-sm`}>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 px-3 py-2 pb-0">
           <div className="flex items-baseline justify-between w-full pr-1">
-            <CardTitle className="text-sm font-bold text-gray-100">
+            <CardTitle className={`text-sm font-bold ${eventType.textColor}`}>
               {eventType.label}
             </CardTitle>
             {event.datetime && (
-              <CardDescription className="text-xs text-gray-300">
+              <CardDescription className={`text-xs ${eventType.textColor} opacity-80`}>
                 {format(new Date(event.datetime), "h:mm a")}
               </CardDescription>
             )}
           </div>
           <div className="relative p-2">
-            <div className={`absolute inset-0 rounded-full ${eventType.color} bg-opacity-20`} />
-            <Icon className={`h-4 w-4 ${eventType.textColor} relative`} />
+            <div className={`absolute inset-0 rounded-full ${eventType.color}`} />
+            <Icon className={`h-4 w-4 ${eventType.iconColor} relative`} />
           </div>
         </CardHeader>
         <CardContent className="p-3 pt-1">
           {event.metric_id === METRIC_IDS.PLACED_ORDER && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
-                <div className="text-sm font-semibold text-gray-300 truncate">
+                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                   #{details.OrderId} • {formatCurrency(details.TotalAmount)}
                 </div>
               </div>
@@ -246,24 +239,23 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
-                <div className="text-sm font-semibold text-gray-300 truncate">
+                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                   #{details.OrderId} • {formatShipMethodSimple(details.ShipMethod)}
                 </div>
               </div>
-            
             </>
           )}
 
           {event.metric_id === METRIC_IDS.ACCOUNT_CREATED && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl font-bold ${eventType.textColor}`}>
                 {details.FirstName} {details.LastName}
               </div>
-              <div className="text-sm font-semibold text-gray-300 truncate mt-1">
+              <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate mt-1`}>
                 {details.EmailAddress}
               </div>
             </>
@@ -271,15 +263,15 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.CANCELED_ORDER && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
-                <div className="text-sm font-semibold text-gray-300 truncate">
+                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                   #{details.OrderId} • {formatCurrency(details.TotalAmount)}
                 </div>
               </div>
-              <div className="text-xs text-red-300 mt-1.5 truncate">
+              <div className={`text-xs ${eventType.textColor} opacity-80 mt-1.5 truncate`}>
                 {details.CancelReason}
               </div>
             </>
@@ -287,15 +279,15 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.PAYMENT_REFUNDED && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
-                <div className="text-sm font-semibold text-gray-300 truncate">
+                <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate`}>
                   #{details.FromOrder} • {formatCurrency(details.PaymentAmount)}
                 </div>
               </div>
-              <div className="text-xs text-orange-300 mt-1.5 truncate">
+              <div className={`text-xs ${eventType.textColor} opacity-80 mt-1.5 truncate`}>
                 via {details.PaymentName}
               </div>
             </>
@@ -303,10 +295,10 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.NEW_BLOG_POST && (
             <>
-              <div className="text-xl font-bold text-gray-100 truncate">
+              <div className={`text-xl font-bold ${eventType.textColor}`}>
                 {details.title}
               </div>
-              <div className="text-sm font-semibold text-gray-300 line-clamp-2 mt-1">
+              <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 line-clamp-2 mt-1`}>
                 {details.description}
               </div>
             </>