From f59322d6bbc6e2112bebd87c13d353fcb1b311b1 Mon Sep 17 00:00:00 2001
From: Will Pfleger <wpfleger@block.xyz>
Date: Thu, 4 Jun 2026 15:00:48 -0400
Subject: [PATCH] style: add center dot to unread badges (Discord-style)

---
 desktop/src/features/sidebar/ui/SidebarSection.tsx | 12 ++++++++----
 mobile/lib/features/channels/channels_page.dart    | 11 ++++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/SidebarSection.tsx b/desktop/src/features/sidebar/ui/SidebarSection.tsx
index c91f398279..94e7524ac5 100644
--- a/desktop/src/features/sidebar/ui/SidebarSection.tsx
+++ b/desktop/src/features/sidebar/ui/SidebarSection.tsx
@@ -193,9 +193,11 @@ export function ChannelMenuButton({
       {hasUnread && !isActive && channel.channelType !== "dm" ? (
         <span
           aria-hidden="true"
-          className="ml-auto h-2.5 w-2.5 shrink-0 rounded-full bg-primary"
+          className="ml-auto flex h-2.5 w-2.5 shrink-0 items-center justify-center rounded-full border-[1.5px] border-primary bg-transparent"
           data-testid={`channel-unread-${channel.name}`}
-        />
+        >
+          <span className="h-1 w-1 rounded-full bg-primary" />
+        </span>
       ) : null}
     </SidebarMenuButton>
   );
@@ -304,9 +306,11 @@ export function SidebarSection({
                     !(isActiveChannel && selectedChannelId === channel.id) ? (
                       <span
                         aria-hidden="true"
-                        className="absolute right-[9px] top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full bg-primary"
+                        className="absolute right-[9px] top-1/2 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center rounded-full border-[1.5px] border-primary bg-transparent"
                         data-testid={`channel-unread-${channel.name}`}
-                      />
+                      >
+                        <span className="h-1 w-1 rounded-full bg-primary" />
+                      </span>
                     ) : null}
                     {channel.channelType === "dm" && onHideDm ? (
                       <SidebarMenuAction
diff --git a/mobile/lib/features/channels/channels_page.dart b/mobile/lib/features/channels/channels_page.dart
index ad96e59cf2..1564ff0e03 100644
--- a/mobile/lib/features/channels/channels_page.dart
+++ b/mobile/lib/features/channels/channels_page.dart
@@ -931,10 +931,19 @@ class _ChannelTile extends ConsumerWidget {
                 key: Key('channel-unread-${channel.id}'),
                 width: 8,
                 height: 8,
+                alignment: Alignment.center,
                 decoration: BoxDecoration(
-                  color: context.colors.primary,
+                  border: Border.all(color: context.colors.primary, width: 1.5),
                   shape: BoxShape.circle,
                 ),
+                child: Container(
+                  width: 3,
+                  height: 3,
+                  decoration: BoxDecoration(
+                    color: context.colors.primary,
+                    shape: BoxShape.circle,
+                  ),
+                ),
               ),
             ],
             if (!channel.isMember && !channel.isDm)