From 55813428f8db657baf3787b8a3a19fc29d353881 Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Sat, 6 Sep 2025 04:10:04 -0500
Subject: [PATCH] update badge styling to match enhacned API page

---
 .../components/layouts/api/api-sidebar.tsx    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/docs/src/components/layouts/api/api-sidebar.tsx b/docs/src/components/layouts/api/api-sidebar.tsx
index 576e01d25..6f0cb11c7 100644
--- a/docs/src/components/layouts/api/api-sidebar.tsx
+++ b/docs/src/components/layouts/api/api-sidebar.tsx
@@ -16,27 +16,27 @@ import { useSidebar } from '../sidebar-context';
 const API_COLOR = 'rgb(71, 85, 105)'; // Neutral dark gray (good for light mode)
 const API_COLOR_LIGHT = 'rgb(148, 163, 184)'; // Lighter neutral gray
 
-// HTTP Method color scheme - matches the HttpMethodBadge colors exactly
+// HTTP Method color scheme - matches the enhanced-api-page.tsx colors exactly
 const METHOD_COLORS = {
   GET: {
-    main: 'rgb(22, 101, 52)', // green-800 (matches badge text color)
-    light: 'rgb(134, 239, 172)', // green-300 (matches dark mode badge text)
-  },
-  POST: {
-    main: 'rgb(30, 64, 175)', // blue-800 (matches badge text color)
+    main: 'rgb(59, 130, 246)', // blue-500 (matches enhanced API page)
     light: 'rgb(147, 197, 253)', // blue-300 (matches dark mode badge text)
   },
+  POST: {
+    main: 'rgb(34, 197, 94)', // green-500 (matches enhanced API page)
+    light: 'rgb(134, 239, 172)', // green-300 (matches dark mode badge text)
+  },
   DELETE: {
-    main: 'rgb(153, 27, 27)', // red-800 (matches badge text color)
+    main: 'rgb(239, 68, 68)', // red-500 (matches enhanced API page)
     light: 'rgb(252, 165, 165)', // red-300 (matches dark mode badge text)
   },
   PATCH: {
-    main: 'rgb(154, 52, 18)', // orange-800 (matches badge text color)
-    light: 'rgb(253, 186, 116)', // orange-300 (matches dark mode badge text)
+    main: 'rgb(234, 179, 8)', // yellow-500 (matches enhanced API page)
+    light: 'rgb(253, 224, 71)', // yellow-300 (matches dark mode badge text)
   },
   PUT: {
-    main: 'rgb(154, 52, 18)', // orange-800 (same as PATCH)
-    light: 'rgb(253, 186, 116)', // orange-300 (same as PATCH)
+    main: 'rgb(249, 115, 22)', // orange-500 (matches enhanced API page)
+    light: 'rgb(253, 186, 116)', // orange-300 (matches dark mode badge text)
   },
 } as const;
 
@@ -118,31 +118,33 @@ function useAccordionState(key: string, defaultValue: boolean) {
   return [isOpen, setIsOpen] as const;
 }
 
-// HTTP Method Badge Component
+// HTTP Method Badge Component - matches enhanced-api-page.tsx styling
 function HttpMethodBadge({ method }: { method: 'GET' | 'POST' | 'PATCH' | 'DELETE' | 'PUT' }) {
   const getBadgeStyles = (method: string) => {
     switch (method) {
       case 'GET': {
-        return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700';
+        return 'from-blue-500 to-blue-600 text-white shadow-blue-500/25';
       }
       case 'POST': {
-        return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700';
+        return 'from-green-500 to-green-600 text-white shadow-green-500/25';
       }
-      case 'PATCH':
       case 'PUT': {
-        return 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-700';
+        return 'from-orange-500 to-orange-600 text-white shadow-orange-500/25';
+      }
+      case 'PATCH': {
+        return 'from-yellow-500 to-yellow-600 text-white shadow-yellow-500/25';
       }
       case 'DELETE': {
-        return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700';
+        return 'from-red-500 to-red-600 text-white shadow-red-500/25';
       }
       default: {
-        return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/30 dark:text-gray-300 dark:border-gray-700';
+        return 'from-gray-500 to-gray-600 text-white shadow-gray-500/25';
       }
     }
   };
 
   return (
-    <span className={`inline-flex items-center justify-center px-1 py-0.5 rounded text-[10px] font-medium border ${getBadgeStyles(method)} leading-none w-10 flex-shrink-0`}>
+    <span className={`inline-flex items-center justify-center px-1.5 py-0.5 rounded bg-gradient-to-r ${getBadgeStyles(method)} font-mono font-bold text-[9px] tracking-wide leading-none w-10 flex-shrink-0`}>
       {method}
     </span>
   );
@@ -904,7 +906,7 @@ export function ApiSidebarContent({ pages = [] }: { pages?: PageData[] }) {
                                 {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
                                 {!isMainSidebarCollapsed ? (
                                   <div className="flex items-center gap-2">
-                                    <span className="inline-flex items-center px-1 py-0.5 rounded text-xs font-medium border bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700 leading-none">
+                                    <span className="inline-flex items-center justify-center px-1.5 py-0.5 rounded bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-purple-500/25 font-mono font-bold text-[9px] tracking-wide leading-none w-10 flex-shrink-0">
                                       EVENT
                                     </span>
                                     <span>{title}</span>