stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/scss/Thread.scss

@@ -1,381 +0,0 @@
-.str-chat__thread {
-  background: var(--grey-whisper);
-  flex: 1 0 300px;
-  min-width: 300px;
-  max-width: 300px;
-  font-family: var(--second-font);
-  overflow: hidden;
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding-top: 0;
-
-  .str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
-    padding-left: var(--md-p);
-    padding-right: var(--md-p);
-  }
-
-  &.str-chat__thread-container {
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .str-chat__parent-message-li {
-      .str-chat__message {
-        padding-left: var(--md-p);
-        padding-right: var(--md-p);
-
-        .str-chat__message-inner {
-          min-width: 0;
-        }
-
-        .str-chat__message-attachment--image,
-        .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) ;
-        }
-      }
-
-      .str-chat__message--me {
-        .str-chat__message-attachment--img,
-        .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
-        }
-      }
-
-      .str-chat__message--with-reactions {
-        padding-top: var(--xl-p);
-      }
-
-      .str-chat__message:not(.str-chat__message--has-attachment) {
-        padding-top: var(--xs-p);
-      }
-
-    }
-  }
-
-  &--full {
-    max-width: 100%;
-  }
-
-  &-header {
-    position: relative;
-    width: 100%;
-    background: var(--grey-whisper);
-    box-shadow: 0 1px 1px 0 var(--border);
-    height: 70px;
-    min-height: 70px;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--sm-p);
-
-    &-details {
-      font-size: var(--md-font);
-      font-weight: bold;
-
-      .str-chat__thread-header-channel-name {
-        font-size: var(--sm-font);
-        font-weight: normal;
-      }
-    }
-  }
-
-  &-start {
-    border-radius: var(--border-radius-sm);
-    margin: var(--xs-m) var(--xs-m) 0 var(--xs-m);
-    padding: var(--xs-p);
-    background: var(--grey-whisper);
-    text-align: center;
-    font-size: var(--sm-font);
-  }
-
-  &-list {
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    padding-top: var(--sm-p);
-
-    .str-chat__list {
-      padding: 0;
-    }
-
-    .str-chat__message:first-of-type .str-chat__message-inner {
-      margin-left: unset;
-      margin-right: unset;
-    }
-
-    .str-chat__message-attachment.str-chat__message-attachment {
-      &--file {
-        border-radius: var(--border-radius-md);
-        border-bottom: 1px solid var(--grey-whisper);
-      }
-
-      &--media {
-        width: 100%;
-      }
-    }
-
-    .quoted-message {
-      display: flex;
-      align-items: flex-end;
-      margin-bottom: var(--xxs-m);
-
-      &-inner {
-        display: flex;
-        text-align: start;
-        align-items: flex-end;
-        background: var(--grey-whisper);
-        border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
-        max-width: 408px;
-        padding: var(--xxs-p) var(--xs-p);
-
-        .str-chat__message-attachment.str-chat__message-attachment--file {
-          display: none;
-        }
-
-        .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
-          border-radius: unset;
-        }
-
-        .str-chat__message-attachment.str-chat__message-attachment--card {
-          border: none;
-          border-radius: var(--border-radius-md);
-        }
-
-        .str-chat__message-attachment {
-          &--image:first-of-type {
-            max-height: 48px;
-            max-width: 48px;
-          }
-
-          img {
-            border-radius: var(--border-radius-md);
-          }
-        }
-
-        :nth-child(2) {
-          margin-left: var(--xs-m);
-        }
-      }
-    }
-
-    .quoted-message.mine {
-      .quoted-message-inner {
-        background: var(--white);
-      }
-    }
-  }
-}
-
-.messaging {
-  &.str-chat {
-    .str-chat {
-      &__thread {
-        margin-right: var(--xs-m);
-        margin-top: var(--sm-m);
-        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-        overflow: hidden;
-        background: var(--white);
-        max-height: 100%;
-        display: flex;
-        flex-direction: column;
-        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 {
-          justify-content: flex-end;
-          border-radius: 0;
-
-          &-image,
-          &-placeholder {
-            width: 100px;
-            height: 100px;
-          }
-        }
-      }
-
-      &__thread-list {
-        padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
-
-        > .str-chat__list {
-          background: transparent;
-          padding: 0;
-
-          .str-chat__list--thread {
-            padding: 0;
-          }
-        }
-      }
-
-      &__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;
-          }
-        }
-      }
-
-      &__thread-start {
-        margin-top: var(--md-m);
-      }
-
-      @media screen and (max-width: 960px) {
-        &__thread {
-          position: fixed;
-          top: 0;
-          right: 0;
-          height: 100vh;
-          background: var(--white);
-          z-index: 1000;
-          margin: 0;
-          width: 100vw;
-          max-width: 100%;
-        }
-      }
-    }
-
-    &.dark {
-      .str-chat__thread {
-        background: var(--white5);
-
-        &-header {
-          background: var(--dark-grey);
-
-          box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
-          color: var(--white);
-        }
-
-        &-start {
-          color: var(--white);
-        }
-      }
-
-      @media screen and (max-width: 960px) {
-        .str-chat__thread {
-          background: var(--dark-grey);
-        }
-      }
-    }
-  }
-
-  /** Quoted message preview in thread should not be squeezed to less than 100% for better readability */
-  .str-chat__input-flat-quoted .quoted-message-preview-content {
-    max-width: 100%;
-  }
-}
-
-.team {
-  &.str-chat {
-    .str-chat {
-      &__thread {
-        background: var(--white);
-      }
-
-      @media screen and (max-width: 960px) {
-        &__thread {
-          position: fixed;
-          top: 0;
-          right: 0;
-          height: 100vh;
-          background: var(--white);
-          z-index: 1000;
-          margin: 0;
-          width: 100vw;
-          max-width: 100%;
-        }
-      }
-
-      &__thread-header {
-        height: 80px;
-      }
-    }
-
-    &.dark {
-      .str-chat__thread {
-        background: var(--dt-bg-team);
-      }
-    }
-  }
-}
-
-.livestream.str-chat,
-.str-chat {
-  .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);
-    }
-  }
-
-  .str-chat__list--thread {
-    padding: 0 var(--xs-p);
-  }
-
-  &.dark {
-    .str-chat__thread {
-      background: var(--dark-grey);
-
-      &-header {
-        background: var(--white5);
-        box-shadow: 0 1px 1px 0 var(--black30);
-        color: var(--white);
-      }
-
-      &-start {
-        background: var(--black5);
-        border-radius: var(--border-radius-sm);
-        color: var(--white);
-      }
-    }
-  }
-}
-
-.dark.str-chat.messaging {
-  .str-chat__thread-list {
-    .quoted-message-inner {
-      background: var(--dark-grey);
-    }
-  }
-}

