stream-chat-angular 5.7.2 → 5.8.0

package/src/assets/styles/scss/Poll/Poll-layout.scss

@@ -0,0 +1,488 @@
+@use '../utils';
+
+.str-chat__poll {
+  $checkmark_size: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 0.675rem;
+  max-width: 270px;
+  font: var(--str-chat__body-text);
+
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
+  }
+
+  .str-chat__checkmark {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    margin-right: 0.125rem;
+    height: $checkmark_size;
+    width: $checkmark_size;
+  }
+
+  .str-chat__checkmark--checked {
+    height: calc($checkmark_size + 1px);
+    width: calc($checkmark_size + 1px);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 11px 10px;
+  }
+
+  .str-chat__poll-header {
+    .str-chat__poll-title {
+      font: var(--str-chat__body-medium-text);
+    }
+
+    .str-chat__poll-subtitle {
+      font: var(--str-chat__caption-text);
+    }
+  }
+
+  .str-chat__poll-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .str-chat__poll-action {
+      padding: 0.675rem;
+      font: var(--str-chat__subtitle-text);
+      color: var(--str-chat__primary-color);
+    }
+  }
+}
+
+.str-chat__poll-option-list--full,
+.str-chat__modal__poll-results {
+  .str-chat__amount-bar {
+    display: none;
+  }
+}
+
+.str-chat__poll-option {
+  cursor: pointer;
+
+  &.str-chat__poll-option--full-vote-list {
+    cursor: default;
+    height: 100%;
+    padding: 0;
+  }
+
+  .str-chat__poll-option-data {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    font: var(--str-chat__body-text);
+    gap: 0.125rem;
+
+    p {
+      margin: 0;
+      flex: 1;
+    }
+
+    .str-chat__poll-option-voters {
+      --str-chat__avatar-size: 1.175rem;
+      display: flex;
+    }
+  }
+}
+
+
+.str-chat__poll-option-list--full {
+  .str-chat__poll-option {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem 0.75rem;
+
+    &:nth-of-type(1) {
+      padding-top: 1rem;
+      border-top-left-radius: var(--str-chat__border-radius-sm);
+      border-top-right-radius: var(--str-chat__border-radius-sm);
+    }
+
+    &:last-child {
+      padding-bottom: 1rem;
+      border-bottom-left-radius: var(--str-chat__border-radius-sm);
+      border-bottom-right-radius: var(--str-chat__border-radius-sm);
+    }
+  }
+}
+
+.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-block: 1rem 0.5rem;
+
+  .str-chat__poll-option {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 0.125rem;
+
+    .str-chat__poll-option-data {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+
+    .str-chat__poll-option__votes-bar {
+      grid-column: 2 / 3;
+      grid-row: 2 / 3;
+      height: 0.25rem;
+      width: 100%;
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+
+.str-chat__modal__poll-results {
+  .str-chat__poll-option {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.str-chat__poll-actions .str-chat__modal {
+  .str-chat__modal__close-button {
+    display: none;
+  }
+
+  .str-chat__modal__inner {
+    $content-offset-inline: 1rem;
+    padding: 0 0 0.5rem;
+    overflow: hidden;
+    max-width: 400px;
+
+    .str-chat__tooltip {
+      max-width: 300px;
+    }
+
+    .str-chat__modal__suggest-poll-option {
+      .str-chat__form-field-error {
+        height: 1rem;
+      }
+    }
+
+    .str-chat__modal__poll-answer-list,
+    .str-chat__modal__poll-option-list,
+    .str-chat__modal__poll-results {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+    }
+
+    .str-chat__modal__poll-answer-list,
+    .str-chat__poll-option--full-vote-list {
+      .str-chat__loading-indicator-placeholder {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    .str-chat__modal__poll-option-list__title,
+    .str-chat__modal__poll-results__title {
+      padding: 1.175rem 1rem;
+    }
+
+    .str-chat__modal__poll-answer-list__body,
+    .str-chat__modal__poll-results__body {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      padding-bottom: 1rem;
+    }
+
+    .str-chat__modal__poll-results__body,
+    .str-chat__modal__poll-option-list__body,
+    .str-chat__poll-answer-list,
+    .str-chat__modal__poll-results__option-list {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      max-height: 100%;
+      min-height: 0;
+    }
+
+    .str-chat__poll-answer-list {
+      padding-bottom: 0;
+    }
+
+    .str-chat__modal__poll-results__body,
+    .str-chat__modal__poll-option-list__body,
+    .str-chat__poll-answer-list {
+      overflow-y: auto;
+      padding: 0 $content-offset-inline 1.25rem;
+    }
+
+    .str-chat__poll-answer-list,
+    .str-chat__modal__poll-results__option-list {
+      gap: 0.5rem;
+    }
+
+    .str-chat__modal__poll-results__body,
+    .str-chat__modal__poll-option-list__body {
+      gap: 2rem;
+    }
+
+    .str-chat__poll-option__show-all-votes-button {
+      padding-bottom: 1rem;
+    }
+
+    .str-chat__poll-answer {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding: 0.75rem 1rem;
+
+      .str-chat__poll-answer__text {
+        margin: 0;
+      }
+    }
+
+    .str-chat__checkmark {
+      margin-right: 1rem;
+    }
+
+    .str-chat__poll-option__header {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.25rem;
+      width: 100%;
+      padding: 0.75rem 1rem;
+
+      .str-chat__poll-option__option-text {
+        flex: 1;
+      }
+    }
+
+    .str-chat__poll-vote {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.5rem;
+      white-space: nowrap;
+      padding-block: 0.375rem;
+
+      .str-chat__poll-vote__author {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--str-chat__spacing-px) * 5);
+        min-width: 0;
+
+        .str-chat__poll-vote__author__name {
+          @include utils.ellipsis-text;
+          max-width: 130px;
+          min-width: 0;
+        }
+      }
+    }
+
+    .str-chat__poll-result-option-vote-counter {
+      display: flex;
+      gap: 0.375rem;
+
+      .str-chat__poll-result-winning-option-icon {
+        height: 1.25rem;
+        width: 1.25rem;
+        background-image: var(--str-chat__winning-poll-option-icon);
+      }
+    }
+  }
+}
+
+.str-chat__poll-vote-listing {
+  padding: 0 1rem 0.75rem;
+}
+
+.str-chat__modal__poll-results--option-detail {
+  .str-chat__modal-header__title {
+    padding-inline: 1rem;
+    flex: 1;
+  }
+
+  .str-chat__modal__poll-results__body {
+    padding-inline: 1rem;
+  }
+}
+
+.str-chat__quoted-poll-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.str-chat__modal.str-chat__create-poll-modal {
+  .str-chat__modal__close-button {
+    display: none;
+  }
+
+  .str-chat__modal__inner {
+    padding: 0;
+    max-height: unset;
+    display: block;
+  }
+
+  .str-chat__poll-creation-dialog {
+    width: 100%;
+    height: 700px;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      @include utils.button-reset;
+      cursor: pointer;
+    }
+
+    .str-chat__modal-header {
+      padding-block: 14px;
+
+      .str-chat__modal-header__close-button {
+        background-image: var(--str-chat__close-icon);
+        background-repeat: no-repeat;
+      }
+    }
+
+    .str-chat__dialog__body {
+      flex: 1 1;
+      padding: 1rem;
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
+    }
+
+    .str-chat__form__input-fieldset {
+      margin: 0;
+      padding: 0;
+
+      .str-chat__form__input-field {
+        width: 100%;
+        padding: 1rem;
+
+        .str-chat__form__input-field__value {
+          width: 100%;
+
+          .str-chat__form__input-field__error {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .str-chat__form__input-field--with-label {
+      .str-chat__form__input-field__value {
+        padding: 1rem;
+      }
+    }
+
+    .str-chat__form__input-field__value input {
+      width: 100%;
+    }
+
+    .str-chat__form__expandable-field {
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      .str-chat__form__switch-field {
+        padding: 0;
+      }
+
+      .str-chat__form__input-field {
+          width: 100%;
+
+        .str-chat__form__input-field__value {
+          padding: 0;
+
+          .str-chat__form-field-error {
+            height: 1rem;
+          }
+        }
+      }
+    }
+
+    .str-chat__form__input-fieldset__values {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .str-chat__form__field-label {
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+
+    .str-chat__form__input-field--draggable {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+
+      .str-chat__drag-handle {
+        height: 1rem;
+        width: 1rem;
+      }
+    }
+
+    .str-chat__form__switch-field {
+      width: 100%;
+      padding: 1rem;
+
+      input[type='checkbox'] {
+        display: none;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      .str-chat__form__switch-field__switch {
+        display: flex;
+        align-items: center;
+        width: calc(var(--str-chat__spacing-px) * 52);
+        height: calc(var(--str-chat__spacing-px) * 32);
+        padding: 0.25rem;
+
+        .str-chat__form__switch-field__switch-handle {
+          height: 1.5rem;
+          width: 1.5rem;
+        }
+
+        &.str-chat__form__switch-field__switch--on {
+          .str-chat__form__switch-field__switch-handle {
+            transform: translateX(1.25rem);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-device-width: 768px) {
+  .str-chat__modal--open .str-chat__modal__inner {
+    width: 90%;
+  }
+
+  .str-chat__create-poll-modal,
+  .str-chat__poll-answer-list-modal,
+  .str-chat__poll-results-modal {
+    .str-chat__modal__inner {
+      height: 90%;
+      max-height: unset;
+    }
+  }
+}

package/src/assets/styles/scss/Poll/Poll-theme.scss

@@ -0,0 +1,206 @@
+@mixin field-background {
+  background-color: var(--str-chat__tertiary-surface-color);
+  border-radius: 0.75rem;
+}
+
+.str-chat__poll {
+  .str-chat__poll-header {
+    .str-chat__poll-subtitle {
+      color: var(--str-chat__text-low-emphasis-color);
+    }
+  }
+
+  .str-chat__checkmark {
+    border-radius: var(--str-chat__border-radius-circle);
+    border: 1px solid var(--str-chat__disabled-color);
+  }
+
+  .str-chat__checkmark--checked {
+    background-color: var(--str-chat__primary-color);
+    border: none;
+  }
+
+  .str-chat__poll-option-list {
+    .str-chat__poll-option {
+      &.str-chat__poll-option--votable:hover {
+        cursor: pointer;
+      }
+
+      .str-chat__poll-option__votes-bar {
+        background: linear-gradient(
+          to right,
+          var(--str-chat__primary-color) var(--str-chat__amount-bar-fulfillment),
+          var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment)
+        );
+        border-radius: calc(var(--str-chat__spacing-px) * 4);
+      }
+
+      .str-chat__poll-option__votes-bar--winner {
+        background: linear-gradient(
+          to right,
+          var(--str-chat__info-color) var(--str-chat__amount-bar-fulfillment),
+          var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment)
+        );
+      }
+    }
+  }
+
+  .str-chat__poll-option-list--full,
+  .str-chat__poll-answer,
+  .str-chat__modal__poll-option-list__title,
+  .str-chat__modal__poll-results .str-chat__modal__poll-results__title,
+  .str-chat__modal__poll-results .str-chat__poll-option {
+    border-radius: 0.75rem;
+  }
+}
+
+.str-chat__poll-option-list--full {
+  overflow: clip;
+}
+
+.str-chat__poll--closed {
+  .str-chat__poll-option {
+    &:hover {
+      cursor: unset;
+    }
+  }
+}
+
+.str-chat__poll-actions .str-chat__modal {
+  .str-chat__poll-answer__text,
+  .str-chat__modal__poll-option-list__title,
+  .str-chat__modal__poll-results__title {
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__poll-option-list--full,
+  .str-chat__poll-answer,
+  .str-chat__modal__poll-option-list__title,
+  .str-chat__modal__poll-results__title,
+  .str-chat__poll-option {
+    background-color: var(--str-chat__tertiary-surface-color);
+  }
+
+  .str-chat__poll-option-list--full {
+    .str-chat__poll-option-text {
+      font-weight: 500;
+    }
+
+    .str-chat__poll-option--votable:hover {
+      background-color: var(--str-chat__secondary-surface-color)
+    }
+  }
+
+  .str-chat__poll-option {
+    .str-chat__poll-option__header {
+      font: var(--str-chat__subtitle-text);
+
+      .str-chat__poll-option__option-text {
+        font: var(--str-chat__subtitle-medium-text);
+      }
+    }
+
+    .str-chat__poll-option__show-all-votes-button {
+      font: var(--str-chat__subtitle-text);
+      color: var(--str-chat__primary-color);
+    }
+  }
+
+}
+
+.str-chat__poll-vote {
+  .str-chat__poll-vote__author__name {
+    text-transform: capitalize;
+  }
+
+  .str-chat__poll-vote__timestamp {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+}
+
+
+.str-chat__quoted-poll-preview {
+  font: var(--str-chat__body-medium-text);
+}
+
+.str-chat__poll-creation-dialog {
+  .str-chat__form__input-fieldset {
+    border: none;
+  }
+
+  .str-chat__form__expandable-field,
+  .str-chat__form__input-field:not(.str-chat__form__input-field--with-label),
+  .str-chat__form__input-field--with-label .str-chat__form__input-field__value {
+    @include field-background;
+
+    input {
+      border: none;
+      background: transparent;
+      outline: none;
+
+      &, &::placeholder {
+        font: var(--str-chat__subtitle-text);
+      }
+    }
+  }
+
+  .str-chat__form__input-field--draggable {
+    input {
+      pointer-events: auto;
+    }
+
+    .str-chat__drag-handle {
+      background-color: var(--str-chat__text-low-emphasis-color);
+      -webkit-mask: var(--str-chat__handle-icon) no-repeat center / contain;
+      mask: var(--str-chat__handle-icon) no-repeat center / contain;
+    }
+  }
+
+  .str-chat__form__input-field--has-error {
+    border: 1px solid var(--str-chat__message-error-message-color);
+  }
+
+  .str-chat__form__expandable-field .str-chat__form__input-field--has-error, {
+    border: none;
+
+    .str-chat__form__input-field__value {
+      border: none;
+    }
+  }
+
+  .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error {
+    border: none;
+
+    .str-chat__form__input-field__value {
+      border: 1px solid var(--str-chat__message-error-message-color);
+    }
+  }
+
+  .str-chat__form__switch-field {
+    @include field-background;
+
+    &, label {
+      cursor: pointer;
+    }
+
+    .str-chat__form__switch-field__switch {
+      cursor: pointer;
+      background-color: var(--str-chat__text-low-emphasis-color);
+      border-radius: 100px;
+
+      .str-chat__form__switch-field__switch-handle {
+        border-radius: var(--str-chat__border-radius-circle);
+        background-color: var(--str-chat__disabled-color);
+      }
+
+      &.str-chat__form__switch-field__switch--on {
+        background-color: var(--str-chat__green600);
+
+        .str-chat__form__switch-field__switch-handle {
+          background-color: var(--str-chat__background-color);
+          border-radius: var(--str-chat__border-radius-circle);
+        }
+      }
+    }
+  }
+}

package/src/assets/styles/scss/_global-theme-variables.scss

@@ -40,7 +40,7 @@
   --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
 
   /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family);
+  --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family);
 
   /* The font used for subtitle texts with emphasize */
   --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);

package/src/assets/styles/scss/_icons.scss

@@ -2,6 +2,13 @@
 
 .str-chat {
   --str-chat__image-fallback-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=');
+  --str-chat__winning-poll-option-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS44MzMzIDQuMTY2NjdIMTQuMTY2N1YyLjVINS44MzMzM1Y0LjE2NjY3SDQuMTY2NjdDMy4yNSA0LjE2NjY3IDIuNSA0LjkxNjY3IDIuNSA1LjgzMzMzVjYuNjY2NjdDMi41IDguNzkxNjcgNC4xIDEwLjUyNSA2LjE1ODMzIDEwLjc4MzNDNi42ODMzMyAxMi4wMzMzIDcuODA4MzMgMTIuOTc1IDkuMTY2NjcgMTMuMjVWMTUuODMzM0g1LjgzMzMzVjE3LjVIMTQuMTY2N1YxNS44MzMzSDEwLjgzMzNWMTMuMjVDMTIuMTkxNyAxMi45NzUgMTMuMzE2NyAxMi4wMzMzIDEzLjg0MTcgMTAuNzgzM0MxNS45IDEwLjUyNSAxNy41IDguNzkxNjcgMTcuNSA2LjY2NjY3VjUuODMzMzNDMTcuNSA0LjkxNjY3IDE2Ljc1IDQuMTY2NjcgMTUuODMzMyA0LjE2NjY3Wk00LjE2NjY3IDYuNjY2NjdWNS44MzMzM0g1LjgzMzMzVjkuMDE2NjdDNC44NjY2NyA4LjY2NjY3IDQuMTY2NjcgNy43NSA0LjE2NjY3IDYuNjY2NjdaTTEwIDExLjY2NjdDOC42MjUgMTEuNjY2NyA3LjUgMTAuNTQxNyA3LjUgOS4xNjY2N1Y0LjE2NjY3SDEyLjVWOS4xNjY2N0MxMi41IDEwLjU0MTcgMTEuMzc1IDExLjY2NjcgMTAgMTEuNjY2N1pNMTUuODMzMyA2LjY2NjY3QzE1LjgzMzMgNy43NSAxNS4xMzMzIDguNjY2NjcgMTQuMTY2NyA5LjAxNjY3VjUuODMzMzNIMTUuODMzM1Y2LjY2NjY3WiIgZmlsbD0iIzVFNjc2RSIvPgo8L3N2Zz4K');
+  --str-chat__arrow-left-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc5MTUgNy4wMDUxSDMuNjIxNDhMOC41MDE0OCAyLjEyNTFDOC44OTE0OCAxLjczNTEgOC44OTE0OCAxLjA5NTEgOC41MDE0OCAwLjcwNTA5OEM4LjExMTQ4IDAuMzE1MDk4IDcuNDgxNDggMC4zMTUwOTggNy4wOTE0OCAwLjcwNTA5OEwwLjUwMTQ4NCA3LjI5NTFDMC4xMTE0ODQgNy42ODUxIDAuMTExNDg0IDguMzE1MSAwLjUwMTQ4NCA4LjcwNTFMNy4wOTE0OCAxNS4yOTUxQzcuNDgxNDggMTUuNjg1MSA4LjExMTQ4IDE1LjY4NTEgOC41MDE0OCAxNS4yOTUxQzguODkxNDggMTQuOTA1MSA4Ljg5MTQ4IDE0LjI3NTEgOC41MDE0OCAxMy44ODUxTDMuNjIxNDggOS4wMDUxSDE0Ljc5MTVDMTUuMzQxNSA5LjAwNTEgMTUuNzkxNSA4LjU1NTEgMTUuNzkxNSA4LjAwNTFDMTUuNzkxNSA3LjQ1NTEgMTUuMzQxNSA3LjAwNTEgMTQuNzkxNSA3LjAwNTFaIiBmaWxsPSIjMDgwNzA3Ii8+Cjwvc3ZnPgo=');
+  --str-chat__close-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjI5OTcgMC43MDk5NzFDMTIuOTA5NyAwLjMxOTk3MSAxMi4yNzk3IDAuMzE5OTcxIDExLjg4OTcgMC43MDk5NzFMNi45OTk3MyA1LjU4OTk3TDIuMTA5NzMgMC42OTk5NzFDMS43MTk3MyAwLjMwOTk3MSAxLjA4OTczIDAuMzA5OTcxIDAuNjk5NzI3IDAuNjk5OTcxQzAuMzA5NzI3IDEuMDg5OTcgMC4zMDk3MjcgMS43MTk5NyAwLjY5OTcyNyAyLjEwOTk3TDUuNTg5NzMgNi45OTk5N0wwLjY5OTcyNyAxMS44OUMwLjMwOTcyNyAxMi4yOCAwLjMwOTcyNyAxMi45MSAwLjY5OTcyNyAxMy4zQzEuMDg5NzMgMTMuNjkgMS43MTk3MyAxMy42OSAyLjEwOTczIDEzLjNMNi45OTk3MyA4LjQwOTk3TDExLjg4OTcgMTMuM0MxMi4yNzk3IDEzLjY5IDEyLjkwOTcgMTMuNjkgMTMuMjk5NyAxMy4zQzEzLjY4OTcgMTIuOTEgMTMuNjg5NyAxMi4yOCAxMy4yOTk3IDExLjg5TDguNDA5NzMgNi45OTk5N0wxMy4yOTk3IDIuMTA5OTdDMTMuNjc5NyAxLjcyOTk3IDEzLjY3OTcgMS4wODk5NyAxMy4yOTk3IDAuNzA5OTcxWiIgZmlsbD0iIzA4MDcwNyIvPgo8L3N2Zz4K');
+  --str-chat__add-attachment-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS4zMzMyIDcuMzMzMDdMMTIuNjY2NiA3LjMzMzA3TDEyLjY2NjYgMTIuNjY2NEw3LjMzMzI0IDEyLjY2NjRMNy4zMzMyNCAxNS4zMzMxTDEyLjY2NjYgMTUuMzMzMUwxMi42NjY2IDIwLjY2NjRMMTUuMzMzMiAyMC42NjY0TDE1LjMzMzIgMTUuMzMzMUwyMC42NjY2IDE1LjMzMzFMMjAuNjY2NiAxMi42NjY0TDE1LjMzMzIgMTIuNjY2NEwxNS4zMzMyIDcuMzMzMDdaTTEzLjk5OTkgMC42NjY0MDRDNi42Mzk5MSAwLjY2NjQwNCAwLjY2NjU3NiA2LjYzOTc0IDAuNjY2NTc3IDEzLjk5OTdDMC42NjY1NzYgMjEuMzU5NyA2LjYzOTkxIDI3LjMzMzEgMTMuOTk5OSAyNy4zMzMxQzIxLjM1OTkgMjcuMzMzMSAyNy4zMzMyIDIxLjM1OTcgMjcuMzMzMiAxMy45OTk3QzI3LjMzMzIgNi42Mzk3NCAyMS4zNTk5IDAuNjY2NDA0IDEzLjk5OTkgMC42NjY0MDRaTTEzLjk5OTkgMjQuNjY2NEM4LjExOTkxIDI0LjY2NjQgMy4zMzMyNCAxOS44Nzk3IDMuMzMzMjUgMTMuOTk5N0MzLjMzMzI0IDguMTE5NzQgOC4xMTk5MSAzLjMzMzA3IDEzLjk5OTkgMy4zMzMwN0MxOS44Nzk5IDMuMzMzMDcgMjQuNjY2NiA4LjExOTc0IDI0LjY2NjYgMTMuOTk5N0MyNC42NjY2IDE5Ljg3OTcgMTkuODc5OSAyNC42NjY0IDEzLjk5OTkgMjQuNjY2NFoiLz4KPC9zdmc+Cg==');
+  --str-chat__folder-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo=');
+  --str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+');
+  --str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K');
 }
 
 @font-face {