UX: Chat channel icons v2 (#36634)

chapoi · web-flow · commit a11f86c8b071 · 2025-12-11T16:44:49.000+01:00
Followup: * remove wrong size for emoji in chat sidebar * add background styling for emoji/icon in DMs (mobile) * fix avatar + thread icon positioning in threads index (mobile) Current states of all screens: #### Desktop Sidebar Largely unchanged <img width="530" height="1022" alt="CleanShot 2025-12-11 at 16 13 55@2x" src="https://github.com/user-attachments/assets/2e323e22-6d56-48c7-8efc-d7ec6f316883" /> #### Desktop Drawer <img width="3588" height="992" alt="image" src="https://github.com/user-attachments/assets/0a4ad902-a3c4-4ea9-86dc-56f34ec88bf5" /> #### Mobile <img width="3120" height="1508" alt="image" src="https://github.com/user-attachments/assets/f7046c84-0272-44e6-8d01-c656b77c23c3" />
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -188,11 +188,6 @@
         .prefix-text {
           font-size: var(--font-0);
         }
-
-        &.emoji img {
-          width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
-          height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
-        }
       }
     }
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss b/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
@@ -1,17 +1,34 @@
 @use "lib/viewport";
 
 .chat-channel-icon {
-  flex-shrink: 0;
-  color: var(--primary-medium);
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
   font-size: var(--font-up-1);
+  color: var(--primary-medium);
   position: relative;
 
-  .--starred-channels & {
+  // separate otherwise it is used on the channel titles too
+  .direct-message-channels &,
+  .starred-channels & {
     width: var(--channel-list-avatar-size);
     height: var(--channel-list-avatar-size);
+
+    // emoji and icon styling on mobile = smaller + background circle for equalizing with avatars in mixed lists
+    &.--emoji,
+    &.--icon {
+      @include viewport.until(sm) {
+        background: var(--primary-low);
+        border-radius: 100%;
+
+        .emoji,
+        .d-icon:not(.chat-channel-icon__restricted-category-icon) {
+          width: calc(var(--channel-list-avatar-size) * 0.5);
+          height: calc(var(--channel-list-avatar-size) * 0.5);
+        }
+      }
+    }
   }
 
   .chat-message-creator & {
@@ -38,22 +55,6 @@
     }
   }
 
-  &.--emoji,
-  &.--icon {
-    .--starred-channels & {
-      @include viewport.until(sm) {
-        background: var(--primary-low);
-        border-radius: 100%;
-      }
-
-      .emoji,
-      .d-icon:not(.chat-channel-icon__restricted-category-icon) {
-        width: calc(var(--channel-list-avatar-size) * 0.5);
-        height: calc(var(--channel-list-avatar-size) * 0.5);
-      }
-    }
-  }
-
   .chat-user-avatar {
     .avatar {
       .chat-channel-row & {
@@ -75,17 +76,16 @@
     border-radius: 50%;
     padding: 2px 2px 3px;
     color: var(--primary-high);
-    height: 0.5rem;
-    width: 0.5rem;
-    right: -0.5rem;
+    width: calc(var(--channel-list-avatar-size) * 0.35);
+    height: calc(var(--channel-list-avatar-size) * 0.35);
+    right: calc(var(--channel-list-avatar-size) * -0.15);
     top: -0.1rem;
 
-    @include viewport.until(sm) {
-      .--starred-channels & {
-        width: calc(var(--channel-list-avatar-size) * 0.25);
-        height: calc(var(--channel-list-avatar-size) * 0.25);
-        right: -0.25rem;
-      }
+    .chat-channel-title & {
+      width: 50%;
+      height: 50%;
+      right: -20%;
+      top: -20%;
     }
   }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
@@ -21,10 +21,6 @@
     overflow: hidden;
   }
 
-  .d-icon-lock {
-    margin-right: 0.25em;
-  }
-
   .topic-chat-icon {
     color: var(--primary-medium);
     display: flex;
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
@@ -1,5 +1,6 @@
 .c-user-thread {
   display: flex;
+  align-items: center;
   gap: 1rem;
   margin-inline: 0;
   padding: 0.5rem 1.5rem;

Original file line number	Diff line number	Diff line change
`@@ -188,11 +188,6 @@`
`188`	`188`	`.prefix-text {`
`189`	`189`	`font-size: var(--font-0);`
`190`	`190`	`}`
`191`		`-`
`192`		`- &.emoji img {`
`193`		`- width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);`
`194`		`- height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);`
`195`		`- }`
`196`	`191`	`}`
`197`	`192`	`}`
`198`	`193`