Index: sources/gui/qml/components/NotificationBar.qml
===================================================================
diff -u -ra5760947d3ed0d2748ba023a1c25e3c6aa0b1de1 -rf7d7e8b10c7626f3c6b8450876721a452ebd730f
--- sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision a5760947d3ed0d2748ba023a1c25e3c6aa0b1de1)
+++ sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision f7d7e8b10c7626f3c6b8450876721a452ebd730f)
@@ -27,17 +27,22 @@
     property alias text             : _text.text
     property alias textPixelSize    : _text.font.pixelSize
     property alias textColor        : _text.color
-    property alias isSilenced       : _muteButton.isSilenced
-    property alias timeout          : _muteButton.timeout
-    property alias backgroundColor  : _root.color
+    property alias isSilenced       : _headerButtonGroup.isSilenced
+    property alias timeout          : _headerButtonGroup.timeout
     property bool  iconVisible      : true
-    property bool  enableMute       : true
 
     clip    : true // the mute button expands so we need to clip the outside unwanted area.
     visible : _text.text
     height  : Variables.notificationHeight
     color   : Colors.textNotificationNoneBg
-    radius  : Variables.dialogRadius
+
+    gradient: Gradient {
+        orientation: Gradient.Horizontal
+        GradientStop { position: 0.0; color: Qt.darker  (_root.color, 1.1) }
+        GradientStop { position: 0.5; color: Qt.lighter (_root.color, 1.1) }
+        GradientStop { position: 0.9; color: Qt.darker  (_root.color, 1.1) }
+    }
+
     anchors {
         bottom  : parent.bottom
         left    : parent.left
@@ -49,96 +54,44 @@
     signal listClicked()
     signal maximizeClicked()
 
-    property bool  backgroundFading : false
-    Fader {
-        fadingProperyTarget : _root
-        fadingProperyRunning:  backgroundFading
-        fadingProperyName   : "backgroundColor"
-        fadingProperyValue  :  backgroundColor
+    MouseArea { id: _minimizeArea
+        anchors.fill    : parent
+        onClicked : { _root.maximizeClicked() }
     }
 
-    // Image { id: _muteImage
-    //     source: "qrc:/images/iAlarm"
-    //     anchors.right: _text.left
-    //     anchors.rightMargin: Variables.notificationBarIconMargin;
-    //     anchors.verticalCenter: parent.verticalCenter;
-    //     sourceSize.height: Variables.notificationBarIconHeight;
-    //     sourceSize.width: Variables.notificationBarIconWidth;
-    // }
-
     Text { id: _text
         color               : Colors.textNotificationNoneFg
         anchors.centerIn    : parent
         font.pixelSize      : Fonts.fontPixelNotification
+        font.weight         : Font.DemiBold
         horizontalAlignment : Text.AlignHCenter
         verticalAlignment   : Text.AlignVCenter
     }
 
-    MouseArea {
-        id: _TouchArea
-        anchors.fill: parent;
-        onClicked: _root.clicked()
-    }
-
-    MuteButton { id: _muteButton
-        visible: _root.iconVisible
-        backgroundColor: _root.color
+    AlarmButtonRow { id: _headerButtonGroup
         anchors {
             verticalCenter  : _root.verticalCenter
-            left            : _root.left
-            leftMargin      : Variables.silenceIconMargin
-        }
-        // might be another event
-        // but call the same as the rest of the bar for now
-        // when it has it's own event then the borderColor transparency can be removed as well
-        // to indicate the touchable area.
-        borderColor : _root.enableMute ? Colors.white       : Colors.transparent
-        onClicked   : _root.enableMute ? _root.muteClicked(): _root.clicked()
-    }
-
-    UpDownButton { id: _updownButton
-        visible: _root.iconVisible
-        backgroundColor: _root.color
-        isUp: true
-        anchors {
-            verticalCenter  : _root.verticalCenter
             right           : _root.right
-            rightMargin     : Variables.silenceIconMargin
+            rightMargin     : Variables.defaultMargin * 2
         }
-        onClicked: _root.maximizeClicked()
+
+        isMaxButton         : true
+        backgroundColor     : _root.color
+        onMuteClicked       :  _root.muteClicked()
+        onMinMaxClicked     : _root.maximizeClicked()
+        onListClicked       : _root.listClicked()
     }
 
-    TouchRect { id: _alarmsList
-        visible: _root.iconVisible
-        height: 45
-        width : height
-
-        backgroundColor: _root.color
-        borderColor : Colors.white
-
+    Text { id: _alarmID
+        text            :  ("[%1:%2]")  .arg(qsTr("ID"))
+                                        .arg(_root.alarmID)
         anchors {
-            verticalCenter  : _root.verticalCenter
-            right           : _updownButton.left
-            rightMargin     : Variables.silenceIconMargin * 2
-        }
+            left            : parent.left
+            leftMargin      : Variables.defaultMargin * 2
+            verticalCenter  : parent.verticalCenter
 
-        Image { id: _alarmListImage
-            anchors.centerIn: parent
-            height  : Variables.iconsDiameter
-            width   : Variables.iconsDiameter
-            source  : "qrc:/images/iList"
         }
-
-        onClicked: _root.listClicked()
-    }
-    Text { id: _alarmID
-        text            : qsTr("ID") + ":" + _root.alarmID
-        anchors {
-            right       : parent.right
-            top         : parent.top
-            rightMargin : 130
-        }
         color           : Colors.textMain
-        font.pixelSize  : Fonts.fontPixelDialogText
+        font.pixelSize  : Fonts.fontPixelAlarmID
     }
 }