feat: Update Edit community settings based on new design

[Design for edit community settings](https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=3132%3A383870&mode=dev)
[Design for create community popup](https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=2636-359221&mode=design&t=Z888PCuW1eTwF5RY-0)

1. Update alignments, paddings and item size to match the new design
2. Update subtitles (Only for edit community settings. Create community popup has different subtitles)
3. Create new EditCommunitySettingsLayout with the new design to be reused in CreateCommunityPopup
4. Update CreateCommunity popup to align it with the new design
5. Add basic EditSettingsPanelPage to storybook
6. Fix TagsPicker bug where the tags were not showing when opening the edit community settings for the first time

storybook/PagesModel.qml

@@ -177,6 +177,10 @@ ListModel {
         title: "PrivilegedTokenArtworkPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "EditSettingsPanel"
+        section: "Panels"
+    }
     ListElement {
          title: "BurnTokensPopup"
          section: "Popups"

storybook/figma.json

@@ -224,5 +224,8 @@
     ],
     "CommunitiesView": [
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=16089-387522&t=HRT9BmZXnl7Lt55Q-0"
+    ],
+    "EditSettingsPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=3132%3A383870&mode=dev"
     ]
 }

storybook/pages/CommunityInfoEditor.qml

@@ -7,12 +7,16 @@ import utils 1.0
 ColumnLayout {
     id: root
 
-    property string name: "Uniswap"
+    property string name: "Socks"
+    property string description: "We like the sock! A community of Unisocks wearers we like the sock a community of Unisocks we like the sock a community of Unisocks wearers we like the sock."
+
     property int membersCount: 184
-    property bool amISectionAdmin: false
+    property bool amISectionAdmin: true
+    property bool isCommunityEditable: true
     property color color: "orchid"
     property url image: Style.png("tokens/UNI")
     property bool colorVisible: false
+    property url banner: Style.png("settings/communities@2x")
 
     spacing: 24
 
@@ -29,6 +33,21 @@ ColumnLayout {
         }
     }
 
+    ColumnLayout {
+        Label {
+            Layout.fillWidth: true
+            text: "Description"
+        }
+        TextArea {
+            background: Rectangle { border.color: 'lightgrey' }
+            Layout.preferredWidth: 200
+            Layout.preferredHeight: implicitHeight
+            text: root.description
+            onTextChanged: root.description = text
+            wrapMode: TextEdit.Wrap
+        }
+    }
+
     ColumnLayout {
         Label {
             Layout.fillWidth: true
@@ -96,4 +115,29 @@ ColumnLayout {
             onCheckedChanged: root.amISectionAdmin = checked
         }
     }
+    RowLayout {
+        Label {
+            text: "Is community editable:"
+        }
+
+        CheckBox {
+            checked: root.isCommunityEditable
+            onCheckedChanged: root.isCommunityEditable = checked
+        }
+    }
+    ColumnLayout {
+        Label {
+            text: "Banner"
+        }
+
+        RadioButton {
+            checked: true
+            text: "No banner"
+            onCheckedChanged: if(checked) root.banner = ""
+        }
+        RadioButton {
+            text: "Communities"
+            onCheckedChanged: if(checked) root.banner = Style.png("settings/communities@2x")
+        }
+    }
 }

storybook/pages/EditSettingsPanelPage.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import AppLayouts.Communities.panels 1.0
+
+import Storybook 1.0
+
+SplitView {
+    id: root
+    SplitView.fillWidth: true
+
+    EditSettingsPanel {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        name: communityEditor.name
+        color: communityEditor.color
+        logoImageData: communityEditor.image
+        description: communityEditor.description
+        bannerImageData: communityEditor.banner
+    }
+
+    ScrollView {
+         SplitView.minimumWidth: 300
+         SplitView.preferredWidth: 300
+
+         CommunityInfoEditor{
+             id: communityEditor
+             anchors.fill: parent
+             colorVisible: true
+         }
+     }
+}

test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py

