From 311e5f169ca9df8f7b018b43bcafa4d835ad4441 Mon Sep 17 00:00:00 2001 From: martincupela Date: Fri, 26 Sep 2025 08:38:17 +0200 Subject: [PATCH 1/2] feat: add styles for message sent and delivered status icons --- src/v2/styles/Message/Message-layout.scss | 18 ++++++++++++++++++ src/v2/styles/Message/Message-theme.scss | 9 +++++++++ 2 files changed, 27 insertions(+) diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss index 58c8a80..aff22fd 100644 --- a/src/v2/styles/Message/Message-layout.scss +++ b/src/v2/styles/Message/Message-layout.scss @@ -260,6 +260,24 @@ } } + .str-chat__message-status-sent { + --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 12); + + svg { + width: var(--str-chat-icon-height); + height: var(--str-chat-icon-height); + } + } + + .str-chat__message-status-delivered { + --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15); + + svg { + width: var(--str-chat-icon-height); + height: var(--str-chat-icon-height); + } + } + .str-chat__message-replies-count-button-wrapper, .str-chat__message-is-thread-reply-button-wrapper { grid-area: replies; diff --git a/src/v2/styles/Message/Message-theme.scss b/src/v2/styles/Message/Message-theme.scss index 282f4e1..98fd5cb 100644 --- a/src/v2/styles/Message/Message-theme.scss +++ b/src/v2/styles/Message/Message-theme.scss @@ -344,6 +344,15 @@ } } + .str-chat__message-status-sent, + .str-chat__message-status-delivered { + svg { + path { + fill: var(--str-chat__text-low-emphasis-color); + } + } + } + .str-chat__message-replies-count-button-wrapper, .str-chat__message-is-thread-reply-button-wrapper { button { From eae37267cdce7c100c76243629852dc099075570 Mon Sep 17 00:00:00 2001 From: martincupela Date: Mon, 6 Oct 2025 17:00:38 +0200 Subject: [PATCH 2/2] fix: give str-chat__message-status-sent rules higher specificity --- src/v2/styles/Message/Message-layout.scss | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss index aff22fd..c4214c0 100644 --- a/src/v2/styles/Message/Message-layout.scss +++ b/src/v2/styles/Message/Message-layout.scss @@ -249,28 +249,19 @@ } .str-chat__message-status { - --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15); + --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16); @include utils.flex-row-center; column-gap: var(--str-chat__spacing-0_5); position: relative; - svg { - width: calc(var(--str-chat__spacing-px) * 15); - height: calc(var(--str-chat__spacing-px) * 15); - } - } - - .str-chat__message-status-sent { - --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 12); - svg { width: var(--str-chat-icon-height); height: var(--str-chat-icon-height); } } - .str-chat__message-status-delivered { - --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15); + .str-chat__message-status.str-chat__message-status-sent { + --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 12); svg { width: var(--str-chat-icon-height);