diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss index c848d0e..e77dd99 100644 --- a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss +++ b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss @@ -49,6 +49,24 @@ } } + .str-chat__channel-preview-end-second-row { + @include utils.ellipsis-text-parent; + display: flex; + column-gap: var(--str-chat__spacing-1); + align-items: center; + + .str-chat__channel-preview-messenger--last-message { + flex: 1; + } + + .str-chat__channel-preview-messenger--status { + svg { + width: calc(var(--str-chat__spacing-px) * 15); + height: calc(var(--str-chat__spacing-px) * 15); + } + } + } + .str-chat__channel-preview-messenger--name, .str-chat__channel-preview-messenger--last-message { @include utils.ellipsis-text; diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss index dc8a100..96600b9 100644 --- a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss +++ b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss @@ -56,6 +56,12 @@ /* Right (left in RTL layout) border of the unread badge */ --str-chat__channel-preview-unread-badge-border-inline-end: none; + + /* The color of the message status indicator icon (only available in Angular) */ + --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color); + + /* The color of the text that displays the message time (only available in Angular) */ + --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color); } .str-chat__channel-preview { @@ -90,6 +96,21 @@ } } } + + .str-chat__channel-preview-messenger--status { + color: var(--str-chat__channel-preview-message-status-color); + + svg { + path { + fill: var(--str-chat__channel-preview-message-status-color); + } + } + } + + .str-chat__channel-preview-messenger--time { + color: var(--str-chat__channel-preview-message-time-color); + font: var(--str-chat__caption-text); + } } .str-chat__channel-preview-loading {