Index: sources/gui/qml/components/TouchArea.qml
===================================================================
diff -u -r442d1c4f53c96991d4103485ff5ff683ed00d4f7 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/TouchArea.qml	(.../TouchArea.qml)	(revision 442d1c4f53c96991d4103485ff5ff683ed00d4f7)
+++ sources/gui/qml/components/TouchArea.qml	(.../TouchArea.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,20 +1,20 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
- * \copyright                                                       \n
- *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
- *          IN PART OR IN WHOLE,                                    \n
- *          WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER. \n
+ * 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    TouchArea.qml
- * \date    2019/01/09
- * \author  Behrouz NematiPour
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      26-Sep-2023
+ * \author  (original)  Behrouz NematiPour
+ * \date    (original)  11-Jan-2020
  *
  */
 
 // Qt
 import QtQuick 2.12
-import QtQuick.Controls 2.12
 
 // Project
 //  Qml imports
@@ -27,54 +27,43 @@
  * if set to be touchable will show an arrow right side of the title
  * next to the right edge of the component.
  */
-Item { id : _root
-    enum Orientation {
-        Horizontal,
-        Vertical
-    }
-
+Rectangle { id : _root
     property string     title               : ""
     property int        titleLetterSpacing  : 3
     property bool       isTouchable         : true
-    property int        orientation         : TouchArea.Orientation.Horizontal
-    property list<Item> components
+    property bool       hasArrow            : true
 
-    property int titleVSpacing              : 20
-    property int componentsHSpacing         : 80
-    property int componentsVSpacing         :  0
-    property int arrowSpacing               : 40
+    property alias      notification        : _notification
 
     signal clicked()
 
-    width : _column.width + arrowSpacing
-    height: _column.height
-    clip: true
+    color: "transparent"
+    clip  : false
 
-    Column { id: _column
-        width   : Math.max(_titleText.width  , _grid.width)
-        height  :          _titleText.height + _grid.height
-        spacing : titleVSpacing
-        Text { id: _titleText
-            text: _root.title
-            font.pixelSize: Fonts.fontPixelTouchAreaTitle
-            font.letterSpacing: titleLetterSpacing
-            color: Colors.touchTextAreaTitle
+    Text { id: _titleText
+        anchors {
+            top: parent.top
+            left: parent.left
         }
-        Grid { id: _grid
-            columns : orientation === TouchArea.Orientation.Horizontal ? components.length  : 1
-            rows    : orientation === TouchArea.Orientation.Vertical   ? components.length  : 1
-            spacing : orientation === TouchArea.Orientation.Horizontal ? componentsHSpacing : componentsVSpacing
-            children: components
+        height: Variables.arrowHeight
+        verticalAlignment: Text.AlignVCenter
+        text: _root.title
+        font {
+            pixelSize: Fonts.fontPixelTouchAreaTitle
+            letterSpacing: titleLetterSpacing
         }
+        color: Colors.touchTextAreaTitle
     }
 
     Image { id: _arrowImage
-        visible: isTouchable
-        anchors.right: parent.right
-        anchors.top: parent.top
+        visible: isTouchable && hasArrow
+        anchors {
+            top: parent.top
+            right: parent.right
+        }
         width : Variables.arrowWidth
         height: Variables.arrowHeight
-        source: "qrc:/images/iArrow"
+        source: "qrc:/images/iArrowRight"
     }
 
     MouseArea { id: _mouseArea
@@ -85,6 +74,23 @@
             }
         }
     }
+
     Component.onCompleted: {
     }
+
+    NotificationBarSmall { id: _notification
+        height  : 25
+        imageAutoSize: true
+        color: "transparent"
+        anchors {
+            bottom  : parent.bottom
+            left    : parent.left
+            right   : parent.right
+        }
+        imageSource : ""
+        text        : ""
+        textColor   : "gray"
+        textfontSize: 16
+        rowAnchors.centerIn: null
+    }
 }