From 18dc29655a375c3f7442c9632ff75723a8795ec4 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sun, 28 Dec 2025 20:34:09 +0100
Subject: [PATCH] style: update navigation badges to pill shape with dark mode
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change rounded to rounded-full for pill appearance
- Add font-medium for better readability
- Improve dark mode colors with semi-transparent backgrounds
- Use lighter text colors in dark mode for better contrast

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/admin/content-pages.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/templates/admin/content-pages.html b/app/templates/admin/content-pages.html
index 5fc8f092..ece4df9e 100644
--- a/app/templates/admin/content-pages.html
+++ b/app/templates/admin/content-pages.html
@@ -94,9 +94,9 @@
                         <!-- Navigation -->
                         <td class="px-4 py-3 text-xs">
                             <div class="flex gap-1 flex-wrap">
-                                <span x-show="page.show_in_header" class="px-1.5 py-0.5 bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 rounded">Header</span>
-                                <span x-show="page.show_in_footer" class="px-1.5 py-0.5 bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200 rounded">Footer</span>
-                                <span x-show="page.show_in_legal" class="px-1.5 py-0.5 bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 rounded">Legal</span>
+                                <span x-show="page.show_in_header" class="px-2 py-0.5 font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300 rounded-full">Header</span>
+                                <span x-show="page.show_in_footer" class="px-2 py-0.5 font-medium bg-teal-100 text-teal-800 dark:bg-teal-900/50 dark:text-teal-300 rounded-full">Footer</span>
+                                <span x-show="page.show_in_legal" class="px-2 py-0.5 font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300 rounded-full">Legal</span>
                                 <span x-show="!page.show_in_header && !page.show_in_footer && !page.show_in_legal" class="text-gray-400">—</span>
                             </div>
                         </td>