refactor(Communities): use `StatusModal` in `MembershipRequirementsModal`

Closes #2894

ui/app/AppLayouts/Chat/CommunityComponents/CreateCommunityPopup.qml

@@ -491,6 +491,7 @@ StatusModal {
     }
 
     MembershipRequirementPopup {
+        anchors.centerIn: parent
         id: membershipRequirementSettingPopup
         // TODO: remove the 'checkedMemership' setting when we no longer need
         // to force "require approval" membership

ui/app/AppLayouts/Chat/CommunityComponents/MembershipRequirementPopup.qml

@@ -1,110 +1,155 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.13
-import QtQuick.Dialogs 1.3
-import "../../../../imports"
-import "../../../../shared"
-import "../../../../shared/status"
 
-ModalPopup {
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import "../../../../imports"
+
+StatusModal {
     property int checkedMembership: Constants.communityChatPublicAccess
 
     id: popup
-    height: 600
 
-    //% "Membership requirement"
+    header.title: qsTr("Membership requirement")
-    title: qsTrId("membership-title")
 
-    ScrollView {
+    ButtonGroup {
-        property ScrollBar vScrollBar: ScrollBar.vertical
+        id: membershipRequirementGroup
+    }
 
-        id: scrollView
+    content: Column {
-        anchors.fill: parent
+        width: popup.width
-        rightPadding: Style.current.bigPadding
+        spacing: 8
-        anchors.rightMargin: - Style.current.bigPadding
-        leftPadding: Style.current.bigPadding
-        anchors.leftMargin: - Style.current.bigPadding
-        contentHeight: content.height
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
 
-        ButtonGroup {
+        Item { 
-            id: membershipRequirementGroup
-        }
-
-        Column {
-            id: content
             width: parent.width
-            spacing: Style.current.padding
+            height: parent.spacing
+        }
 
-            MembershipRadioButton {
+        StatusListItem {
-                //% "Require approval"
+            anchors.horizontalCenter: parent.horizontalCenter
-                text: qsTrId("membership-approval")
+            title: qsTr("Require approval")
-                //% "Your community is free to join, but new members are required to be approved by the community creator first"
+            sensor.onClicked: requestAccessRadio.checked = true
-                description: qsTrId("membership-approval-description")
+            components: [
-                buttonGroup: membershipRequirementGroup
+                StatusRadioButton {
-                checked: popup.checkedMembership === Constants.communityChatOnRequestAccess
+                    id: requestAccessRadio
-                onRadioCheckedChanged: {
+                    checked: popup.checkedMembership === Constants.communityChatOnRequestAccess
-                    if (checked) {
+                    ButtonGroup.group: membershipRequirementGroup
-                        popup.checkedMembership = Constants.communityChatOnRequestAccess
+                    onCheckedChanged: {
+                        if (checked) {
+                            popup.checkedMembership = Constants.communityChatOnRequestAccess
+                        }
                     }
                 }
-            }
+            ]
+        }
 
-            MembershipRadioButton {
+        StatusBaseText {
-                //% "Require invite from another member"
+            wrapMode: Text.WordWrap
-                text: qsTrId("membership-invite")
+            font.pixelSize: 13
-                //% "Your community can only be joined by an invitation from existing community members"
+            color: Theme.palette.baseColor1
-                description: qsTrId("membership-invite-description")
+            width: parent.width * 0.78
-                buttonGroup: membershipRequirementGroup
+            text: qsTr("Your community is free to join, but new members are required to be approved by the community creator first")
-                checked: popup.checkedMembership === Constants.communityChatInvitationOnlyAccess
+            anchors.left: parent.left
-                onRadioCheckedChanged: {
+            anchors.leftMargin: 32
-                    if (checked) {
+        }
-                        popup.checkedMembership = Constants.communityChatInvitationOnlyAccess
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            title: qsTr("Require invite from another member")
+            sensor.onClicked: inviteOnlyRadio.checked = true
+            components: [
+                StatusRadioButton {
+                    id: inviteOnlyRadio
+                    checked: popup.checkedMembership === Constants.communityChatInvitationOnlyAccess
+                    ButtonGroup.group: membershipRequirementGroup
+                    onCheckedChanged: {
+                        if (checked) {
+                            popup.checkedMembership = Constants.communityChatInvitationOnlyAccess
+                        }
                     }
                 }
-            }
+            ]
+        }
 
-            //% "Require ENS username"
+        StatusBaseText {
-            //% "Your community requires an ENS username to be able to join"
+            wrapMode: Text.WordWrap
-            // This should be a check box
+            font.pixelSize: 13
-//            MembershipRadioButton {
+            color: Theme.palette.baseColor1
-//                text: qsTrId("membership-ens")
+            width: parent.width * 0.78
-//                description: qsTrId("membership-ens-description")
+            text: qsTr("Your community can only be joined by an invitation from existing community members")
-//                buttonGroup: membershipRequirementGroup
+            anchors.left: parent.left
-//            }
+            anchors.leftMargin: 32
+        }
 
-            MembershipRadioButton {
+        /* TODO: add functionality to configure this setting */
-                //% "No requirement"
+        /* StatusListItem { */
-                text: qsTrId("membership-free")
+        /*     anchors.horizontalCenter: parent.horizontalCenter */
-                //% "Your community is free for anyone to join"
+        /*     title: qsTr("Require ENS username") */
-                description: qsTrId("membership-free-description")
+        /*     components: [ */
-                buttonGroup: membershipRequirementGroup
+        /*         StatusRadioButton { */
-                hideSeparator: true
+        /*             checked: //... */
-                checked: popup.checkedMembership === Constants.communityChatPublicAccess
+        /*             ButtonGroup.group: membershipRequirementGroup */
-                onRadioCheckedChanged: {
+        /*             onCheckedChanged: { */
-                    if (checked) {
+        /*                // ... */
-                        popup.checkedMembership = Constants.communityChatPublicAccess
+        /*             } */
+        /*         } */
+        /*     ] */
+        /* } */
+        /* StatusBaseText { */
+        /*     wrapMode: Text.WordWrap */
+        /*     font.pixelSize: 13 */
+        /*     color: Theme.palette.baseColor1 */
+        /*     width: parent.width * 0.78 */
+        /*     text: qsTr("Your community requires an ENS username to be able to join") */
+        /*     anchors.left: parent.left */
+        /*     anchors.leftMargin: 32 */
+        /* } */
+
+        StatusListItem {
+            anchors.horizontalCenter: parent.horizontalCenter
+            title: qsTr("No requirement")
+            sensor.onClicked: publicRadio.checked = true
+            components: [
+                StatusRadioButton {
+                    id: publicRadio
+                    checked: popup.checkedMembership === Constants.communityChatPublicAccess
+                    ButtonGroup.group: membershipRequirementGroup
+                    onCheckedChanged: {
+                        if (checked) {
+                            popup.checkedMembership = Constants.communityChatPublicAccess
+                        }
                     }
                 }
-            }
+            ]
+        }
+
+        StatusBaseText {
+            wrapMode: Text.WordWrap
+            font.pixelSize: 13
+            color: Theme.palette.baseColor1
+            width: parent.width * 0.78
+            text: qsTr("Your community is free for anyone to join")
+            anchors.left: parent.left
+            anchors.leftMargin: 32
+        }
+
+        Item { 
+            width: parent.width
+            height: parent.spacing
         }
     }
 
-    footer: StatusIconButton {
+    leftButtons: [
-        id: backButton
+        StatusRoundButton {
-        icon.name: "leave_chat"
+            icon.name: "arrow-right"
-        width: 44
+            icon.width: 20
-        height: 44
+            icon.height: 16
-        iconColor: Style.current.primary
+            rotation: 180
-        highlighted: true
+            onClicked: popup.close()
-        icon.color: Style.current.primary
-        icon.width: 28
-        icon.height: 28
-        radius: width / 2
-        onClicked: {
-            popup.close()
         }
-    }
+    ]
 }
-