diff --git a/src/v2/styles/Avatar/Avatar-layout.scss b/src/v2/styles/Avatar/Avatar-layout.scss index dd3de81f..4769ac17 100644 --- a/src/v2/styles/Avatar/Avatar-layout.scss +++ b/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 { diff --git a/src/v2/styles/Dialog/Dialog-layout.scss b/src/v2/styles/Dialog/Dialog-layout.scss index 970bb800..ba51ced9 100644 --- a/src/v2/styles/Dialog/Dialog-layout.scss +++ b/src/v2/styles/Dialog/Dialog-layout.scss @@ -1,3 +1,5 @@ +@use '../utils'; + .str-chat__dialog-overlay { inset: 0; overflow: hidden; @@ -5,4 +7,56 @@ 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; + } + } } \ No newline at end of file diff --git a/src/v2/styles/Dialog/Dialog-theme.scss b/src/v2/styles/Dialog/Dialog-theme.scss new file mode 100644 index 00000000..dffbefc6 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss b/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss new file mode 100644 index 00000000..f3a6036a --- /dev/null +++ b/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; +} diff --git a/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss new file mode 100644 index 00000000..2ed4e965 --- /dev/null +++ b/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); + } +} + diff --git a/src/v2/styles/Form/Form-layout.scss b/src/v2/styles/Form/Form-layout.scss new file mode 100644 index 00000000..e2b2d071 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/v2/styles/Form/Form-theme.scss b/src/v2/styles/Form/Form-theme.scss new file mode 100644 index 00000000..29587ae0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss new file mode 100644 index 00000000..735c53a5 --- /dev/null +++ b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss @@ -0,0 +1,4 @@ +.str-chat__infinite-scroll-paginator { + overflow-y: auto; + overflow-x: hidden; +} \ No newline at end of file diff --git a/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss b/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss index ad4bdcd6..4b954ab9 100644 --- a/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss +++ b/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; - } -} diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss index 39b1db70..d2b321e4 100644 --- a/src/v2/styles/MessageInput/MessageInput-layout.scss +++ b/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; +} \ No newline at end of file diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index b490fecb..cc371fd9 100644 --- a/src/v2/styles/MessageInput/MessageInput-theme.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/v2/styles/Modal/Modal-layout.scss b/src/v2/styles/Modal/Modal-layout.scss index 9e0645e1..3a7278c6 100644 --- a/src/v2/styles/Modal/Modal-layout.scss +++ b/src/v2/styles/Modal/Modal-layout.scss @@ -11,6 +11,36 @@ height: 100%; z-index: 100; + .str-chat__modal-header { + display: flex; + align-items: center; + width: 100%; + padding: 1.25rem 1rem; + + button.str-chat__modal-header__go-back-button, + .str-chat__modal__close-button { + padding: 1rem; + background-size: 0.875rem; + background-repeat: no-repeat; + background-position: center; + } + + button.str-chat__modal-header__go-back-button { + background-image: var(--str-chat__arrow-left-icon); + } + + .str-chat__modal-header__close-button { + background-image: var(--str-chat__close-icon); + background-repeat: no-repeat; + height: 0.875rem; + width: 0.875rem; + } + + .str-chat__modal-header__title { + flex: 1; + } + } + button.str-chat__modal__close-button { @include utils.unset-button; margin: var(--str-chat__spacing-2); @@ -31,6 +61,7 @@ @include utils.flex-col-center; padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4); width: 40%; + max-height: 80%; min-width: 0; min-height: 0; } diff --git a/src/v2/styles/Modal/Modal-theme.scss b/src/v2/styles/Modal/Modal-theme.scss index 6475693c..1d6f61bb 100644 --- a/src/v2/styles/Modal/Modal-theme.scss +++ b/src/v2/styles/Modal/Modal-theme.scss @@ -46,6 +46,12 @@ @include utils.component-layer-overrides('modal'); } + .str-chat__modal-header { + .str-chat__modal-header__title { + font: var(--str-chat__subtitle2-medium-text); + } + } + .str-chat__modal__close-button { --str-chat-icon-color: var(--str-chat__modal-close-icon-color); @include utils.button-reset; diff --git a/src/v2/styles/Notification/MessageNotification-layout.scss b/src/v2/styles/Notification/MessageNotification-layout.scss index 792bca5d..d6e96a41 100644 --- a/src/v2/styles/Notification/MessageNotification-layout.scss +++ b/src/v2/styles/Notification/MessageNotification-layout.scss @@ -4,7 +4,7 @@ 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; + z-index: 100; } .str-chat__list-notifications { diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss new file mode 100644 index 00000000..f6c4b8d5 --- /dev/null +++ b/src/v2/styles/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; + } + } +} diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss new file mode 100644 index 00000000..54d24dc8 --- /dev/null +++ b/src/v2/styles/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); + } + } + } + } +} \ No newline at end of file diff --git a/src/v2/styles/_global-theme-variables.scss b/src/v2/styles/_global-theme-variables.scss index 5131e38d..33c0fc5a 100644 --- a/src/v2/styles/_global-theme-variables.scss +++ b/src/v2/styles/_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); diff --git a/src/v2/styles/_icons.scss b/src/v2/styles/_icons.scss index 16013995..0ebafd2d 100644 --- a/src/v2/styles/_icons.scss +++ b/src/v2/styles/_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 { diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 72c2be53..2242fa0e 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -16,9 +16,12 @@ @use 'common/CTAButton/CTAButton-layout'; @use 'common/CircleFAButton/CircleFAButton-layout'; @use 'Dialog/Dialog-layout'; +@use 'DragAndDropContainer/DragAmdDropContainer-layout'; @use 'EditMessageForm/EditMessageForm-layout'; +@use 'Form/Form-layout'; @use 'ImageCarousel/ImageCarousel-layout'; @use 'Icon/Icon-layout'; +@use 'InfiniteScrollPaginator/InfiniteScrollPaginator-layout'; @use 'LinkPreview/LinkPreview-layout'; @use 'LoadingIndicator/LoadingIndicator-layout'; @use 'Message/Message-layout'; @@ -33,6 +36,7 @@ @use 'Notification/MessageNotification-layout'; @use 'Notification/NotificationList-layout'; @use 'Notification/Notification-layout'; +@use 'Poll/Poll-layout'; @use 'Thread/Thread-layout'; @use 'Tooltip/Tooltip-layout'; @use 'TypingIndicator/TypingIndicator-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index dff6879d..27390bb5 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -17,7 +17,10 @@ @use 'ChannelList/ChannelList-theme'; @use 'ChannelPreview/ChannelPreview-theme'; @use 'ChannelSearch/ChannelSearch-theme'; +@use 'Dialog/Dialog-theme'; +@use 'DragAndDropContainer/DragAndDropContainer-theme'; @use 'EditMessageForm/EditMessageForm-theme'; +@use 'Form/Form-theme'; @use 'Icon/Icon-theme'; @use 'ImageCarousel/ImageCarousel-theme'; @use 'LinkPreview/LinkPreview-theme'; @@ -34,6 +37,7 @@ @use 'Notification/MessageNotification-theme'; @use 'Notification/NotificationList-theme'; @use 'Notification/Notification-theme'; +@use 'Poll/Poll-theme'; @use 'Thread/Thread-theme'; @use 'Tooltip/Tooltip-theme'; @use 'TypingIndicator/TypingIndicator-theme';