feat: highlight numbers better

MattKetmo · Nov 8, 2024 · 37e7b36 · 37e7b36
1 parent eb2a9b7
commit 37e7b36
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/alerts/alert-groups.tsx b/src/components/alerts/alert-groups.tsx
@@ -87,7 +87,7 @@ function AlertGroupHeader(props: AlertGroupHeaderProps) {
         <span className="text-sm font-mono font-medium group-hover:underline">
           {name}
         </span>
-        <span className="text-xs text-slate-500">
+        <span className="text-xs text-slate-500 bg-secondary rounded-sm p-1 w-6 text-center">
           {alerts.length}
         </span>
       </div>

diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
@@ -86,9 +86,9 @@ export function AppSidebar() {
                     <SidebarMenuButton asChild>
                       <Link href={`/alerts/${handle}`}>
                         <SquareDot />
-                        <div className="flex items-baseline gap-2">
-                          <span className="shrink-0">{view.name || handle}</span>
-                          <span className="shrink-0 text-xs text-muted-foreground">
+                        <div className="flex items-baseline gap-2 w-full">
+                          <span className="shrink-0 grow">{view.name || handle}</span>
+                          <span className="shrink-0 text-xs text-muted-foreground bg-secondary p-1 w-6 text-center rounded-sm">
                             {flatAlerts.filter(alertFilter(view.filters)).length}
                           </span>
                         </div>