From c4ee10bd9dc6fa971ce124d72534bdf750b00a80 Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Wed, 14 Aug 2024 10:51:39 -0700
Subject: [PATCH 1/3] style(toolbar): adjust alert indicator css

---
 .../devtoolbar/components/alerts/alertBadge.tsx     | 12 ++++++++++++
 .../components/alerts/alertCountBadge.tsx           | 12 ------------
 .../devtoolbar/components/indicatorBadge.tsx        | 13 ++++++-------
 .../components/devtoolbar/components/navigation.tsx |  4 ++--
 .../components/releases/sessionStatusBadge.tsx      |  3 +--
 5 files changed, 21 insertions(+), 23 deletions(-)
 create mode 100644 static/app/components/devtoolbar/components/alerts/alertBadge.tsx
 delete mode 100644 static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx

diff --git a/static/app/components/devtoolbar/components/alerts/alertBadge.tsx b/static/app/components/devtoolbar/components/alerts/alertBadge.tsx
new file mode 100644
index 00000000000000..a3d85ebfe5cb6d
--- /dev/null
+++ b/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" />;
+}
diff --git a/static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx b/static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx
deleted file mode 100644
index 565fee448e0fed..00000000000000
--- a/static/app/components/devtoolbar/components/alerts/alertCountBadge.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import CountBadge from '../countBadge';
-
-import useAlertsCount from './useAlertsCount';
-
-export default function AlertCountBadge() {
-  const {data: count} = useAlertsCount();
-
-  if (count === undefined) {
-    return null;
-  }
-  return <CountBadge value={count} variant="red" />;
-}
diff --git a/static/app/components/devtoolbar/components/indicatorBadge.tsx b/static/app/components/devtoolbar/components/indicatorBadge.tsx
index f5cc67d9d586ea..587df09be0ed56 100644
--- a/static/app/components/devtoolbar/components/indicatorBadge.tsx
+++ b/static/app/components/devtoolbar/components/indicatorBadge.tsx
@@ -11,12 +11,11 @@ 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, counterCss, variants[variant]]} />;
 }
 
 const counterCss = css`
@@ -25,12 +24,12 @@ const counterCss = css`
   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;
diff --git a/static/app/components/devtoolbar/components/navigation.tsx b/static/app/components/devtoolbar/components/navigation.tsx
index 9ccc55b080acc2..ef9ab29a21d689 100644
--- a/static/app/components/devtoolbar/components/navigation.tsx
+++ b/static/app/components/devtoolbar/components/navigation.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 />}>
diff --git a/static/app/components/devtoolbar/components/releases/sessionStatusBadge.tsx b/static/app/components/devtoolbar/components/releases/sessionStatusBadge.tsx
index 03b50e37ef3a87..8d2fe9b85e90f4 100644
--- a/static/app/components/devtoolbar/components/releases/sessionStatusBadge.tsx
+++ b/static/app/components/devtoolbar/components/releases/sessionStatusBadge.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;
 }

From ff4557bb194664c792b23a54f5f729ec9a07a0dc Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Wed, 14 Aug 2024 10:59:10 -0700
Subject: [PATCH 2/3] :coffin: rm unused import

---
 static/app/components/devtoolbar/components/indicatorBadge.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/components/devtoolbar/components/indicatorBadge.tsx b/static/app/components/devtoolbar/components/indicatorBadge.tsx
index 587df09be0ed56..dc7d2801381513 100644
--- a/static/app/components/devtoolbar/components/indicatorBadge.tsx
+++ b/static/app/components/devtoolbar/components/indicatorBadge.tsx
@@ -1,4 +1,3 @@
-import type React from 'react';
 import {css} from '@emotion/react';
 
 import {smallCss} from '../styles/typography';

From 21ae3b945a9ceeaca44c1b822e7e205c245f8f6f Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Thu, 15 Aug 2024 09:43:00 -0700
Subject: [PATCH 3/3] :pencil2: rename var

---
 .../app/components/devtoolbar/components/indicatorBadge.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/components/devtoolbar/components/indicatorBadge.tsx b/static/app/components/devtoolbar/components/indicatorBadge.tsx
index dc7d2801381513..cc2bd91204207d 100644
--- a/static/app/components/devtoolbar/components/indicatorBadge.tsx
+++ b/static/app/components/devtoolbar/components/indicatorBadge.tsx
@@ -14,10 +14,10 @@ interface Props {
 }
 
 export default function IndicatorBadge({variant}: Props) {
-  return <div css={[smallCss, counterCss, variants[variant]]} />;
+  return <div css={[smallCss, badgeCss, variants[variant]]} />;
 }
 
-const counterCss = css`
+const badgeCss = css`
   background: var(--red400);
   border-radius: 50%;
   border: 1px solid transparent;