stream-chat-angular 4.0.0-theming-v2.11 → 4.0.0

package/src/assets/styles/v2/scss/Message/Message-theme.scss

@@ -16,6 +16,9 @@
   /* The text color used for displaying links */
   --str-chat__message-link-color: var(--str-chat__primary-color);
 
+  /* The text color used for displaying mentions */
+  --str-chat__message-mention-color: var(--str-chat__primary-color);
+
   /* The text/icon color used for displaying message status */
   --str-chat__message-status-color: var(--str-chat__primary-color);
 
@@ -25,6 +28,9 @@
   /* The background color of the component */
   --str-chat__message-background-color: transparent;
 
+  /* The background color of a jumped-to message */
+  --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
+
   /* Top border of the component */
   --str-chat__message-border-block-start: none;
 
@@ -184,6 +190,11 @@
     color: var(--str-chat__message-link-color);
   }
 
+  .str-chat__message-mention {
+    color: var(--str-chat__message-mention-color);
+    font: var(--str-chat__body2-medium-text);
+  }
+
   .str-chat__message-bubble {
     @include utils.component-layer-overrides('message-bubble');
     font: var(--str-chat__body2-text);
@@ -268,6 +279,11 @@
   }
 }
 
+.str-chat__message--highlighted {
+  transition: background-color 0.1s ease-out;
+  background-color: var(--str-chat__message-highlighted-background-color);
+}
+
 .str-chat__li:hover {
   background-color: var(--str-chat__message-active-bacground-color);
 }

package/src/assets/styles/v2/scss/MessageInput/MessageInput-layout.scss

@@ -7,6 +7,8 @@
   width: 100%;
   padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
 
+  position: relative;
+
   .str-chat__quoted-message-preview-header {
     @include utils.flex-row-center;
     width: 100%;
@@ -23,6 +25,19 @@
     }
   }
 
+  .str-chat__dropzone-container {
+    @include utils.flex-row-center;
+
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 5;
+
+    p {
+      margin: unset;
+    }
+  }
+
   .str-chat__message-input-inner {
     flex-grow: 1;
     width: 100%;
@@ -76,8 +91,12 @@
           font-size: calc(var(--str-chat__spacing-px) * 27);
           align-self: end;
 
-          .str-chat__emoji-picker-container {
-            display: flex;
+          .str-chat__message-textarea-emoji-picker-container {
+            z-index: 5;
+
+            .str-chat__emoji-picker-container {
+              display: flex;
+            }
           }
 
           .str-chat__emoji-picker-button {
@@ -148,6 +167,18 @@
   max-height: 50%;
 }
 
+.str-chat-angular__message-input {
+  height: 100%;
+  max-height: 100%;
+}
+
+.str-chat-angular__message-input-inner {
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  flex-grow: initial;
+}
+
 [dir='rtl'] .str-chat__send-button {
   svg {
     transform: scale(-1, 1);

package/src/assets/styles/v2/scss/MessageInput/MessageInput-theme.scss

@@ -25,6 +25,15 @@
   /* Box shadow applied to the component */
   --str-chat__message-input-box-shadow: none;
 
+  /* The text/icon color of the dropzone container */
+  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the dropzone container */
+  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
+
+  /* The backdrop filter applied to the dropzone container */
+  --str-chat__dropzone-container-backdrop-filter: blur(3px);
+
   /* The border radius used for the borders of the textarea */
   --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
 
@@ -134,6 +143,13 @@
 .str-chat__message-input {
   @include utils.component-layer-overrides('message-input');
 
+  .str-chat__dropzone-container {
+    background-color: var(--str-chat__dropzone-container-background-color);
+    color: var(--str-chat__dropzone-container-color);
+    backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
+    font: var(--str-chat__subtitle-text);
+  }
+
   .str-chat__file-input-container {
     @include utils.component-layer-overrides('message-input-tools');
 

package/src/assets/styles/v2/scss/MessageList/{VirtualMessageList-layout.scss → VirtualizedMessageList-layout.scss}

@@ -10,6 +10,10 @@
   width: 100%;
   height: 100%;
 
+  .str-chat__message-list-scroll > div {
+    @include utils.message-list-spacing;
+  }
+
   // conditionally showing the header displaces items when prepending.
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
@@ -29,4 +33,12 @@
       word-wrap: break-word;
     }
   }
+
+  .str-chat__message {
+    margin-block-end: 0 !important;
+  }
+
+  .str-chat__virtual-list-message-wrapper {
+    padding-block-end: var(--str-chat__spacing-0_5);
+  }
 }

package/src/assets/styles/v2/scss/MessageReactions/MessageReactions-layout.scss

@@ -6,6 +6,7 @@
   .str-chat__message-reactions {
     list-style: none;
     display: flex;
+    margin-block-start: var(--str-chat__spacing-0_5);
     margin-block-end: var(--str-chat__spacing-0_5);
     column-gap: var(--str-chat__spacing-0_5);
     width: fit-content;

package/src/assets/styles/v2/scss/Modal/Modal-theme.scss

@@ -64,6 +64,7 @@
 
 // stream-chat-react image gallery does not show the modal inner container. It has to be reset to
 // width of its content in order the modal can be closed when clicked on overlay
+.str-chat__message-attachment--card,
 .str-chat__message-attachment--image,
 .str-chat__message-attachment--gallery {
   .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
@@ -71,5 +72,11 @@
     width: unset;
     height: unset;
     padding: 0;
+
+    img {
+      max-width: unset;
+      max-height: calc(100vh - 80px);
+      cursor: default;
+    }
   }
 }

package/src/assets/styles/v2/scss/Thread/Thread-layout.scss

@@ -37,9 +37,8 @@
     }
   }
 
-  // todo: React SDK specific. Deprecate after merging with MessageList
   .str-chat__thread-list {
-    @include utils.scrollable;
+    height: auto;
   }
 }
 

