Index: sources/gui/qml/components/ModalDialog.qml
===================================================================
diff -u -rdeaef8b5bdfe9be7293e63fb6ac256a9ce3cd3f4 -ra926324fec65c7f3cede4c746352af173f787458
--- sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision deaef8b5bdfe9be7293e63fb6ac256a9ce3cd3f4)
+++ sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision a926324fec65c7f3cede4c746352af173f787458)
@@ -16,7 +16,7 @@
 // Qt
 import QtQuick 2.12
 import QtQuick.Controls 2.12 // Dialog
-import QtGraphicalEffects 1.12
+import QtQuick.Effects
 
 // Project
 //  Qml imports
@@ -37,6 +37,9 @@
     property alias  notificationText    : _notification.text
     property alias  notification        : _notification
     property bool   showDropShadow      : false
+    property alias backgroundItem       : _backgroundItem.children
+    property alias backgroundItemZ      : _backgroundItem.z
+    property bool closeOnStateChange    : true
 
     width   : Variables.dialogWidth
     height  : Variables.dialogHeight
@@ -45,8 +48,8 @@
     x: Math.round((Variables.applicationWidth - width) / 2)
     y: Math.round((Variables.applicationHeight - height) / 2)
 
-    enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200 } }
-    exit : Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200 } }
+    enter: Transition { NumberAnimation { property: "scale"; from: 0.8; to: 1.0; duration: 200; easing.type: Easing.OutCubic    } }
+    exit : Transition { NumberAnimation { property: "scale"; from: 1.0; to: 0.8; duration: 200; easing.type: Easing.InCubic     } }
 
     modal: true
 
@@ -56,24 +59,23 @@
         anchors.bottomMargin: _alarmBar.visible ? Variables.notificationHeight : 0
         color               : "#99000000"
 
-        Behavior on opacity { NumberAnimation { duration: 300} }
+        Behavior on opacity { NumberAnimation { duration: 200} }
     }
 
     background: Rectangle { id: _backgroundRect
-        color : Colors.backgroundDialog
-        radius: Variables.dialogRadius
+        color           : Colors.backgroundDialog
+        radius          : Variables.dialogRadius
 
-        layer.enabled: showDropShadow
-        layer.effect: DropShadow {
+        layer.enabled   : showDropShadow
+        layer.effect: RectangularShadow {
             id: _dropShadow
-            horizontalOffset: 4
-            verticalOffset  : 4
             radius          : 12
-            samples         : 32
-            color           : "#4DFFF8E1"
-            source          : _backgroundRect
+            color           : Colors.dropShadowDialogColor
             anchors.fill    : _backgroundRect
         }
+
+        // 👇 Placeholder for an injected component. Ex. numpad
+        Item { id: _backgroundItem }
     }
 
     onVisibleChanged: {
@@ -82,6 +84,11 @@
         }
     }
 
+    // fix closing opened dialogs when opmode is changed
+    Connections { target: vTDOpMode
+        function onOpModeChanged() { if ( _root.visible && _root.closeOnStateChange ) { _root.close() } }
+    }
+
     NumberAnimation { id: _autoHideAnimation
         running: false
         target: _root
@@ -93,5 +100,5 @@
         }
     }
 
-    NotificationBarSmall { id: _notification }
+    NotificationBarSmall { id: _notification ; height: 60}
 }