fix(StatusModal): Adapt the status modal to have a user defined background color (#807)

Add a new color for StatusFloatingButtonSelector

src/StatusQ/Controls/StatusFloatingButtonsSelector.qml

@@ -107,7 +107,8 @@ Row {
             bottomPadding: 0
             defaultLeftPadding: 4
             defaultRightPadding: 4
-            normalColor: "transparent"
+            hoverColor: Theme.palette.statusFloatingButtonHighlight
+            normalColor: Theme.palette.baseColor3
             icon.name: "more"
             icon.background.color: "transparent"
             onClicked: popupMenu.popup(parent.x, y + height + 8)

src/StatusQ/Core/Theme/StatusColors.qml

@@ -62,7 +62,9 @@ QtObject {
         'violet': '#D37EF4',
 
         'yellow': '#FFCA0F',
-        'yellow2': '#EAD27B'
+        'yellow2': '#EAD27B',
+
+        'blueHijab': '#CDF2FB'
     }
 }
 

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -147,6 +147,8 @@ ThemePalette {
     miscColor11: getColor('yellow2')
     miscColor12: getColor('green6')
 
+    statusFloatingButtonHighlight: getColor('blue4', 0.3)
+
     userCustomizationColors: [
         "#AAC6FF",
         "#887AF9",

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -145,6 +145,8 @@ ThemePalette {
     miscColor11: getColor('brown2')
     miscColor12: getColor('green5')
 
+    statusFloatingButtonHighlight: getColor('blueHijab')
+
     userCustomizationColors: [
         "#2946C4",
         "#887AF9",

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -90,6 +90,8 @@ QtObject {
     property color miscColor11
     property color miscColor12
 
+    property color statusFloatingButtonHighlight
+
     property var userCustomizationColors: []
 
     property var identiconRingColors: []

src/StatusQ/Popups/StatusModal.qml

@@ -54,20 +54,18 @@ import "statusModal" as Spares
 // Deprecation annotations come with Qt6.2
 // @Deprecated { reason: "Use StatusDialog instead, see reasoning: https://github.com/status-im/StatusQ/issues/720" }
 QC.Popup {
-    id: statusModal
+    id: root
 
     /*!
        \qmlproperty advancedHeader
         This property represents the item loaded in header loader.
         Can be used to read values from the component assigned to the loader.
-        \endqml
     */
     property alias advancedHeader: advancedHeader.item
     /*!
        \qmlproperty advancedHeader
         This property represents the item loaded in footer loader.
         Can be used to read values from the component assigned to the loader.
-        \endqml
     */
     property alias advancedFooter: advancedFooter.item
     /*!
@@ -130,7 +128,6 @@ QC.Popup {
        \qmlproperty headerActionButton
         This property lets the user add a button to the header of the Modal.
         This does not apply to the advanced header!
-        \endqml
     */
     property alias headerActionButton: headerImpl.actionButton
 
@@ -138,63 +135,59 @@ QC.Popup {
        \qmlproperty header
         type: StatusModalHeaderSettings
         This property exposes the different properties of the standard header.
-        \endqml
     */
     property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
     /*!
        \qmlproperty rightButtons
         This property helps user assign the right buttons on the footer.
         This doesn't not apply to the advanced footer!
-        \endqml
     */
     property alias rightButtons: footerImpl.rightButtons
     /*!
        \qmlproperty rightButtons
         This property helps user assign the left buttons on the footer.
         This doesn't not apply to the advanced footer!
-        \endqml
     */
     property alias leftButtons: footerImpl.leftButtons
     /*!
        \qmlproperty showHeader
         This property to decides whether the standard header is shown.
         default value is true
-        \endqml
     */
     property bool showHeader: true
     /*!
        \qmlproperty showHeader
         This property to decides whether the standard footer is shown.
         default value is true
-        \endqml
     */
     property bool showFooter: true
     /*!
        \qmlproperty showAdvancedHeader
         This property to decides whether the advanced header is shown.
         default value is false.
-        \endqml
     */
     property bool showAdvancedHeader: false
     /*!
        \qmlproperty showAdvancedFooter
         This property decides whether the advanced footer is shown.
         default value is false.
-        \endqml
     */
     property bool showAdvancedFooter: false
     /*!
        \qmlproperty hasCloseButton
         This property decides whether the standard header has a close button.s
-        \endqml
     */
     property alias hasCloseButton: headerImpl.hasCloseButton
     /*!
        \qmlproperty hasFloatingButtons
         This property decides whether the advanced header has floating buttons on top of the Modal
-        \endqml
     */
     property bool hasFloatingButtons: false
+    /*!
+       \qmlproperty color backgroundColor
+        This property decides the modal background color
+    */
+    property string backgroundColor: Theme.palette.statusModal.backgroundColor
 
     signal editButtonClicked()
     signal headerImageClicked()
@@ -219,7 +212,7 @@ QC.Popup {
     }
 
     background: Rectangle {
-        color: Theme.palette.statusModal.backgroundColor
+        color: root.backgroundColor
         radius: 8
 
         Spares.StatusModalHeader {
@@ -227,7 +220,7 @@ QC.Popup {
             anchors.top: parent.top
             width: visible ? parent.width : 0
 
-            visible: statusModal.showHeader
+            visible: root.showHeader
             title: header.title
             titleElide: header.titleElide
             subTitle: header.subTitle
@@ -238,9 +231,9 @@ QC.Popup {
             headerImageEditable: header.headerImageEditable
             editable: header.editable
 
-            onEditButtonClicked: statusModal.editButtonClicked()
-            onHeaderImageClicked: statusModal.headerImageClicked()
-            onClose: statusModal.close()
+            onEditButtonClicked: root.editButtonClicked()
+            onHeaderImageClicked: root.headerImageClicked()
+            onClose: root.close()
         }
 
         Loader {
@@ -248,21 +241,22 @@ QC.Popup {
             anchors.top: parent.top
             anchors.topMargin: hasFloatingButtons ? -18 - height : 0
             width: visible ? parent.width : 0
-            active: statusModal.showAdvancedHeader
+            active: root.showAdvancedHeader
         }
 
         Spares.StatusModalFooter {
             id: footerImpl
             anchors.bottom: parent.bottom
             width: visible ? parent.width : 0
-            showFooter: statusModal.showFooter
+            showFooter: root.showFooter
+            visible: root.showFooter
         }
 
         Loader {
             id: advancedFooter
             anchors.bottom: parent.bottom
             width: visible ? parent.width : 0
-            active: statusModal.showAdvancedFooter
+            active: root.showAdvancedFooter
         }
     }
 }