package/src/assets/styles/v2/scss/Tooltip/Tooltip-layout.scss

@@ -12,7 +12,7 @@
   max-width: calc(var(--str-chat__spacing-px) * 150px);
   word-break: break-all;
   position: absolute;
-  bottom: calc(100% + calc(#{$size} / 2));
+  bottom: calc(100% + calc(0.8 * #{$size}));
 
   &::after {
     content: '';

package/src/assets/styles/v2/scss/TypingIndicator/TypingIndicator-layout.scss

@@ -1,5 +1,9 @@
 @use '../utils';
 
+.str-chat__typing-indicator-react-host {
+  position: static !important;
+}
+
 .str-chat__typing-indicator {
   padding: var(--str-chat__spacing-1_5);
   display: flex;

package/src/assets/styles/v2/scss/_global-theme-variables.scss

@@ -33,6 +33,9 @@
   /* The font used for body texts */
   --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
 
+  /* The font used for body texts with emphasize */
+  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
+
   /* The font used for subtitle texts */
   --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
 
@@ -57,6 +60,9 @@
   /* Used for emphasis, brands can inject their main color using this variable */
   --str-chat__primary-color: var(--str-chat__blue500);
 
+  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
+  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
+
   /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
   --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
 
@@ -132,6 +138,7 @@
 
 .str-chat__theme-dark {
   --str-chat__primary-color: var(--str-chat__blue400);
+  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
   --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
   --str-chat__active-primary-color: var(--str-chat__blue600);
   --str-chat__on-primary-color: var(--str-chat__grey50);

package/src/assets/styles/v2/scss/_utils.scss

@@ -7,7 +7,7 @@
 @mixin flex-top-right {
   display: flex;
   align-items: flex-start;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 @mixin flex-col-center {

package/src/assets/styles/v2/scss/index.layout.scss

@@ -19,7 +19,7 @@
 @use 'MessageActionsBox/MessageActionsBox-layout';
 @use 'MessageInput/MessageInput-layout';
 @use 'MessageList/MessageList-layout';
-@use 'MessageList/VirtualMessageList-layout';
+@use 'MessageList/VirtualizedMessageList-layout';
 @use 'MessageReactions/MessageReactions-layout';
 @use 'MessageReactions/MessageReactionsSelector-layout';
 @use 'Modal/Modal-layout';

package/src/assets/styles/v2/scss/index.scss

@@ -22,7 +22,7 @@
 @use 'MessageActionsBox/MessageActionsBox-theme';
 @use 'MessageInput/MessageInput-theme';
 @use 'MessageList/MessageList-theme';
-@use 'MessageList/VirtualMessageList-theme';
+@use 'MessageList/VirtualizedMessageList-theme';
 @use 'MessageReactions/MessageReactions-theme';
 @use 'MessageReactions/MessageReactionsSelector-theme';
 @use 'Modal/Modal-theme';

package/src/assets/styles/vendor/react-image-gallery.scss

@@ -153,10 +153,16 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 
   &.fullscreen {
     background: $ig-black;
+
+    .image-gallery-slide .image-gallery-image {
+      max-width: 100%;
+    }
   }
 
   .image-gallery-slide .image-gallery-image {
     max-height: calc(100vh - 80px); // 80 px for the thumbnail space
+    max-width: unset;
+    object-fit: contain;
   }
 
   &.left,

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.0.0-theming-v2.11';
+export const version = '4.0.0';