stream-chat-angular 4.53.0 → 4.54.0

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

@@ -19,6 +19,8 @@
       align-items: center;
       padding: var(--str-chat__spacing-1_5);
       position: relative;
+      cursor: pointer;
+      flex-shrink: 0;
 
       button {
         @include utils.button-reset;
@@ -53,3 +55,69 @@
     justify-content: flex-start;
   }
 }
+
+.str-chat__message-reactions-details-modal {
+  .str-chat__modal--open {
+    .str-chat__modal__inner {
+      height: 40%;
+      max-height: 80%;
+      min-width: 90%;
+      max-width: 90%;
+      width: 90%;
+      flex-basis: min-content;
+  
+      @media only screen and (min-device-width: 768px) {
+        min-width: 40%;
+        max-width: 60%;
+        width: min-content;
+      }
+    }
+  }
+}
+
+.str-chat__message-reactions-details {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-4);
+  max-height: 100%;
+  height: 100%;
+  min-height: 0;
+
+  .str-chat__message-reactions-details-reaction-types {
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    gap: var(--str-chat__spacing-4);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .str-chat__message-reactions-details-reaction-type {
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+
+  .str-chat__message-reaction-emoji-big {
+    align-self: center;
+    font-size: 2rem;
+  }
+
+  .str-chat__message-reactions-details-reacting-users {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-3);
+    max-height: 100%;
+    overflow-y: auto;
+    min-height: 0;
+
+    .str-chat__message-reactions-details-reacting-user {
+      display: flex;
+      align-items: center;
+      gap: var(--str-chat__spacing-2);
+    }
+  }
+}

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

@@ -56,6 +56,8 @@
   --str-chat__own-message-reaction-background-color: var(
     --str-chat__primary-surface-color-low-emphasis
   );
+
+  --str-chat__messsage-reactions-details--selected-color: solid var(--str-chat__primary-color);
 }
 
 .str-chat__message-reactions-container {
@@ -73,3 +75,18 @@
     }
   }
 }
+
+.str-chat__message-reactions-details {
+  .str-chat__message-reactions-details-reaction-type {
+    border-block-end: solid transparent;
+  }
+
+  .str-chat__message-reactions-details-reaction-type--selected {
+    border-block-end: var(--str-chat__messsage-reactions-details--selected-color);
+  }
+
+
+  .str-chat__message-reactions-details-reacting-user {
+    font: var(--str-chat__subtitle-text);
+  }
+}

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

@@ -24,6 +24,9 @@
   /* The font used for caption texts with emphasize */
   --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
 
+  /* The font used for caption texts with emphasize */
+  --str-chat__caption-strong-text: 700 0.75rem/1rem var(--str-chat__font-family);
+
   /* The font used for body texts */
   --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
 

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

@@ -0,0 +1,3 @@
+.str-chat {
+  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=");
+}

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

@@ -199,3 +199,15 @@
       var(--original-height, 1000000)
   );
 }
+
+@mixin apply-mask-image($imageDataUrl, $fill, $size) {
+  mask-image: $imageDataUrl;
+  -webkit-mask-image: $imageDataUrl;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: $size;
+  -webkit-mask-size: $size;
+  background-color: $fill;
+}

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

@@ -1,10 +1,12 @@
 @use 'base';
 @use 'global-layout-variables';
+@use 'icons';
 
 @use 'Avatar/Avatar-layout';
 @use 'AttachmentList/AttachmentList-layout';
 @use 'AttachmentPreviewList/AttachmentPreviewList-layout';
 @use 'Autocomplete/Autocomplete-layout';
+@use 'BaseImage/BaseImage-layout';
 @use 'Channel/Channel-layout';
 @use 'ChannelHeader/ChannelHeader-layout';
 @use 'ChannelList/ChannelList-layout';

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

@@ -10,6 +10,7 @@
 @use 'AttachmentList/AttachmentList-theme';
 @use 'AttachmentPreviewList/AttachmentPreviewList-theme';
 @use 'Autocomplete/Autocomplete-theme';
+@use 'BaseImage/BaseImage-theme';
 @use 'Channel/Channel-theme.scss';
 @use 'ChannelHeader/ChannelHeader-theme';
 @use 'ChannelList/ChannelList-theme';

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

@@ -127,6 +127,9 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   @include vendor-prefix('user-select', none);
   -webkit-tap-highlight-color: $ig-transparent;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &.fullscreen-modal {
     background: $ig-black;
@@ -151,6 +154,22 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   line-height: 0;
   top: 0;
 
+  .image-gallery-slide {
+    background-color: var(--str-chat__secondary-surface-color);
+
+    .str-chat__base-image--load-failed {
+      height: var(--str-chat__attachment-max-width);
+      width: var(--str-chat__attachment-max-width);
+      font-size: 0;
+    }
+
+    .str-chat__message-attachment-file--item-download {
+      position: absolute;
+      left: 0.375rem;
+      top: 0.375rem;
+    }
+  }
+
   &.fullscreen {
     background: $ig-black;
 

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.53.0';
+export const version = '4.54.0';