stream-chat-react 8.1.0 → 8.1.3-beta.1

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

@@ -166,7 +166,7 @@
   }
 
   &--media {
-    max-width: 300px;
+    width: 300px;
   }
 
   &-card {

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/Message.scss

@@ -2,6 +2,14 @@
   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;
@@ -63,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);
         }
       }
 
@@ -80,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);
           }
         }
       }
@@ -115,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);
         }
       }
 
@@ -133,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);
           }
         }
 
@@ -156,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);
         }
       }
 
@@ -174,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);
           }
         }
 
@@ -207,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);
           }
         }
       }
@@ -227,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);
           }
         }
       }
@@ -240,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);
             }
           }
         }
@@ -258,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;
@@ -278,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);
         }
       }
     }
@@ -400,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 */
@@ -491,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 {
@@ -503,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 {
@@ -617,7 +601,9 @@
               }
             }
           }
-        } /* __li*/
+        }
+
+        /* __li*/
       }
     }
   }
@@ -655,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;
 
@@ -796,6 +781,12 @@
       }
     }
 
+    &--deleted-inner {
+      background: var(--dark-grey);
+      color: var(--white);
+    }
+
+
     &--me {
       .str-chat__message-simple-reply-button {
         display: flex;
@@ -964,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);
       }
     }
   }
@@ -976,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 {
@@ -987,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);
         }
       }
     }
@@ -1005,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 {
@@ -1039,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 {
@@ -1064,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 {
@@ -1092,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);
       }
     }
   }
@@ -1142,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);
       }
     }
   }

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;

package/dist/scss/MessageInputFlat.scss

@@ -289,6 +289,10 @@
         fill: var(--white);
       }
     }
+
+    &-quoted .quoted-message-preview-content {
+      background: var(--black20);
+    }
   }
 
   &.commerce {

package/dist/scss/MessageNotification.scss

@@ -15,35 +15,23 @@
     align-self: flex-end;
   }
 
-  &-scroll-down {
+  &-scroll-to-latest {
     cursor: pointer;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 42px;
     height: 42px;
-    background-size: 14px auto;
     border-radius: 50%;
     background: var(--white);
+    color: var(--primary-color);
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 
-    &::before {
-      position: absolute;
-      top: calc(50% - 8px);
-      left: calc(50% - 6px);
-      transform: rotate(-45deg);
-      display: block;
-      width: 12px;
-      height: 12px;
-      content: '';
-      border: 2px solid var(--primary-color);
-      border-width: 0 0 2px 2px;
-    }
-
     &-unread-count {
       font-size: 10px;
-      position: relative;
       left: 50%;
       transform: translateX(-50%);
-      bottom: 18px;
+      bottom: 30px;
     }
   }
 }

package/dist/scss/Thread.scss

@@ -61,11 +61,18 @@
     .str-chat__message:first-of-type .str-chat__message-inner {
       margin-left: unset;
       margin-right: unset;
+      width: 100%;
     }
 
-    .str-chat__message-attachment.str-chat__message-attachment--file {
-      border-radius: var(--border-radius-md);
-      border-bottom: 1px solid var(--grey-whisper);
+    .str-chat__message-attachment.str-chat__message-attachment {
+      &--file {
+        border-radius: var(--border-radius-md);
+        border-bottom: 1px solid var(--grey-whisper);
+      }
+
+      &--media {
+        width: 100%;
+      }
     }
 
     .quoted-message {
@@ -206,7 +213,8 @@
         background: var(--white5);
 
         &-header {
-          background: var(--black80);
+          background: var(--dark-grey);
+
           box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
           color: var(--white);
         }
@@ -308,3 +316,11 @@
     }
   }
 }
+
+.dark.str-chat.messaging {
+  .str-chat__thread-list {
+    .quoted-message-inner {
+      background: var(--dark-grey);
+    }
+  }
+}

package/dist/scss/_base.scss

@@ -49,6 +49,10 @@
   font-family: var(--second-font);
   color: var(--black);
 
+  &.dark {
+    color: var(--white);
+  }
+
   &.messaging,
   &.commerce {
     background-color: var(--grey-gainsboro);

package/dist/stories/connected-user.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAyFvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
+{"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAwDvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}