Add styling for channel pinning and archiving feature

GetStream · Dec 6, 2024 · ed7fe0f · ed7fe0f
1 parent a054588
commit ed7fe0f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
@@ -25,6 +25,28 @@
   }
 }
 
+.str-chat__channel-preview-container {
+  position: relative;
+
+  .str-chat__channel-preview__action-buttons {
+    position: absolute;
+    right: var(--str-chat__spacing-2);
+    bottom: var(--str-chat__spacing-3);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1px;
+
+    .str-chat__channel-preview__action-button {
+      cursor: pointer;
+      padding-block: 2px;
+      padding-inline: 4px;
+
+      --str-chat-icon-height: 13px;
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include channel-preview-layout;
   cursor: pointer;
@@ -78,6 +100,8 @@
       p {
         @include utils.ellipsis-text;
         margin: 0;
+        // 40px is the width of the two action buttons
+        max-width: calc(100% - 40px);
       }
     }
   }

diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss
@@ -64,6 +64,23 @@
   --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
+.str-chat__channel-preview-container {
+  .str-chat__channel-preview__action-buttons {
+    .str-chat__channel-preview__action-button {
+      border: none;
+      background-color: transparent;
+      --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+    }
+
+    .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__unread-badge-color);
+    }
+    .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__text-color);
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include utils.component-layer-overrides('channel-preview');