stream-chat-react 9.5.0 → 10.0.0-theming-v2.3

package/dist/scss/MessageCommerce.scss

@@ -2,9 +2,10 @@
   display: flex; /* inline-flex if you don't want the  */
   justify-content: flex-start;
   align-items: flex-end;
-  padding: 0 0 0 0;
+  padding: 0;
   position: relative;
   margin: 1px 0;
+
   &-inner {
     position: relative;
     /* flex: 1 if you want the messagebubbles to be the same width- */
@@ -12,6 +13,7 @@
       min-height: 10px;
       min-width: 30px;
       float: right;
+
       .str-chat__reaction-list {
         left: unset;
         right: 46px;
@@ -68,6 +70,7 @@
       &-text {
         &-inner {
           border-radius: 16px 16px 16px 0;
+
           &--has-attachment {
             border-radius: 4px 4px 16px 0;
           }
@@ -80,7 +83,7 @@
     .str-chat__message-commerce {
       &-text {
         &-inner {
-          border-radius: 4px 4px 4px 4px;
+          border-radius: 4px;
         }
       }
     }
@@ -89,7 +92,7 @@
   &-text {
     display: flex;
 
-    padding: 0 0 0 0;
+    padding: 0;
     position: relative;
 
     &-inner {
@@ -105,12 +108,10 @@
 
       margin-left: 0;
       max-width: 345px;
+
       p {
         margin: 0;
         white-space: pre-line;
-        &:not(:first-of-type) {
-          margin: 16px 0 0;
-        }
 
         /* These are technically the same, but use both */
         overflow-wrap: break-word;
@@ -124,6 +125,10 @@
         -moz-hyphens: auto;
         -webkit-hyphens: auto;
         hyphens: auto;
+
+        &:not(:first-of-type) {
+          margin: 16px 0 0;
+        }
       }
 
       &--has-attachment {
@@ -172,6 +177,7 @@
 
   &--with-reactions {
     margin-top: 30px;
+
     .str-chat__message-commerce__actions__action--reactions {
       display: none;
     }
@@ -202,7 +208,7 @@
 
   /* error messages */
   &--error {
-    margin: 0 0 32px 0;
+    margin: 0 0 32px;
     font-size: var(--sm-font);
 
     .str-chat__message-text-inner {
@@ -215,23 +221,29 @@
     &.str-chat__message-commerce {
       justify-content: flex-end;
       margin-left: 0;
+
       .str-chat__message-commerce__actions {
         justify-content: flex-end;
       }
+
       .str-chat__message-commerce {
         &-inner {
           > .str-chat__message-commerce__actions {
             float: left;
+
             .str-chat__reaction-list {
               left: 46px;
             }
           }
+
           > .str-chat__message-commerce-reply-button {
             display: flex;
             justify-content: flex-end;
+
             .str-chat__message-replies-count-button {
               display: flex;
               flex-direction: row-reverse;
+
               svg {
                 transform: scaleX(-1);
                 margin-left: 5px;
@@ -245,36 +257,42 @@
 
       .str-chat__message-commerce-text-inner {
         background: #ebebeb;
-        border-width: 0px;
+        border-width: 0;
         margin-top: 2px;
         border-color: transparent;
+
         p {
           text-align: right;
         }
       }
+
       > .str-chat__avatar {
         display: none;
       }
 
       .str-chat__message-attachment {
         margin: 0 auto 0 30px;
+
         &--img {
           border-radius: var(--border-radius) var(--border-radius) 2px var(--border-radius);
         }
       }
+
       .str-chat__message-attachment-card {
-        border-radius: 16px 16px 4px 16px;
+        border-radius: 16px 16px 4px;
       }
 
       &--bottom,
       &--single {
         margin-right: 0;
       }
+
       &--single {
         .str-chat__message-commerce {
           &-text {
             &-inner {
-              border-radius: 16px 16px 4px 16px;
+              border-radius: 16px 16px 4px;
+
               &--has-attachment {
                 border-radius: 16px 4px 4px 16px;
               }
@@ -282,6 +300,7 @@
           }
         }
       }
+
       &--bottom {
         .str-chat__message-commerce {
           &-text {
@@ -291,16 +310,20 @@
           }
         }
       }
+
       .str-chat__avatar {
         order: 1;
       }
+
       .str-chat__message-commerce-text {
         flex-direction: row-reverse;
         justify-content: flex-start;
+
         &-inner {
           flex: unset;
         }
       }
+
       .str-chat__message-commerce-data {
         text-align: right;
       }
@@ -323,6 +346,7 @@
 .str-chat {
   &__message-commerce {
     font-family: var(--second-font);
+
     &__actions {
       display: flex;
       margin-top: 5px;
@@ -336,28 +360,33 @@
         align-items: center;
         height: 10px;
         cursor: pointer;
+
         svg {
           fill: #000;
           opacity: 0.5;
         }
+
         &:hover {
           svg {
             opacity: 1;
           }
         }
+
         &--thread,
         &--reactions {
           display: none;
         }
+
         &--options {
           position: relative;
           display: none;
+
           .str-chat__message-actions-box {
             bottom: 10px;
             left: unset;
             right: 100%;
             width: 120px;
-            border-radius: 16px 16px 2px 16px;
+            border-radius: 16px 16px 2px;
           }
         }
       }
@@ -367,6 +396,7 @@
       .str-chat__message-commerce__actions__action--thread {
         display: flex;
       }
+
       .str-chat__message-commerce__actions__action--reactions {
         display: flex;
       }
@@ -374,7 +404,7 @@
 
     &-text {
       display: flex;
-      padding: 0 0 0 0;
+      padding: 0;
       position: relative;
     }
 
@@ -389,11 +419,13 @@
       p {
         text-align: left;
       }
+
       a {
         color: var(--secondary-color);
         font-weight: var(--font-weight-bold);
         text-decoration: none;
       }
+
       blockquote {
         margin: 0 0 0 5px;
         font-style: italic;
@@ -416,9 +448,11 @@
       .str-chat__message-commerce__actions__action--options {
         display: flex;
       }
+
       .str-chat__message-commerce__actions__action--reactions {
         display: flex;
       }
+
       .str-chat__message-commerce__actions__action--thread {
         display: flex;
       }
@@ -434,7 +468,7 @@
 }
 
 .str-chat__message-commerce-status {
-  margin: 10px 0px 10px 10px;
+  margin: 10px 0 10px 10px;
   order: 3;
   position: absolute;
   left: 100%;
@@ -444,6 +478,7 @@
   justify-content: flex-end;
   align-items: center;
   z-index: 11;
+
   &-number {
     font-size: var(--xs-font);
     margin-left: 4px;
@@ -487,6 +522,7 @@
     border-radius: unset;
     margin: 0 auto 0 0;
   }
+
   .str-chat__message-attachment-card {
     margin: 0;
     border-radius: 4px var(--border-radius) 4px 4px;
@@ -508,6 +544,7 @@
     &__actions {
       width: 30px;
     }
+
     &__actions__action--options {
       .str-chat__message-actions-box {
         right: unset;
@@ -524,10 +561,12 @@
       color: white;
       opacity: 0.5;
     }
+
     &-text-inner {
       background: rgba(255, 255, 255, 0.05);
       color: white;
     }
+
     &__actions {
       svg {
         fill: white;
@@ -536,12 +575,15 @@
 
     .str-chat__message-attachment-card {
       background: rgba(0, 0, 0, 0.2);
+
       &--content {
         background: rgba(0, 0, 0, 0.2);
       }
+
       &--title {
         color: white;
       }
+
       &--url {
         color: rgba(255, 255, 255, 0.5);
       }
@@ -552,8 +594,10 @@
         &-text-inner {
           background: rgba(0, 0, 0, 0.2);
         }
+
         .str-chat__message-attachment-card {
           background: rgba(0, 0, 0, 0.2);
+
           &--content {
             background: rgba(0, 0, 0, 0.2);
           }

package/dist/scss/MessageInput.scss

@@ -242,6 +242,7 @@
 .str-chat__user-item {
   padding: var(--xs-p) var(--sm-p);
   display: flex;
+  align-items: center;
 
   &--highlight {
     font-weight: var(--font-weight-bold);

package/dist/scss/MessageInputFlat.scss

@@ -139,13 +139,6 @@
     background: var(--white);
   }
 
-  .str-chat-angular__cooldown {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 25px;
-  }
-
   &-emojiselect {
     position: absolute;
     top: calc(100% - 45px);
@@ -173,8 +166,23 @@
   }
 
   &-cooldown {
-    font-size: var(--xl-font);
-    font-weight: var(--font-weight-bold);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-left: var(--xs-p);
+
+    .str-chat__message-input-cooldown-text {
+      font-size: var(--xl-font);
+      font-weight: var(--font-weight-bold);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50px;
+      height: 50px;
+      background-color: var(--grey);
+      color: var(--white);
+      border-radius: var(--border-radius-round);
+    }
   }
 
   &--textarea-wrapper {
@@ -254,6 +262,10 @@
           opacity: 0.9;
           height: 25px;
           width: 25px;
+
+          path {
+            fill: var(--white-snow);
+          }
         }
       }
     }

package/dist/scss/MessageList.scss

@@ -17,6 +17,12 @@
   @extend %scrollable;
 }
 
+.str-chat__list.str-chat__list--thread {
+  .str-chat__reverse-infinite-scroll {
+    padding-top: 0;
+  }
+}
+
 .str-chat__list {
   @extend %scrollable;
   position: relative;
@@ -41,7 +47,6 @@
 
   &--thread {
     padding: var(--sm-p) 0 0 0;
-    overflow: visible;
   }
 
   &__center {
@@ -96,7 +101,8 @@
   text-align: center;
 }
 
-.str-chat__list-notifications {
+.str-chat__list-notifications,
+.str-chat__jump-to-latest-message {
   padding: 0 var(--xl-p);
   display: flex;
   position: relative;
@@ -107,6 +113,12 @@
 .messaging {
   &.str-chat {
     .str-chat {
+      &__list.str-chat__list--thread {
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 0;
+        }
+      }
+
       &__list {
         padding: 0 var(--xl-p) 0;
         background: var(--white);
@@ -120,8 +132,15 @@
         }
       }
     }
+
     @media screen and (max-width: 960px) {
       .str-chat {
+        &__list.str-chat__list--thread {
+          .str-chat__reverse-infinite-scroll {
+            padding-top: 0;
+          }
+        }
+
         &__list {
           padding: 0 var(--xs-p) 0;
 
@@ -129,7 +148,8 @@
             padding-top: 56px;
           }
 
-          &-notifications {
+          &-notifications,
+          .str-chat__jump-to-latest-message {
             padding: 0 var(--xs-p);
           }
         }
@@ -151,6 +171,12 @@
 .livestream {
   &.str-chat {
     .str-chat {
+      &__list.str-chat__list--thread {
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 0;
+        }
+      }
+
       &__list {
         padding: 0 var(--xs-p);
 
@@ -165,6 +191,12 @@
 .commerce {
   &.str-chat {
     .str-chat {
+      &__list.str-chat__list--thread {
+        .str-chat__reverse-infinite-scroll {
+          padding-top: 0;
+        }
+      }
+
       &__list {
         padding: 0 var(--md-p) 0;
 

package/dist/scss/MessageLivestream.scss

@@ -2,8 +2,8 @@
   font-family: var(--second-font);
   display: flex;
   width: 100%;
-  margin: 0 0;
-  padding: 10px 10px;
+  margin: 0;
+  padding: 10px;
   border: 1px solid transparent;
   position: relative;
 
@@ -13,6 +13,7 @@
 
   &-left {
     width: 30px;
+
     .str-chat__avatar {
       margin-right: 0;
     }
@@ -36,9 +37,6 @@
     p {
       margin: 0;
       white-space: pre-line;
-      &:not(:first-of-type) {
-        margin: 16px 0 0;
-      }
       /* These are technically the same, but use both */
       overflow-wrap: break-word;
       word-wrap: break-word;
@@ -54,6 +52,10 @@
       -webkit-hyphens: auto;
       hyphens: auto;
 
+      &:not(:first-of-type) {
+        margin: 16px 0 0;
+      }
+
       code {
         background-color: var(--white20);
         border: 1px solid var(--primary-color-faded);
@@ -99,6 +101,7 @@
       margin-bottom: 5px;
     }
   }
+
   &:hover {
     .str-chat__message-livestream-actions {
       display: flex;
@@ -130,6 +133,8 @@
       height: 100%;
       text-align: center;
 
+      cursor: pointer;
+
       &:not(:last-of-type) {
         border-right: 1px solid var(--light-grey);
       }
@@ -144,8 +149,6 @@
         text-align: center;
       }
 
-      cursor: pointer;
-
       svg {
         fill: var(--black);
         opacity: 0.5;
@@ -192,6 +195,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+
     strong {
       margin-right: 8px;
     }
@@ -231,7 +235,7 @@
     text-align: center;
     font-size: var(--sm-font);
     padding: 8px;
-    margin: 8px 10px 0 10px;
+    margin: 8px 10px 0;
     background: var(--primary-color);
     border-radius: 2px;
     color: var(--dark-grey);
@@ -242,16 +246,18 @@
     .str-chat__message-livestream {
       &-content {
         p {
+          color: var(--red);
+
           svg {
             position: relative;
             top: 2px;
             margin-right: 4px;
           }
-          color: var(--red);
         }
       }
     }
   }
+
   &--failed {
     .str-chat__message-livestream {
       &-content {
@@ -261,6 +267,7 @@
       }
     }
   }
+
   &--initial-message {
     margin: 20px 10px 0;
     width: auto;
@@ -271,6 +278,7 @@
   .str-chat__message-livestream__actions {
     min-width: 30px;
   }
+
   .str-chat__message-livestream {
     &-actions {
       width: 110px;
@@ -278,7 +286,6 @@
 
       .str-chat__message-actions-box {
         top: initial;
-        bottom: initial;
         bottom: -10px;
       }
     }
@@ -295,12 +302,15 @@
       box-shadow: 0 0 6px 0 var(--black5);
       border-radius: 6px;
     }
+
     .str-chat__message-attachment-card {
       background: var(--black10);
       border: 1px solid var(--white10);
+
       &--content {
         background: var(--black10);
       }
+
       &--url {
         color: var(--white80);
       }
@@ -311,13 +321,16 @@
     background: var(--dark-grey);
     border: 1px solid var(--white5);
     box-shadow: 0 2px 1px 0 var(--black5);
+
     > span:not(:last-of-type) {
       border-color: var(--white5);
     }
+
     svg {
       fill: var(--white);
     }
   }
+
   .str-chat__message-livestream-time {
     color: var(--white);
     opacity: 0.5;

package/dist/scss/MessageNotification.scss

@@ -1,4 +1,5 @@
-.str-chat__message-notification {
+.str-chat__message-notification,
+.str-chat__message-notification-scroll-to-latest {
   display: block;
   position: absolute;
   align-self: center;
@@ -27,6 +28,11 @@
     color: var(--primary-color);
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 
+    .str-chat__jump-to-latest-icon {
+      display: inline-block;
+      height: 24px;
+    }
+
     &-unread-count {
       font-size: 10px;
       left: 50%;