Skip to content

Commit d788d2e

Browse files
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)
1 parent a054588 commit d788d2e

File tree

2 files changed

+42
-0
lines changed

2 files changed

+42
-0
lines changed

src/v2/styles/ChannelPreview/ChannelPreview-layout.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,28 @@
2525
}
2626
}
2727

28+
.str-chat__channel-preview-container {
29+
position: relative;
30+
31+
.str-chat__channel-preview__action-buttons {
32+
position: absolute;
33+
right: var(--str-chat__spacing-2);
34+
bottom: var(--str-chat__spacing-3);
35+
display: flex;
36+
flex-direction: row;
37+
align-items: center;
38+
gap: 1px;
39+
40+
.str-chat__channel-preview__action-button {
41+
42+
--str-chat-icon-height: 13px;
43+
cursor: pointer;
44+
padding-block: 2px;
45+
padding-inline: 4px;
46+
}
47+
}
48+
}
49+
2850
.str-chat__channel-preview {
2951
@include channel-preview-layout;
3052
cursor: pointer;
@@ -78,6 +100,8 @@
78100
p {
79101
@include utils.ellipsis-text;
80102
margin: 0;
103+
// 40px is the width of the two action buttons
104+
max-width: calc(100% - 40px);
81105
}
82106
}
83107
}

src/v2/styles/ChannelPreview/ChannelPreview-theme.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,24 @@
6464
--str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
6565
}
6666

67+
.str-chat__channel-preview-container {
68+
.str-chat__channel-preview__action-buttons {
69+
.str-chat__channel-preview__action-button {
70+
--str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
71+
border: none;
72+
background-color: transparent;
73+
}
74+
75+
.str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
76+
--str-chat-icon-color: var(--str-chat__unread-badge-color);
77+
}
78+
79+
.str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
80+
--str-chat-icon-color: var(--str-chat__text-color);
81+
}
82+
}
83+
}
84+
6785
.str-chat__channel-preview {
6886
@include utils.component-layer-overrides('channel-preview');
6987

0 commit comments

Comments
 (0)