stream-chat-react 6.7.2 → 6.8.0

package/dist/scss/Message.scss

@@ -56,6 +56,7 @@
   &--top,
   &--single {
     margin: 24px 0 0;
+
     .str-chat__message {
       &-attachment--img,
       &-attachment-card,
@@ -81,6 +82,7 @@
               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 {
@@ -88,10 +90,12 @@
               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);
         }
+
         &.str-chat__message--has-text {
           .str-chat__gallery {
             border-radius: var(--border-radius) var(--border-radius)
@@ -131,6 +135,7 @@
               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,
@@ -144,6 +149,7 @@
 
   &--bottom {
     margin: 0 0 24px;
+
     .str-chat__message {
       &-attachment--img,
       &-attachment-card,
@@ -170,6 +176,7 @@
               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,
@@ -259,11 +266,13 @@
           &-inner {
             border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
               calc(var(--border-radius-sm) / 2) var(--border-radius);
+
             &--has-attachment {
               margin: 0;
             }
           }
         }
+
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
@@ -298,6 +307,7 @@
       display: flex;
       align-items: center;
       width: 100%;
+
       p {
         margin: 0 24px;
         color: var(--grey);
@@ -305,18 +315,21 @@
         font-weight: var(--font-weight-bold);
       }
     }
+
     &__line {
       flex: 1;
       height: 1px;
       width: 100%;
       background-color: var(--overlay);
     }
+
     &__date {
       margin-top: 4px;
       text-transform: uppercase;
       color: var(--grey);
     }
   }
+
   &-inner {
     position: relative;
 
@@ -324,16 +337,19 @@
       margin-right: 88px;
       margin-left: unset;
     }
+
     > .str-chat__message-simple__actions {
       position: absolute;
       top: 5px;
       left: calc(100% + 8px);
     }
   }
+
   &-attachment-container {
     display: flex;
     flex-direction: column;
   }
+
   &-text {
     display: inline-flex;
     justify-content: flex-start;
@@ -424,6 +440,7 @@
     margin: 0;
     white-space: pre-line;
     line-height: 20px;
+
     &:not(:first-of-type) {
       margin: var(--sm-m) 0 0;
     }
@@ -454,6 +471,7 @@
           margin-right: unset;
           margin-left: 88px;
         }
+
         > .str-chat__message-simple__actions {
           position: absolute;
           top: 5px;
@@ -470,6 +488,7 @@
         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 {
           background: var(--primary-color);
           border: 1px solid var(--primary-color);
@@ -540,12 +559,14 @@
     flex-direction: column;
     align-items: flex-start;
   }
+
   .messaging {
     &.str-chat {
       .str-chat {
         &__message,
         &__message--me {
           margin: calc(var(--xxs-m) / 2) 0;
+
           &--with-reactions {
             margin-top: var(--lg-m);
           }
@@ -553,27 +574,32 @@
 
         &__message-attachment--image {
           margin: calc(var(--xxs-m) / 2) 0;
-
           max-width: 480px;
         }
+
         &__message-attachment--card {
           margin: calc(var(--xxs-m) / 2) 0;
           line-height: normal;
         }
+
         &__message-attachment-card {
           margin: calc(var(--xxs-m) / 2) auto;
           line-height: normal;
           background: var(--grey-gainsboro);
+
           &--title {
             color: var(--primary-color);
           }
+
           &--text {
             display: none;
           }
+
           &--url {
             text-transform: lowercase;
           }
         }
+
         &__message--deleted {
           margin: 0 var(--xl-m);
         }
@@ -597,6 +623,7 @@
     margin: 0 0 0 var(--xl-m);
     flex-direction: column;
     align-items: flex-start;
+
     &-inner {
       background: var(--grey-whisper);
       padding: var(--xs-p) var(--sm-p);
@@ -610,6 +637,7 @@
     &.str-chat__message--deleted {
       margin: 0 var(--xl-m) 0 0;
       align-items: flex-end;
+
       &-inner {
         background: var(--white-smoke);
         padding: var(--xs-p) var(--sm-p);
@@ -649,6 +677,7 @@
 .str-chat {
   &__message-simple {
     font-family: var(--second-font);
+
     &__actions {
       display: flex;
 
@@ -658,19 +687,23 @@
         align-items: center;
         height: 10px;
         cursor: pointer;
+
         svg {
           fill: var(--black);
           opacity: 0.5;
         }
+
         &:hover {
           svg {
             opacity: 1;
           }
         }
+
         &--thread,
         &--reactions {
           display: none;
         }
+
         &--options {
           position: relative;
           display: none;
@@ -682,6 +715,7 @@
       .str-chat__message-simple__actions__action--thread {
         display: flex;
       }
+
       .str-chat__message-simple__actions__action--reactions {
         display: flex;
       }
@@ -701,6 +735,7 @@
 
       &.str-chat__message-simple-text-inner--is-emoji {
         background: transparent;
+
         p {
           line-height: 48px;
         }
@@ -709,11 +744,13 @@
       p {
         text-align: left;
       }
+
       a {
         color: var(--primary-color);
         font-weight: var(--font-weight-bold);
         text-decoration: none;
       }
+
       blockquote {
         margin: 0 0 0 var(--xxs-m);
         font-style: italic;
@@ -736,9 +773,11 @@
       .str-chat__message-simple-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: var(--xxs-m);
@@ -762,6 +801,7 @@
           line-height: 32px;
         }
       }
+
       .str-chat__message-simple__actions {
         order: -1;
       }
@@ -771,9 +811,11 @@
       .str-chat__message-simple__actions__action--options {
         display: flex;
       }
+
       .str-chat__message-simple__actions__action--reactions {
         display: flex;
       }
+
       .str-chat__message-simple__actions__action--thread {
         display: flex;
       }
@@ -782,9 +824,11 @@
         .str-chat__message-simple__actions__action--options {
           display: none;
         }
+
         .str-chat__message-simple__actions__action--reactions {
           display: none;
         }
+
         .str-chat__message-simple__actions__action--thread {
           display: none;
         }
@@ -801,7 +845,7 @@
 }
 
 .str-chat__message-simple-status {
-  margin: var(--xs-m) 0px var(--xs-m) var(--xs-m);
+  margin: var(--xs-m) 0 var(--xs-m) var(--xs-m);
   order: 3;
   position: absolute;
   left: 100%;
@@ -811,6 +855,7 @@
   justify-content: flex-end;
   align-items: center;
   z-index: 1;
+
   &-number {
     font-size: var(--xs-font);
     margin-left: 4px;
@@ -861,23 +906,28 @@
       display: none;
     }
   }
+
   .str-chat__message-attachment--file {
     margin: 0;
     background: var(--white);
     border-color: transparent;
     border: 1px solid var(--grey-gainsboro);
     border-radius: var(--border-radius-md);
+
     .str-chat__message-attachment-file--item {
       border-color: transparent;
       padding: 0 var(--xs-p);
     }
+
     &:first-of-type {
       border-radius: var(--border-radius) var(--border-radius) 0 0;
       border-bottom: transparent;
     }
+
     &:last-of-type {
       border-top-color: transparent;
       border-radius: 0 0 var(--border-radius) calc(var(--border-radius-sm) / 2);
+
       &:first-of-type {
         border-bottom: 1px solid var(--grey-gainsboro);
         border-top: 1px solid var(--grey-gainsboro);
@@ -886,16 +936,20 @@
       }
     }
   }
+
   .str-chat__message-attachment-file--item {
     border-radius: 0;
   }
+
   &--me {
     .str-chat__message-attachment-card {
       border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
         var(--border-radius-sm);
     }
+
     .str-chat__message-attachment--file {
       background: var(--grey-gainsboro);
+
       &:last-of-type {
         border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
 
@@ -913,6 +967,7 @@
     &__actions {
       width: 30px;
     }
+
     &__actions__action--options {
       .str-chat__message-actions-box {
         right: unset;
@@ -938,6 +993,7 @@
   .str-chat__message-simple-text-inner {
     max-width: 218px;
   }
+
   .str-chat__message-simple-status {
     left: unset;
     right: 8px;
@@ -950,15 +1006,18 @@
     &-text-inner {
       background: var(--white-smoke);
       color: var(--white);
+
       &--is-emoji {
         background: transparent;
       }
     }
+
     &__actions {
       svg {
         fill: var(--white);
       }
     }
+
     &-data {
       color: var(--white);
       opacity: 0.5;
@@ -966,9 +1025,11 @@
 
     .str-chat__message-attachment-card {
       background: transparent;
+
       &--content {
         background: var(--white-smoke);
       }
+
       &--url {
         color: var(--grey-gainsboro);
       }
@@ -982,6 +1043,7 @@
       span {
         color: var(--white);
       }
+
       span {
         opacity: 0.5;
       }
@@ -997,15 +1059,18 @@
       .str-chat__message-simple {
         &-text-inner {
           background: var(--black);
+
           &--is-emoji {
             background: transparent;
           }
         }
+
         .str-chat__message-attachment-card {
           &--content {
             background: var(--black);
           }
         }
+
         .str-chat__message-attachment--file {
           background: var(--overlay);
         }
@@ -1019,6 +1084,7 @@
     background: var(--grey);
     box-shadow: 0 0 2px 0 var(--overlay), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
   }
+
   .str-chat__message {
     &--error,
     &--failed {
@@ -1035,6 +1101,7 @@
     .str-chat__message-actions-box {
       left: 100%;
       right: unset;
+
       &--reverse {
         right: 100%;
         left: unset;
@@ -1042,11 +1109,13 @@
           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);
+
       &.str-chat__message-actions-box--reverse {
         left: 100%;
         right: unset;
@@ -1055,6 +1124,7 @@
       }
     }
   }
+
   a[href^='mailto:'] {
     -webkit-hyphens: none;
     -moz-hyphens: none;
@@ -1073,6 +1143,7 @@
     max-width: 274px;
   }
 }
+
 @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
   .str-chat__message .str-chat__message-attachment--img {
     max-width: 240px;
@@ -1112,6 +1183,7 @@
   .mml-align-right .mml-carousel {
     margin-left: auto;
   }
+
   .mml-align-left .mml-btnlist--floating,
   .mml-align-left .mml-carousel {
     margin-right: auto;
@@ -1121,6 +1193,7 @@
     .mml-align-left .mml-carousel {
       margin-left: -10px;
     }
+
     .mml-align-right .mml-carousel {
       margin-right: -10px;
     }
@@ -1134,6 +1207,7 @@
       .mml-align-left .mml-carousel {
         margin-left: -10px;
       }
+
       .mml-align-right .mml-carousel {
         margin-right: -10px;
       }
@@ -1145,9 +1219,11 @@
   .str-chat__message-simple__actions__action--options {
     display: flex;
   }
+
   .str-chat__message-simple__actions__action--reactions {
     display: flex;
   }
+
   .str-chat__message-simple__actions__action--thread {
     display: flex;
   }

package/dist/scss/MessageInput.scss

@@ -23,6 +23,7 @@
     flex-wrap: wrap;
     flex: 1 0;
     position: relative;
+
     .str-chat__textarea {
       textarea {
         padding-right: 72px;
@@ -80,6 +81,7 @@
 .str-chat__textarea {
   height: auto;
   flex: 1;
+
   textarea {
     width: 100%;
     outline: none;
@@ -254,6 +256,7 @@
   color: var(--white);
   font-weight: 800;
   font-size: var(--sm-font);
+
   svg {
     display: none;
   }

package/dist/scss/MessageInputFlat.scss

@@ -102,6 +102,7 @@
     line-height: 17px;
     border: none;
     margin: 0;
+
     &:focus {
       border: none;
       color: var(--black);
@@ -119,9 +120,11 @@
     position: absolute;
     top: calc(100% - 45px);
     left: 25px;
+
     svg {
       fill: var(--black);
       opacity: 0.5;
+
       &:hover {
         opacity: 1;
       }
@@ -151,7 +154,8 @@
         bottom: 50px;
         left: 32px;
         right: unset;
-        &:after {
+
+        &::after {
           left: 5px;
           right: unset;
         }
@@ -176,6 +180,7 @@
     svg {
       fill: var(--black);
       opacity: 0.5;
+
       &:hover {
         opacity: 1;
       }
@@ -198,6 +203,7 @@
       .rfu-thumbnail__overlay,
       .rfu-icon-button {
         padding: 0;
+
         svg {
           opacity: 0.9;
           height: 25px;
@@ -224,6 +230,7 @@
 .dark.str-chat {
   .str-chat__input-flat {
     background: var(--white5);
+
     textarea {
       background: var(--white5);
       border-radius: var(--border-radius-md);

package/dist/scss/MessageList.scss

@@ -20,6 +20,7 @@
     padding: var(--sm-p) 0 0 0;
     overflow: visible;
   }
+
   &__center {
     width: 100%;
     display: flex;
@@ -79,9 +80,11 @@
       &__list {
         padding: 0 var(--xl-p) 0;
         background: var(--white);
+
         .str-chat__reverse-infinite-scroll {
           padding-top: 56px;
         }
+
         &-notifications {
           background: var(--white);
         }
@@ -91,18 +94,22 @@
       .str-chat {
         &__list {
           padding: 0 var(--xs-p) 0;
+
           .str-chat__reverse-infinite-scroll {
             padding-top: 56px;
           }
+
           &-notifications {
             padding: 0 var(--xs-p);
           }
         }
       }
     }
+
     &.dark {
       .str-chat__list {
         background: var(--white5);
+
         &-notifications {
           background: var(--white5);
         }
@@ -116,6 +123,7 @@
     .str-chat {
       &__list {
         padding: 0 var(--xs-p);
+
         .str-chat__reverse-infinite-scroll {
           padding-top: 56px;
         }
@@ -129,9 +137,11 @@
     .str-chat {
       &__list {
         padding: 0 var(--md-p) 0;
+
         .str-chat__reverse-infinite-scroll {
           padding-top: 72px;
         }
+
         &-notifications {
           padding-left: var(--md-p);
           padding-right: var(--md-p);

package/dist/scss/MessageRepliesCountButton.scss

@@ -22,6 +22,7 @@
       fill: var(--white10);
     }
   }
+
   &.team {
     .str-chat__message-replies-count-button {
       svg {

package/dist/scss/MessageTeam.scss

@@ -19,21 +19,17 @@
       }
 
       &-actions {
-        $actionsBorderColor: #e0e0e0;
-        $actionsHeight: 24px;
-        $actionsOffset: $actionsHeight / 2;
-
         position: absolute;
-        top: -$actionsOffset;
+        top: -12px;
         right: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 75px;
-        height: $actionsHeight;
+        height: 24px;
         border-radius: 100px;
         background: var(--white);
-        border: 1px solid $actionsBorderColor;
+        border: 1px solid #e0e0e0;
         box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07);
         z-index: 10;
         visibility: hidden;

package/dist/scss/Modal.scss

@@ -10,6 +10,7 @@
   display: none;
   align-items: center;
   justify-content: center;
+
   &--open {
     display: flex;
   }
@@ -32,12 +33,14 @@
     cursor: pointer;
     display: flex;
     align-items: center;
+
     svg {
       position: relative;
       top: 1px;
       margin-left: var(--xs-m);
       fill: var(--white);
     }
+
     &:hover {
       opacity: 0.79;
     }