feat: new design for export popup

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

@@ -67,8 +67,8 @@ ModalPopup {
         anchors.right: parent.right
         anchors.top: inviteBtn.bottom
         anchors.topMargin: Style.current.smallPadding
-        anchors.leftMargin: -Style.current.xlPadding
-        anchors.rightMargin: -Style.current.xlPadding
+        anchors.leftMargin: -Style.current.padding
+        anchors.rightMargin: -Style.current.padding
     }
 
     MembershipRequestsButton {
@@ -77,8 +77,8 @@ ModalPopup {
         anchors.topMargin: visible ? Style.current.smallPadding : 0
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.leftMargin: -Style.current.xlPadding
-        anchors.rightMargin: -Style.current.xlPadding
+        anchors.leftMargin: -Style.current.padding
+        anchors.rightMargin: -Style.current.padding
     }
 
     Separator {
@@ -88,8 +88,8 @@ ModalPopup {
         anchors.right: parent.right
         anchors.top: membershipRequestsBtn.bottom
         anchors.topMargin: Style.current.smallPadding
-        anchors.leftMargin: -Style.current.xlPadding
-        anchors.rightMargin: -Style.current.xlPadding
+        anchors.leftMargin: -Style.current.padding
+        anchors.rightMargin: -Style.current.padding
     }
 
 

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

@@ -246,6 +246,7 @@ ModalPopup {
                 label: qsTrId("edit-community")
                 iconName: "edit"
                 onClicked: openPopup(editCommunityPopup)
+
                 Component {
                     id: editCommunityPopup
                     CreateCommunityPopup {
@@ -256,42 +257,19 @@ ModalPopup {
         }
 
         Loader {
-            property string exportResult: ""
-
             active: isAdmin
             width: parent.width
-            sourceComponent: !exportResult ? exportBtn : resultComponent
-
-            Component {
-                id: exportBtn
-                CommunityPopupButton {
-                    //% "Export community"
-                    label: qsTrId("export-community")
-                    iconName: "../fetch"
-                    onClicked:  exportResult = chatsModel.communities.exportComumnity()
+            sourceComponent: CommunityPopupButton {
+                label: qsTr("Transfer ownership")
+                iconName: "../transfer"
+                onClicked: {
+                    const exportResult = chatsModel.communities.exportComumnity()
+                    openPopup(transferOwnershipPopup, {privateKey: exportResult})
                 }
-            }
 
-            Component {
-                id: resultComponent
-                StyledText {
-                    property bool isError: !exportResult.startsWith("0x")
-
-                    text: exportResult
-                    color: isError ? Style.current.danger : Style.current.textColor
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.rightMargin: Style.current.smallPadding + copyToClipboardBtn.width
-                    wrapMode: TextEdit.WrapAnywhere
-
-                    CopyToClipBoardButton {
-                        id: copyToClipboardBtn
-                        visible: !isError
-                        textToCopy: exportResult
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.right
-                        anchors.leftMargin: Style.current.smallPadding
-                    }
+                Component {
+                    id: transferOwnershipPopup
+                    TransferOwnershipPopup {}
                 }
             }
         }

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

@@ -69,8 +69,8 @@ ModalPopup {
             anchors.topMargin: Style.current.smallPadding
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.rightMargin: -Style.current.xlPadding
-            anchors.leftMargin: -Style.current.xlPadding
+            anchors.rightMargin: -Style.current.padding
+            anchors.leftMargin: -Style.current.padding
             height: parent.height
 
             delegate: Item {

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

@@ -0,0 +1,62 @@
+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 {
+    property string privateKey
+
+    id: popup
+    height: 504
+
+    title: qsTr("Transfer ownership")
+
+    Item {
+        anchors.fill: parent
+
+        Input {
+            id: pKeyInput
+            label: qsTr("Community private key")
+            text: popup.privateKey
+            copyToClipboard: popup.privateKey
+        }
+
+        StyledText {
+            id: infoText1
+            text: qsTr("You should keep it safe and only share it with people you trust to take ownership of your community")
+            anchors.top: pKeyInput.bottom
+            wrapMode: Text.WordWrap
+            anchors.topMargin: Style.current.padding
+            width: parent.width
+            font.pixelSize: 13
+            color: Style.current.secondaryText
+        }
+
+        StyledText {
+            id: infoText2
+            text: qsTr("You can also use this key to import your community on another device")
+            anchors.top: infoText1.bottom
+            wrapMode: Text.WordWrap
+            anchors.topMargin: Style.current.bigPadding
+            width: parent.width
+            font.pixelSize: 13
+            color: Style.current.secondaryText
+        }
+    }
+
+    footer: StatusRoundButton {
+        id: btnBack
+        anchors.left: parent.left
+        icon.name: "arrow-right"
+        icon.width: 20
+        icon.height: 16
+        rotation: 180
+        onClicked: {
+            popup.close()
+        }
+    }
+}
+

ui/app/img/transfer.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.46967 12.4697C6.76256 12.1768 7.23744 12.1768 7.53033 12.4697C7.82322 12.7626 7.82322 13.2374 7.53033 13.5303L5.66421 15.3964C5.34923 15.7114 5.57232 16.25 6.01777 16.25H19C19.4142 16.25 19.75 16.5858 19.75 17C19.75 17.4142 19.4142 17.75 19 17.75H6.01777C5.57231 17.75 5.34923 18.2886 5.66421 18.6036L7.53033 20.4697C7.82322 20.7626 7.82322 21.2374 7.53033 21.5303C7.23744 21.8232 6.76256 21.8232 6.46967 21.5303L2.46967 17.5303C2.17678 17.2374 2.17678 16.7626 2.46967 16.4697L6.46967 12.4697Z" fill="#4360DF"/>
+<path d="M17.5303 2.46967C17.2374 2.17678 16.7626 2.17678 16.4697 2.46967C16.1768 2.76256 16.1768 3.23744 16.4697 3.53033L18.3358 5.39645C18.6508 5.71143 18.4277 6.25 17.9822 6.25H5C4.58579 6.25 4.25 6.58579 4.25 7C4.25 7.41421 4.58579 7.75 5 7.75H17.9822C18.4277 7.75 18.6508 8.28857 18.3358 8.60355L16.4697 10.4697C16.1768 10.7626 16.1768 11.2374 16.4697 11.5303C16.7626 11.8232 17.2374 11.8232 17.5303 11.5303L21.5303 7.53033C21.8232 7.23744 21.8232 6.76256 21.5303 6.46967L17.5303 2.46967Z" fill="#4360DF"/>
+</svg>

ui/nim-status-client.pro

@@ -141,6 +141,7 @@ DISTFILES += \
     app/AppLayouts/Chat/CommunityComponents/MembershipRequestsButton.qml \
     app/AppLayouts/Chat/CommunityComponents/MembershipRequestsPopup.qml \
     app/AppLayouts/Chat/CommunityComponents/MembershipRequirementPopup.qml \
+    app/AppLayouts/Chat/CommunityComponents/TransferOwnershipPopup.qml \
     app/AppLayouts/Chat/ContactsColumn/AddChat.qml \
     app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \
     app/AppLayouts/Chat/components/ChooseBrowserPopup.qml \

ui/shared/ModalPopup.qml

@@ -119,9 +119,9 @@ Popup {
             anchors.bottom: separator2.top
             anchors.bottomMargin: Style.current.padding
             anchors.left: parent.left
-            anchors.leftMargin: Style.current.xlPadding
+            anchors.leftMargin: Style.current.padding
             anchors.right: parent.right
-            anchors.rightMargin: Style.current.xlPadding
+            anchors.rightMargin: Style.current.padding
         }
 
         Separator {