Index: sources/gui/qml/components/NotificationBar.qml
===================================================================
diff -u -rcd769413344091cea88a30861b49188c8c147cba -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision cd769413344091cea88a30861b49188c8c147cba)
+++ sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2020-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file NotificationBar.qml
- * \author (last) Peter Lucia
- * \date (last) 06-Oct-2020
- * \author (original) Behrouz NematiPour
- * \date (original) 30-Mar-2020
+ * \file    NotificationBar.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      29-Jul-2023
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  30-Mar-2020
  *
  */
 
@@ -23,19 +23,21 @@
 
 Rectangle { id: _root
     objectName: "NotificationBar" // SquishQt
+    property int   alarmID          : -1
     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 iconVisible      : _icon.visible
+    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.dialogRadiusHalf
+    radius  : Variables.dialogRadius
     anchors {
         bottom  : parent.bottom
         left    : parent.left
@@ -47,23 +49,29 @@
     signal listClicked()
     signal maximizeClicked()
 
-    Image {
-        id: _icon
-        source: "qrc:/images/iAlarm"
-        anchors.right: _text.left
-        anchors.rightMargin: Variables.notificationBarIconMargin;
-        anchors.verticalCenter: parent.verticalCenter;
-        sourceSize.height: Variables.notificationBarIconHeight;
-        sourceSize.width: Variables.notificationBarIconWidth;
+    property bool  backgroundFading : false
+    Fader {
+        fadingProperyTarget : _root
+        fadingProperyRunning:  backgroundFading
+        fadingProperyName   : "backgroundColor"
+        fadingProperyValue  :  backgroundColor
     }
 
+    // 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
         horizontalAlignment : Text.AlignHCenter
         verticalAlignment   : Text.AlignVCenter
-
     }
 
     MouseArea {
@@ -73,6 +81,8 @@
     }
 
     MuteButton { id: _muteButton
+        visible: _root.iconVisible
+        backgroundColor: _root.color
         anchors {
             verticalCenter  : _root.verticalCenter
             left            : _root.left
@@ -87,6 +97,8 @@
     }
 
     UpDownButton { id: _updownButton
+        visible: _root.iconVisible
+        backgroundColor: _root.color
         isUp: true
         anchors {
             verticalCenter  : _root.verticalCenter
@@ -97,10 +109,11 @@
     }
 
     TouchRect { id: _alarmsList
+        visible: _root.iconVisible
         height: 45
         width : height
 
-        color       : Colors.transparent
+        backgroundColor: _root.color
         borderColor : Colors.white
 
         anchors {
@@ -109,13 +122,23 @@
             rightMargin     : Variables.silenceIconMargin * 2
         }
 
-        Image { id: _image
+        Image { id: _alarmListImage
             anchors.centerIn: parent
-            height  : 25
-            width   : 25
+            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
+    }
 }