fix: Excessive vertical spacing between subtitle and standard colour selector in all colour selectors

- use spacing as designed in Figma
- re-use StatusColorSelectorGrid title label component (not leaving extra
space behind whern empty)
- always use white text for the color previews (our color palette/picker
are designed for this)
- give Channel color dialog a title (as designed)
- use BE spelling (as designed, and to be consistent with the rest of the app)

Fixes: #9841

ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml

@@ -47,6 +47,7 @@ Column {
         columns: 6
         rowSpacing: 16
         columnSpacing: 32
+        anchors.horizontalCenter: parent.horizontalCenter
 
         Repeater {
             objectName: "statusColorRepeater"

ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml

@@ -51,7 +51,7 @@ StatusModal {
         ColumnLayout {
             id: column
             width: scroll.width - scroll.leftPadding - scroll.rightPadding
-            spacing: 12
+            spacing: 16
 
             StatusColorSpace {
                 id: colorSpace
@@ -115,20 +115,18 @@ StatusModal {
                 }
             }
 
-            StatusBaseText {
-                text: qsTr("Standard colours")
-                font.pixelSize: 15
-            }
-
             StatusColorSelectorGrid {
                 id: colorSelectionGrid
+                titleText: qsTr("Standard colours")
+                title.color: Theme.palette.directColor1
+                title.font.pixelSize: 15
                 columns: 8
                 model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
                 selectedColorIndex: -1
                 onColorSelected: {
                     root.color = selectedColor;
                 }
-                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
             }
         }
     }

ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml

@@ -171,10 +171,8 @@ StatusDialog {
 
                     property string validationError: ""
 
-                    bgColor: colorDialog.colorSelected ?
-                                 colorDialog.color : Theme.palette.baseColor2
-                    // TODO adjust text color depending on the background color to make it readable
-                    // contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
+                    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")
@@ -191,8 +189,9 @@ StatusDialog {
                     id: colorDialog
                     anchors.centerIn: parent
                     property bool colorSelected: root.isEdit && root.channelColor
+                    header.title: qsTr("Channel Colour")
                     color: root.isEdit && root.channelColor ? root.channelColor :
-                                                                Theme.palette.primaryColor1
+                                                              Theme.palette.primaryColor1
                     onAccepted: colorSelected = true
                 }
 

ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml

@@ -20,9 +20,8 @@ ColumnLayout {
 
     implicitHeight: childrenRect.height
     StatusBaseText {
-        text: qsTr("Community color")
+        text: qsTr("Community colour")
         font.pixelSize: 15
-        color: Theme.palette.directColor1
     }
 
     StatusPickerButton {
@@ -31,7 +30,7 @@ ColumnLayout {
         property string validationError: ""
 
         bgColor: root.color
-        contentColor: Theme.palette.indirectColor1
+        contentColor: Theme.palette.white
         text: root.color.toString()
         onClicked: root.pick()
 

ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml

@@ -47,7 +47,7 @@ StatusScrollView {
     ColumnLayout {
         id: column
         width: root.availableWidth
-        spacing: 12
+        spacing: 16
 
         StatusColorSpace {
             id: colorSpace
@@ -75,7 +75,7 @@ StatusScrollView {
             validators: [
                 StatusRegularExpressionValidator {
                     regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
-                    errorMessage: qsTr("This is not a valid color")
+                    errorMessage: qsTr("This is not a valid colour")
                 }
             ]
             validationMode: StatusInput.ValidationMode.Always
@@ -106,26 +106,24 @@ StatusScrollView {
                 id: preview
                 x: 16
                 y: 16
-                text: qsTr("White text should be legible on top of this color")
+                text: qsTr("White text should be legible on top of this colour")
                 color: Theme.palette.white
                 font.pixelSize: 15
             }
         }
 
-        StatusBaseText {
-            text: qsTr("Standard colors")
-            font.pixelSize: 15
-        }
-
         StatusColorSelectorGrid {
             id: colorSelectionGrid
+            titleText: qsTr("Standard colours")
+            title.color: Theme.palette.directColor1
+            title.font.pixelSize: 15
             columns: 8
             model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
             selectedColorIndex: -1
             onColorSelected: {
                 root.color = selectedColor;
             }
-            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
         }
     }
 }