Merge pull request #306 from SableClient/fix/notification-dot-alignment

fix(sidebar): center notification dot on avatar corner

Author: Just-Insane

.changeset/fix-notification-dot-alignment.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix notification dot badge appearing off-center on sidebar avatars

src/app/components/sidebar/Sidebar.css.ts

@@ -134,8 +134,8 @@ export const SidebarItemBadge = recipe({
         left: toRem(-6),
       },
       false: {
-        top: toRem(-2),
-        left: toRem(-2),
+        top: toRem(-4),
+        left: toRem(-4),
       },
     },
   },
@@ -167,9 +167,9 @@ export const SidebarItemBadge = recipe({
       style: {
         selectors: {
           'div:has(> button[data-id]) &': {
-            top: toRem(2),
+            top: toRem(0),
             left: 'auto',
-            right: toRem(2),
+            right: toRem(0),
           },
         },
       },

src/app/pages/client/sidebar/DirectDMsList.tsx

@@ -141,7 +141,7 @@ function DMItem({ room, selected }: DMItemProps) {
         <SidebarItemBadge
           hasCount={unread.total > 0}
           style={{
-            left: unread.total > 0 ? toRem(-6) : toRem(-2),
+            left: unread.total > 0 ? toRem(-6) : toRem(-4),
             right: 'auto',
           }}
         >

src/app/pages/client/sidebar/DirectTab.tsx

@@ -118,7 +118,7 @@ export function DirectTab() {
         <SidebarItemBadge
           hasCount={directUnread.total > 0}
           style={{
-            left: directUnread.total > 0 ? toRem(-6) : toRem(-2),
+            left: directUnread.total > 0 ? toRem(-6) : toRem(-4),
             right: 'auto',
           }}
         >

src/app/pages/client/sidebar/HomeTab.tsx

@@ -112,7 +112,7 @@ export function HomeTab() {
         <SidebarItemBadge
           hasCount={homeUnread.total > 0}
           style={{
-            left: homeUnread.total > 0 ? toRem(-6) : toRem(-2),
+            left: homeUnread.total > 0 ? toRem(-6) : toRem(-4),
             right: 'auto',
           }}
         >

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -468,7 +468,7 @@ function SpaceTab({
             <SidebarItemBadge
               hasCount={unread.total > 0}
               style={{
-                left: unread.total > 0 ? toRem(-6) : toRem(-2),
+                left: unread.total > 0 ? toRem(-6) : toRem(-4),
                 right: 'auto',
               }}
             >
@@ -609,7 +609,7 @@ function ClosedSpaceFolder({
             <SidebarItemBadge
               hasCount={unread.total > 0}
               style={{
-                left: unread.total > 0 ? toRem(-6) : toRem(-2),
+                left: unread.total > 0 ? toRem(-6) : toRem(-4),
                 right: 'auto',
               }}
             >