diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss index f9b5d24d..dfaafb8d 100644 --- a/src/v2/styles/Message/Message-layout.scss +++ b/src/v2/styles/Message/Message-layout.scss @@ -88,9 +88,16 @@ hyphens: auto; overflow-wrap: break-word; + .str-chat__message-reminder { + grid-area: message-reminder; + padding-block: 0.5rem 0.125rem; + margin: 0; + } + &.str-chat__message--other, &.str-chat__quoted-message-preview { grid-template-areas: + '. message-reminder' 'avatar message' '. replies' '. translation-notice' @@ -103,6 +110,7 @@ &.str-chat__message--me { grid-template-areas: + 'message-reminder' 'message' 'replies' 'translation-notice' @@ -187,6 +195,7 @@ &.str-chat__message--me .str-chat__message-inner { grid-template-areas: + 'reminder reminder' 'reactions reactions' 'options message-bubble'; grid-template-columns: 1fr auto; diff --git a/src/v2/styles/Message/Message-theme.scss b/src/v2/styles/Message/Message-theme.scss index b8d3e81d..0300c9ea 100644 --- a/src/v2/styles/Message/Message-theme.scss +++ b/src/v2/styles/Message/Message-theme.scss @@ -198,6 +198,30 @@ /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */ --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color); + + /* The text color of the message reminder, if it's a quoted message */ + --str-chat__message-reminder-color: var(--str-chat__primary-color); + + /* The background of the message reminder, if it's a quoted message */ + --str-chat__message-reminder-background-color: var(--str-chat__secondary-background-color); + + /* Top border of the message reminder */ + --str-chat__message-reminder-border-block-start: none; + + /* Bottom border of the message reminder */ + --str-chat__message-reminder-border-block-end: none; + + /* Left (right in RTL layout) border of the message reminder */ + --str-chat__message-reminder-border-inline-start: none; + + /* Right (left in RTL layout) border of the message reminder */ + --str-chat__message-reminder-border-inline-end: none; + + /* Box shadow applied to the message reminder */ + --str-chat__message-reminder-box-shadow: none; + + /* The border radius used for the borders of a message reminder */ + --str-chat__message-reminder-border-radius: 0; } .str-chat__message--system { @@ -228,6 +252,11 @@ color: var(--str-chat__message-link-color); } + .str-chat__message-reminder { + @include utils.component-layer-overrides('message-reminder'); + font: var(--str-chat__caption-medium-text); + } + .str-chat__message-bubble { @include utils.component-layer-overrides('message-bubble'); font: var(--str-chat__body2-text); diff --git a/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss b/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss index 21d9ff79..a677e2b0 100644 --- a/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss +++ b/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss @@ -66,6 +66,14 @@ background-color: var(--str-chat__message-actions-box-item-hover-background-color); } } + + .str_chat__button-with-submenu--submenu-open { + background-color: var(--str-chat__message-actions-box-item-hover-background-color); + } + + .str-chat__message-actions-box__submenu { + @include utils.component-layer-overrides('message-actions-box'); + } } @media (hover: none) {