Separate DropzoneContainer styling from MessageInput

Author: arnautov-anton

…ntainer/DragAmdDropContainer-layout.scss …ntainer/DragAndDropContainer-layout.scsssrc/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss renamed to src/v2/styles/DragAndDropContainer/DragAndDropContainer-layout.scss src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss renamed to src/v2/styles/DragAndDropContainer/DragAndDropContainer-layout.scss

@@ -0,0 +1,12 @@
+.str-chat__dropzone-container {
+  @include utils.flex-row-center;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 5;
+
+  p {
+    margin: unset;
+  }
+}

src/v2/styles/DropzoneContainer/DropzoneContainer-layout.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);
+}

src/v2/styles/DropzoneContainer/DropzoneContainer-theme.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%;

src/v2/styles/MessageInput/MessageInput-layout.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
+        );
       }
     }
   }

src/v2/styles/MessageInput/MessageInput-theme.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';

src/v2/styles/index.layout.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';