feat: redesign polls

examples/vite/src/index.scss

@@ -97,16 +97,26 @@ body {
     max-width: 360px;
   }
 
-  @media (max-width: 960px) {
-    .str-chat__channel-list {
-      flex-basis: 260px;
-      max-width: 260px;
+  .str-chat__chat-view__threads {
+    .str-chat__thread-container {
+      flex: 1 1 auto;
+      min-width: 360px;
+      max-width: none;
     }
+  }
 
-    .str-chat__thread-list-container,
-    .str-chat__thread-container {
-      flex-basis: 320px;
-      max-width: 320px;
+  @media (max-width: 1100px) {
+    .str-chat__container:has(.str-chat__thread-container) > .str-chat__main-panel {
+      width: 0;
+      min-width: 0;
+      flex: 0 0 0;
+      overflow: hidden;
+    }
+
+    .str-chat__container:has(.str-chat__thread-container) > .str-chat__thread-container {
+      flex: 1 1 auto;
+      min-width: 360px;
+      max-width: none;
     }
   }
 

examples/vite/src/stream-imports-layout.scss

@@ -8,7 +8,7 @@
 //@use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-layout';
 //@use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-layout';
 @use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-layout';
-@use 'stream-chat-react/dist/scss/v2/Channel/Channel-layout';
+//@use 'stream-chat-react/dist/scss/v2/Channel/Channel-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-layout';
 @use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-layout';
@@ -18,8 +18,8 @@
 //@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-layout';
 @use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-layout';
 @use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout'; // X
-@use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-layout';
-@use 'stream-chat-react/dist/scss/v2/Form/Form-layout';
+//@use 'stream-chat-react/dist/scss/v2/EditMessageForm/EditMessageForm-layout';
+//@use 'stream-chat-react/dist/scss/v2/Form/Form-layout';
 @use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-layout';
 //@use 'stream-chat-react/dist/scss/v2/Icon/Icon-layout';
 @use 'stream-chat-react/dist/scss/v2/InfiniteScrollPaginator/InfiniteScrollPaginator-layout';
@@ -38,7 +38,7 @@
 @use 'stream-chat-react/dist/scss/v2/Notification/MessageNotification-layout';
 @use 'stream-chat-react/dist/scss/v2/Notification/NotificationList-layout';
 @use 'stream-chat-react/dist/scss/v2/Notification/Notification-layout';
-@use 'stream-chat-react/dist/scss/v2/Poll/Poll-layout';
+//@use 'stream-chat-react/dist/scss/v2/Poll/Poll-layout';
 @use 'stream-chat-react/dist/scss/v2/Search/Search-layout';
 @use 'stream-chat-react/dist/scss/v2/Thread/Thread-layout';
 @use 'stream-chat-react/dist/scss/v2/Tooltip/Tooltip-layout';

examples/vite/src/stream-imports-theme.scss

@@ -8,15 +8,15 @@
 //@use 'stream-chat-react/dist/scss/v2/AudioRecorder/AudioRecorder-theme';
 //@use 'stream-chat-react/dist/scss/v2/Autocomplete/Autocomplete-theme';
 @use 'stream-chat-react/dist/scss/v2/BaseImage/BaseImage-theme';
-@use 'stream-chat-react/dist/scss/v2/Channel/Channel-theme.scss';
+//@use 'stream-chat-react/dist/scss/v2/Channel/Channel-theme.scss';
 @use 'stream-chat-react/dist/scss/v2/ChannelHeader/ChannelHeader-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme';
 @use 'stream-chat-react/dist/scss/v2/ChannelSearch/ChannelSearch-theme';
 //@use 'stream-chat-react/dist/scss/v2/Dialog/Dialog-theme';
 @use 'stream-chat-react/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme';
 @use 'stream-chat-react/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme';
-@use 'stream-chat-react/dist/scss/v2/Form/Form-theme';
+//@use 'stream-chat-react/dist/scss/v2/Form/Form-theme';
 //@use 'stream-chat-react/dist/scss/v2/Icon/Icon-theme';
 @use 'stream-chat-react/dist/scss/v2/ImageCarousel/ImageCarousel-theme';
 @use 'stream-chat-react/dist/scss/v2/LoadingIndicator/LoadingIndicator-theme';
@@ -32,7 +32,7 @@
 @use 'stream-chat-react/dist/scss/v2/Notification/MessageNotification-theme';
 @use 'stream-chat-react/dist/scss/v2/Notification/NotificationList-theme';
 @use 'stream-chat-react/dist/scss/v2/Notification/Notification-theme';
-@use 'stream-chat-react/dist/scss/v2/Poll/Poll-theme';
+//@use 'stream-chat-react/dist/scss/v2/Poll/Poll-theme';
 @use 'stream-chat-react/dist/scss/v2/Search/Search-theme';
 @use 'stream-chat-react/dist/scss/v2/Thread/Thread-theme';
 @use 'stream-chat-react/dist/scss/v2/Tooltip/Tooltip-theme';

src/components/Attachment/styling/Giphy.scss

@@ -39,11 +39,6 @@
   background-color: var(--badge-bg-overlay, rgba(0, 0, 0, 0.75));
   color: var(--badge-text-on-accent, #fff);
 
-  font-feature-settings:
-    'liga' off,
-    'clig' off;
-
-  /* metadata/emphasis */
   font-size: var(--typography-font-size-xs, 12px);
   font-weight: var(--typography-font-weight-semi-bold, 600);
   line-height: var(--typography-line-height-tight, 16px);

src/components/Avatar/Avatar.tsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { IconPeople } from '../Icons';
+import { IconPerson } from '../Icons';
 
 export type AvatarProps = {
   /** URL of the avatar image */
@@ -99,7 +99,7 @@ export const Avatar = ({
               {sizeAwareInitials}
             </div>
           )}
-          {!sizeAwareInitials.length && <IconPeople />}
+          {!sizeAwareInitials.length && <IconPerson />}
         </>
       )}
     </div>

src/components/Avatar/AvatarStack.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable arrow-body-style */
 import { type ComponentProps, type ElementType } from 'react';
 import { useComponentContext } from '../../context';
 import { type AvatarProps, Avatar as DefaultAvatar } from './Avatar';

src/components/Avatar/styling/Avatar.scss

@@ -26,7 +26,7 @@
     height: 100%;
   }
 
-  .str-chat__icon--people {
+  .str-chat__icon--person {
     width: var(--avatar-icon-size);
     height: var(--avatar-icon-size);
     stroke-width: var(--avatar-icon-stroke-width);
@@ -127,4 +127,3 @@
     }
   }
 }
-

src/components/Button/styling/Button.scss

@@ -13,8 +13,8 @@
     justify-content: center;
     gap: var(--spacing-xs);
 
-    line-height: var(--typography-line-height-normal);
-    font-weight: var(--typography-font-weight-semibold);
+    font: var(--str-chat__body-emphasis-text);
+    text-transform: capitalize;
 
     &.str-chat__button--solid {
       &.str-chat__button--primary {

src/components/Channel/styling/Channel.scss

@@ -0,0 +1,241 @@
+@use '../../../styling/utils';
+
+.str-chat__channel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .str-chat__container {
+    height: 100%;
+    display: flex;
+
+    .str-chat__main-panel {
+      position: relative;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
+.str-chat__empty-channel {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
+  @include utils.empty-layout;
+  position: relative;
+
+  .str-chat__empty-channel-notifications {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-2);
+  }
+}
+
+.str-chat__loading-channel {
+  $text-height: calc(var(--str-chat__spacing-px) * 16);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .str-chat__loading-channel-header {
+    @include utils.header-layout;
+
+    .str-chat__loading-channel-header-avatar {
+      flex-shrink: 0;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-header-end {
+      @include utils.header-text-layout;
+
+      .str-chat__loading-channel-header-name {
+        border-radius: var(--str-chat__border-radius-xs);
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 170);
+      }
+
+      .str-chat__loading-channel-header-info {
+        border-radius: var(--str-chat__border-radius-xs);
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 66);
+      }
+    }
+  }
+
+  .str-chat__loading-channel-message-list {
+    /* stylelint-disable */
+    height: 100%;
+    @include utils.message-list-spacing;
+
+    .str-chat__loading-channel-message {
+      display: flex;
+      width: 100%;
+      column-gap: var(--str-chat__spacing-2);
+      padding: var(--str-chat__spacing-4) 0;
+
+      .str-chat__loading-channel-message-avatar {
+        flex-shrink: 0;
+        width: calc(var(--str-chat__spacing-px) * 49);
+        height: calc(var(--str-chat__spacing-px) * 49);
+      }
+
+      .str-chat__loading-channel-message-end {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: var(--str-chat__spacing-2);
+
+        .str-chat__loading-channel-message-last-row {
+          display: flex;
+          width: 100%;
+          column-gap: var(--str-chat__spacing-2);
+        }
+      }
+
+      .str-chat__loading-channel-message-sender {
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 66);
+      }
+
+      .str-chat__loading-channel-message-text {
+        height: $text-height;
+        width: 100%;
+      }
+
+      .str-chat__loading-channel-message-date {
+        height: $text-height;
+        width: calc(var(--str-chat__spacing-px) * 50);
+      }
+
+      &:nth-of-type(2) {
+        flex-direction: row-reverse;
+
+        .str-chat__loading-channel-message-sender {
+          align-self: end;
+        }
+
+        .str-chat__loading-channel-message-last-row {
+          flex-direction: row-reverse;
+        }
+      }
+    }
+  }
+
+  .str-chat__loading-channel-message-input-row {
+    display: flex;
+    column-gap: var(--str-chat__spacing-2);
+    padding: var(--str-chat__spacing-2);
+
+    .str-chat__loading-channel-message-input {
+      width: 100%;
+      height: calc(var(--str-chat__spacing-px) * 36);
+    }
+
+    .str-chat__loading-channel-message-send {
+      height: calc(var(--str-chat__spacing-px) * 36);
+      width: calc(var(--str-chat__spacing-px) * 36);
+    }
+  }
+}
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__channel-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__channel-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__channel-background-color: var(--str-chat__background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__channel-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-border-inline-end: none;
+
+  /* The icon color used when no channel is selected */
+  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
+
+  /* The text color used when no channel is selected */
+  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The color of the loading indicator */
+  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
+}
+
+.str-chat__channel {
+  @include utils.component-layer-overrides('channel');
+}
+
+.str-chat__empty-channel {
+  --str-chat-icon-color: var(--str-chat__channel-empty-color);
+  @include utils.component-layer-overrides('channel');
+  @include utils.empty-theme('channel');
+
+  .str-chat__empty-channel-text {
+    color: var(--str-chat__channel-empty-color);
+  }
+}
+
+.str-chat__loading-channel {
+  @include utils.loading-animation;
+
+  .str-chat__loading-channel-header {
+    background-color: var(--str-chat__channel-header-background-color);
+
+    .str-chat__loading-channel-header-avatar {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-header-name,
+    .str-chat__loading-channel-header-info {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__border-radius-xs);
+    }
+  }
+
+  .str-chat__loading-channel-message-list {
+    background-color: var(--str-chat__message-list-background-color);
+
+    .str-chat__loading-channel-message-avatar {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__avatar-border-radius);
+    }
+
+    .str-chat__loading-channel-message-sender,
+    .str-chat__loading-channel-message-text,
+    .str-chat__loading-channel-message-date {
+      @include utils.loading-item-background('channel');
+      border-radius: var(--str-chat__message-bubble-border-radius);
+    }
+  }
+
+  .str-chat__loading-channel-message-input-row {
+    .str-chat__loading-channel-message-input,
+    .str-chat__loading-channel-message-send {
+      @include utils.loading-item-background('channel');
+    }
+
+    .str-chat__loading-channel-message-input {
+      border-radius: var(--str-chat__message-textarea-border-radius);
+    }
+
+    .str-chat__loading-channel-message-send {
+      border-radius: var(--str-chat__message-send-border-radius);
+    }
+  }
+}

src/components/Channel/styling/index.scss

@@ -0,0 +1 @@
+@use 'Channel';