From 1c9c127a93791437f5f89590054c7ea1a539307d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Jan 2026 19:56:51 +0000
Subject: [PATCH] style(calendar): tone down status badges to match date/time
 styling

Replace bold background-colored badges with subtle text-colored badges:
- Use text-blue-500, text-green-500, text-muted-foreground instead of backgrounds
- Lowercase labels ("upcoming", "now", "past")
- Consistent sizing with date/time text
---
 .../kinds/CalendarDateEventDetailRenderer.tsx | 16 ++++-----
 .../nostr/kinds/CalendarDateEventRenderer.tsx | 35 +++++--------------
 .../kinds/CalendarTimeEventDetailRenderer.tsx | 16 ++++-----
 .../nostr/kinds/CalendarTimeEventRenderer.tsx | 35 +++++--------------
 4 files changed, 34 insertions(+), 68 deletions(-)

diff --git a/src/components/nostr/kinds/CalendarDateEventDetailRenderer.tsx b/src/components/nostr/kinds/CalendarDateEventDetailRenderer.tsx
index 1630044..ace3e00 100644
--- a/src/components/nostr/kinds/CalendarDateEventDetailRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarDateEventDetailRenderer.tsx
@@ -20,23 +20,23 @@ import {
 import { cn } from "@/lib/utils";
 
 /**
- * Status badge for calendar events (larger variant for detail view)
+ * Status badge for calendar events
  */
 function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   const config = {
     upcoming: {
-      label: "Upcoming",
-      className: "bg-blue-600 text-white",
+      label: "upcoming",
+      className: "text-blue-500",
       icon: Clock,
     },
     ongoing: {
-      label: "Happening Now",
-      className: "bg-green-600 text-white",
+      label: "now",
+      className: "text-green-500",
       icon: CalendarDays,
     },
     past: {
-      label: "Past Event",
-      className: "bg-neutral-600 text-white",
+      label: "past",
+      className: "text-muted-foreground",
       icon: CheckCircle,
     },
   }[status];
@@ -46,7 +46,7 @@ function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   return (
     <div
       className={cn(
-        "rounded px-3 py-1.5 text-sm font-bold flex items-center gap-2 flex-shrink-0",
+        "flex items-center gap-1 text-sm flex-shrink-0",
         config.className,
       )}
     >
diff --git a/src/components/nostr/kinds/CalendarDateEventRenderer.tsx b/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
index 851c7f3..a4a3865 100644
--- a/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarDateEventRenderer.tsx
@@ -16,52 +16,35 @@ import { cn } from "@/lib/utils";
 /**
  * Status badge for calendar events
  */
-function CalendarStatusBadge({
-  status,
-  size = "sm",
-}: {
-  status: CalendarEventStatus;
-  size?: "sm" | "md";
-}) {
+function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   const config = {
     upcoming: {
-      label: "UPCOMING",
-      className: "bg-blue-600 text-white",
+      label: "upcoming",
+      className: "text-blue-500",
       icon: Clock,
     },
     ongoing: {
-      label: "NOW",
-      className: "bg-green-600 text-white",
+      label: "now",
+      className: "text-green-500",
       icon: CalendarDays,
     },
     past: {
-      label: "PAST",
-      className: "bg-neutral-600 text-white",
+      label: "past",
+      className: "text-muted-foreground",
       icon: CheckCircle,
     },
   }[status];
 
   const Icon = config.icon;
 
-  const sizeClasses = {
-    sm: "px-2 py-0.5 text-xs gap-1",
-    md: "px-3 py-1 text-sm gap-2",
-  };
-
-  const iconSizeClasses = {
-    sm: "w-3 h-3",
-    md: "w-4 h-4",
-  };
-
   return (
     <div
       className={cn(
-        "rounded font-bold flex items-center flex-shrink-0",
+        "flex items-center gap-1 text-xs flex-shrink-0",
         config.className,
-        sizeClasses[size],
       )}
     >
-      <Icon className={iconSizeClasses[size]} />
+      <Icon className="w-3 h-3" />
       <span>{config.label}</span>
     </div>
   );
diff --git a/src/components/nostr/kinds/CalendarTimeEventDetailRenderer.tsx b/src/components/nostr/kinds/CalendarTimeEventDetailRenderer.tsx
index 3296c7f..bc12390 100644
--- a/src/components/nostr/kinds/CalendarTimeEventDetailRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarTimeEventDetailRenderer.tsx
@@ -21,23 +21,23 @@ import {
 import { cn } from "@/lib/utils";
 
 /**
- * Status badge for calendar events (larger variant for detail view)
+ * Status badge for calendar events
  */
 function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   const config = {
     upcoming: {
-      label: "Upcoming",
-      className: "bg-blue-600 text-white",
+      label: "upcoming",
+      className: "text-blue-500",
       icon: Clock,
     },
     ongoing: {
-      label: "Happening Now",
-      className: "bg-green-600 text-white",
+      label: "now",
+      className: "text-green-500",
       icon: CalendarClock,
     },
     past: {
-      label: "Past Event",
-      className: "bg-neutral-600 text-white",
+      label: "past",
+      className: "text-muted-foreground",
       icon: CheckCircle,
     },
   }[status];
@@ -47,7 +47,7 @@ function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   return (
     <div
       className={cn(
-        "rounded px-3 py-1.5 text-sm font-bold flex items-center gap-2 flex-shrink-0",
+        "flex items-center gap-1 text-sm flex-shrink-0",
         config.className,
       )}
     >
diff --git a/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx b/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
index 18270b7..524ce52 100644
--- a/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
+++ b/src/components/nostr/kinds/CalendarTimeEventRenderer.tsx
@@ -16,52 +16,35 @@ import { cn } from "@/lib/utils";
 /**
  * Status badge for calendar events
  */
-function CalendarStatusBadge({
-  status,
-  size = "sm",
-}: {
-  status: CalendarEventStatus;
-  size?: "sm" | "md";
-}) {
+function CalendarStatusBadge({ status }: { status: CalendarEventStatus }) {
   const config = {
     upcoming: {
-      label: "UPCOMING",
-      className: "bg-blue-600 text-white",
+      label: "upcoming",
+      className: "text-blue-500",
       icon: Clock,
     },
     ongoing: {
-      label: "NOW",
-      className: "bg-green-600 text-white",
+      label: "now",
+      className: "text-green-500",
       icon: CalendarClock,
     },
     past: {
-      label: "PAST",
-      className: "bg-neutral-600 text-white",
+      label: "past",
+      className: "text-muted-foreground",
       icon: CheckCircle,
     },
   }[status];
 
   const Icon = config.icon;
 
-  const sizeClasses = {
-    sm: "px-2 py-0.5 text-xs gap-1",
-    md: "px-3 py-1 text-sm gap-2",
-  };
-
-  const iconSizeClasses = {
-    sm: "w-3 h-3",
-    md: "w-4 h-4",
-  };
-
   return (
     <div
       className={cn(
-        "rounded font-bold flex items-center flex-shrink-0",
+        "flex items-center gap-1 text-xs flex-shrink-0",
         config.className,
-        sizeClasses[size],
       )}
     >
-      <Icon className={iconSizeClasses[size]} />
+      <Icon className="w-3 h-3" />
       <span>{config.label}</span>
     </div>
   );