@@ -77,9 +77,9 @@ communitySettings_Community_LetterIdenticon = {"container": communitySettings_Co
 
 # Community Edit:
 communitySettings_EditCommunity_ScrollView = {"container": statusDesktop_mainWindow, "objectName": "communityEditPanelScrollView", "type": "StatusScrollView", "visible": True}
-communitySettings_EditCommunity_Name_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityNameInput", "type": "TextEdit",  "visible": True}
+communitySettings_EditCommunity_Name_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityNameInput", "type": "TextEdit",  "visible": True}
-communitySettings_EditCommunity_Description_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityDescriptionInput", "type": "TextEdit",  "visible": True}
+communitySettings_EditCommunity_Description_Input = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityDescriptionInput", "type": "TextEdit",  "visible": True}
-communitySettings_EditCommunity_ColorPicker_Button = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "editCommunityColorPicker", "type": "ColorPicker", "visible": True}
+communitySettings_EditCommunity_ColorPicker_Button = {"container": communitySettings_EditCommunity_ScrollView, "objectName": "communityColorPicker", "type": "ColorPicker", "visible": True}
 
 # Community color popup:
 communitySettings_ColorPanel_HexColor_Input = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityColorPanelHexInput", "type": "TextEdit",  "visible": True}

test/ui-test/testSuites/suite_communities/shared/scripts/community_portal_names.py

@@ -11,8 +11,8 @@ createCommunity_banner = {"container": statusDesktop_mainWindow_overlay, "object
 createCommunity_bannerButton = {"container": createCommunity_banner, "objectName": "communityBannerButton", "type": "StatusButton", "visible": True}
 
 # Create community popup:
-createCommunityNameInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityNameInput", "type": "TextEdit", "visible": True}
+createCommunityNameInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityNameInput", "type": "TextEdit", "visible": True}
-createCommunityDescriptionInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityDescriptionInput", "type": "TextEdit", "visible": True}
+createCommunityDescriptionInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "communityDescriptionInput", "type": "TextEdit", "visible": True}
 createCommunityIntroMessageInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityIntroMessageInput", "type": "TextEdit", "visible": True}
 createCommunityOutroMessageInput_TextEdit = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityOutroMessageInput", "type": "TextEdit", "visible": True}
 createCommunityNextBtn_StatusButton = {"container": statusDesktop_mainWindow_overlay, "objectName": "createCommunityNextBtn", "type": "StatusButton", "visible": True}

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

@@ -32,12 +32,12 @@ Item {
 
         anchors.fill: parent
 
-        spacing: 8
+        spacing: 19
 
         StatusBaseText {
             text: qsTr("Community banner")
 
-            font.pixelSize: 15
+            font.pixelSize: Theme.primaryTextFontSize
             color: Theme.palette.directColor1
         }
 
@@ -53,13 +53,18 @@ Item {
             acceptButtonText: qsTr("Make this my Community banner")
 
             roundedImage: false
-            aspectRatio: 375/184
+            aspectRatio: 475/184
 
             NoImageUploadedPanel {
                 anchors.centerIn: parent
 
                 visible: !editor.userSelectedImage && !root.imageData
                 showAdditionalInfo: true
+                contentSpacing: 2
+                iconWidth: 24
+                iconHeight: 24
+                additionalText: qsTr("Optimal aspect ratio 16:9")
+                additionalTextPixelSize: Theme.tertiaryTextFontSize
             }
         }
     }

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

