Index: sources/gui/qml/components/ModalDialog.qml
===================================================================
diff -u -rdeaef8b5bdfe9be7293e63fb6ac256a9ce3cd3f4 -rc1d0546e2d1a51ff919b2172ce647003359f0853
--- sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision deaef8b5bdfe9be7293e63fb6ac256a9ce3cd3f4)
+++ sources/gui/qml/components/ModalDialog.qml	(.../ModalDialog.qml)	(revision c1d0546e2d1a51ff919b2172ce647003359f0853)
@@ -21,6 +21,7 @@
 // Project
 //  Qml imports
 import "qrc:/globals"
+import "qrc:/components"
 
 /*!
  * \brief   The parent item for modal dialogs
@@ -37,6 +38,8 @@
     property alias  notificationText    : _notification.text
     property alias  notification        : _notification
     property bool   showDropShadow      : false
+    property alias  numPad              : _numPad
+    property bool   showGradient        : false
 
     width   : Variables.dialogWidth
     height  : Variables.dialogHeight
@@ -60,20 +63,37 @@
     }
 
     background: Rectangle { id: _backgroundRect
-        color : Colors.backgroundDialog
-        radius: Variables.dialogRadius
+        color           : Colors.backgroundDialog
+        radius          : Variables.dialogRadius
 
-        layer.enabled: showDropShadow
+        layer.enabled   : showDropShadow
         layer.effect: DropShadow {
             id: _dropShadow
             horizontalOffset: 4
             verticalOffset  : 4
             radius          : 12
             samples         : 32
-            color           : "#4DFFF8E1"
+            color           : Colors.dropShadowDialogColor
             source          : _backgroundRect
             anchors.fill    : _backgroundRect
         }
+
+        Image { id: _backgroundImage
+            anchors.fill: parent
+            source          : "qrc:/images/iPopupGradient"
+            fillMode        : Image.PreserveAspectCrop
+            visible         : _root.showGradient
+
+            layer.enabled   : true
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width        : _backgroundImage.width
+                    height       : _backgroundImage.height
+                    radius       : _root.radius
+                    antialiasing : true
+                }
+            }
+        }
     }
 
     onVisibleChanged: {
@@ -82,6 +102,15 @@
         }
     }
 
+    NumPad  { id: _numPad
+        x: Math.round((_root.width - _numPad.width) / 2)
+        y: Math.round((Variables.applicationHeight -_root.y - _numPad.height - Variables.mainMenuHeight * 2))
+
+        onCancel: {
+            _numPad.hide()
+        }
+    }
+
     NumberAnimation { id: _autoHideAnimation
         running: false
         target: _root