[Docs][UI] - Update badge styling/color in api sidebar (#882)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->
<img width="228" height="304" alt="image"
src="https://github.com/user-attachments/assets/637ce1bb-6aa2-4948-806f-348966d6486d"
/>

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Update badge styling and colors in `api-sidebar.tsx` to match enhanced
API page.
> 
>   - **Styling Updates**:
> - Update `METHOD_COLORS` in `api-sidebar.tsx` to match
`enhanced-api-page.tsx` colors.
> - Change `HttpMethodBadge` component styles to use gradient
backgrounds and shadows.
>   - **Misc**:
> - Update `EVENT` badge styling in `ApiSidebarContent` to use gradient
and shadow.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 55813428f8. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

<!-- RECURSEML_SUMMARY:START -->
## Review by RecurseML

_🔍 Review performed on
[9318e2b..5581342](9318e2b6ce...55813428f8)_

✨ No bugs found, your code is sparkling clean

<details>
<summary>✅ Files analyzed, no issues (1)</summary>

  • `docs/src/components/layouts/api/api-sidebar.tsx`
</details>

[![Need help? Join our
Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U)
<!-- RECURSEML_SUMMARY:END -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- New Features
  - Distinct visual treatment for PATCH vs. PUT methods.
- Style
- Updated HTTP method color palette to align with the enhanced API page.
- Introduced gradient badges for methods and events with consistent
mono/bold typography.
- Per-method colored dots in the sidebar; graceful fallback for unknown
methods.
  - Refined spacing and text sizing for improved readability.
- Refactor
- Consolidated method-to-color logic for consistent styling across
collapsed and expanded views.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>

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>