@@ -10,13 +10,13 @@ import StatusQ.Controls.Validators 0.1
 StatusInput {
     id: root
 
-    label: qsTr("Give it a short description")
+    label: qsTr("Description")
     charLimit: 140
 
     placeholderText: qsTr("What your community is about")
     input.multiline: true
-    minimumHeight: 88
+    maximumHeight: 108
-    maximumHeight: 88
+    minimumHeight: 108
 
     input.verticalAlignment: Qt.AlignTop
     input.placeholder.verticalAlignment: Qt.AlignTop

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

@@ -0,0 +1,137 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import utils 1.0
+
+import StatusQ.Popups 0.1
+
+import AppLayouts.Communities.controls 1.0
+import AppLayouts.Communities.panels 1.0
+
+Control {
+    id: root
+
+    property alias nameLabel: nameInput.label
+    property alias descriptionLabel: descriptionTextInput.label
+
+    readonly property alias isNameValid: nameInput.valid
+    readonly property alias isNameDirty: nameInput.input.dirty
+    readonly property alias isDescriptionValid: descriptionTextInput.valid
+    readonly property alias isDescriptionDirty: descriptionTextInput.input.dirty
+    readonly property alias isLogoSelected: logoPicker.hasSelectedImage
+    readonly property alias isBannerSelected: bannerPicker.hasSelectedImage
+
+    property alias name: nameInput.text
+    property alias description: descriptionTextInput.text
+    property alias color: colorPicker.color
+    property alias tags: tagsPicker.tags
+    property alias selectedTags: tagsPicker.selectedTags
+    property alias options: options
+
+    property alias logoImageData: logoPicker.imageData
+    property alias logoImagePath: logoPicker.source
+    property alias logoCropRect: logoPicker.cropRect
+    property alias bannerImageData: bannerPicker.imageData
+    property alias bannerPath: bannerPicker.source
+    property alias bannerCropRect: bannerPicker.cropRect
+    
+    contentItem: ColumnLayout {
+        implicitWidth: 608
+        spacing: 16
+
+        NameInput {
+            id: nameInput
+            input.edit.objectName: "communityNameInput"
+            Layout.fillWidth: true
+            Component.onCompleted: nameInput.input.forceActiveFocus(Qt.MouseFocusReason)
+        }
+
+        DescriptionInput {
+            id: descriptionTextInput
+            input.edit.objectName: "communityDescriptionInput"
+            Layout.fillWidth: true
+        }
+
+        LogoPicker {
+            id: logoPicker
+            objectName: "communityLogoPicker"
+            Layout.fillWidth: true
+        }
+
+        BannerPicker {
+            id: bannerPicker
+            objectName: "communityBannerPicker"
+            Layout.fillWidth: true
+            Layout.topMargin: -8 //Closer by design
+        }
+
+        ColorPicker {
+            id: colorPicker
+            objectName: "communityColorPicker"
+            onPick: Global.openPopup(pickColorComponent)
+            Layout.fillWidth: true
+            Layout.topMargin: 2
+
+            Component {
+                id: pickColorComponent
+
+                StatusStackModal {
+                    width: 640
+                    anchors.centerIn: parent
+                    leftButtons: []
+                    replaceItem: ColorPanel {
+                        clip: true
+                        Component.onCompleted: color = colorPicker.color
+                        onAccepted: {
+                            colorPicker.color = color;
+                            close();
+                        }
+                    }
+                    onClosed: destroy()
+                }
+            }
+        }
+
+        TagsPicker {
+            id: tagsPicker
+            objectName: "communityTagsPicker"
+            onPick: Global.openPopup(pickTagsComponent)
+            Layout.fillWidth: true
+
+            Component {
+                id: pickTagsComponent
+
+                StatusStackModal {
+                    anchors.centerIn: parent
+                    leftButtons: []
+                    width: 640
+                    replaceItem: TagsPanel {
+                        Component.onCompleted: {
+                            tags = tagsPicker.tags;
+                            selectedTags = tagsPicker.selectedTags;
+                        }
+                        onAccepted: {
+                            tagsPicker.selectedTags = selectedTags;
+                            close();
+                        }
+                    }
+                    onClosed: destroy()
+                }
+            }
+        }
+
+        StatusModalDivider {
+            Layout.fillWidth: true
+            Layout.topMargin: 2
+            Layout.bottomMargin: -root.spacing
+        }
+
+        Options {
+            id: options
+            Layout.fillWidth: true
+            Layout.topMargin: 4
+            Layout.bottomMargin: 4
+        }
+    }
+}

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

@@ -10,7 +10,7 @@ import StatusQ.Controls.Validators 0.1
 StatusInput {
     id: root
 
-    label: qsTr("Community introduction and rules")
+    label: qsTr("Dialog for new members")
     charLimit: 1400
 
     multiline: true

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

@@ -30,13 +30,16 @@ Item {
     ColumnLayout {
         id: layout
 
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.fill: parent
-        spacing: 8
+        spacing: 16
 
         StatusBaseText {
+            id: label
+            Layout.fillWidth: true
             text: qsTr("Community logo")
             font.pixelSize: 15
             color: Theme.palette.directColor1
+            horizontalAlignment: Qt.AlignLeft
         }
 
         EditCroppedImagePanel {

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

@@ -10,7 +10,7 @@ import StatusQ.Controls.Validators 0.1
 StatusInput {
     id: root
 
-    label: qsTr("Name your community")
+    label: qsTr("Community name")
     charLimit: 30
     placeholderText: qsTr("A catchy name")
 

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

@@ -29,6 +29,7 @@ Column {
         StatusBaseText {
             Layout.fillWidth: true
             text: qsTr("Community history service")
+            font.pixelSize: Theme.primaryTextFontSize
             TapHandler {
                 onTapped: archiveSupportToggle.toggle()
             }
@@ -47,6 +48,7 @@ Column {
         StatusBaseText {
             Layout.fillWidth: true
             text: qsTr("Request to join required")
+            font.pixelSize: Theme.primaryTextFontSize
             TapHandler {
                 onTapped: requestToJoinToggle.toggle()
             }
@@ -64,6 +66,7 @@ Column {
         StatusBaseText {
             Layout.fillWidth: true
             text: qsTr("Any member can pin a message")
+            font.pixelSize: Theme.primaryTextFontSize
             TapHandler {
                 onTapped: pinMessagesToggle.toggle()
             }

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

@@ -17,25 +17,27 @@ ColumnLayout {
 
     signal pick()
 
-    onSelectedTagsChanged: {
-        const obj = JSON.parse(tags);
-        const array = selectedTags.length ? JSON.parse(selectedTags) : [];
-
-        d.tagsModel.clear();
-        for (const key of Object.keys(obj)) {
-            if (array.indexOf(key) != -1) {
-                d.tagsModel.append({ name: key, emoji: obj[key], selected: false });
-            }
-        }
-    }
-
     implicitHeight: childrenRect.height
-    spacing: 8
+    spacing: 14
+
+    onSelectedTagsChanged: d.handleSelectedTags()
+    Component.onCompleted: d.handleSelectedTags()
 
     QtObject {
         id: d
 
         property ListModel tagsModel: ListModel {}
+        function handleSelectedTags() {
+            const obj = JSON.parse(tags);
+            const array = selectedTags.length ? JSON.parse(selectedTags) : [];
+
+            d.tagsModel.clear();
+            for (const key of Object.keys(obj)) {
+                if (array.indexOf(key) != -1) {
+                    d.tagsModel.append({ name: key, emoji: obj[key], selected: false });
+                }
+            }
+        }
     }
 
     StatusBaseText {
@@ -45,16 +47,17 @@ ColumnLayout {
     }
 
     StatusPickerButton {
-        bgColor: root.selectedTags == "" ? Theme.palette.baseColor2 : "transparent"
+        bgColor: d.tagsModel.count === 0 ? Theme.palette.baseColor2 : "transparent"
-        text: root.selectedTags == "" ? qsTr("Choose tags describing the community") : ""
+        text: d.tagsModel.count === 0 ? qsTr("Choose tags describing the community") : ""
         onClicked: root.pick()
         Layout.fillWidth: true
 
         StatusCommunityTags {
-            anchors.centerIn: parent
+            anchors.verticalCenter: parent.verticalCenter
             model: d.tagsModel
             active: false
             width: parent.width
+            contentWidth: width
         }
     }
 }

ui/app/AppLayouts/Communities/controls/qmldir

@@ -8,6 +8,7 @@ ColorPicker 1.0 ColorPicker.qml
 CommunityListItem 1.0 CommunityListItem.qml
 DescriptionInput 1.0 DescriptionInput.qml
 EnsPanel 1.0 EnsPanel.qml
+EditCommunitySettingsForm 1.0 EditCommunitySettingsForm.qml
 ExtendedDropdownContent 1.0 ExtendedDropdownContent.qml
 HoldingTypes 1.0 HoldingTypes.qml
 InlineNetworksComboBox 1.0 InlineNetworksComboBox.qml

ui/app/AppLayouts/Communities/layouts/qmldir

@@ -1 +1 @@
-SettingsPage 1.0 SettingsPage.qml
+SettingsPage 1.0 SettingsPage.qml

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

@@ -1,157 +1,59 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.14
-import QtQuick.Dialogs 1.3
-import QtGraphicalEffects 1.13
-
-import utils 1.0
-import shared.panels 1.0
-import shared.popups 1.0
 
 import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
 
 import AppLayouts.Communities.controls 1.0
-import AppLayouts.Communities.panels 1.0
 
 StatusScrollView {
     id: root
     objectName: "communityEditPanelScrollView"
 
-    property alias name: nameInput.text
+    property alias name: baseLayout.name
-    property alias description: descriptionTextInput.text
+    property alias description: baseLayout.description
     property alias introMessage: introMessageTextInput.text
     property alias outroMessage: outroMessageTextInput.text
-    property alias color: colorPicker.color
+    property alias color: baseLayout.color
-    property alias tags: tagsPicker.tags
+    property alias tags: baseLayout.tags
-    property alias selectedTags: tagsPicker.selectedTags
+    property alias selectedTags: baseLayout.selectedTags
-    property alias options: options
+    property alias options: baseLayout.options
 
-    property alias logoImageData: logoPicker.imageData
+    property alias logoImageData: baseLayout.logoImageData
-    property alias logoImagePath: logoPicker.source
+    property alias logoImagePath: baseLayout.logoImagePath
-    property alias logoCropRect: logoPicker.cropRect
+    property alias logoCropRect: baseLayout.logoCropRect
-    property alias bannerImageData: bannerPicker.imageData
+    property alias bannerImageData: baseLayout.bannerImageData
-    property alias bannerPath: bannerPicker.source
+    property alias bannerPath: baseLayout.bannerPath
-    property alias bannerCropRect: bannerPicker.cropRect
+    property alias bannerCropRect: baseLayout.bannerCropRect
 
     property size bottomReservedSpace: Qt.size(0, 0)
     property bool bottomReservedSpaceActive: false
 
-    readonly property bool saveChangesButtonEnabled: !((nameInput.input.dirty && !nameInput.valid) ||
+    readonly property bool saveChangesButtonEnabled: !((baseLayout.isNameDirty && !baseLayout.isNameValid) ||
-                                                       (descriptionTextInput.input.dirty && !descriptionTextInput.valid))
+                                                       (baseLayout.isDescriptionDirty && !baseLayout.isDescriptionValid) ||
+                                                       (introMessageTextInput.input.dirty && !introMessageTextInput.valid) ||
+                                                       (outroMessageTextInput.input.dirty && !outroMessageTextInput.valid))
 
+    padding: 0
     ColumnLayout {
-        id: layout
+        id: mainLayout
-
+        width: baseLayout.width
-        width: 608
+        spacing: 16
-        spacing: 12
+        EditCommunitySettingsForm {
-
+            id: baseLayout
-        NameInput {
+            Layout.fillHeight: true
-            id: nameInput
-            input.edit.objectName: "editCommunityNameInput"
-            Layout.fillWidth: true
-            Component.onCompleted: nameInput.input.forceActiveFocus(Qt.MouseFocusReason)
         }
-
-        DescriptionInput {
-            id: descriptionTextInput
-            input.edit.objectName: "editCommunityDescriptionInput"
-            Layout.fillWidth: true
-        }
-
-        LogoPicker {
-            id: logoPicker
-            objectName: "editCommunityLogoPicker"
-            Layout.fillWidth: true
-        }
-
-        BannerPicker {
-            id: bannerPicker
-            objectName: "editCommunityBannerPicker"
-            Layout.fillWidth: true
-        }
-
-        ColorPicker {
-            id: colorPicker
-            objectName: "editCommunityColorPicker"
-            onPick: Global.openPopup(pickColorComponent)
-            Layout.fillWidth: true
-
-            Component {
-                id: pickColorComponent
-
-                StatusStackModal {
-                    width: 640
-                    anchors.centerIn: parent
-                    leftButtons: []
-                    replaceItem: ColorPanel {
-                        clip: true
-                        Component.onCompleted: color = colorPicker.color
-                        onAccepted: {
-                            colorPicker.color = color;
-                            close();
-                        }
-                    }
-                    onClosed: destroy()
-                }
-            }
-        }
-
-        TagsPicker {
-            id: tagsPicker
-            objectName: "editCommunityTagsPicker"
-            onPick: Global.openPopup(pickTagsComponent)
-            Layout.fillWidth: true
-
-            Component {
-                id: pickTagsComponent
-
-                StatusStackModal {
-                    anchors.centerIn: parent
-                    leftButtons: []
-                    width: 640
-                    replaceItem: TagsPanel {
-                        Component.onCompleted: {
-                            tags = tagsPicker.tags;
-                            selectedTags = tagsPicker.selectedTags;
-                        }
-                        onAccepted: {
-                            tagsPicker.selectedTags = selectedTags;
-                            close();
-                        }
-                    }
-                    onClosed: destroy()
-                }
-            }
-        }
-
         StatusModalDivider {
             Layout.fillWidth: true
-            Layout.bottomMargin: -layout.spacing
+            Layout.topMargin: -baseLayout.spacing
+            Layout.bottomMargin: 2
         }
-
-        Options {
-            id: options
-            Layout.fillWidth: true
-        }
-
-        StatusModalDivider {
-            Layout.fillWidth: true
-            Layout.topMargin: -layout.spacing
-            Layout.bottomMargin: 8
-        }
-
         IntroMessageInput {
             id: introMessageTextInput
             input.edit.objectName: "editCommunityIntroInput"
             Layout.fillWidth: true
-            minimumHeight: 108
+            minimumHeight: 482
-            maximumHeight: 108
+            maximumHeight: 482
         }
 
         OutroMessageInput {

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

@@ -16,7 +16,7 @@ StatusScrollView {
 
     property string tags
     property string selectedTags
-    property int maxSelectedTags: 4
+    property int maxSelectedTags: 3
 
     property string title: qsTr("Community Tags")
 

ui/app/AppLayouts/Communities/panels/qmldir

@@ -29,3 +29,4 @@ TokenHoldersPanel 1.0 TokenHoldersPanel.qml
 TokenHoldersProxyModel 1.0 TokenHoldersProxyModel.qml
 WarningPanel 1.0 WarningPanel.qml
 WelcomeBannerPanel 1.0 WelcomeBannerPanel.qml
+EditSettingsPanel 1.0 EditSettingsPanel.qml

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

@@ -71,7 +71,6 @@ StatusStackModal {
     rightButtons: [clearFilesButton, nextButton, finishButton]
 
     onAboutToShow: {
-        nameInput.input.edit.forceActiveFocus()
         if (root.isDiscordImport) {
             if (!root.store.discordImportInProgress) {
                 root.store.clearFileList()
@@ -368,7 +367,7 @@ StatusStackModal {
         StatusScrollView {
             id: generalView
             contentWidth: availableWidth
-            readonly property bool canGoNext: nameInput.valid && descriptionTextInput.valid && (root.isDevBuild || (logoPicker.hasSelectedImage && bannerPicker.hasSelectedImage))
+            readonly property bool canGoNext: generalViewLayout.isNameValid && generalViewLayout.isDescriptionValid && (root.isDevBuild || (generalViewLayout.isLogoSelected && generalViewLayout.isBannerSelected))
 
             padding: 0
             clip: false
@@ -381,87 +380,14 @@ StatusStackModal {
                 anchors.leftMargin: 1
             }
 
-            ColumnLayout {
+            EditCommunitySettingsForm {
                 id: generalViewLayout
                 width: generalView.availableWidth
-                spacing: 16
 
-                NameInput {
+                nameLabel: qsTr("Name your community")
-                    id: nameInput
+                descriptionLabel: qsTr("Give it a short description")
-                    input.edit.objectName: "createCommunityNameInput"
-                    Layout.fillWidth: true
-                    input.tabNavItem: descriptionTextInput.input.edit
-                }
 
-                DescriptionInput {
+                tags: root.store.communityTags
-                    id: descriptionTextInput
-                    input.edit.objectName: "createCommunityDescriptionInput"
-                    Layout.fillWidth: true
-                    input.tabNavItem: nameInput.input.edit
-                }
-
-                LogoPicker {
-                    id: logoPicker
-                    Layout.fillWidth: true
-                }
-
-                BannerPicker {
-                    id: bannerPicker
-                    Layout.fillWidth: true
-                }
-
-                ColorPicker {
-                    id: colorPicker
-                    onPick: root.replace(colorPanel)
-                    Layout.fillWidth: true
-
-                    Component {
-                        id: colorPanel
-
-                        ColorPanel {
-                            Component.onCompleted: color = colorPicker.color
-                            onAccepted: {
-                                colorPicker.color = color;
-                                root.replace(null);
-                            }
-                        }
-                    }
-                }
-
-                TagsPicker {
-                    id: communityTagsPicker
-                    tags: root.store.communityTags
-                    onPick: root.replace(tagsPanel)
-                    Layout.fillWidth: true
-
-                    Component {
-                        id: tagsPanel
-
-                        TagsPanel {
-                            Component.onCompleted: {
-                                tags = communityTagsPicker.tags;
-                                selectedTags = communityTagsPicker.selectedTags;
-                            }
-                            onAccepted: {
-                                communityTagsPicker.selectedTags = selectedTags;
-                                root.replace(null);
-                            }
-                        }
-                    }
-                }
-
-                StatusModalDivider {
-                    Layout.fillWidth: true
-                }
-
-                Options {
-                    id: options
-                    Layout.fillWidth: true
-                }
-
-                Item {
-                    Layout.fillHeight: true
-                }
             }
         },
 
@@ -480,6 +406,8 @@ StatusStackModal {
 
                 minimumHeight: height
                 maximumHeight: (height - Style.current.xlPadding)
+
+                label: qsTr("Community introduction and rules")
             }
 
             OutroMessageInput {
@@ -497,25 +425,25 @@ StatusStackModal {
 
         function _getCommunityConfig() {
             return {
-                name: StatusQUtils.Utils.filterXSS(nameInput.input.text),
+                name: StatusQUtils.Utils.filterXSS(generalViewLayout.name),
-                description: StatusQUtils.Utils.filterXSS(descriptionTextInput.input.text),
+                description: StatusQUtils.Utils.filterXSS(generalViewLayout.description),
                 introMessage: StatusQUtils.Utils.filterXSS(introMessageInput.input.text),
                 outroMessage: StatusQUtils.Utils.filterXSS(outroMessageInput.input.text),
-                color: colorPicker.color.toString().toUpperCase(),
+                color: generalViewLayout.color.toString().toUpperCase(),
-                tags: communityTagsPicker.selectedTags,
+                tags: generalViewLayout.selectedTags,
                 image: {
-                    src: logoPicker.source,
+                    src: generalViewLayout.logoImagePath,
-                    AX: logoPicker.cropRect.x,
+                    AX: generalViewLayout.logoCropRect.x,
-                    AY: logoPicker.cropRect.y,
+                    AY: generalViewLayout.logoCropRect.y,
-                    BX: logoPicker.cropRect.x + logoPicker.cropRect.width,
+                    BX: generalViewLayout.logoCropRect.x + generalViewLayout.logoCropRect.width,
-                    BY: logoPicker.cropRect.y + logoPicker.cropRect.height,
+                    BY: generalViewLayout.logoCropRect.y + generalViewLayout.logoCropRect.height,
                 },
                 options: {
-                    historyArchiveSupportEnabled: options.archiveSupportEnabled,
+                    historyArchiveSupportEnabled: generalViewLayout.options.archiveSupportEnabled,
-                    checkedMembership: options.requestToJoinEnabled ? Constants.communityChatOnRequestAccess : Constants.communityChatPublicAccess,
+                    checkedMembership: generalViewLayout.options.requestToJoinEnabled ? Constants.communityChatOnRequestAccess : Constants.communityChatPublicAccess,
-                    pinMessagesAllowedForMembers: options.pinMessagesEnabled,
+                    pinMessagesAllowedForMembers: generalViewLayout.options.pinMessagesEnabled,
                 },
-                bannerJsonStr: JSON.stringify({imagePath: String(bannerPicker.source).replace("file://", ""), cropRect: bannerPicker.cropRect})
+                bannerJsonStr: JSON.stringify({imagePath: String(generalViewLayout.bannerPath).replace("file://", ""), cropRect: generalViewLayout.bannerCropRect})
             }
         }
 

ui/imports/shared/panels/NoImageUploadedPanel.qml

@@ -16,41 +16,59 @@ Control {
     id: root
 
     /*!
-       \qmlproperty alias StatusImageSelector::uploadText.
+       \qmlproperty alias NoImageUploadedPanel::uploadText.
        This property holds the main image upload text value.
     */
     property alias uploadText: uploadText.text
 
     /*!
-       \qmlproperty alias StatusImageSelector::additionalText.
+       \qmlproperty alias NoImageUploadedPanel::additionalText.
        This property holds an additional text value.
     */
     property alias additionalText: additionalText.text
 
     /*!
-       \qmlproperty alias StatusImageSelector::showAdditionalInfo.
+       \qmlproperty alias NoImageUploadedPanel::showAdditionalInfo.
        This property holds if the additional text is shown or not.
     */
     property alias showAdditionalInfo: additionalText.visible
 
     /*!
-       \qmlproperty alias StatusImageSelector::additionalTextPixelSize.
+       \qmlproperty alias NoImageUploadedPanel::additionalTextPixelSize.
        This property holds the additional text font pixel size value.
     */
     property alias additionalTextPixelSize: additionalText.font.pixelSize
 
     /*!
-       \qmlproperty color StatusImageSelector::uploadTextColor.
+       \qmlproperty color NoImageUploadedPanel::uploadTextColor.
        This property sets the upload text color.
     */
     property color uploadTextColor: Theme.palette.baseColor1
 
     /*!
-       \qmlproperty color StatusImageSelector::imgColor.
+       \qmlproperty color NoImageUploadedPanel::imgColor.
        This property sets the image color.
     */
     property color imgColor: Theme.palette.baseColor1
 
+    /*!
+       \qmlproperty alias NoImageUploadedPanel::contentSpacing.
+        This property sets the content spacing.
+    */
+    property alias contentSpacing: content.spacing
+    
+    /*!
+       \qmlproperty alias NoImageUploadedPanel::iconWidth.
+        This property sets the content icon width.
+    */
+    property alias iconWidth: imageImg.width
+
+    /*!
+       \qmlproperty alias NoImageUploadedPanel::iconHeight.
+        This property sets the content icon height.
+    */
+    property alias iconHeight: imageImg.height
+
     QtObject {
         id: d
 
@@ -58,7 +76,7 @@ Control {
     }
 
     contentItem: ColumnLayout {
-
+        id: content
         Image {
             id: imageImg
             source: Style.svg("images_icon")
@@ -79,13 +97,13 @@ Control {
 
             text: qsTr("Upload")
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.topMargin: 5
             Layout.preferredWidth: root.width - 2 * d.imageSelectorPadding
             font.pixelSize: Theme.primaryTextFontSize
             color: root.uploadTextColor
             wrapMode: Text.WordWrap
             lineHeight: 1.2
             horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
         }
 
         StatusBaseText {
@@ -94,7 +112,6 @@ Control {
             text: qsTr("Wide aspect ratio is optimal")
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
             visible: false
-            Layout.topMargin: 5
             font.pixelSize: Theme.primaryTextFontSize
             color: Theme.palette.baseColor1
         }