fix(chat): Button aligment

DevExpress · Sep 5, 2024 · d924142 · d924142
1 parent 9b6298b
commit d924142
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 14 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -1,6 +1,6 @@
 .dx-chat-message-box {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .dx-chat-message-box-text-area {

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
@@ -3,7 +3,7 @@
   $border-color,
   $gap,
   $textarea-border-radius,
-  $button-size
+  $button-gap
 ) {
   .dx-chat-message-box {
     padding: $padding;
@@ -16,4 +16,8 @@
       border-radius: $textarea-border-radius;
     }
   }
+
+  .dx-chat-message-box-button {
+    margin-bottom: $button-gap;
+  }
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -17,7 +17,7 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-size,
+  $chat-messagebox-buton-gap
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -9,8 +9,8 @@ $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
-$chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-buton-gap: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -25,7 +25,6 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-border-radius: 12px !default;
   $chat-bubble-padding: 8px 12px !default;
   $chat-messagebox-padding: 20px !default;
-  $chat-messagebox-button-size: 32px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
 }
@@ -34,7 +33,6 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-messagebox-padding: 16px !default;
-  $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -17,7 +17,7 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-size
+  $chat-messagebox-buton-gap
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -9,8 +9,8 @@ $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
-$chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-buton-gap: 0 !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -26,7 +26,6 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-padding: 8px 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-size: 34px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
 }
@@ -36,7 +35,6 @@ $chat-information-font-size: 12px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-size: 24px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -17,7 +17,7 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-button-size
+  $chat-messagebox-buton-gap
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -8,7 +8,7 @@ $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
-$chat-messagebox-button-size: null !default;
+$chat-messagebox-buton-gap: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
@@ -21,21 +21,21 @@ $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
 
 @if $size == "default" {
+  $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-border-radius: 8px !default;
-  $chat-messagebox-button-size: 36px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
 }
 
 @else if $size == "compact" {
+  $chat-messagebox-buton-gap: 7px !default;
   $chat-bubble-border-radius: 4px !default;
   $chat-bubble-padding: 6px 8px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
-  $chat-messagebox-button-size: 28px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
 }