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

package/dist/scss/MessageTeam.scss

@@ -33,7 +33,7 @@
         box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07);
         z-index: 10;
         visibility: hidden;
-        padding: 0 4px 0;
+        padding: 0 4px;
 
         > span {
           position: relative;
@@ -121,7 +121,7 @@
         font-weight: var(--font-weight-regular);
         border-left: 1px solid $borderColor;
         position: relative;
-        margin: 0 0;
+        margin: 0;
 
         &--image {
           padding-left: 0;
@@ -131,9 +131,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;
@@ -148,6 +145,10 @@
           -webkit-hyphens: auto;
           hyphens: auto;
 
+          &:not(:first-of-type) {
+            margin: 16px 0 0;
+          }
+
           a {
             color: var(--secondary-color);
             font-weight: var(--font-weight-bold);
@@ -214,11 +215,11 @@
         }
 
         &--middle {
-          margin: 0 0 0;
+          margin: 0;
         }
 
         &--bottom {
-          margin: 0 0 0;
+          margin: 0;
         }
       }
 
@@ -382,6 +383,7 @@
       &--failed {
         .str-chat__message-team-content--text {
           border-color: #d0021b;
+
           p {
             opacity: 0.5;
           }
@@ -396,7 +398,7 @@
 
       .str-chat__message-attachment-card {
         margin: 0;
-        border-radius: 4px 4px 4px 4px;
+        border-radius: 4px;
         background: #fff;
         border: 1px solid rgba(0, 0, 0, 0.08);
 
@@ -414,6 +416,7 @@
         position: static;
         top: initial;
       }
+
       .quoted-message {
         align-items: center;
         padding-left: 5px;
@@ -446,6 +449,7 @@
   .str-chat__message-simple__actions {
     min-width: 30px;
   }
+
   .str-chat__message-team {
     padding: 5px 10px;
 
@@ -455,7 +459,6 @@
 
       .str-chat__message-actions-box {
         top: initial;
-        bottom: initial;
         bottom: -10px;
       }
     }
@@ -490,21 +493,26 @@
     color: rgba(255, 255, 255, 0.5);
     opacity: 1;
   }
+
   .str-chat__message-team {
     $borderColor: rgba(0, 0, 0, 0.4);
     $fontColor: white;
+
     &-author {
       color: $fontColor;
     }
+
     &-meta {
       time {
         color: rgba($fontColor, 0.3);
       }
     }
+
     &-content,
     .str-chat__message-attachment {
       border-color: $borderColor;
       color: $fontColor;
+
       &--top,
       &--single {
         &:not(.str-chat__message-team-content--image) {
@@ -513,6 +521,7 @@
           }
         }
       }
+
       &--image {
         border-color: transparent;
       }
@@ -528,72 +537,89 @@
         background-color: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
       }
+
       .str-chat__message-attachment-file--item {
         border-color: rgba(black, 0.4);
+
         a,
         span {
           color: white;
         }
+
         span {
           opacity: 0.4;
         }
+
         &:hover {
           background: transparent;
         }
       }
+
       .str-chat__message-attachment--file {
         a,
         span {
           color: white;
         }
+
         span {
           opacity: 0.4;
         }
       }
     }
+
     &-content,
     .str-chat__message-attachment {
       .str-chat__message-attachment-card {
         background: transparent;
+
         &--content {
           background: rgba(0, 0, 0, 0.1);
           min-height: 58px;
           margin: 0;
-          padding: 0px 16px;
+          padding: 0 16px;
         }
+
         &--title {
           color: $fontColor;
         }
+
         &--url {
           color: rgba($fontColor, 0.4);
         }
       }
     }
+
     &-actions {
       background: #1b1d20;
 
       border: 1px solid rgba(224, 224, 224, 0.03);
       box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07);
       border-radius: 12px;
+
       .str-chat__message-actions-box {
         background: #6a6b6d;
       }
+
       > span {
         border-color: rgba(0, 0, 0, 0.04);
+
         svg {
           fill: #fff;
         }
       }
     }
+
     &--error {
       .str-chat__message-team {
         &-content {
           border-color: red;
           border-width: 1px;
+
           p {
             color: rgba(255, 255, 255, 0.5);
             opacity: 1;
           }
+
           &--top,
           &--single {
             &:not(.str-chat__message-team-content--image) {
@@ -606,6 +632,7 @@
         }
       }
     }
+
     &--editing {
       padding: 10px;
       background: rgba(0, 0, 0, 0.1);

package/dist/scss/Modal.scss

@@ -15,6 +15,7 @@
   }
 
   &__inner {
+    max-width: 100%;
     background: var(--white);
     padding: var(--md-p);
     border-radius: var(--border-radius-md);
@@ -47,6 +48,7 @@
   }
 
   .str-chat__edit-message-form {
+    max-width: 100%;
     width: var(--modal-edit-message-form-width);
   }
 

package/dist/scss/ReactionList.scss

@@ -27,6 +27,10 @@
     background-position: 0 -66px;
     background-repeat: repeat-x;
 
+    &.str-chat__reaction-list-hidden {
+      display: none;
+    }
+
     ul {
       position: relative;
       list-style-type: none;
@@ -108,6 +112,16 @@
       color: var(--button-background);
       font-size: var(--sm-font);
     }
+
+    // Only displayed in theme-v2
+    .str-chat__message-reaction-count {
+      display: none;
+    }
+
+    // Only displayed in theme-v2
+    .str-chat__tooltip {
+      display: none;
+    }
   }
 
   &--me,

package/dist/scss/ReactionSelector.scss

@@ -91,6 +91,12 @@
       }
     }
   }