package/dist/scss/Tooltip.scss

@@ -1,41 +0,0 @@
-.str-chat__tooltip {
-  display: flex;
-  background: var(--black);
-  border-radius: var(--border-radius-sm);
-  padding: var(--xxs-p) var(--xs-p);
-  color: var(--white);
-  font-size: var(--xs-font);
-  max-width: 300px;
-
-  button {
-    outline: none;
-    outline: 0;
-    background: none;
-    color: var(--primary-color);
-    font-size: var(--xs-font);
-    font-family: var(--second-font);
-    border: none;
-  }
-
-  a {
-    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: '';
-    position: absolute;
-    bottom: -2px;
-    right: 5px;
-    width: 5px;
-    height: 5px;
-    background: var(--black);
-    transform: rotate(45deg);
-  }
-}

package/dist/scss/TypingIndicator.scss

@@ -1,80 +0,0 @@
-.str-chat__typing-indicator {
-  display: flex;
-  visibility: hidden;
-  align-items: center;
-
-  &--typing {
-    visibility: visible;
-  }
-
-  &__avatars {
-    display: flex;
-
-    .str-chat__avatar {
-      margin-right: calc(-1 * var(--xs-m));
-
-      &:last-of-type {
-        margin-right: var(--xs-m);
-      }
-    }
-  }
-
-  &__dots {
-    position: relative;
-    background: var(--white);
-    border: 1px solid var(--black10);
-    padding: var(--xxs-p) var(--xs-m);
-    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
-  }
-
-  &__dot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: var(--border-radius-round);
-    margin-right: var(--xxs-m);
-    background: var(--primary-color);
-    animation: wave 1.1s linear infinite;
-
-    &:nth-child(2) {
-      animation-delay: -0.9s;
-      opacity: 0.5;
-    }
-
-    &:nth-child(3) {
-      animation-delay: -0.8s;
-      opacity: 0.2;
-    }
-  }
-
-  .str-chat__typing-indicator__users {
-    margin-left: 8px;
-    color: var(--lighten-grey);
-  }
-}
-
-.dark.str-chat {
-  .str-chat__typing-indicator {
-    &__avatars {
-      .str-chat__avatar {
-        border-color: var(--dark-grey);
-      }
-    }
-
-    &__dots {
-      background: var(--white5);
-    }
-  }
-}
-
-@keyframes wave {
-  0%,
-  60%,
-  100% {
-    transform: initial;
-  }
-
-  30% {
-    transform: translateY(-8px);
-  }
-}