stream-chat-react 9.3.0 → 10.0.0-theming-v2.1

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-theme.scss

@@ -0,0 +1,83 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__message-reactions-options-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the component */
+  --str-chat__message-reactions-options-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-reactions-options-background-color: var(
+    --str-chat__secondary-background-color
+  );
+
+  /* Top border of the component */
+  --str-chat__message-reactions-options-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-reactions-options-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-reactions-options-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-reactions-options-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-reactions-options-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+
+  /* The border radius used for the borders of the component */
+  --str-chat__message-reactions-option-border-radius: var(--str-chat__border-radius-md);
+
+  /* The text/icon color of the component */
+  --str-chat__message-reactions-option-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-reactions-option-background-color: var(
+    --str-chat__secondary-background-color
+  );
+
+  /* The background color of the component when hovered */
+  --str-chat__message-reactions-option-hover-background-color: var(
+    --str-chat__primary-surface-color
+  );
+
+  /* The background color of the component when selected */
+  --str-chat__message-reactions-option-selected-background-color: var(
+    --str-chat__primary-color-low-emphasis
+  );
+
+  /* Top border of the component */
+  --str-chat__message-reactions-option-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-reactions-option-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-reactions-option-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-reactions-option-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-reactions-option-box-shadow: none;
+}
+
+.str-chat__reaction-selector {
+  .str-chat__message-reactions-options {
+    @include utils.component-layer-overrides('message-reactions-options');
+
+    .str-chat__message-reactions-option {
+      @include utils.component-layer-overrides('message-reactions-option');
+
+      &:hover {
+        background-color: var(--str-chat__message-reactions-option-hover-background-color);
+      }
+
+      &.str-chat__message-reactions-option-selected {
+        background-color: var(--str-chat__message-reactions-option-selected-background-color);
+      }
+    }
+  }
+}

package/dist/scss/v2/Modal/Modal-layout.scss

@@ -0,0 +1,40 @@
+@use '../utils';
+
+.str-chat__modal--open {
+  @include utils.flex-col-center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  button.str-chat__modal__close-button {
+    @include utils.unset-button;
+    margin: var(--str-chat__spacing-2);
+    cursor: pointer;
+  }
+
+  .str-chat__modal__close-button {
+    @include utils.flex-row-center;
+    padding: var(--str-chat__spacing-2);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    cursor: pointer;
+  }
+
+  .str-chat__modal__inner {
+    @include utils.flex-col-center;
+    padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
+    width: 40%;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+.str-chat__modal--close {
+  display: none;
+}

package/dist/scss/v2/Modal/Modal-theme.scss

@@ -0,0 +1,82 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the content area of the component of the content area of the component */
+  --str-chat__modal-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the content area of the component */
+  --str-chat__modal-color: var(--str-chat__text-color);
+
+  /* The background color of the content area of the component */
+  --str-chat__modal-background-color: var(--str-chat__secondary-background-color);
+
+  /* The overlay color of the component */
+  --str-chat__modal-overlay-color: var(--str-chat__secondary-overlay-color);
+
+  /* The backdrop filter applied to the component */
+  --str-chat__modal-overlay-backdrop-filter: blur(3px);
+
+  /* Top border of the content area of the component */
+  --str-chat__modal-border-block-start: none;
+
+  /* Bottom border of the content area of the component */
+  --str-chat__modal-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the content area of the component */
+  --str-chat__modal-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the content area of the component */
+  --str-chat__modal-border-inline-end: none;
+
+  /* Box shadow applied to the content area of the component */
+  --str-chat__modal-box-shadow: none;
+
+  /* The background color of the close button */
+  --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color);
+
+  /* The icon color of the close button */
+  --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color);
+}
+
+.str-chat__modal {
+  background-color: var(--str-chat__modal-overlay-color);
+  backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
+
+  .str-chat__modal__inner {
+    @include utils.component-layer-overrides('modal');
+  }
+
+  .str-chat__modal__close-button {
+    @include utils.button-reset;
+
+    svg {
+      path {
+        fill: var(--str-chat__modal-close-icon-color);
+      }
+
+      rect,
+      circle {
+        fill: var(--str-chat__modal-close-icon-background);
+      }
+    }
+  }
+}
+
+// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
+// width of its content in order the modal can be closed when clicked on overlay
+.str-chat__message-attachment--card,
+.str-chat__message-attachment--image,
+.str-chat__message-attachment--gallery {
+  .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
+    background-color: transparent;
+    width: unset;
+    height: unset;
+    padding: 0;
+
+    img {
+      max-width: unset;
+      max-height: calc(100vh - 80px);
+      cursor: default;
+    }
+  }
+}

package/dist/scss/v2/Notification/MessageNotification-layout.scss

