stream-chat-react 6.12.0 → 7.0.0

package/dist/scss/Card.scss

@@ -88,3 +88,13 @@
     filter: invert(100%);
   }
 }
+
+.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
+  .str-chat__message-attachment-card--content {
+    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
+    background-position: right var(--border-radius) bottom var(--border-radius);
+    background-repeat: no-repeat;
+    /* that was the original sizing of the img in React */
+    background-size: 56px;
+  }
+}

package/dist/scss/ChannelListMessenger.scss

@@ -3,3 +3,7 @@
   min-width: 300px;
   background: var(--grey-gainsboro);
 }
+
+.str-chat-channel-list .str-chat__channel-list-messenger__main {
+  padding-bottom: 4px;
+}

package/dist/scss/ChannelSearch.scss

@@ -49,6 +49,9 @@
       height: 40px;
       cursor: pointer;
       padding-left: 8px;
+      width: 100%;
+      border: none;
+      background: transparent;
 
       &:hover {
         font-weight: var(--font-weight-bold);
@@ -81,7 +84,7 @@
   }
 
   &-container.inline {
-    top: 60px;
+    top: 64px;
     right: 0;
     background: var(--grey-gainsboro);
     height: calc(100vh - 60px);

package/dist/scss/EditMessageForm.scss

@@ -106,3 +106,7 @@
     }
   }
 }
+
+.str-chat__edit-message-form {
+  position: relative;
+}

package/dist/scss/Gallery.scss

@@ -11,6 +11,9 @@
     background: var(--white);
     margin-bottom: 1px;
     margin-right: 1px;
+    border: none;
+    padding: 0;
+    display: flex;
 
     &:hover {
       cursor: -moz-zoom-in;
@@ -61,10 +64,13 @@
         cursor: -moz-zoom-in;
         cursor: -webkit-zoom-in;
         cursor: zoom-in;
+        cursor: pointer;
+        border: none;
 
         p {
           position: relative;
           z-index: 1;
+          font-size: 16px;
         }
 
         &::after {

package/dist/scss/LoadMoreButton.scss

@@ -36,3 +36,9 @@
     }
   }
 }
+
+.str-chat__load-more-button__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/scss/Message.scss

@@ -687,6 +687,9 @@
         align-items: center;
         height: 10px;
         cursor: pointer;
+        background-color: transparent;
+        border: none;
+        padding: 0;
 
         svg {
           fill: var(--black);
@@ -707,6 +710,18 @@
         &--options {
           position: relative;
           display: none;
+
+          > button {
+            cursor: pointer;
+            background-color: transparent;
+            border: none;
+            padding: 3px 0;
+          }
+        }
+
+        &--options.str-chat-angular__message-simple__actions__action--options--editing {
+          position: relative;
+          display: flex;
         }
       }
     }
@@ -810,6 +825,11 @@
     &:hover {
       .str-chat__message-simple__actions__action--options {
         display: flex;
+
+        button {
+          display: flex;
+          align-items: center;
+        }
       }
 
       .str-chat__message-simple__actions__action--reactions {
@@ -999,6 +1019,10 @@
     left: unset;
     right: 8px;
     bottom: 30px;
+
+    &-angular {
+      margin-bottom: 3px;
+    }
   }
 }
 

package/dist/scss/MessageActions.scss

@@ -42,6 +42,10 @@
   font-size: var(--sm-font);
   color: var(--black);
   text-decoration: none;
+
+  &:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+  }
 }
 
 .str-chat__message-actions-list button:hover {
@@ -89,3 +93,20 @@
 .str-chat__message-actions-options:hover svg {
   fill: var(--primary-color);
 }
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--thread {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--reactions {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
+  display: flex;
+
+  button {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/scss/MessageInput.scss

@@ -56,6 +56,10 @@
   .rfu-file-upload-button {
     right: 46px;
     top: calc(100% - 34px);
+
+    &:focus-within {
+      outline: 5px auto -webkit-focus-ring-color;
+    }
   }
 
   &-footer {
@@ -164,9 +168,24 @@
   font-size: var(--md-font);
 }
 
+.rta__entity {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  background: transparent;
+}
+
 .rta__entity--selected {
   background-color: var(--primary-color);
   color: var(--white);
+  width: 100%;
+}
+
+// Using separate rules for Angular so React SDK integrators don't have problems with "!important"
+// Angular needs "!imporant" to override angular-mentions styles
+.active.mention-active > a /* angular-mentions autocomplete */ {
+  background-color: var(--primary-color) !important;
+  color: var(--white) !important;
 }
 
 .rta__list {
@@ -201,6 +220,13 @@
 .str-chat__slash-command {
   padding: var(--xs-p) var(--sm-p);
   font-size: var(--md-font);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  br {
+    display: none;
+  }
 
   &-description {
     font-size: var(--sm-font);

package/dist/scss/MessageInputFlat.scss

@@ -13,6 +13,8 @@
       flex-direction: column;
       align-items: center;
       margin-bottom: var(--xs-m);
+      width: 100%;
+      position: relative;
 
       &-header {
         font-size: var(--md-font);
@@ -81,6 +83,21 @@
           }
         }
       }
+
+      .str-chat__message-attachment-card {
+        margin: 0;
+        min-height: unset;
+
+        .str-chat__message-attachment-card--content {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-has-attachments {
+    .str-chat__send-button {
+      display: block;
     }
   }
 
@@ -120,6 +137,10 @@
     position: absolute;
     top: calc(100% - 45px);
     left: 25px;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    background-color: transparent;
 
     svg {
       fill: var(--black);
@@ -192,7 +213,8 @@
   }
 }
 
-.rfu-image-previewer {
+.rfu-image-previewer,
+.rfu-image-previewer-angular-host {
   flex: 1 1 100%;
 
   &__image {

package/dist/scss/MessageTeam.scss

@@ -295,6 +295,10 @@
         display: flex;
         justify-content: space-between;
         padding: 10px 0 5px;
+
+        &-angular {
+          justify-content: end;
+        }
       }
 
       &--bottom,
@@ -456,6 +460,10 @@
       }
     }
   }
+
+  .str-chat-angular__message-list-host .str-chat__list {
+    padding: 0;
+  }
 }
 
 .str-chat {

package/dist/scss/Modal.scss

@@ -1,12 +1,11 @@
 .str-chat__modal {
-  background: var(--black);
+  background: var(--modal-overlay-color);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
-  opacity: 0.89;
   display: none;
   align-items: center;
   justify-content: center;
@@ -33,6 +32,8 @@
     cursor: pointer;
     display: flex;
     align-items: center;
+    background-color: transparent;
+    border: none;
 
     svg {
       position: relative;
@@ -55,6 +56,8 @@
     position: relative;
     top: unset;
     right: unset;
+    padding: 0;
+    width: auto;
   }
 }
 
@@ -66,3 +69,9 @@
     }
   }
 }
+
+.str-chat__exit {
+  display: flex;
+  width: 86px;
+  justify-content: space-between;
+}

package/dist/scss/ReactionList.scss

@@ -37,6 +37,13 @@
       justify-content: center;
       margin: -1px -16px 0 0;
       z-index: 888;
+
+      button {
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        display: flex;
+      }
     }
 
     .emoji-mart-emoji {

package/dist/scss/ReactionSelector.scss

@@ -93,6 +93,13 @@
   }
 }
 
