fix(CreateCommunityPopup): Create Community modal adjustments

- fix initial input focus
- fix texts according to design
- fix TAB keys between the input fields
- fix input fields text and placeholders alignment
- make the community options checkboxes clickable
- adjust margins/spacing according to design

Closes: #6724

ui/app/AppLayouts/Chat/controls/community/CommunityDescriptionInput.qml

@@ -12,7 +12,7 @@ StatusInput {
 
     leftPadding: 0
     rightPadding: 0
-    label: qsTr("Description")
+    label: qsTr("Give it a short description")
     charLimit: 140
 
     placeholderText: qsTr("What your community is about")
@@ -20,6 +20,9 @@ StatusInput {
     minimumHeight: 88
     maximumHeight: 88
 
+    input.verticalAlignment: Qt.AlignTop
+    input.placeholder.verticalAlignment: Qt.AlignTop
+
     validators: [
         StatusMinLengthValidator {
             minLength: 1

ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml

@@ -48,7 +48,7 @@ Item {
 
             imageFileDialogTitle: qsTr("Choose an image as logo")
             title: qsTr("Community logo")
-            acceptButtonText: qsTr("Make this my Community logo")
+            acceptButtonText: qsTr("Make this my community logo")
 
             dataImage: root.imageData
 

ui/app/AppLayouts/Chat/controls/community/CommunityNameInput.qml

@@ -12,7 +12,7 @@ StatusInput {
 
     leftPadding: 0
     rightPadding: 0
-    label: qsTr("Community name")
+    label: qsTr("Name your community")
     charLimit: 30
     placeholderText: qsTr("A catchy name")
     validators: [

ui/app/AppLayouts/Chat/controls/community/CommunityOptions.qml

@@ -19,21 +19,21 @@ ColumnLayout {
 
     QtObject {
         id: d
-        readonly property real optionHeight: 64
+        readonly property int optionHeight: 64
     }
 
     RowLayout {
         id: archiveSupport
 
         Layout.fillWidth: true
+        Layout.preferredHeight: d.optionHeight
 
         StatusBaseText {
-            text: qsTr("Community history service")
-        }
-
-        Item {
             Layout.fillWidth: true
-            implicitHeight: d.optionHeight
+            text: qsTr("Community history service")
+            TapHandler {
+                onTapped: archiveSupportToggle.toggle()
+            }
         }
 
         StatusCheckBox {
@@ -43,14 +43,14 @@ ColumnLayout {
 
     RowLayout {
         Layout.fillWidth: true
+        Layout.preferredHeight: d.optionHeight
 
         StatusBaseText {
-            text: qsTr("Request to join required")
-        }
-
-        Item {
             Layout.fillWidth: true
-            implicitHeight: d.optionHeight
+            text: qsTr("Request to join required")
+            TapHandler {
+                onTapped: requestToJoinToggle.toggle()
+            }
         }
 
         StatusCheckBox {
@@ -60,14 +60,14 @@ ColumnLayout {
 
     RowLayout {
         Layout.fillWidth: true
+        Layout.preferredHeight: d.optionHeight
 
         StatusBaseText {
-            text: qsTr("Any member can pin a message")
-        }
-
-        Item {
             Layout.fillWidth: true
-            implicitHeight: d.optionHeight
+            text: qsTr("Any member can pin a message")
+            TapHandler {
+                onTapped: pinMessagesToggle.toggle()
+            }
         }
 
         StatusCheckBox {

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

@@ -19,7 +19,7 @@ ColumnLayout {
     spacing: 8
 
     StatusBaseText {
-        text: qsTr("Community colour")
+        text: qsTr("Community color")
         font.pixelSize: 15
         color: Theme.palette.directColor1
     }

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

@@ -45,7 +45,7 @@ ColumnLayout {
 
     StatusPickerButton {
         bgColor: root.selectedTags == "" ? Theme.palette.baseColor2 : "transparent"
-        text: root.selectedTags == "" ? "Choose tags describing the community" : ""
+        text: root.selectedTags == "" ? qsTr("Choose tags describing the community") : ""
         onClicked: root.pick()
         Layout.fillWidth: true
 
@@ -56,4 +56,4 @@ ColumnLayout {
             width: parent.width
         }
     }
-}
+}

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

@@ -12,10 +12,10 @@ import StatusQ.Popups 0.1
 StatusScrollView {
     id: root
 
-    property string title: qsTr("Community Colour")
+    property string title: qsTr("Community Color")
 
     property var rightButtons: StatusButton {
-        text: qsTr("Select Community Colour")
+        text: qsTr("Select Community Color")
         onClicked: root.accepted()
     }
 
@@ -45,8 +45,8 @@ StatusScrollView {
         StatusColorSpace {
             id: colorSpace
 
-            property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
+            readonly property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
-                                                rootColor.g + rootColor.r * 0.6)
+                                                       rootColor.g + rootColor.r * 0.6)
 
             minSaturate: Math.max(0.4, hueFactor * 0.55)
             maxSaturate: 1.0
@@ -67,7 +67,7 @@ StatusScrollView {
             validators: [
                 StatusRegularExpressionValidator {
                     regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
-                    errorMessage: qsTr("This is not a valid colour")
+                    errorMessage: qsTr("This is not a valid color")
                 }
             ]
             validationMode: StatusInput.ValidationMode.Always
@@ -84,7 +84,7 @@ StatusScrollView {
         }
 
         StatusBaseText {
-            text: qsTr("White text should be legable on top of this colour")
+            text: qsTr("White text should be legible on top of this color")
             font.pixelSize: 15
         }
 
@@ -105,7 +105,7 @@ StatusScrollView {
         }
 
         StatusBaseText {
-            text: qsTr("Standard colours")
+            text: qsTr("Standard colors")
             font.pixelSize: 15
         }
 

ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.14
-import QtGraphicalEffects 1.14
 import QtQuick.Dialogs 1.3
 
 import utils 1.0
@@ -31,7 +30,7 @@ StatusStackModal {
     nextButton: StatusButton {
         objectName: "createCommunityNextBtn"
         text: qsTr("Next")
-        enabled:  nameInput.valid && descriptionTextInput.valid
+        enabled: nameInput.valid && descriptionTextInput.valid
         onClicked: currentIndex++
     }
 
@@ -42,6 +41,8 @@ StatusStackModal {
         onClicked: d.createCommunity()
     }
 
+    onAboutToShow: nameInput.input.edit.forceActiveFocus()
+
     stackItems: [
         StatusScrollView {
             id: generalView
@@ -49,20 +50,20 @@ StatusStackModal {
             ColumnLayout {
                 id: generalViewLayout
                 width: generalView.availableWidth
-                spacing: 12
+                spacing: 16
 
                 CommunityNameInput {
                     id: nameInput
                     input.edit.objectName: "createCommunityNameInput"
                     Layout.fillWidth: true
-                    Component.onCompleted: nameInput.input.forceActiveFocus(
+                    input.tabNavItem: descriptionTextInput.input.edit
-                                                Qt.MouseFocusReason)
                 }
 
                 CommunityDescriptionInput {
                     id: descriptionTextInput
                     input.edit.objectName: "createCommunityDescriptionInput"
                     Layout.fillWidth: true
+                    input.tabNavItem: nameInput.input.edit
                 }
 
                 CommunityLogoPicker {