Index: sources/gui/qml/components/NotificationBar.qml
===================================================================
diff -u -r255df1f61af0193b8f2f9630bdf3ce68be0f5e29 -r733dbd53c542d94baa4862b6d657aa555209ee00
--- sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision 255df1f61af0193b8f2f9630bdf3ce68be0f5e29)
+++ sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision 733dbd53c542d94baa4862b6d657aa555209ee00)
@@ -23,12 +23,19 @@
 
 Rectangle { id: _root
     objectName: "NotificationBar"
-    property alias  text       : _text.text;
-    property alias textColor   : _text.color;
-    property int    level      : 0;
-    property bool   isSilenced : false;
+    property alias  text           : _text.text;
+    property alias textColor       : _text.color;
+    property int    level          : 0;
+    property bool   isSilenced     : false;
+    property int   muteTimeoutSec  : 0;
     property color backgroundColor : Colors.textNotificationNoneBg;
 
+    function toggleSilence(silence, timeoutSec) {
+        isSilenced = silence;
+        muteTimeoutSec = !isSilenced ? 0 : timeoutSec;
+        _bell.source = isSilenced ? "qrc:/images/bell-off.svg" : "qrc:/images/bell.svg"
+    }
+
     visible : _text.text
 
     height  : Variables.notificationHeight
@@ -67,6 +74,39 @@
         verticalAlignment   : Text.AlignVCenter
     }
 
+    Image {
+        id: _bell
+        source: isSilenced ? "qrc:/images/bell-off.svg" : "qrc:/images/bell.svg"
+        anchors.left: _text.right
+        anchors.leftMargin: Variables.notificationBarIconMargin;
+        anchors.verticalCenter: parent.verticalCenter;
+        sourceSize.height: Variables.notificationBarIconHeight;
+        sourceSize.width: Variables.notificationBarIconWidth;
+        visible: isSilenced; // for now, just hide if the alarm is not silenced.
+    }
+
+    ColorOverlay {
+        id: _bell_overlay
+        anchors.fill: _bell;
+        source: _bell;
+        color: Colors.textMain;
+        cached: true;
+        antialiasing: true;
+        visible: isSilenced; // for now, just hide if the alarm is not silenced.
+    }
+
+    Text { id: _timeout_text
+        color               : Colors.textMain;
+        anchors.left        : _bell.right
+        anchors.leftMargin  : Variables.notificationBarIconMargin;
+        anchors.verticalCenter: parent.verticalCenter;
+        font.pixelSize      : Fonts.fontPixelNotification
+        horizontalAlignment : Text.AlignHCenter
+        verticalAlignment   : Text.AlignVCenter
+        text: muteTimeoutSec; // will be 60 second or less (see PRS)
+        visible: isSilenced;
+    }
+
     onLevelChanged: {
         [_root.color, _text.color] = getRootTextFromAlarmLevel(level);
     }