+button.str-chat__message-reactions-list-item {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+}
+
 .str-chat__reaction-selector {
   z-index: 999;
   height: 60px;

package/dist/scss/SendButton.scss

@@ -3,6 +3,11 @@
   border: 0;
   background: 0;
   outline: 0;
+
+  &:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
   @media screen and (min-width: 768px) {
     display: none;
   }

package/dist/scss/SmallMessageInput.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   margin: var(--xs-m);
+  padding: var(--xs-m);
   position: relative;
   z-index: 1000;
 
@@ -19,9 +20,20 @@
     width: 100%;
   }
 
+  &-fileupload {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+
   &-emojiselect {
     bottom: 10px;
     right: 6px;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background-color: transparent;
   }
 
   .rfu-file-upload-button {

package/dist/scss/Thread.scss

@@ -136,7 +136,15 @@
         padding-top: 0;
 
         &.str-chat__thread--full {
+          position: fixed;
+          top: 0;
+          right: 0;
+          height: 100vh;
+          background: var(--white);
+          z-index: 1000;
           margin: 0;
+          width: 100vw;
+          max-width: 100%;
         }
 
         .str-chat__gallery {
@@ -169,6 +177,10 @@
         // box-shadow: none;
         background: var(--white);
         box-shadow: 0 2px 9px 0 var(--border), 0 1px 0 0 var(--border);
+
+        .str-chat__square-button {
+          cursor: pointer;
+        }
       }
 
       &__thread-start {
@@ -253,6 +265,18 @@
   .str-chat__thread {
     background: transparent;
 
+    &--full {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100vh;
+      background: var(--white);
+      z-index: 1000;
+      margin: 0;
+      width: 100vw;
+      max-width: 100%;
+    }
+
     &-header {
       background: var(--white30);
     }

package/dist/scss/_base.scss

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,700,700i');
-
 .str-chat {
   box-sizing: border-box;
 
@@ -133,6 +131,10 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
       display: flex;
       flex-direction: column;
       flex: 1;
+
+      &--hideOnThread {
+        display: none;
+      }
     }
 
     .rfu-dropzone {

package/dist/scss/_variables.scss

@@ -1,5 +1,8 @@
 /* fonts */
-$main-font: 'IBM Plex Sans', sans-serif;
+/* https://systemfontstack.com/ */
+$system-stack-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+  Cantarell, 'Helvetica Neue', sans-serif;
+$main-font: #{$system-stack-font};
 $second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
 $base-font-weight: 400;
@@ -151,4 +154,6 @@ $border-radius: 16px;
   --white: #ffffff;
   --white-smoke: #f2f2f2;
   --white-snow: #fcfcfc;
+
+  --modal-overlay-color: rgba(0, 0, 0, 0.89);
 }

package/dist/scss/index.scss

@@ -6,6 +6,7 @@
 @import './vendor/emoji-mart.scss'; // copy from '../../node_modules/emoji-mart/css/emoji-mart.css'
 @import './vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
 @import './vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
+@import './vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'
 
 // Components
 @import './ActionsBox.scss';
@@ -38,7 +39,6 @@
 @import './MessageLivestream.scss';
 @import './MessageRepliesCountButton.scss';
 @import './Modal.scss';
-@import './ModalImage.scss';
 @import './ReactionList.scss';
 @import './ReactionSelector.scss';
 @import './SendButton.scss';

package/dist/scss/vendor/react-file-utils.scss

@@ -139,6 +139,8 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
+  border: none;
+  background: transparent;
 }
 .rfu-icon-button svg {
   margin: 4px;