Chat FU: rework styles after design review (#31627)

Author: Zedwag

e2e/testcafe-devextreme/tests/editors/chat/data/index.ts

@@ -107,3 +107,10 @@ export const generateFileMessage = (author: User, longText = false): Message =>
   author,
   attachments,
 });
+
+export const generateFileMessageWithoutText = (author: User): Message => ({
+  text: '',
+  timestamp,
+  author,
+  attachments,
+});

e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubble with files without text (fluent.blue.light).png

@@ -5,6 +5,7 @@ import {
   generateImageMessage,
   generateMessages,
   generateFileMessage,
+  generateFileMessageWithoutText,
 } from './data';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
@@ -70,6 +71,13 @@ test('Chat: messagebubble with images and files', async (t) => {
   });
   await testScreenshot(t, takeScreenshot, 'Bubbles with files.png', { element: '#chat' });
 
+  await chat.option({
+    width: 600,
+    height: 600,
+    items: [generateFileMessageWithoutText(user)],
+  });
+  await testScreenshot(t, takeScreenshot, 'Bubble with files without text.png', { element: '#chat' });
+
   await t.expect(compareResults.isValid()).ok(compareResults.errorMessages());
 }).before(async () => {
   await appendElementTo('#container', 'div', 'chat');

e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attachments and informer (fluent.blue.light).png

@@ -110,8 +110,14 @@
     height: 28px;
     margin-right: 10px;
 
+    &.dx-fileuploader-cancel-button-position-end {
+      margin-right: 0;
+      margin-left: 4px;
+    }
+
     &.dx-state-invisible {
       margin-right: 0;
+      margin-left: 0;
     }
   }
 }
@@ -214,6 +220,11 @@
     .dx-fileuploader-file-container .dx-fileuploader-button {
       margin-left: 10px;
       margin-right: 0;
+
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-left: 0;
+        margin-right: 4px;
+      }
     }
 
     .dx-fileuploader-file-name,

e2e/testcafe-devextreme/tests/editors/chat/messageBubble.ts

@@ -8,7 +8,8 @@
   $chat-file-secondary-font-size,
   $chat-file-secondary-color,
   $chat-file-base-section-gap,
-  $chat-file-file-size-max-width
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
 ) {
   .dx-chat-file {
     width: $chat-file-container-width;
@@ -25,6 +26,7 @@
 
     .dx-icon {
       color: $chat-file-secondary-color;
+      font-size: $chat-file-icon-font-size;
     }
   }
 
@@ -34,7 +36,7 @@
   }
 
   .dx-chat-file-size {
-    max-width: $chat-file-file-size-max-width;
+    max-width: $chat-file-size-max-width;
     margin-inline-end: $chat-file-base-section-gap;
     font-size: $chat-file-secondary-font-size;
     color: $chat-file-secondary-color;

packages/devextreme-scss/scss/widgets/base/_fileUploader.scss

@@ -6,8 +6,9 @@
   $textarea-padding,
   $toolbar-min-height,
   $chat-file-container-width,
-  $messagebox-file-container-padding,
-  $messagebox-file-container-padding-top,
+  $messagebox-files-container-padding,
+  $messagebox-files-container-padding-top,
+  $messagebox-file-background-color,
 ) {
   .dx-chat-messagebox {
     padding: $messagebox-padding;
@@ -34,10 +35,14 @@
     }
 
     .dx-fileuploader-files-container {
-      padding: $messagebox-file-container-padding;
-      padding-top: $messagebox-file-container-padding-top;
+      padding: $messagebox-files-container-padding;
+      padding-top: $messagebox-files-container-padding-top;
       gap: $gap;
       grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+
+      .dx-fileuploader-file-container {
+        background-color: $messagebox-file-background-color;
+      }
     }
   }
 

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss

@@ -26,6 +26,10 @@ $chat-messagebubble-max-height-image: 400px !default;
   &.dx-has-image {
     padding: $chat-messagebubble-padding-image;
   }
+
+  .dx-chat-messagebubble-content:empty {
+    display: none;
+  }
 }
 
 .dx-chat-messagegroup-alignment-start {

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss

@@ -2,6 +2,7 @@
 @use "../sizes" as *;
 @use "../colors" as *;
 @use "../textEditor/colors" as *;
+@use "../button/colors" as *;
 
 // adduse
 
@@ -17,6 +18,7 @@ $chat-background-color: $base-bg !default;
 */
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
+$chat-messagebox-file-background-color: $button-normal-text-hover-bg !default;
 $chat-message-editing-preview-accent-color: $base-accent !default;
 $chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
 
@@ -141,7 +143,7 @@ $chat-file-secondary-color: null !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;
 
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
-  $chat-file-secondary-color: lighten($base-text-color, 29.80) !default;
+  $chat-file-secondary-color: $base-icon-color !default;
 
   @if $color == "blue" {
     $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
@@ -171,7 +173,7 @@ $chat-file-secondary-color: null !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
 
   $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
-  $chat-file-secondary-color: darken($base-text-color, 40.00) !default;
+  $chat-file-secondary-color: $base-icon-color !default;
 }
 
 /**

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss

@@ -26,7 +26,8 @@
   $chat-file-secondary-font-size,
   $chat-file-secondary-color,
   $chat-file-base-section-gap,
-  $chat-file-file-size-max-width,
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
 );
 @include chat-fileview(
   $chat-file-view-items-gap,
@@ -47,8 +48,9 @@
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
   $chat-file-container-width,
-  $chat-messagebox-file-container-padding,
-  $chat-messagebox-file-container-padding-top,
+  $chat-messagebox-files-container-padding,
+  $chat-messagebox-files-container-padding-top,
+  $chat-messagebox-file-background-color,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,