From e7ffb0e50f4d91350e48b881be61acfbf735a651 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Wed, 18 Mar 2026 10:26:22 -0700
Subject: [PATCH] Polish sidebar toggle alignment and avatar light-mode
 backgrounds (#103)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/src/app/AppShell.tsx                      | 2 +-
 desktop/src/features/messages/ui/MessageRow.tsx   | 4 ++--
 desktop/src/features/profile/ui/ProfileAvatar.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index 97f3610a81..da77aedd22 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -484,7 +484,7 @@ export function AppShell() {
         </div>
       ) : (
         <React.Fragment>
-          <SidebarTrigger className="fixed left-[80px] top-[9px] z-50 h-6 w-6 text-muted-foreground/70 hover:bg-muted/60 hover:text-foreground" />
+          <SidebarTrigger className="fixed left-[80px] top-[8px] z-50 h-6 w-6 text-muted-foreground/70 hover:bg-muted/60 hover:text-foreground" />
           <AppSidebar
             channels={memberChannels}
             currentPubkey={identityQuery.data?.pubkey}
diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx
index e5c2147ab8..9b7d747cc1 100644
--- a/desktop/src/features/messages/ui/MessageRow.tsx
+++ b/desktop/src/features/messages/ui/MessageRow.tsx
@@ -140,7 +140,7 @@ export function MessageRow({
               {message.avatarUrl && !hasAvatarError ? (
                 <img
                   alt={`${message.author} avatar`}
-                  className="h-8 w-8 rounded-lg object-cover shadow-sm"
+                  className="h-8 w-8 rounded-lg bg-secondary object-cover shadow-sm"
                   data-testid="message-avatar-image"
                   onError={() => {
                     setHasAvatarError(true);
@@ -166,7 +166,7 @@ export function MessageRow({
         ) : message.avatarUrl && !hasAvatarError ? (
           <img
             alt={`${message.author} avatar`}
-            className="h-8 w-8 shrink-0 rounded-lg object-cover shadow-sm"
+            className="h-8 w-8 shrink-0 rounded-lg bg-secondary object-cover shadow-sm"
             data-testid="message-avatar-image"
             onError={() => {
               setHasAvatarError(true);
diff --git a/desktop/src/features/profile/ui/ProfileAvatar.tsx b/desktop/src/features/profile/ui/ProfileAvatar.tsx
index 6838a50419..5fb032bf7b 100644
--- a/desktop/src/features/profile/ui/ProfileAvatar.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatar.tsx
@@ -30,7 +30,7 @@ export function ProfileAvatar({
     .slice(0, 2)
     .toUpperCase();
   const baseClassName = cn(
-    "flex shrink-0 items-center justify-center overflow-hidden bg-primary/10 text-primary shadow-sm",
+    "flex shrink-0 items-center justify-center overflow-hidden bg-primary/20 text-primary shadow-sm",
     className,
   );