@@ -0,0 +1,12 @@
+.str-chat__message-notification {
+  display: block;
+  position: absolute;
+  align-self: center;
+  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
+  bottom: calc(var(--str-chat__spacing-px) * 10);
+  z-index: 101;
+}
+
+.str-chat__list-notifications {
+  position: relative;
+}

package/dist/scss/v2/Notification/MessageNotification-theme.scss

@@ -0,0 +1,34 @@
+@use '../utils';
+
+/* Only available in React SDK. */
+.str-chat {
+  /* The background color of the component */
+  --str-chat__message-notification-background-color: var(--str-chat__primary-color);
+
+  /* Top border of the component */
+  --str-chat__message-notification-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-notification-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-notification-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-notification-border-inline-end: none;
+
+  /* The border radius used for the borders of the component */
+  --str-chat__message-notification-border-radius: 50px;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-notification-box-shadow: none;
+
+  /* The text/icon color of the component */
+  --str-chat__message-notification-color: var(--str-chat__on-primary-color);
+}
+
+.str-chat__message-notification {
+  @include utils.component-layer-overrides('message-notification');
+  font: var(--str-chat__caption-text);
+  cursor: pointer;
+}

package/dist/scss/v2/Notification/Notification-layout.scss

@@ -0,0 +1,3 @@
+.str-chat__notification {
+  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-4);
+}

package/dist/scss/v2/Notification/Notification-theme.scss

@@ -0,0 +1,32 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__notification-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the component */
+  --str-chat__notification-color: var(--str-chat__opaque-surface-text-color);
+
+  /* The background color of the component */
+  --str-chat__notification-background-color: var(--str-chat__opaque-surface-background-color);
+
+  /* Top border of the component */
+  --str-chat__notification-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__notification-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__notification-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__notification-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__notification-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+}
+
+.str-chat__notification {
+  @include utils.component-layer-overrides('notification');
+  font: var(--str-chat__subtitle-text);
+}

package/dist/scss/v2/Notification/NotificationList-layout.scss

@@ -0,0 +1,11 @@
+@use '../utils';
+
+.str-chat__list-notifications {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  row-gap: var(--str-chat__spacing-1);
+  margin: var(--str-chat__spacing-1_5);
+  width: auto;
+}

package/dist/scss/v2/Notification/NotificationList-theme.scss

@@ -0,0 +1,31 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__notification-list-border-radius: none;
+
+  /* The text/icon color of the component */
+  --str-chat__notification-list-color: var(--str-chat__notification-list-text-color);
+
+  /* The background color of the component */
+  --str-chat__notification-list-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__notification-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__notification-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__notification-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__notification-list-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__notification-list-box-shadow: none;
+}
+
+.str-chat__list-notification-lists {
+  @include utils.component-layer-overrides('notification-list-list');
+}

package/dist/scss/v2/Thread/Thread-layout.scss

@@ -0,0 +1,47 @@
+@use '../utils';
+
+.str-chat__thread-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .str-chat__thread-header {
+    @include utils.header-layout;
+
+    .str-chat__thread-header-details {
+      @include utils.header-text-layout;
+
+      .str-chat__thread-header-name,
+      .str-chat__thread-header-reply-count,
+      .str-chat__thread-header-channel-name,
+      .str-chat__thread-header-subtitle,
+      .str-chat__thread-header-title {
+        @include utils.ellipsis-text;
+      }
+    }
+
+    .str-chat__close-thread-button {
+      $icon-size: calc(var(--str-chat__spacing-px) * 21);
+      @include utils.flex-top-right;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      cursor: pointer;
+      line-height: $icon-size;
+      font-size: $icon-size;
+
+      svg {
+        height: $icon-size;
+        width: $icon-size;
+      }
+    }
+  }
+
+  .str-chat__thread-list {
+    height: auto;
+  }
+}
+
+.str-chat__parent-message-li {
+  padding: var(--str-chat__spacing-2);
+}

package/dist/scss/v2/Thread/Thread-theme.scss

@@ -0,0 +1,82 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__thread-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__thread-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__thread-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__thread-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__thread-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__thread-box-shadow: none;
+
+  /* The border radius used for the borders of the thread header */
+  --str-chat__thread-header-border-radius: 0;
+
+  /* The text/icon color of the thread header */
+  --str-chat__thread-header-color: var(--str-chat__text-color);
+
+  /* The background color of the thread header */
+  --str-chat__thread-header-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the thread header */
+  --str-chat__thread-header-border-block-start: none;
+
+  /* Bottom border of the thread header */
+  --str-chat__thread-header-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the thread header */
+  --str-chat__thread-header-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the thread header */
+  --str-chat__thread-header-border-inline-end: none;
+
+  /* Box shadow applied to the thread header */
+  --str-chat__thread-header-box-shadow: none;
+
+  /* The text/icon color used to display less emphasized text in the channel header */
+  --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color);
+}
+
+.str-chat__thread-container {
+  @include utils.component-layer-overrides('thread');
+
+  .str-chat__thread-header {
+    @include utils.component-layer-overrides('thread-header');
+
+    .str-chat__thread-header-name,
+    .str-chat__thread-header-title {
+      font: var(--str-chat__subtitle-medium-text);
+    }
+
+    .str-chat__thread-header-channel-name,
+    .str-chat__thread-header-subtitle {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__thread-header-info-color);
+    }
+
+    .str-chat__close-thread-button {
+      background-color: transparent;
+      border: none;
+
+      svg path {
+        fill: var(--str-chat__thread-color);
+      }
+    }
+  }
+}