+
+  .str-chat__emoji-selector-emoji-angular {
+    width: 20px;
+    height: 20px;
+    top: 10px;
+  }
 }
 
 button.str-chat__message-reactions-list-item {

package/dist/scss/SendButton.scss

@@ -11,4 +11,10 @@
   @media screen and (min-width: 768px) {
     display: none;
   }
+
+  .str-chat__send-button-angular {
+    svg path {
+      fill: var(--primary-color);
+    }
+  }
 }

package/dist/scss/SmallMessageInput.scss

@@ -4,7 +4,6 @@
   margin: var(--xs-m);
   padding: var(--xs-m);
   position: relative;
-  z-index: 1000;
 
   .rfu-file-previewer {
     flex: 1 1 100%;

package/dist/scss/Thread.scss

@@ -10,6 +10,13 @@
   flex-direction: column;
   padding-top: 0;
 
+  .str-chat__thread-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
   &--full {
     max-width: 100%;
   }
@@ -29,10 +36,11 @@
 
     &-details {
       font-size: var(--md-font);
+      font-weight: bold;
 
-      small {
-        display: block;
+      .str-chat__thread-header-channel-name {
         font-size: var(--sm-font);
+        font-weight: normal;
       }
     }
   }
@@ -178,13 +186,24 @@
       }
 
       &__thread-header {
+        z-index: 1;
         border: none;
         // box-shadow: none;
         background: var(--white);
         box-shadow: 0 2px 9px 0 var(--border), 0 1px 0 0 var(--border);
 
+        .str-chat__thread-header-details {
+          width: 100%;
+        }
+
         .str-chat__square-button {
           cursor: pointer;
+          padding: var(--xxs-p);
+
+          svg {
+            width: 21px;
+            height: 21px;
+          }
         }
       }
 

package/dist/scss/Tooltip.scss

@@ -1,7 +1,4 @@
 .str-chat__tooltip {
-  position: absolute;
-  right: 0;
-  bottom: calc(100% + 10px);
   display: flex;
   background: var(--black);
   border-radius: var(--border-radius-sm);
@@ -24,6 +21,12 @@
     color: var(--primary-color);
     text-decoration: none;
   }
+}
+
+.str-chat__tooltip:not(.str-chat__tooltip-angular) {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 10px);
 
   &::after {
     content: '';

package/dist/scss/TypingIndicator.scss

@@ -46,6 +46,11 @@
       opacity: 0.2;
     }
   }
+
+  .str-chat__typing-indicator__users {
+    margin-left: 8px;
+    color: var(--lighten-grey);
+  }
 }
 
 .dark.str-chat {

package/dist/scss/_base.scss

@@ -7,6 +7,19 @@
     box-sizing: inherit;
     font-family: var(--second-font);
   }
+
+  // Overriding styles of ngx-popperjs
+  .ngxp__container {
+    z-index: 1;
+    margin: 0 !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+    border: none !important;
+
+    .ngxp__arrow {
+      display: none !important;
+    }
+  }
 }
 
 .clearfix {
@@ -208,3 +221,16 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
     }
   }
 }
+
+// Only in theme-v2
+.str-chat__empty-channel {
+  display: none;
+}
+
+// Fixes icon sizing problem in Angular SDK
+stream-icon,
+stream-icon-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/scss/_variables.scss

@@ -127,7 +127,7 @@ $border-radius: 16px;
   --xxl-m: calc(var(--spacing-unit) * 8); // 64px
 
   /* miscellaneous */
-  --assetsPath: '../assets';
+  --assetsPath: $assetsPath;
 
   /* accent colors */
   --accent_blue: #005fff;
@@ -154,6 +154,7 @@ $border-radius: 16px;
   --transparent: transparent;
   --white-smoke: #f2f2f2;
   --white-snow: #fcfcfc;
+  --unread-badge-color: #ffffff;
 
   --modal-overlay-color: rgba(0, 0, 0, 0.89);
   --modal-edit-message-form-width: 47em;

package/dist/scss/index.scss

@@ -3,10 +3,10 @@
 @import './base.scss';
 
 // External dependencies (copied from libraries to rectify built file path discrepancies)
-@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'
+@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';
@@ -25,6 +25,7 @@
 @import './DateSeparator.scss';
 @import './EditMessageForm.scss';
 @import './Gallery.scss';
+@import './ImageCarousel.scss';
 @import './LoadingChannels.scss';
 @import './LoadingIndicator.scss';
 @import './LoadMoreButton.scss';