fix(studio): improve readability of logs refresh badge (#45582)

## 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 -->

apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx

@@ -174,14 +174,11 @@ const PreviewFilterPanel = ({
               icon={
                 <div className="relative">
                   {newCount > 0 && (
-                    <div className="absolute -top-3 right-3 flex items-center justify-center">
-                      <div className="absolute z-20">
-                        <p style={{ fontSize: '0.6rem' }} className="text-white">
-                          {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
-                        </p>
+                    <div className="absolute -top-3 -right-3 flex items-center justify-center">
+                      <div className="absolute h-4 w-4 animate-ping rounded-full bg-brand opacity-60"></div>
+                      <div className="relative z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-500 px-1 text-[10px] font-medium leading-none text-white">
+                        {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
                       </div>
-                      <div className="h-4 w-4 animate-ping rounded-full bg-green-800 opacity-60"></div>
-                      <div className="z-60 absolute top-0 right-0 h-full w-full rounded-full bg-green-900 opacity-80"></div>
                     </div>
                   )}
                   <RefreshCw />

apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx

@@ -292,14 +292,11 @@ export const PreviewFilterPanelWithUniversal = ({
             icon={
               <div className="relative">
                 {newCount > 0 && (
-                  <div className="absolute -top-3 right-3 flex items-center justify-center">
-                    <div className="absolute z-20">
-                      <p style={{ fontSize: '0.6rem' }} className="text-white">
-                        {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
-                      </p>
+                  <div className="absolute -top-3 -right-3 flex items-center justify-center">
+                    <div className="absolute h-4 w-4 animate-ping rounded-full bg-brand opacity-60"></div>
+                    <div className="relative z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-500 px-1 text-[10px] font-medium leading-none text-white">
+                      {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
                     </div>
-                    <div className="h-4 w-4 animate-ping rounded-full bg-green-800 opacity-60"></div>
-                    <div className="z-60 absolute top-0 right-0 h-full w-full rounded-full bg-green-900 opacity-80"></div>
                   </div>
                 )}
                 <RefreshCw />