stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

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

@@ -0,0 +1,87 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-list-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__channel-list-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-list-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__channel-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+
+  /* The border radius used for the borders of the load more button */
+  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
+
+  /* The text/icon color of the load more button */
+  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
+
+  /* The background color of the load more button */
+  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
+
+  /* Box shadow applied to the load more button */
+  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
+
+  /* Top border of the load more button */
+  --str-chat__channel-list-load-more-border-block-start: var(
+    --str-chat__cta-button-border-block-start
+  );
+
+  /* Bottom border of the load more button */
+  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
+
+  /* Left (right in RTL layout) border of the load more button */
+  --str-chat__channel-list-load-more-border-inline-start: var(
+    --str-chat__cta-button-border-inline-start
+  );
+
+  /* Right (left in RTL layout) border of the load more button */
+  --str-chat__channel-list-load-more-border-inline-end: var(
+    --str-chat__cta-button-border-inline-end
+  );
+
+  /* The background color of the load more button in pressed state */
+  --str-chat__channel-list-load-more-pressed-background-color: var(
+    --str-chat__cta-button-pressed-background-color
+  );
+
+  /* The background color of the load more button in disabled state */
+  --str-chat__channel-list-load-more-disabled-background-color: var(
+    --str-chat__cta-button-disabled-background-color
+  );
+
+  /* The text/icon color of the load more button in disabled state */
+  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
+
+  /* The icon color for the empty list state */
+  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
+}
+
+.str-chat__channel-list {
+  @include utils.component-layer-overrides('channel-list');
+
+  .str-chat__load-more-button__button {
+    @include utils.component-layer-overrides('channel-list-load-more');
+    @include utils.cta-button-overrides('channel-list-load-more');
+    width: 80%;
+  }
+
+  .str-chat__channel-list-empty {
+    @include utils.empty-theme('channel-list');
+  }
+}

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

