feat: add styling for channel pinning and archiving feature (#321)

### 🎯 Goal Adds styling for the channel pinning and archiving feature. ### 🎨 UI Changes ![localhost_5173__ut=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 eyJ1c2VyX2lkIjoicjItZDIifQ UpSEW8jA2tYsUTPKbdFGMtHHnu9_AnEQqTK6TdT8L1g](https://github.com/user-attachments/assets/2243aec9-d976-4c0d-a399-70f03a516030)
GetStream · Dec 11, 2024 · d788d2e · d788d2e
1 parent a054588
commit d788d2e
Show file tree

Hide file tree

Showing 2 changed files with 42 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 {
+
+      --str-chat-icon-height: 13px;
+      cursor: pointer;
+      padding-block: 2px;
+      padding-inline: 4px;
+    }
+  }
+}
+
 .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,24 @@
   --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 {
+      --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+      border: none;
+      background-color: transparent;
+    }
+
+    .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');