package/dist/scss/v2/Tooltip/Tooltip-layout.scss

@@ -0,0 +1,30 @@
+@use '../utils';
+
+.str-chat__tooltip {
+  display: flex;
+  padding: var(--str-chat__spacing-2);
+}
+
+.str-chat__tooltip:not(.str-chat__tooltip-angular) {
+  $size: 10px;
+
+  min-width: calc(var(--str-chat__spacing-px) * 100px);
+  max-width: calc(var(--str-chat__spacing-px) * 150px);
+  word-break: break-all;
+  position: absolute;
+  bottom: calc(100% + calc(0.8 * #{$size}));
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-1 * calc(#{$size} / 2));
+    inset-inline-start: calc(50% - calc(#{$size} / 2));
+    width: $size;
+    height: $size;
+    transform: rotate(45deg);
+  }
+}
+
+.str-chat__tooltip-angular {
+  word-break: normal;
+}

package/dist/scss/v2/Tooltip/Tooltip-theme.scss

@@ -0,0 +1,36 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__tooltip-border-radius: var(--str-chat__border-radius-xs);
+
+  /* The text/icon color of the component */
+  --str-chat__tooltip-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__tooltip-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__tooltip-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__tooltip-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__tooltip-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__tooltip-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
+}
+
+.str-chat__tooltip {
+  @include utils.component-layer-overrides('tooltip');
+  font: var(--str-chat__caption-text);
+
+  &::after {
+    background-color: var(--str-chat__tooltip-background-color);
+  }
+}

package/dist/scss/v2/TypingIndicator/TypingIndicator-layout.scss

@@ -0,0 +1,27 @@
+@use '../utils';
+
+.str-chat__typing-indicator-react-host {
+  position: static !important;
+}
+
+.str-chat__typing-indicator {
+  padding: var(--str-chat__spacing-1_5);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: var(--str-chat__spacing-1);
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+
+  .str-chat__typing-indicator__dots {
+    @include utils.flex-row-center;
+    column-gap: var(--str-chat__spacing-0_5);
+
+    .str-chat__typing-indicator__dot {
+      width: calc(var(--str-chat__spacing-px) * 4);
+      height: calc(var(--str-chat__spacing-px) * 4);
+    }
+  }
+}

package/dist/scss/v2/TypingIndicator/TypingIndicator-theme.scss

@@ -0,0 +1,68 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__typing-indicator-border-radius: none;
+
+  /* The text/icon color of the component */
+  --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of the component */
+  --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color);
+
+  /* Top border of the component */
+  --str-chat__typing-indicator-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__typing-indicator-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__typing-indicator-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__typing-indicator-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__typing-indicator-box-shadow: none;
+
+  /* Background color of the animated dots in the typing indicator */
+  --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color);
+}
+
+.str-chat__typing-indicator {
+  @include utils.component-layer-overrides('typing-indicator');
+
+  .str-chat__typing-indicator__dots {
+    .str-chat__typing-indicator__dot {
+      border-radius: 999px;
+      animation: dotFlashing 1s infinite alternate;
+      background-color: var(--str-chat__typing-indicator-dot-background-color);
+
+      &:nth-child(1) {
+        animation-delay: 0s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 1s;
+      }
+
+      @keyframes dotFlashing {
+        0% {
+          opacity: 1;
+        }
+
+        50% {
+          opacity: 0.6;
+        }
+
+        100% {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+}

package/dist/scss/v2/_base.scss

@@ -0,0 +1,29 @@
+.str-chat {
+  box-sizing: border-box;
+
+  * {
+    font-family: var(--str-chat__font-family);
+    box-sizing: border-box;
+  }
+
+  // Overriding styles of ngx-popperjs
+  .ngxp__container {
+    z-index: 1;
+    margin: -8px !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+    border: none !important;
+
+    .ngxp__arrow {
+      display: none !important;
+    }
+  }
+}
+
+// Fixes icon sizing problem in Angular SDK
+stream-icon,
+stream-icon-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}