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

Closes #2889

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

@@ -1,81 +1,87 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.13
-import QtQuick.Dialogs 1.3
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
 import "../../../../imports"
 import "../../../../shared"
-import "../../../../shared/status"
 
-ModalPopup {
+StatusModal {
+    id: popup
+
     property string privateKey
 
-    id: popup
-    height: 504
-
-    //% "Transfer ownership"
-    title: qsTrId("transfer-ownership")
+    header.title: qsTr("Transfer ownership")
 
     onClosed: {
         popup.destroy();
     }
 
-    Item {
-        anchors.fill: parent
+    content: Item {
+        width: popup.width
+        height: Math.max(300, content.height + 32)
+        Column {
+            id: content
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
 
-        Input {
-            property string elidedPkey: popup.privateKey.substring(0, 15) + "..." + popup.privateKey.substring(popup.privateKey.length - 16)
+            width: popup.width - 32
+            spacing: 16
 
-            id: pKeyInput
-            //% "Community private key"
-            label: qsTrId("community-key")
-            text: elidedPkey
-            textField.onFocusChanged: {
-                if (textField.focus) {
-                   pKeyInput.text =  popup.privateKey
-                } else {
-                    pKeyInput.text =  elidedPkey
+            Input {
+                property string elidedPkey: popup.privateKey.substring(0, 15) + "..." + popup.privateKey.substring(popup.privateKey.length - 16)
+
+                id: pKeyInput
+                width: parent.width
+
+                label: qsTr("Community private key")
+                text: elidedPkey
+                textField.onFocusChanged: {
+                    if (textField.focus) {
+                      pKeyInput.text =  popup.privateKey
+                    } else {
+                        pKeyInput.text =  elidedPkey
+                    }
                 }
+
+                copyToClipboard: true
+                textToCopy: popup.privateKey
             }
 
-            copyToClipboard: true
-            textToCopy: popup.privateKey
-        }
+            StatusBaseText {
+                id: infoText1
+                text: qsTr("You should keep it safe and only share it with people you trust to take ownership of your community")
+                wrapMode: Text.WordWrap
+                width: parent.width
+                font.pixelSize: 13
+                color: Theme.palette.baseColor1
+            }
 
-        StyledText {
-            id: infoText1
-            //% "You should keep it safe and only share it with people you trust to take ownership of your community"
-            text: qsTrId("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
-            //% "You can also use this key to import your community on another device"
-            text: qsTrId("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
+            StatusBaseText {
+                id: infoText2
+                text: qsTr("You can also use this key to import your community on another device")
+                wrapMode: Text.WordWrap
+                width: parent.width
+                font.pixelSize: 13
+                color: Theme.palette.baseColor1
+            }
         }
     }
 
-    footer: StatusRoundButton {
-        id: btnBack
-        anchors.left: parent.left
-        icon.name: "arrow-right"
-        icon.width: 20
-        icon.height: 16
-        rotation: 180
-        onClicked: {
-            popup.close()
+    leftButtons: [
+        StatusRoundButton {
+            icon.name: "arrow-right"
+            icon.height: 16
+            icon.width: 20
+            rotation: 180
+            onClicked: {
+                popup.close()
+            }
         }
-    }
+    ]
 }