style(toolbar): adjust alert indicator css (#76189)

- relates to #75636
- new styling for the alert badge -- no count, just a red dot (see
[figma](https://www.figma.com/design/G8sBIfdPBh7wwpKdEMjqcD/Specs%3A-Dev-Toolbar-v2?node-id=2087-3091&t=KlTCSSkhLqDtjp8y-0))

before:
<img width="38" alt="SCR-20240814-jyjf"
src="https://github.com/user-attachments/assets/29a76783-0d12-4c4c-a985-ea079a603088">

after:
<img width="47" alt="SCR-20240814-jyfs"
src="https://github.com/user-attachments/assets/50ae6ef2-1441-4fee-a756-a0daff375fb6">

Author: michellewzhang

static/app/components/devtoolbar/components/alerts/alertBadge.tsx

@@ -0,0 +1,12 @@
+import IndicatorBadge from 'sentry/components/devtoolbar/components/indicatorBadge';
+
+import useAlertsCount from './useAlertsCount';
+
+export default function AlertBadge() {
+  const {data: count} = useAlertsCount();
+
+  if (count === undefined || count < 1) {
+    return null;
+  }
+  return <IndicatorBadge variant="red" />;
+}

static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import {css} from '@emotion/react';
 
 import {smallCss} from '../styles/typography';
@@ -11,26 +10,25 @@ const variants = {
 };
 
 interface Props {
-  icon: React.ReactNode;
   variant: keyof typeof variants;
 }
 
-export default function IndicatorBadge({icon, variant}: Props) {
-  return <div css={[smallCss, counterCss, variants[variant]]}>{icon}</div>;
+export default function IndicatorBadge({variant}: Props) {
+  return <div css={[smallCss, badgeCss, variants[variant]]} />;
 }
 
-const counterCss = css`
+const badgeCss = css`
   background: var(--red400);
   border-radius: 50%;
   border: 1px solid transparent;
   box-sizing: content-box;
   color: var(--gray100);
-  height: 1rem;
+  height: 0.55rem;
   line-height: 1rem;
   position: absolute;
-  right: -6px;
-  top: -6px;
-  width: 1rem;
+  right: 2px;
+  top: 18px;
+  width: 0.55rem;
   display: flex;
   align-items: center;
   justify-content: center;

static/app/components/devtoolbar/components/indicatorBadge.tsx

@@ -18,7 +18,7 @@ import useToolbarRoute from '../hooks/useToolbarRoute';
 import {navigationCss} from '../styles/navigation';
 import {resetDialogCss} from '../styles/reset';
 
-import AlertCountBadge from './alerts/alertCountBadge';
+import AlertBadge from './alerts/alertBadge';
 import IconButton from './navigation/iconButton';
 
 export default function Navigation({
@@ -55,7 +55,7 @@ export default function Navigation({
       <NavButton panelName="issues" label="Issues" icon={<IconIssues />} />
       <NavButton panelName="feedback" label="User Feedback" icon={<IconMegaphone />} />
       <NavButton panelName="alerts" label="Active Alerts" icon={<IconSiren />}>
-        <AlertCountBadge />
+        <AlertBadge />
       </NavButton>
       <NavButton panelName="featureFlags" label="Feature Flags" icon={<IconFlag />} />
       <NavButton panelName="releases" label="Releases" icon={<IconReleases />}>

static/app/components/devtoolbar/components/navigation.tsx

@@ -1,6 +1,5 @@
 import IndicatorBadge from 'sentry/components/devtoolbar/components/indicatorBadge';
 import useSessionStatus from 'sentry/components/devtoolbar/components/releases/useSessionStatus';
-import {IconFire} from 'sentry/icons';
 
 export default function CrashCountBadge() {
   const {data} = useSessionStatus();
@@ -18,7 +17,7 @@ export default function CrashCountBadge() {
 
   // over 10% of sessions were crashes
   if (crashPercent > 10) {
-    return <IndicatorBadge icon={<IconFire size="xs" />} variant="red" />;
+    return <IndicatorBadge variant="red" />;
   }
   return null;
 }