feat: add message reminder styles (#335)

Author: MartinCupela

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;

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);

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) {