Index: sources/gui/qml/dialogs/NotificationDialog.qml
===================================================================
diff -u -rb61d8a3e01fef66eee8095c9cddf835d9bb32b66 -r741b1c70f851810f2c265cdd38dfa158b7ee0c37
--- sources/gui/qml/dialogs/NotificationDialog.qml	(.../NotificationDialog.qml)	(revision b61d8a3e01fef66eee8095c9cddf835d9bb32b66)
+++ sources/gui/qml/dialogs/NotificationDialog.qml	(.../NotificationDialog.qml)	(revision 741b1c70f851810f2c265cdd38dfa158b7ee0c37)
@@ -27,36 +27,49 @@
 ModalDialog { id : _root
     contentItem.objectName: "_NotificationDialog" // SquishQt
 
-    property alias titleText          : _title.text;
-    property alias description        : _desc.text;
-    property alias titleBarForeground : _title.color
-    property alias titleBarBackground : _titleBar.color
-    property alias okayBtn            : _okay;
-    property alias silenceBtn         : _silence
-    property bool  isSilenced         : false
-    property int   alarmID            : -1
+    property alias titleText            : _title.text;
+    property alias description          : _desc.text;
+    property alias titleBarForeground   : _title.color
+    property alias titleBarBackground   : _titleBar.color
+    property alias isSilenced           : _muteButton.isSilenced
+    property alias timeout              : _muteButton.timeout
+    property int   alarmID              : -1
 
-    visible: description
+    property bool  resumeVisible        : false
+    property bool  rinsebackVisible     : false
+    property bool  endVisible           : false
+    property bool  okVisible            : false
 
-    signal clickedSilence();
-    signal clickedOkay();
+    // Look for this tag: #First_Time_Message_Sent_With_Silenced
+    // the isSilenced is helping not to show this dialog maximized and
+    // then if the silence is set minimize it immediately
+    // this behaviour doesn't look nice on the screen and it bounces
+    visible : description && ! isSilenced
+    radius  : Variables.dialogRadiusHalf
 
-    radius: 0;
-    Rectangle {
-        id: _titleBar;
-        color: Colors.alarmTopBarHighBg;
-        height: _root.height / 4;
-        width: _root.width;
-        radius: _root.radius;
+    signal muteClicked()
+    signal minimizeClicked()
 
+    signal resumeClicked()
+    signal rinsebackClicked()
+    signal endClicked()
+    signal okClicked()
+
+    Rectangle { id: _titleBar
+        color   : Colors.backgroundButtonSelect
+        height  : Variables.mainMenuHeight
+        width   : _root.width
+        radius  : _root.radius
+        clip    : true // the mute button expands so we need to clip the outside unwanted area.
+
         Image {
             id: _icon
             source: "qrc:/images/iAlarm"
             anchors.horizontalCenter: _title.horizontalCenter
-            anchors.verticalCenter: _title.verticalCenter;
+            anchors.verticalCenter: _title.verticalCenter
             anchors.horizontalCenterOffset: -_title.width + Variables.dialogIconHorizontalOffset;
-            sourceSize.height: Variables.dialogIconHeight;
-            sourceSize.width: Variables.dialogIconWidth;
+            height  : 45
+            width   : 45
         }
 
         Text { id: _title
@@ -65,6 +78,30 @@
             text: qsTr("Notification")
             anchors.centerIn: _titleBar;
         }
+
+        MouseArea { id: _minimizeArea
+            anchors.fill: parent
+            onClicked   : _root.minimizeClicked()
+        }
+
+        UpDownButton { id: _minimizeButton
+            isUp: false
+            anchors {
+                verticalCenter  : _titleBar.verticalCenter
+                right           : _titleBar.right
+                rightMargin     : Variables.silenceIconMargin
+            }
+            onClicked: _root.minimizeClicked()
+        }
+
+        MuteButton { id: _muteButton
+            anchors {
+                verticalCenter  : _titleBar.verticalCenter
+                left            : _titleBar.left
+                leftMargin      : Variables.silenceIconMargin
+            }
+            onClicked: _root.muteClicked()
+        }
     }
 
     Text { id: _desc
@@ -77,32 +114,54 @@
         }
     }
 
-    Row {
-        id: _buttons
-        spacing: Variables.buttonSpacing;
+    Row { id: _buttonGroup
+        property int buttonsWidth   : 300
+        spacing: 50
+
         anchors {
-            horizontalCenter: parent.horizontalCenter;
-            bottom: parent.bottom;
-            bottomMargin: Variables.dialogMargin / 2;
+            bottom          : parent.bottom
+            horizontalCenter: parent.horizontalCenter
+            rightMargin     : spacing
+            leftMargin      : spacing
+            bottomMargin    : spacing
         }
 
-        TouchRect { id : _okay
-            width: _root.width / 3;
-            text.text: qsTr("OKAY")
-            borderColor: _root.textColor;
-            button.onPressed: {
-                clickedOkay();
+        // IMPORTANT NOTE:
+        // It has been granteed by FW that there should never be more than 3 buttons on the ScreenItem
+        // Regarding the discussion there should be only 3 situations:
+        // 1 - Different combination of the Resume,Rinseback,End
+        // 2 - OK button for user to only ack the alarm
+        // 3 - No button at all for the situations that the alarm can't be resolved by user.
+        // :: OK button and the other 3 buttons (Resume,Rinseback,End) should never come together
+        TouchRect { id : _resumeTouchRect
+            visible         : resumeVisible
+            button.onPressed: resumeClicked()
+            text.text       : qsTr("RESUME")
+            width           : _buttonGroup.buttonsWidth
+            borderColor     : Colors.white
+        }
 
-            }
+        TouchRect { id : _rinsebackTouchRect
+            visible         : rinsebackVisible
+            button.onPressed: rinsebackClicked()
+            text.text       : qsTr("RINSEBACK")
+            width           : _buttonGroup.buttonsWidth
+            borderColor     : Colors.white
         }
 
-        TouchRect { id : _silence
-            width: _root.width / 3;
-            text.text: qsTr("SILENCE")
-            borderColor: _root.textColor;
-            button.onPressed: {
-                clickedSilence()
-            }
+        TouchRect { id : _endTouchRect
+            visible         : endVisible
+            button.onPressed: endClicked()
+            text.text       : qsTr("END")
+            width           : _buttonGroup.buttonsWidth
+            borderColor     : Colors.white
         }
+        TouchRect { id : _okTouchRect
+            visible         : okVisible
+            button.onPressed: okClicked()
+            text.text       : qsTr("OK")
+            width           : _buttonGroup.buttonsWidth
+            borderColor     : Colors.white
+        }
     }
 }