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

package/dist/scss/Attachment.scss

@@ -2,13 +2,20 @@
   max-width: 450px;
 }
 
+.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  width: 300px;
+}
+
 .str-chat__player-wrapper {
   position: relative;
   padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  .react-player {
+  .react-player,
+  .str-chat__video-angular {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -87,6 +94,50 @@
         background: var(--white);
       }
 
+      .str-chat__message-attachment-file--item-text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        row-gap: 2px;
+        width: 100%;
+        min-width: 0;
+
+        .str-chat__message-attachment-file--item-first-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          column-gap: 8px;
+          width: 100%;
+
+          .str-chat__message-attachment-file--item-name {
+            font-weight: var(--font-weight-bold);
+            color: var(--black);
+
+            white-space: nowrap;
+            overflow-y: visible;
+            // Not every browser support clip overflow, so hidden is defined as a fallback
+            overflow-x: hidden;
+            overflow-x: clip;
+            text-overflow: ellipsis;
+            min-width: 0;
+          }
+
+          .str-chat__message-attachment-file--item-download {
+            display: flex;
+
+            svg {
+              width: 24px;
+              height: 16px;
+
+              path {
+                fill: var(--black);
+              }
+            }
+          }
+        }
+      }
+
       img,
       svg {
         margin-right: var(--xs-m);
@@ -99,27 +150,6 @@
         text-overflow: ellipsis;
       }
 
-      a {
-        font-weight: var(--font-weight-bold);
-        color: var(--black);
-        opacity: 0.8;
-
-        text-decoration: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-        }
-      }
-
       span {
         line-height: 14px;
         font-size: var(--sm-font);

package/dist/scss/Audio.scss

@@ -88,7 +88,7 @@
       > div {
         height: 4px;
         border-radius: var(--border-radius-sm);
-        width: 0%;
+        width: 0;
         background: var(--primary-color);
         transition: width 0.5s linear;
       }

package/dist/scss/Avatar.scss

@@ -32,7 +32,7 @@
   }
 
   &-image--loaded {
-    background-color: none;
+    background-color: transparent;
   }
 
   &-fallback {

package/dist/scss/ChannelList.scss

@@ -1,7 +1,6 @@
 .str-chat__channel-list {
   flex: 1;
   overflow-y: auto;
-  max-width: 300px;
   background: var(--blue-alice);
   box-shadow: 1px 0 0 0 var(--black5);
   display: flex;
@@ -15,6 +14,11 @@
     padding: var(--xs-p) var(--sm-p);
     border-bottom: 1px solid var(--black10);
   }
+
+  // Empty channel list for theme-v2
+  .str-chat__channel-list-empty {
+    display: none;
+  }
 }
 
 .dark.str-chat {

package/dist/scss/ChannelPreview.scss

@@ -21,6 +21,31 @@
     box-shadow: 0 1px 5px 0 var(--border);
   }
 
+  .str-chat__channel-preview-messenger--right {
+    width: 100%;
+    overflow: hidden;
+
+    .str-chat__channel-preview-end-first-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .str-chat__channel-preview-messenger--name {
+        width: 100%;
+      }
+
+      .str-chat__channel-preview-unread-badge {
+        padding: 8px;
+        font-size: 0.75rem;
+        line-height: 0.44rem;
+        border-radius: var(--border-radius-round);
+        color: var(--unread-badge-color);
+        background-color: var(--accent_red);
+        font-weight: 700;
+      }
+    }
+  }
+
   &--last-message p {
     font-size: var(--sm-font);
     margin: 0;

package/dist/scss/ChannelSearch.scss

@@ -1,4 +1,6 @@
 .str-chat__channel-search {
+  --channel-search-input-height: 30px;
+
   padding: var(--md-p) var(--md-p) 0;
   display: flex;
   align-items: center;
@@ -10,7 +12,7 @@
     background: var(--grey-whisper);
     border: 1px solid transparent;
     outline: none;
-    height: 30px;
+    height: var(--channel-search-input-height);
     border-radius: var(--border-radius);
     color: var(--black);
     font-size: var(--md-font);
@@ -67,8 +69,8 @@
   &-container.popup {
     border-radius: var(--border-radius-md);
     background: var(--white-smoke);
-    left: 300px;
-    top: 20px;
+    left: 0;
+    top: calc(var(--channel-search-input-height) + 40px);
     box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
     border: 1px solid var(--border);
 

package/dist/scss/Gallery.scss

@@ -37,31 +37,6 @@
   }
 }
 
-.stream-chat-angular__image-modal-host {
-  .str-chat__modal__inner {
-    max-width: 80%;
-  }
-}
-
-.stream-chat-angular__image-modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-stepper {
-    padding: 10px;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-  }
-
-  &-image {
-    object-fit: cover;
-    max-width: 90%;
-    max-height: 90%;
-  }
-}
-
 .livestream.str-chat,
 .messaging.str-chat,
 .commerce.str-chat,
