fix(Communities): fixed channel color picker dialog

Closes #9696

ui/StatusQ/src/StatusQ/Popups/StatusModal.qml

@@ -142,7 +142,7 @@ StatusDialog {
     */
     property alias rightButtons: footerImpl.rightButtons
     /*!
-       \qmlproperty rightButtons
+       \qmlproperty leftButtons
         This property helps user assign the left buttons on the footer.
         This doesn't not apply to the advanced footer!
     */

ui/app/AppLayouts/Communities/controls/ColorPicker.qml

@@ -13,15 +13,17 @@ ColumnLayout {
     id: root
 
     property color color: Theme.palette.primaryColor1
+    property string title: qsTr("Community colour")
 
     signal pick()
 
     spacing: 8
 
     implicitHeight: childrenRect.height
+
     StatusBaseText {
-        text: qsTr("Community colour")
+        Layout.fillWidth: true
-        font.pixelSize: 15
+        text: root.title
     }
 
     StatusPickerButton {

ui/app/AppLayouts/Communities/panels/ColorPanel.qml

@@ -13,10 +13,11 @@ StatusScrollView {
     id: root
 
     property string title: qsTr("Community Colour")
+    property string buttonText: qsTr("Select Community Colour")
 
     property var rightButtons: StatusButton {
         objectName: "communityColorPanelSelectColorButton"
-        text: qsTr("Select Community Colour")
+        text: root.buttonText
         onClicked: root.accepted()
         enabled: hexInput.valid
     }

ui/app/AppLayouts/Communities/popups/CreateChannelPopup.qml

@@ -16,6 +16,7 @@ import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
 import AppLayouts.Communities.controls 1.0
+import AppLayouts.Communities.panels 1.0
 
 StatusStackModal {
     id: root
@@ -150,7 +151,7 @@ StatusStackModal {
 
     readonly property StatusButton deleteChannelButton: StatusButton {
         objectName: "deleteCommunityChannelBtn"
-        visible: isEdit && isDeleteable && !isDiscordImport
+        visible: isEdit && isDeleteable && !isDiscordImport && typeof(replaceItem) === "undefined"
         text: qsTr("Delete channel")
         type: StatusBaseButton.Type.Danger
         onClicked: root.deleteCommunityChannel()
@@ -555,56 +556,30 @@ StatusStackModal {
                     Layout.fillWidth: true
                 }
 
-                StatusBaseText {
+                ColorPicker {
-                    Layout.fillWidth: true
-                    text: qsTr("Channel colour")
-                }
-
-                Item {
-                    Layout.preferredHeight: 8
-                    Layout.fillWidth: true
-                }
-
-                Item {
-                    height: colorSelectorButton.height + 16
-                    Layout.fillWidth: true
-
-                    StatusPickerButton {
-                        id: colorSelectorButton
-
-                        property string validationError: ""
-
-                        width: parent.width
-                        bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
-                        contentColor: colorDialog.colorSelected ? Theme.palette.white : Theme.palette.baseColor1
-                        text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : qsTr("Pick a colour")
-
-                        onClicked: colorDialog.open()
-                        onTextChanged: {
-                            if (colorDialog.colorSelected) {
-                                validationError = Utils.validateAndReturnError(text, communityColorValidator)
-                            }
-                        }
-                    }
-
-                    StatusColorDialog {
                     id: colorDialog
-                        anchors.centerIn: parent
+                    Layout.fillWidth: true
-                        property bool colorSelected: root.isEdit && root.channelColor
+                    title: qsTr("Channel colour")
-                        headerSettings.title: qsTr("Channel Colour")
-                        standardColors: Theme.palette.communityColorsArray
                     color: root.isEdit && root.channelColor ? root.channelColor : Theme.palette.primaryColor1
-                        onAccepted: colorSelected = true
+                    onPick: root.replace(colorPanel)
+
+                    Component {
+                        id: colorPanel
+                        ColorPanel {
+                            title: qsTr("Channel colour")
+                            buttonText: qsTr("Select Colour")
+                            Component.onCompleted: color = colorDialog.color
+                            onAccepted: {
+                                colorDialog.color = color
+                                root.replaceItem = undefined
+                            }
+                        }
+                    }
                 }
 
-                    StatusBaseText {
+                Item {
-                        text: colorSelectorButton.validationError
+                    Layout.preferredHeight: 16
-                        visible: !!text
+                    Layout.fillWidth: true
-                        color: Theme.palette.dangerColor1
-                        anchors.top: colorSelectorButton.bottom
-                        anchors.topMargin: 4
-                        anchors.right: colorSelectorButton.right
-                    }
                 }
 
                 StatusInput {