mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 09:50:33 -04:00
Jordi Enric
863d7af4c2
## Problem The new-logs counter badge on the Logs refresh button became hard to read. The number rendered as 0.6rem white text positioned absolutely over two stacked semi-transparent green circles (`bg-green-800 opacity-60` ping plus `bg-green-900 opacity-80` solid). After the Tailwind v4 upgrade shifted the default palette to OKLCH, the greens rendered darker and the digit was nearly invisible. ## Fix Replace the stacked opacity layers with a single solid `bg-brand-500` pill, with a sized container (`h-4 min-w-4`), centered `text-[10px] text-white`, and the ping animation rendered behind it instead of layered on top. Same change applied to both `PreviewFilterPanel` and `PreviewFilterPanelWithUniversal`. ## Before <img width="274" height="194" alt="CleanShot 2026-05-05 at 13 55 53@2x" src="https://github.com/user-attachments/assets/a5967091-b60f-42a9-9394-890c41df544c" /> ## After <img width="384" height="198" alt="CleanShot 2026-05-05 at 13 57 22@2x" src="https://github.com/user-attachments/assets/30c440ce-f46f-4fda-8b96-08b068552da2" /> ## How to test - Open Studio and navigate to any Logs page (e.g. Logs > API Gateway). - Wait for new log events to arrive, or trigger some traffic against the project. - Look at the refresh icon button in the filter bar. - Expected result: the green badge in the top-right of the refresh icon shows the new-event count clearly readable in white text, with a subtle ping animation behind it. - Verify counts in the 1, 10, 100, and 1000+ ranges (the 1000+ formats as e.g. `1.2K`). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined the "new logs" count badge: simplified markup, adjusted positioning, color and opacity for a cleaner look. * Updated refresh button badge to a brand-colored design with an animated ping ring; count formatting and visibility rules (including K-format for >1000) remain unchanged. <!-- end of auto-generated comment: release notes by coderabbit.ai -->