diff --git a/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-layout.scss similarity index 100% rename from src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss rename to src/v2/styles/DragAndDropContainer/DragAndDropContainer-layout.scss diff --git a/src/v2/styles/DropzoneContainer/DropzoneContainer-layout.scss b/src/v2/styles/DropzoneContainer/DropzoneContainer-layout.scss new file mode 100644 index 00000000..64142929 --- /dev/null +++ b/src/v2/styles/DropzoneContainer/DropzoneContainer-layout.scss @@ -0,0 +1,14 @@ +@use '../utils'; + +.str-chat__dropzone-container { + @include utils.flex-row-center; + + position: absolute; + height: 100%; + width: 100%; + z-index: 5; + + p { + margin: unset; + } +} diff --git a/src/v2/styles/DropzoneContainer/DropzoneContainer-theme.scss b/src/v2/styles/DropzoneContainer/DropzoneContainer-theme.scss new file mode 100644 index 00000000..f50c1d75 --- /dev/null +++ b/src/v2/styles/DropzoneContainer/DropzoneContainer-theme.scss @@ -0,0 +1,17 @@ +.str-chat { + /* The text/icon color of the dropzone container */ + --str-chat__dropzone-container-color: var(--str-chat__on-primary-color); + + /* The background color of the dropzone container */ + --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color); + + /* The backdrop filter applied to the dropzone container */ + --str-chat__dropzone-container-backdrop-filter: blur(3px); +} + +.str-chat__dropzone-container { + background-color: var(--str-chat__dropzone-container-background-color); + color: var(--str-chat__dropzone-container-color); + backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter); + font: var(--str-chat__subtitle-text); +} diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss index ee24cb44..18b50984 100644 --- a/src/v2/styles/MessageInput/MessageInput-layout.scss +++ b/src/v2/styles/MessageInput/MessageInput-layout.scss @@ -26,19 +26,6 @@ } } - .str-chat__dropzone-container { - @include utils.flex-row-center; - - position: absolute; - height: 100%; - width: 100%; - z-index: 5; - - p { - margin: unset; - } - } - .str-chat__message-input-inner { flex-grow: 1; width: 100%; diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index ae5c4258..9615dfcd 100644 --- a/src/v2/styles/MessageInput/MessageInput-theme.scss +++ b/src/v2/styles/MessageInput/MessageInput-theme.scss @@ -25,15 +25,6 @@ /* Box shadow applied to the component */ --str-chat__message-input-box-shadow: none; - /* The text/icon color of the dropzone container */ - --str-chat__dropzone-container-color: var(--str-chat__on-primary-color); - - /* The background color of the dropzone container */ - --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color); - - /* The backdrop filter applied to the dropzone container */ - --str-chat__dropzone-container-backdrop-filter: blur(3px); - /* The border radius used for the borders of the textarea */ --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md); @@ -179,19 +170,14 @@ --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__attachment-selector-actions-menu-button-icon-color-active: var( + --str-chat__primary-color + ); } .str-chat__message-input { @include utils.component-layer-overrides('message-input'); - .str-chat__dropzone-container { - background-color: var(--str-chat__dropzone-container-background-color); - color: var(--str-chat__dropzone-container-color); - backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter); - font: var(--str-chat__subtitle-text); - } - .str-chat__file-input-container { --str-chat-icon-color: var(--str-chat__message-input-tools-color); @include utils.component-layer-overrides('message-input-tools'); @@ -326,11 +312,14 @@ background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color); } - &:hover, &:focus { + &: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); + background-color: var( + --str-chat__attachment-selector-actions-menu-button-icon-color-active + ); } } } diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 489871c6..da586402 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -16,7 +16,8 @@ @use 'common/CTAButton/CTAButton-layout'; @use 'common/CircleFAButton/CircleFAButton-layout'; @use 'Dialog/Dialog-layout'; -@use 'DragAndDropContainer/DragAmdDropContainer-layout'; +@use 'DragAndDropContainer/DragAndDropContainer-layout'; +@use 'DropzoneContainer/DropzoneContainer-layout'; @use 'EditMessageForm/EditMessageForm-layout'; @use 'Form/Form-layout'; @use 'ImageCarousel/ImageCarousel-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index 6b364265..81d6cd2d 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -19,6 +19,7 @@ @use 'ChannelSearch/ChannelSearch-theme'; @use 'Dialog/Dialog-theme'; @use 'DragAndDropContainer/DragAndDropContainer-theme'; +@use 'DropzoneContainer/DropzoneContainer-theme'; @use 'EditMessageForm/EditMessageForm-theme'; @use 'Form/Form-theme'; @use 'Icon/Icon-theme';