Index: sources/gui/qml/components/Footer.qml
===================================================================
diff -u -rbd01334f257c35b96b7b232beacbcd7fae60c852 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/Footer.qml	(.../Footer.qml)	(revision bd01334f257c35b96b7b232beacbcd7fae60c852)
+++ sources/gui/qml/components/Footer.qml	(.../Footer.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2021-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    BackButton.qml
+ * \file    Footer.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      17-Mar-2021
+ * \date    (last)      06-Oct-2022
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  17-Mar-2021
+ * \date    (original)  18-Mar-2021
  *
  */
 
@@ -21,15 +21,55 @@
 import "qrc:/globals"
 
 /*!
- * \brief   Denali project Footer section which gives all the children same width with same spacing, aligned in center
+ * \brief   Denali project Footer section which gives all the children same width with same spacing, aligned in center.
+ * \details It's been created because the row layout is always keeping it's children aligned at left and not at center.
+ *          This mainly being used to keep buttons on a screen alinged with the same width and space between them and horisontalley centered
+ *          on the bottom of the screen (footer),
+ *          and with enough bottom marging to give room to the alarm bar.
  */
 Row { id: _root
-    property int childrenCount: children.length
-    readonly property int   splits: _root.width / (childrenCount * 2 + 1 )
+    property int childrenWidth  : _root.width / (childrenCount * 2 + 1 )
+    property int childrenCount  : children.length
 
-    spacing             : _root.splits
-    rightPadding        : spacing
-    leftPadding         : spacing
+    QtObject { id: _private
+        property int spacing    : 0
+    }
+
+    function update() {
+        // check there is a child
+        let count = childrenCount
+        if ( ! count ) return
+
+        let width   = childrenWidth
+
+        let visibleCount = 0
+        for (let i = 0; i < count; i++) {
+            //DEBUG: console.debug(children[i].text.text)
+            if ( children[i].visible ) {
+
+                visibleCount += 1
+                if (children[i].width !== width) {
+                    children[i].width   = width
+                }
+            }
+            else {
+                children[i].width   = 0
+            }
+        }
+        let spacing = (_root.width - (width * visibleCount)) / (visibleCount + 1)
+        //DEBUG: console.debug( " ~~~~~~~~~~ ", count, visibleCount, spacing)
+        _private.spacing = spacing
+    }
+
+    // this code will run once and will not run for each child,
+    // that's becuase the available property to add children is the children property
+    // and that property can only change by assigning a list to it.
+    // so it happens once with no performance issue of multiple redundant call.
+    onVisibleChanged    : update()
+
+    spacing             : _private.spacing
+    rightPadding        : _private.spacing
+    leftPadding         : _private.spacing
     width               : parent.width
     anchors.bottom      : parent.bottom
     anchors.bottomMargin: Variables.notificationHeight + Variables.minVGap