improve styling

Author: EugeniyKiyashko

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

@@ -72,11 +72,17 @@
 
 @mixin chat-messagelist-contextmenu(
   $delete-button-color,
+  $delete-button-focused-color,
+  $delete-button-focused-bg,
 ) {
   .dx-messagelist-context-menu-content {
     .dx-menu-item:has(.dx-icon-trash) {
       color: $delete-button-color;
+
+      &.dx-state-focused {
+        color: $delete-button-focused-color;
+        background-color: $delete-button-focused-bg;
+      }
     }
   }
 }
-

packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss

@@ -167,4 +167,6 @@ $chat-typingindicator-circle-bg-color: null !default;
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 
-$chat-messagelist-contextmenu-delete-button-color: $base-invalid-color !default;
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -71,6 +71,8 @@
 );
 @include chat-messagelist-contextmenu(
   $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
 );
 @include chat-typingindicator(
   $chat-typingindicator-template,

packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss

@@ -285,4 +285,6 @@ $chat-typingindicator-circle-bg-color: null !default;
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 
-$chat-messagelist-contextmenu-delete-button-color: $base-invalid-color !default;
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-inverted-text-color !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-danger !default;

packages/devextreme-scss/scss/widgets/generic/chat/_index.scss

@@ -73,6 +73,8 @@
 );
 @include chat-messagelist-contextmenu(
   $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
 );
 @include chat-typingindicator(
   $chat-typingindicator-template,

packages/devextreme-scss/scss/widgets/material/chat/_colors.scss

@@ -132,4 +132,6 @@ $chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
 }
 
-$chat-messagelist-contextmenu-delete-button-color: $base-invalid-color !default;
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;

packages/devextreme-scss/scss/widgets/material/chat/_index.scss

@@ -72,6 +72,8 @@
 );
 @include chat-messagelist-contextmenu(
   $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
 );
 @include chat-typingindicator(
   $chat-typingindicator-template,

packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts

@@ -979,6 +979,8 @@ class ContextMenu extends MenuBase {
         break;
       case 'closeOnOutsideClick':
       case 'hideOnOutsideClick':
+      case 'hideOnParentScroll':
+      case 'visualContainer':
         break;
       default:
         super._optionChanged(args);