@@ -0,0 +1,82 @@
+@use '../utils';
+
+@mixin channel-preview-layout {
+  display: flex;
+  column-gap: var(--str-chat__spacing-2);
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+  margin: 0;
+  text-align: start;
+}
+
+@mixin channel-preview-end-layout {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--str-chat__spacing-0_5);
+  width: 100%;
+}
+
+// Unread badge will be bigger than channel name -> this would cause a layout shift when the unread badge appears -> this trick won't let the unread badge to increase the height of the container avoiding the layout shift
+@mixin unread-badge-layout-fix {
+  .str-chat__channel-preview-end-first-row {
+    height: var(--str-chat__unread-badge-height);
+  }
+}
+
+.str-chat__channel-preview {
+  @include channel-preview-layout;
+  cursor: pointer;
+
+  .str-chat__channel-preview-end {
+    @include channel-preview-end-layout;
+    @include utils.ellipsis-text-parent;
+
+    .str-chat__channel-preview-end-first-row {
+      display: flex;
+      column-gap: var(--str-chat__spacing-1);
+      align-items: center;
+
+      .str-chat__channel-preview-unread-badge {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0 var(--str-chat__spacing-2);
+      }
+
+      .str-chat__channel-preview-messenger--name {
+        width: 100%;
+      }
+    }
+
+    .str-chat__channel-preview-messenger--name,
+    .str-chat__channel-preview-messenger--last-message {
+      @include utils.ellipsis-text;
+      min-width: 0;
+
+      p {
+        @include utils.ellipsis-text;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.str-chat__channel-preview-loading {
+  @include channel-preview-layout;
+
+  .str-chat__channel-preview-end-loading {
+    @include channel-preview-end-layout;
+  }
+
+  .str-chat__loading-channels-username {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: calc(var(--str-chat__spacing-px) * 66);
+  }
+
+  .str-chat__loading-channels-status {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,108 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-preview-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__channel-preview-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__channel-preview-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__channel-preview-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-preview-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-preview-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-preview-border-inline-end: none;
+
+  /* Background color used for selected channel preview components */
+  --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
+
+  /* Background color used for the hover state */
+  --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
+
+  /* Text color of the latest message when preview is not hovered or selected */
+  --str-chat__channel-preview-latest-message-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+
+  /* The color of the loading indicator while initializing the channel list */
+  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
+
+  /* The background color of the unread badge */
+  --str-chat__channel-preview-unread-badge-background-color: var(--str-chat__unread-badge-color);
+
+  /* The color of the unread badge */
+  --str-chat__channel-preview-unread-badge-color: var(--str-chat__on-unread-badge-color);
+
+  /* The border radius used for the borders of the unread badge */
+  --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
+
+  /* Top border of the unread badge */
+  --str-chat__channel-preview-unread-badge-border-block-start: none;
+
+  /* Bottom border of the unread badge */
+  --str-chat__channel-preview-unread-badge-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the unread badge */
+  --str-chat__channel-preview-unread-badge-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the unread badge */
+  --str-chat__channel-preview-unread-badge-border-inline-end: none;
+}
+
+.str-chat__channel-preview {
+  @include utils.component-layer-overrides('channel-preview');
+
+  &--active,
+  &-messenger--active {
+    background-color: var(--str-chat__channel-preview-active-background-color);
+  }
+
+  &:hover {
+    background-color: var(--str-chat__channel-preview-hover-background-color);
+  }
+
+  .str-chat__channel-preview-end-first-row {
+    @include utils.channel-preview-display-name-theme;
+
+    .str-chat__channel-preview-unread-badge {
+      @include utils.component-layer-overrides('channel-preview-unread-badge');
+      font-size: 80%;
+    }
+
+    .str-chat__channel-preview-messenger--last-message {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__channel-preview-latest-message-secondary-color);
+    }
+
+    &--active,
+    &:hover {
+      .str-chat__channel-preview-messenger--last-message {
+        color: var(--str-chat__channel-preview-color);
+      }
+    }
+  }
+}
+
+.str-chat__channel-preview-loading {
+  @include utils.loading-animation;
+
+  .str-chat__loading-channels-avatar,
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    @include utils.loading-item-background('channel-preview');
+  }
+
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    border-radius: var(--str-chat__border-radius-xs);
+  }
+}

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

@@ -0,0 +1,71 @@
+@use '../utils';
+
+.str-chat__channel-search-bar {
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-2_5);
+
+  .str-chat__channel-search-bar-button {
+    @include utils.button-reset;
+    width: calc(var(--str-chat__spacing-px) * 40);
+    height: calc(var(--str-chat__spacing-px) * 40);
+    padding: var(--str-chat__spacing-2_5);
+    cursor: pointer;
+  }
+
+  .str-chat__channel-search-input--wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    padding: var(--str-chat__spacing-2_5);
+    min-width: 0;
+
+    .str-chat__channel-search-input--icon,
+    .str-chat__channel-search-input--clear-button {
+      display: inline-flex;
+      padding: 0 var(--str-chat__spacing-2_5);
+    }
+
+    .str-chat__channel-search-input--clear-button {
+      @include utils.button-reset;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: default;
+      }
+    }
+
+    input {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+
+.str-chat__channel-search-results-header {
+  width: 100%;
+  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+}
+
+.str-chat__channel-search-result-list {
+  .str-chat__channel-search-container-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+
+    svg {
+      height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
+      width: calc(var(--str-chat__spacing-px) * 90);
+      padding: var(--str-chat__spacing-10) 0;
+    }
+  }
+
+  .str-chat__channel-search-result {
+    @include utils.button-reset;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    column-gap: var(--str-chat__spacing-2);
+    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+  }
+}

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

@@ -0,0 +1,190 @@
+@use '../utils';
+
+/* Only available in React SDK. */
+.str-chat {
+  /* The text/icon color of the component */
+  --str-chat__channel-search-input-color: var(--str-chat__text-color);
+
+  /* The text/icon color of the component */
+  --str-chat__channel-search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The text/icon color of the component */
+  --str-chat__channel-search-input-icon-color: var(--str-chat__text-low-emphasis-color);
+
+  /* Top border of the component */
+  --str-chat__channel-search-input-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-input-border-block-end: none;
+
+  /* Left (right in RTL layout) borhe component */
+  --str-chat__channel-search-input-border-inline-start: none;
+
+  /* Right (left in RTL layout) borhe component */
+  --str-chat__channel-search-input-border-inline-end: none;
+
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg);
+
+  /* The background color of the component */
+  --str-chat__channel-search-input-wrapper-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg);
+
+  /* The background color of the component */
+  --str-chat__channel-search-input-wrapper-active-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
+    1px solid;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
+    1px solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-input-wrapper-active-border-inline-start: var(
+      --str-chat__primary-color
+    )
+    1px solid;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
+    1px solid;
+
+  /* The background applied to channel search result */
+  --str-chat__channel-search-result-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__channel-search-result-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-result-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-result-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-result-border-inline-end: none;
+
+  /* Background color used for the search result hover / focused state */
+  --str-chat__channel-search-result-hover-background-color: var(
+    --str-chat__secondary-surface-color
+  );
+
+  /* The font color used in the search results header  */
+  --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color used in the search results header  */
+  --str-chat__channel-search-results-header-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-results-header-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-results-header-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-results-header-border-inline-end: none;
+
+  /* The font color used in the empty search results indicator  */
+  --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The icon color used in the empty search results indicator  */
+  --str-chat__channel-search-results-empty-icon-color: var(--str-chat__disabled-color);
+
+  /* The background color used in the empty search results indicator  */
+  --str-chat__channel-search-results-empty-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-results-empty-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-results-empty-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-results-empty-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-results-empty-border-inline-end: none;
+}
+
+.str-chat__channel-search-input--wrapper {
+  @include utils.component-layer-overrides('channel-search-input-wrapper');
+
+  input {
+    @include utils.component-layer-overrides('channel-search-input');
+    outline: none;
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__channel-search-input--clear-button svg path {
+    fill: transparent;
+  }
+}
+
+.str-chat__channel-search-input--wrapper-active {
+  @include utils.component-layer-overrides('channel-search-input-wrapper-active');
+
+  .str-chat__channel-search-input--icon svg path {
+    fill: var(--str-chat__primary-color);
+  }
+
+  .str-chat__channel-search-input--clear-button svg path {
+    fill: var(--str-chat__text-low-emphasis-color);
+  }
+}
+
+.str-chat__channel-search-results-header {
+  @include utils.component-layer-overrides('channel-search-results-header');
+  font: var(--str-chat__subtitle-text);
+}
+
+.str-chat__channel-search-result-list {
+  .str-chat__channel-search-container-empty {
+    @include utils.component-layer-overrides('channel-search-results-empty');
+    font: var(--str-chat__subtitle2-medium-text);
+
+    svg path {
+      fill: var(--str-chat__channel-search-results-empty-icon-color);
+    }
+  }
+
+  .str-chat__channel-search-result {
+    @include utils.component-layer-overrides('channel-search-result');
+
+    .str-chat__channel-search-result--display-name {
+      @include utils.channel-preview-display-name-theme;
+    }
+  }
+
+  .str-chat__channel-preview-messenger--active {
+    background-color: var(--str-chat__channel-preview-active-background-color);
+  }
+
+  .str-chat__channel-search-result:hover,
+  .str-chat__channel-search-result--focused {
+    background-color: var(--str-chat__channel-search-result-hover-background-color);
+  }
+}

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

@@ -0,0 +1,53 @@
+.str-chat__edit-message-form {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  row-gap: var(--str-chat__spacing-5);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+
+  .str-chat__edit-message-form-options {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    button {
+      cursor: pointer;
+      margin: 0;
+    }
+  }
+}
+
+.str-chat__message {
+  .str-chat__message-input-angular-host {
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .str-chat__message-edit-in-progress {
+    .str-chat__modal--open {
+      .str-chat__modal__inner {
+        height: 40%;
+        max-height: 80%;
+        min-width: 90%;
+        max-width: 90%;
+        width: 90%;
+        flex-basis: min-content;
+
+        @media only screen and (min-device-width: 768px) {
+          min-width: 40%;
+          max-width: 60%;
+          width: min-content;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__edit-message-modal-button-border-radius: none;
+
+  /* The text color used for the send button */
+  --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
+
+  /* The text color used for the cancel button */
+  --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of the component */
+  --str-chat__edit-message-modal-button-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__edit-message-modal-button-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__edit-message-modal-button-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__edit-message-modal-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__edit-message-modal-button-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__edit-message-modal-button-box-shadow: none;
+}
+
+.str-chat__edit-message-form {
+  .str-chat__edit-message-form-options {
+    .str-chat__edit-message-cancel,
+    .str-chat__edit-message-send {
+      @include utils.component-layer-overrides('edit-message-modal-button');
+      font: var(--str-chat__body-medium-text);
+    }
+
+    .str-chat__edit-message-cancel {
+      text-transform: capitalize;
+      color: var(--str-chat__edit-message-modal-cancel-button-color);
+    }
+
+    .str-chat__edit-message-send {
+      text-transform: uppercase;
+      color: var(--str-chat__edit-message-modal-send-button-color);
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+.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: var(--str-chat__spacing-2_5);
+    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%;
+  }
+}
+
+.str-chat__message {
+  .str-chat__attachment-list {
+    .str-chat__modal--open {
+      .str-chat__modal__inner {
+        height: 80%;
+        width: 80%;
+      }
+    }
+  }
+}
+
+[dir='rtl'] .str-chat__image-carousel-stepper {
+  svg {
+    transform: scale(-1, 1);
+  }
+}

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

@@ -0,0 +1,15 @@
+@use '../utils';
+
+/* Only available in Angular SDK. */
+.str-chat {
+  /* The color of the stepper icon. */
+  --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
+}
+
+.str-chat__image-carousel {
+  .str-chat__image-carousel-stepper {
+    svg path {
+      fill: var(--str-chat__image-carousel-stepper-color);
+    }
+  }
+}