stream-chat-react 6.6.0 → 6.8.0

package/dist/scss/ActionsBox.scss

@@ -44,8 +44,10 @@
     background: var(--grey);
     background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
     box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
+
     button {
       color: var(--white);
+
       &:hover {
         color: var(--primary-color);
       }

package/dist/scss/Attachment.scss

@@ -193,8 +193,10 @@
     &__message-attachment {
       &.str-chat__message-attachment--file {
         max-width: 100%;
+
         .str-chat__message-attachment-file--item {
           border-left: none;
+
           &:hover {
             background: var(--grey-whisper);
           }
@@ -202,6 +204,7 @@
       }
     }
   }
+
   &.dark {
     .str-chat {
       &__message-attachment-file--item {
@@ -209,6 +212,7 @@
         span {
           color: var(--white);
         }
+
         &:hover {
           background: transparent;
         }

package/dist/scss/AttachmentActions.scss

@@ -35,6 +35,7 @@
   .str-chat__message-attachment-actions {
     &-button {
       color: var(--white);
+
       &--default {
         border-color: var(--grey-whisper);
       }

package/dist/scss/Audio.scss

@@ -38,6 +38,7 @@
       align-items: center;
       width: 40px;
       height: 40px;
+
       svg {
         fill: var(--white-smoke);
       }
@@ -101,6 +102,7 @@
       background: var(--black);
       color: var(--white);
     }
+
     &__content {
       &--progress {
         background: var(--grey);

package/dist/scss/Avatar.scss

@@ -30,9 +30,11 @@
     object-fit: cover;
     text-align: center;
   }
+
   &-image--loaded {
     background-color: none;
   }
+
   &-fallback {
     background-color: var(--primary-color);
   }

package/dist/scss/Card.scss

@@ -6,6 +6,7 @@
   font-size: var(--sm-font);
   border: 10px solid var(--border);
   margin: var(--lg-m) 0 0 0;
+
   &--header {
     width: 100%;
     height: 175px;
@@ -23,9 +24,10 @@
   }
 
   &--flex {
-    min-width: 0px;
+    min-width: 0;
+
     &,
-    & > * {
+    > * {
       overflow: hidden;
       text-overflow: ellipsis;
     }
@@ -38,6 +40,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
     > * {
       margin: var(--xs-m) 0;
     }
@@ -59,6 +62,7 @@
       left: 0;
     }
   }
+
   &--giphy &--header {
     height: unset;
   }

package/dist/scss/ChannelHeader.scss

@@ -13,6 +13,7 @@
     box-shadow: 0 1px 1px 0 var(--border);
 
     &-left {
+      flex: 1;
       font-size: var(--md-font);
 
       &--title {
@@ -60,13 +61,12 @@
           }
         }
       }
-
-      flex: 1;
     }
 
     &-right {
       display: flex;
       margin: 0 calc(var(--xxs-m) * -1);
+
       &-button-wrapper {
         position: relative;
       }
@@ -106,9 +106,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   svg {
     fill: var(--black);
   }
+
   &:active {
     background-color: var(--grey-whisper);
   }
@@ -119,6 +121,7 @@
     background: var(--white5);
     box-shadow: 0 1px 0 0 var(--black70);
     border-radius: var(--border-radius-sm);
+
     svg {
       fill: var(--white70);
     }
@@ -135,6 +138,7 @@
         background: var(--white-snow);
         box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
       }
+
       @media screen and (max-width: 960px) {
         &__header-livestream {
           padding-left: var(--sm-p);
@@ -142,6 +146,7 @@
         }
       }
     }
+
     &.dark {
       .str-chat__header-livestream {
         background: var(--dark-grey);
@@ -163,15 +168,18 @@
         box-shadow: 0 1px 1px 0 var(--border);
       }
     }
+
     &.dark {
       .str-chat__header-livestream {
         background: var(--white5);
         box-shadow: 0 1px 1px 0 var(--border);
+
         &-left {
           &--title,
           &--members {
             color: var(--white);
           }
+
           &--title {
             font-size: var(--lg-font);
           }
@@ -189,6 +197,7 @@
         box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
         border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
         padding: var(--md-p);
+
         &-left {
           &--title {
             font-size: var(--xxl-font);
@@ -196,14 +205,17 @@
             line-height: 1;
             font-weight: var(--font-weight-regular);
           }
+
           &--subtitle {
             margin: var(--xs-m) 0;
             font-size: var(--lg-font);
           }
+
           &--members {
             display: none;
           }
         }
+
         &-right {
           &-button {
             &--info {
@@ -213,6 +225,7 @@
         }
       }
     }
+
     &.dark {
       .str-chat__header-livestream {
         background: var(--grey);
@@ -230,11 +243,14 @@
       .str-chat__header-livestream {
         background: var(--dark-grey);
         box-shadow: 0 1px 1px 0 var(--black30);
+
         &-left {
           color: var(--white);
+
           &--title {
             font-size: var(--lg-font);
           }
+
           &--members {
             font-size: var(--sm-font);
           }
@@ -247,21 +263,24 @@
 .str-chat__header-hamburger {
   width: 30px;
   height: 38px;
-  padding: var(--xs-p) var(--xs-p) var(--xs-p) 0px;
+  padding: var(--xs-p) var(--xs-p) var(--xs-p) 0;
   margin-right: var(--xs-m);
   display: none;
   flex-direction: column;
   justify-content: space-around;
   cursor: pointer;
+
   &:hover {
     .str-chat__header-hamburger--line {
       background: var(--primary-color);
     }
   }
+
   @media screen and (max-width: 960px) {
     display: flex;
   }
 }
+
 .str-chat__header-hamburger--line {
   width: 100%;
   height: 2px;

package/dist/scss/ChannelList.scss

@@ -52,29 +52,28 @@
   top: 0;
   right: 0;
   z-index: 100001;
-  // display: none;
 }
+
 .str-chat-channel-list-burger {
   width: 10px;
   height: 50px;
   background: var(--white);
   border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
   padding: var(--xxs-p);
-  box-shadow: 0px 4px 6px var(--border);
+  box-shadow: 0 4px 6px var(--border);
   position: fixed;
   top: 10px;
   left: 0;
   z-index: 10000;
-
   justify-content: center;
   cursor: pointer;
+
   div {
     width: 4px;
     height: 100%;
     border-radius: var(--border-radius-sm);
     background: var(--border);
   }
-  // display: none;
 }
 
 @media screen and (max-width: 960px) {
@@ -101,7 +100,7 @@
     &.messaging,
     &.team,
     &.commerce {
-      left: 0px;
+      left: 0;
     }
   }
 }
@@ -109,9 +108,9 @@
 .str-chat-channel-list {
   .str-chat__channel-list-messenger {
     padding: 0;
+
     &__main {
       padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
-      // height: 100%;
       overflow-y: auto;
     }
   }

package/dist/scss/ChannelSearch.scss

@@ -10,9 +10,7 @@
     background: var(--grey-whisper);
     border: 1px solid transparent;
     outline: none;
-    $height: 30;
-
-    height: $height + px;
+    height: 30px;
     border-radius: var(--border-radius);
     color: var(--black);
     font-size: var(--md-font);
@@ -84,7 +82,7 @@
 
   &-container.inline {
     top: 60px;
-    right: 0px;
+    right: 0;
     background: var(--grey-gainsboro);
     height: calc(100vh - 60px);
 

package/dist/scss/ChatDown.scss

@@ -1,6 +1,7 @@
 .str-chat__down {
   display: flex;
   height: 100%;
+
   &-main {
     flex: 1;
     padding: var(--lg-p);

package/dist/scss/DateSeparator.scss

@@ -16,6 +16,7 @@
     height: 1px;
     border: none;
   }
+
   > * {
     &:not(:last-child) {
       margin-right: var(--sm-m);
@@ -34,10 +35,12 @@
     &-line {
       background-color: var(--grey-gainsboro);
     }
+
     &-date {
       color: var(--grey-whisper);
     }
   }
+
   &.team {
     .str-chat__date-separator {
       &-line {

package/dist/scss/EditMessageForm.scss

@@ -49,10 +49,12 @@
     top: unset;
     right: unset;
     left: unset;
+
     svg {
       fill: var(--black);
       opacity: 0.5;
     }
+
     &:hover {
       svg {
         opacity: 1;
@@ -82,6 +84,7 @@
     .str-chat__message-team-form-footer {
       button {
         color: var(--grey-gainsboro);
+
         &[type='submit'] {
           color: var(--primary-color);
         }
@@ -94,6 +97,7 @@
       border: 2px solid transparent;
       border-radius: var(--border-radius-sm);
       color: var(--white);
+
       &:focus {
         box-shadow: inset 0 0 0 1px var(--primary-color);
         border: 2px solid var(--primary-color-faded);

package/dist/scss/EventComponent.scss

@@ -2,11 +2,13 @@
   .str-chat__event-component__channel-event {
     display: flex;
     margin-top: var(--md-m);
+
     &__content {
       margin-right: var(--xs-m);
       color: var(--overlay-dark);
       font-size: var(--lg-font);
     }
+
     &__date {
       font-size: var(--xs-font);
       margin-top: var(--xxs-m);
@@ -24,11 +26,13 @@
       color: var(--overlay-dark);
       font-size: var(--lg-font);
     }
+
     &__sentence {
       margin-right: var(--xs-m);
       color: var(--overlay-dark);
       font-size: var(--lg-font);
     }
+
     &__date {
       font-size: var(--xs-font);
       margin-top: var(--xxs-m);

package/dist/scss/Gallery.scss

@@ -41,10 +41,12 @@
   .str-chat {
     &__gallery {
       margin: 4px 0;
+
       &-image {
         width: 150px;
         height: 150px;
       }
+
       &-placeholder {
         position: relative;
         width: 150px;
@@ -59,11 +61,13 @@
         cursor: -moz-zoom-in;
         cursor: -webkit-zoom-in;
         cursor: zoom-in;
+
         p {
           position: relative;
           z-index: 1;
         }
-        &:after {
+
+        &::after {
           content: '';
           position: absolute;
           top: 0;
@@ -91,10 +95,12 @@
       height: 100%;
     }
   }
+
   .str-chat__message-commerce {
     .str-chat__gallery {
       border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
     }
+
     &--right {
       .str-chat__gallery {
         border-radius: var(--border-radius) var(--border-radius) 2px var(--border-radius);

package/dist/scss/LoadMoreButton.scss

@@ -18,6 +18,7 @@
       }
     }
   }
+
   &.team {
     .str-chat__load-more-button {
       &__button {