stream-chat-react 8.0.0 → 8.1.2

package/dist/scss/ActionsBox.scss

@@ -41,8 +41,8 @@
 
 .dark.str-chat {
   .str-chat__message-actions-box {
-    background: var(--grey);
-    background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
+    background: var(--dark-grey);
+    background-image: linear-gradient(-180deg, var(--dark-grey), var(--black20));
     box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
 
     button {

package/dist/scss/Attachment.scss

@@ -33,6 +33,11 @@
     padding: 0;
   }
 
+  /** Let giphies stretch their containers */
+  &-attachment--giphy {
+    max-width: unset;
+  }
+
   &--me {
     .str-chat__message-attachment {
       padding-left: 0;

package/dist/scss/Avatar.scss

@@ -59,7 +59,7 @@
     > .str-chat-angular__avatar-host {
       @extend %order;
 
-      > .str-chat__avatar {
+      .str-chat__avatar {
         @extend %margin;
       }
     }

package/dist/scss/ChannelHeader.scss

@@ -133,7 +133,7 @@
     .str-chat {
       &__header-livestream {
         position: relative;
-        z-index: 1;
+        z-index: 2;
         border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
         background: var(--white-snow);
         box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
@@ -263,16 +263,18 @@
 .str-chat__header-hamburger {
   width: 30px;
   height: 38px;
-  padding: var(--xs-p) var(--xs-p) var(--xs-p) 0;
+  padding: var(--xxs-p);
   margin-right: var(--xs-m);
   display: none;
-  flex-direction: column;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  border: none;
+  background: transparent;
 
   &:hover {
-    .str-chat__header-hamburger--line {
-      background: var(--primary-color);
+    svg path {
+      fill: var(--primary-color);
     }
   }
 
@@ -280,10 +282,3 @@
     display: flex;
   }
 }
-
-.str-chat__header-hamburger--line {
-  width: 100%;
-  height: 2px;
-  background: var(--primary-color);
-  border-radius: var(--border-radius-sm);
-}

package/dist/scss/ChannelList.scss

@@ -17,6 +17,12 @@
   }
 }
 
+.dark.str-chat {
+  .str-chat__channel-list-messenger {
+    background: var(--dark-grey);
+  }
+}
+
 .str-chat__button {
   background: var(--white);
   box-shadow: 0 1px 1px 0 var(--black10), 0 1px 4px 0 var(--black10);

package/dist/scss/ChannelSearch.scss

@@ -102,10 +102,21 @@
 }
 
 .dark.str-chat {
-  .str-chat__channel-search {
+  .str-chat__channel-search,
+  .str-chat__channel-search-container.inline {
+    background: var(--dark-grey);
+    color: var(--white);
+
     input {
       background: var(--grey-gainsboro);
+    }
+
+    .str-chat__channel-search-result {
       color: var(--white);
+
+      &:hover {
+        background: var(--white5);
+      }
     }
   }
 }

package/dist/scss/Gallery.scss

@@ -37,6 +37,25 @@
   }
 }
 
+.stream-chat-angular__image-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-stepper {
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  &-image {
+    object-fit: cover;
+    max-width: 90%;
+    max-height: 90%;
+  }
+}
+
 .livestream.str-chat,
 .messaging.str-chat,
 .commerce.str-chat,

package/dist/scss/Message.scss

@@ -2,10 +2,20 @@
   display: block;
   position: relative;
 
+  /*
+  min-width in a flex context: While the default min-width value is 0, for flex items it is auto.
+  This can make block elements take up much more space than desired, resulting in overflow.
+   */
+  .str-chat__message-inner {
+    min-width: 0;
+  }
+
   .quoted-message {
     display: flex;
     align-items: flex-end;
     margin-bottom: var(--xxs-m);
+    /** clicking on the quoted message navigates to its original location in the message list*/
+    cursor: pointer;
 
     &-inner {
       display: flex;
@@ -61,15 +71,13 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -78,28 +86,24 @@
         .str-chat__message {
           &-attachment--img,
           &-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         &.str-chat__message--has-text.str-chat__message--has-attachment {
           .str-chat__message-attachment--img,
           .str-chat__message-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
         .str-chat__gallery {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-            var(--border-radius);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
 
         &.str-chat__message--has-text {
           .str-chat__gallery {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -113,16 +117,14 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -131,8 +133,7 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -154,16 +155,14 @@
       &-attachment--img,
       &-attachment-card,
       .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
 
       &.str-chat__message--has-text.str-chat__message--has-attachment {
         .str-chat__message-attachment--img,
         .str-chat__message-attachment-card,
         .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
@@ -172,8 +171,7 @@
           &-attachment--img,
           &-attachment-card,
           .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
 
@@ -205,16 +203,14 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -225,12 +221,10 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
-              var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
@@ -238,12 +232,10 @@
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-                calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -256,16 +248,14 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -276,8 +266,7 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-            calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -293,6 +282,7 @@
   position: relative;
   margin: calc(var(--xxs-m) / 2) 0;
   width: 100%;
+  transition: background-color 0.5s ease-out;
 
   &--system {
     text-align: center;
@@ -370,13 +360,16 @@
       border: 1px solid var(--border);
       margin-left: 0; /* set spacing when unfocused */
 
+      // Fixes emoji display in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
+      .str-chat__emoji-display-fix {
+        display: inline-block;
+        width: 1.25em;
+      }
+
       p {
-        /* Make sure really long urls and words don't break out.
-        ** https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
-        overflow-wrap: break-word;
+        /* Make sure really long urls and words don't break out.*/
         word-wrap: break-word;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        word-break: break-word;
 
         /* Adds a hyphen where the word breaks, if supported (No Blink) */
         -ms-hyphens: auto;
@@ -394,8 +387,7 @@
       }
 
       &--has-attachment {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
 
       /* if text consists of just one emoji */
@@ -485,8 +477,7 @@
         background: var(--grey-whisper);
         border-color: transparent;
         text-align: right;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-          var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
         margin-right: 0; /* set spacing when unfocused */
 
         &--focused {
@@ -497,8 +488,7 @@
         }
 
         &--has-attachment {
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-            calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
 
         &--is-emoji {
@@ -537,6 +527,11 @@
     margin-top: var(--md-m);
   }
 
+  &--highlighted {
+    transition: background-color 0.1s ease-out;
+    background-color: var(--highlight);
+  }
+
   &-link {
     color: var(--primary-color);
     font-weight: var(--font-weight-bold);
@@ -547,13 +542,6 @@
     font-weight: var(--font-weight-bold);
   }
 
-  &-url-link {
-    max-width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
   &--inner {
     display: flex;
     flex-direction: column;
@@ -613,7 +601,9 @@
               }
             }
           }
-        } /* __li*/
+        }
+
+        /* __li*/
       }
     }
   }
@@ -651,7 +641,6 @@
   /* error messages */
   &--error,
   &--failed {
-    margin: 0 0 var(--lg-m) var(--xl-m);
     font-size: var(--sm-font);
     padding: var(--xxs-p) 0;
 
@@ -747,6 +736,8 @@
       flex: initial;
       text-align: left;
       max-width: 460px;
+      word-wrap: break-word;
+      word-break: break-word;
 
       &.str-chat__message-simple-text-inner--is-emoji {
         background: transparent;
@@ -764,6 +755,12 @@
         color: var(--primary-color);
         font-weight: var(--font-weight-bold);
         text-decoration: none;
+
+        &:active,
+        &:focus,
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       blockquote {
@@ -784,6 +781,12 @@
       }
     }
 
+    &--deleted-inner {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
+
     &--me {
       .str-chat__message-simple-reply-button {
         display: flex;
@@ -952,8 +955,7 @@
       &:first-of-type {
         border-bottom: 1px solid var(--grey-gainsboro);
         border-top: 1px solid var(--grey-gainsboro);
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
     }
   }
@@ -964,8 +966,7 @@
 
   &--me {
     .str-chat__message-attachment-card {
-      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
-        var(--border-radius-sm);
+      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
     }
 
     .str-chat__message-attachment--file {
@@ -975,8 +976,7 @@
         border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
 
         &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-            var(--border-radius);
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -993,11 +993,12 @@
       .str-chat__message-actions-box {
         right: unset;
         left: 100%;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
     }
   }
+
+
 }
 
 .livestream.str-chat {
@@ -1027,14 +1028,19 @@
 }
 
 .dark.str-chat {
+  .str-chat__message,
   .str-chat__message-simple {
     &-text-inner {
-      background: var(--white-smoke);
+      background: var(--dark-grey);
       color: var(--white);
 
       &--is-emoji {
         background: transparent;
       }
+
+      .quoted-message-inner {
+        background: var(--dark-grey);
+      }
     }
 
     &__actions {
@@ -1052,17 +1058,22 @@
       background: transparent;
 
       &--content {
-        background: var(--white-smoke);
+        background: var(--dark-grey);
       }
 
       &--url {
         color: var(--grey-gainsboro);
       }
+
+      &--title {
+        color: var(--primary-color);
+      }
     }
 
     .str-chat__message-attachment--file {
       border-color: transparent;
-      background: var(--white-smoke);
+      background: var(--dark-grey);
+      color: var(--white10);
 
       a,
       span {
@@ -1080,25 +1091,35 @@
       }
     }
 
+    .str-chat__message-simple--deleted-inner,
+    .str-chat__message--deleted-inner {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
     &--me {
-      .str-chat__message-simple {
-        &-text-inner {
-          background: var(--black);
+      .str-chat__message-text-inner {
+        background: var(--black40);
 
-          &--is-emoji {
-            background: transparent;
-          }
+        &--is-emoji {
+          background: transparent;
         }
+      }
 
-        .str-chat__message-attachment-card {
-          &--content {
-            background: var(--black);
-          }
+      .str-chat__message-attachment-card {
+        &--content {
+          background: var(--black40);
         }
+      }
 
-        .str-chat__message-attachment--file {
-          background: var(--overlay);
-        }
+      .str-chat__message-attachment--file {
+        background: var(--black40);
+      }
+
+      .str-chat__message-simple--deleted-inner,
+      .str-chat__message--deleted-inner {
+        background: var(--black40);
+        color: var(--white);
       }
     }
   }
@@ -1130,22 +1151,19 @@
       &--reverse {
         right: 100%;
         left: unset;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-          var(--border-radius);
+        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
       }
     }
 
     .str-chat__message-actions-box--mine {
       right: 100%;
       left: unset;
-      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-        var(--border-radius);
+      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
 
       &.str-chat__message-actions-box--reverse {
         left: 100%;
         right: unset;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
+        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
       }
     }
   }
@@ -1189,7 +1207,6 @@
   // fixes the overall overflow/flex issues together with the rule above
   .mml-wrap {
     display: block;
-    max-width: none;
     // the max-width should match that to .str-chat__message-XXXX-text-inner
     max-width: 345px;
 

package/dist/scss/MessageInput.scss

@@ -82,6 +82,12 @@
   }
 }
 
+.dark .str-chat__textarea {
+  textarea::placeholder {
+    color: var(--white30);
+  }
+}
+
 .str-chat__textarea {
   height: auto;
   flex: 1;
@@ -104,7 +110,7 @@
       box-shadow: 0 0 0 2px var(--primary-color-faded);
     }
 
-    &:placeholder {
+    &::placeholder {
       color: var(--black50);
     }
   }
@@ -117,7 +123,7 @@
   position: absolute;
   background: var(--white95);
   box-shadow: 0 0 1px 0 var(--black30), 0 0 6px 0 var(--black10);
-  z-index: -1;
+  z-index: 10001;
   border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
   margin: 0 var(--xs-m);
   max-height: 360px;