feat: add message bounce options styles (#264)

### 🎯 Goal

`MessageBounceOptions` refers to the contents of a modal dialog
displayed when clicking on a message that bounced because of moderation
rules.


### 🛠 Implementation details

This is a simple dialog with three buttons. Buttons are customizable via
standard component overrides.

### 🎨 UI Changes


![image](https://github.com/GetStream/stream-chat-css/assets/975978/345f9987-789f-4409-b9fc-98ac1c89590b)

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

@@ -0,0 +1,18 @@
+.str-chat__message-bounce-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-9);
+
+  .str-chat__message-bounce-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-2);
+  }
+
+  .str-chat__message-bounce-edit,
+  .str-chat__message-bounce-send,
+  .str-chat__message-bounce-delete {
+    cursor: pointer;
+    padding: var(--str-chat__spacing-2);
+  }
+}

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

@@ -0,0 +1,51 @@
+@use '../utils';
+
+.str-chat {
+  /* The text color used for the edit button */
+  --str-chat__message-bounce-edit-button-color: var(--str-chat__primary-color);
+
+  /* The text color used for the send button */
+  --str-chat__message-bounce-send-button-color: var(--str-chat__primary-color);
+
+  /* The text color used for the delete button */
+  --str-chat__message-bounce-delete-button-color: var(--str-chat__primary-color);
+
+  /* The background color of the button */
+  --str-chat__message-bounce-button-background-color: transparent;
+
+  /* Top border of the button */
+  --str-chat__message-bounce-button-border-block-start: none;
+
+  /* Bottom border of the button */
+  --str-chat__message-bounce-button-border-block-end: none;
+
+  /* Left (right in RTL layout) button of the component */
+  --str-chat__message-bounce-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) button of the component */
+  --str-chat__message-bounce-button-border-inline-end: none;
+
+  /* Box shadow applied to the button */
+  --str-chat__message-bounce-button-box-shadow: none;
+}
+
+.str-chat__message-bounce-options {
+  .str-chat__message-bounce-edit,
+  .str-chat__message-bounce-send,
+  .str-chat__message-bounce-delete {
+    @include utils.component-layer-overrides('message-bounce-button');
+    font: var(--str-chat__body-medium-text);
+  }
+
+  .str-chat__message-bounce-edit {
+    color: var(--str-chat__message-bounce-edit-button-color);
+  }
+
+  .str-chat__message-bounce-send {
+    color: var(--str-chat__message-bounce-send-button-color);
+  }
+
+  .str-chat__message-bounce-delete {
+    color: var(--str-chat__message-bounce-delete-button-color);
+  }
+}

src/v2/styles/index.layout.scss

@@ -20,6 +20,7 @@
 @use 'LoadingIndicator/LoadingIndicator-layout';
 @use 'Message/Message-layout';
 @use 'MessageActionsBox/MessageActionsBox-layout';
+@use 'MessageBounceOptions/MessageBounceOptions-layout';
 @use 'MessageInput/MessageInput-layout';
 @use 'MessageList/MessageList-layout';
 @use 'MessageList/VirtualizedMessageList-layout';

src/v2/styles/index.scss

@@ -22,6 +22,7 @@
 @use 'LoadingIndicator/LoadingIndicator-theme';
 @use 'Message/Message-theme';
 @use 'MessageActionsBox/MessageActionsBox-theme';
+@use 'MessageBounceOptions/MessageBounceOptions-theme';
 @use 'MessageInput/MessageInput-theme';
 @use 'MessageList/MessageList-theme';
 @use 'MessageList/VirtualizedMessageList-theme';
@@ -34,4 +35,3 @@
 @use 'Thread/Thread-theme';
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';
-