feat: add styles for Polls (#315)

src/v2/styles/Avatar/Avatar-layout.scss

@@ -30,6 +30,10 @@
   .stream-chat__avatar--message-status {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
   }
+
+  .str-chat__avatar--poll-vote-author {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
+  }
 }
 
 .str-chat__avatar {

src/v2/styles/Dialog/Dialog-layout.scss

@@ -1,8 +1,62 @@
+@use '../utils';
+
 .str-chat__dialog-overlay {
   inset: 0;
   overflow: hidden;
   position: absolute;
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
   z-index: 2;
+}
+
+.str-chat__dialog {
+  width: 100%;
+
+  .str-chat__dialog__body {
+    padding: 2rem 1rem;
+    overflow-y: auto;
+
+    .str-chat__dialog__title {
+      margin-bottom: 1rem;
+    }
+
+  }
+
+  .str-chat__dialog__controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.25rem;
+    padding: 1.25rem;
+
+    .str-chat__dialog__controls-button {
+      @include utils.button-reset;
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    width: 100%;
+    padding: 0.625rem 1rem;
+  }
+}
+
+.str-chat__dialog-menu {
+  overflow: hidden;
+
+  .str-chat__dialog-menu__button {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+
+    .str-chat__dialog-menu__button-icon {
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .str-chat__dialog-menu__button-text {
+      padding-inline: 0.675rem;
+    }
+  }
 }

src/v2/styles/Dialog/Dialog-theme.scss

@@ -0,0 +1,103 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the component */
+  --str-chat__dialog-menu-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__dialog-menu-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__dialog-menu-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+
+  /* The border radius used for the borders of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-radius: 0;
+
+  /* The text/icon color of an item in the message actions box */
+  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
+
+  /* The background color of an item in the message actions box */
+  --str-chat__dialog-menu-button-background-color: transparent;
+
+  /* The background color of an item in the message actions box when hovered */
+  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
+
+  /* Top border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-start: none;
+
+  /* Bottom border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-end: none;
+
+  /* Left (right in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-end: none;
+
+  /* Box shadow applied to an item in the message actions box */
+  --str-chat__dialog-menu-button-box-shadow: none;
+}
+
+.str-chat__dialog {
+  .str-chat__dialog__title {
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__dialog__prompt {
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__dialog__controls {
+    .str-chat__dialog__controls-button {
+      cursor: pointer;
+      font: var(--str-chat__body-medium-text);
+      color: var(--str-chat__primary-color);
+    }
+
+    .str-chat__dialog__controls-button--submit {
+      text-transform: uppercase;
+
+      &:disabled {
+        color: var(--str-chat__disabled-color);
+      }
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    font: var(--str-chat__subtitle-text);
+    border-radius: 20px;
+    border: 1px solid var(--str-chat__primary-color);
+  }
+}
+
+
+.str-chat__dialog-menu {
+  @include utils.component-layer-overrides('dialog-menu');
+
+  .str-chat__dialog-menu__button {
+    @include utils.component-layer-overrides('dialog-menu-button');
+    cursor: pointer;
+    font: var(--str-chat__subtitle-text);
+
+    &:hover, &:focus{
+      background-color: var(--str-chat__dialog-menu-button-hover-background-color);
+    }
+  }
+}

src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss

@@ -0,0 +1,5 @@
+.str-chat__drag-and-drop-container__item {
+  display: flex;
+  width: 100%;
+  padding-block: 0.25rem;
+}

src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss

@@ -0,0 +1,47 @@
+.str-chat {
+  /* Top border of the component */
+  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
+
+  /* Bottom border of the component */
+  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
+
+  /* Top border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
+
+  /* Bottom border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
+
+  /* Left (right in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
+}
+
+
+.str-chat__drag-and-drop-container--dragging {
+  cursor: grabbing;
+}
+
+.str-chat__drag-and-drop-container__item[draggable="true"] {
+  cursor: grab;
+
+  &:active {
+    background: transparent;
+  }
+}
+
+
+.str-chat__drag-and-drop-container__item {
+  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
+  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-top {
+    border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
+  }
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
+    border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
+  }
+}
+

src/v2/styles/Form/Form-layout.scss

@@ -0,0 +1,9 @@
+.str-chat__dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .str-chat__form-field-error {
+    margin-left: 0.5rem;
+  }
+}

src/v2/styles/Form/Form-theme.scss

@@ -0,0 +1,17 @@
+.str-chat__form-field-error {
+  font-size: 0.75rem;
+  color: var(--str-chat__danger-color)
+}
+
+// hide spin buttons form input of type number
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss

@@ -0,0 +1,4 @@
+.str-chat__infinite-scroll-paginator {
+  overflow-y: auto;
+  overflow-x: hidden;
+}

src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss

@@ -18,12 +18,3 @@
     }
   }
 }
-
-.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
-  display: none;
-  z-index: 1;
-
-  &.str-chat__message-actions-box--open {
-    display: block;
-  }
-}

src/v2/styles/MessageInput/MessageInput-layout.scss

@@ -53,10 +53,6 @@
       height: calc(var(--str-chat__spacing-px) * 45);
       cursor: pointer;
 
-      .str-chat__file-input {
-        display: none;
-      }
-
       .str-chat__file-input-label {
         @include utils.flex-row-center;
         cursor: pointer;
@@ -217,3 +213,31 @@
     transform: scale(-1, 1);
   }
 }
+
+.str-chat__attachment-selector-actions-menu,
+.str-chat__attachment-selector {
+  button {
+    @include utils.button-reset;
+  }
+}
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+
+    .str-chat__attachment-selector__menu-button__icon {
+      height: 26px;
+      width: 26px;
+    }
+  }
+}
+
+.str-chat__file-input {
+  display: none;
+}
+
+.str-chat__attachment-selector-actions-menu {
+  min-width: 300px;
+  padding-block: 0.5rem;
+}

src/v2/styles/MessageInput/MessageInput-theme.scss

@@ -168,6 +168,18 @@
 
   /* Box shadow applied to the cooldown timer */
   --str-chat__cooldown-box-shadow: none;
+
+  /* Color applied to an icon in a button that opens attachment selector */
+  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
+
+  /* Color applied to an icon in a button that opens attachment selector when hovered over */
+  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over */
+  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over or focused */
+  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color);
 }
 
 .str-chat__message-input {
@@ -283,3 +295,51 @@
     }
   }
 }
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    .str-chat__attachment-selector__menu-button__icon {
+      background-color: var(--str-chat__attachment-selector-button-icon-color);
+      -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+      mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+    }
+
+    &:hover {
+      .str-chat__attachment-selector__menu-button__icon {
+        background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
+      }
+    }
+  }
+}
+
+.str-chat__attachment-selector-actions-menu {
+  .str-chat__attachment-selector-actions-menu__button {
+    color: var(--str-chat__text-low-emphasis-color);
+
+    .str-chat__dialog-menu__button-icon {
+      background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
+    }
+
+    &:hover, &:focus {
+      color: var(--str-chat__text-color);
+
+      .str-chat__dialog-menu__button-icon {
+        background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
+      }
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__upload-file-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain;
+      mask: var(--str-chat__folder-icon) no-repeat center / contain;
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__create-poll-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
+      mask: var(--str-chat__poll-icon) no-repeat center / contain;
+    }
+  }
+}