@@ -88,7 +63,6 @@
         background-repeat: no-repeat;
         cursor: -moz-zoom-in;
         cursor: -webkit-zoom-in;
-        cursor: zoom-in;
         cursor: pointer;
         border: none;
 

package/dist/scss/ImageCarousel.scss

@@ -0,0 +1,45 @@
+.str-chat__message {
+  .str-chat__attachment-list-angular-host {
+    .str-chat__modal--open {
+      .str-chat__modal__inner {
+        height: 80%;
+        width: 80%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+    }
+  }
+}
+
+.stream-chat-angular__image-modal-host {
+  .str-chat__modal__inner {
+    max-width: 80%;
+  }
+}
+
+.str-chat__image-carousel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+
+  .str-chat__image-carousel-stepper {
+    padding: 8px;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .str-chat__image-carousel-image {
+    object-fit: cover;
+    min-height: 0;
+    max-height: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+}

package/dist/scss/LoadingChannels.scss

@@ -50,7 +50,7 @@
     animation: pulsate 1s linear 0s infinite alternate;
 
     &:nth-of-type(2) {
-      animation: pulsate 1s linear 0.3334 infinite alternate;
+      animation: pulsate 1s linear 0.3334s infinite alternate;
     }
 
     &:last-of-type {

package/dist/scss/Message.scss

@@ -721,13 +721,13 @@
         }
 
         &--thread,
+        &--options,
         &--reactions {
           display: none;
         }
 
         &--options {
           position: relative;
-          display: none;
 
           > button {
             cursor: pointer;
@@ -745,12 +745,17 @@
     }
 
     &:hover {
-      .str-chat__message-simple__actions__action--thread {
+      .str-chat__message-simple__actions__action--thread,
+      .str-chat__message-simple__actions__action--reactions,
+      .str-chat__message-simple__actions__action--options {
         display: flex;
       }
 
-      .str-chat__message-simple__actions__action--reactions {
-        display: flex;
+      .str-chat__message-simple__actions__action--options {
+        button {
+          display: flex;
+          align-items: center;
+        }
       }
     }
 
@@ -835,6 +840,7 @@
 
       .str-chat__message-simple__actions {
         justify-content: flex-end;
+        flex-direction: row-reverse;
       }
 
       .str-chat__message-attachment--image {
@@ -852,39 +858,6 @@
         order: -1;
       }
     }
-
-    &:hover {
-      .str-chat__message-simple__actions__action--options {
-        display: flex;
-
-        button {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .str-chat__message-simple__actions__action--reactions {
-        display: flex;
-      }
-
-      .str-chat__message-simple__actions__action--thread {
-        display: flex;
-      }
-
-      @media screen and (max-width: 960px) {
-        .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;
-        }
-      }
-    }
   }
 }
 
@@ -915,6 +888,17 @@
     color: var(--overlay-dark);
   }
 
+  &-angular {
+    svg {
+      width: 20px;
+      height: 20px;
+
+      path {
+        fill: var(--primary-color);
+      }
+    }
+  }
+
   > .str-chat__avatar,
   > .str-chat-angular__avatar-host .str-chat__avatar {
     align-self: flex-end;
@@ -1289,17 +1273,3 @@
     }
   }
 }
-
-.str-chat__message-simple.mobile-press {
-  .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/MessageActions.scss

@@ -9,6 +9,12 @@
   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);
   z-index: 999;
+
+  &.str-chat__message-actions-box-angular {
+    position: initial;
+    margin: 8px;
+    border-radius: var(--border-radius);
+  }
 }
 
 .str-chat__message-actions-box--open {
@@ -129,3 +135,12 @@
     }
   }
 }
+
+// Used by Angular SDK to display edit message modal
+.str-chat__message-edit-in-progress {
+  .ngxp__container {
+    transform: initial !important;
+    will-change: initial !important;
+    z-index: 2;
+  }
+}