refactor(@desktop/walletv2): make sign phrase modal a StatusModal

This originated as part of the refactor being done for https://github.com/status-im/status-desktop/issues/3831

ui/app/AppLayouts/WalletV2/popups/SignPhraseModal.qml

@@ -3,93 +3,92 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
-import "../../../../shared"
-import "../../../../shared/popups"
-import "../../../../shared/panels"
-import "../../../../shared/status"
-import "."
 
-// TODO: replace with StatusModal
+import StatusQ.Core 0.1
-ModalPopup {
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+
+StatusModal {
     id: signPhrasePopup
-    title: qsTrId("signing-phrase")
+    anchors.centerIn: parent
     height: 390
     closePolicy: Popup.NoAutoClose
 
+    header.title: qsTrId("signing-phrase")
     property string signingPhraseText: ""
     signal remindLaterButtonClicked()
 
-    Column {
+    contentItem: Item {
-        anchors.left: parent.left
+        width: signPhrasePopup.width
-        anchors.right: parent.right
+        height: childrenRect.height
-
+        Column {
-        StyledText {
+            anchors.top: parent.top
-            height: (Style.current.padding * 3)
+            anchors.topMargin: 16
+            width: parent.width - 32
             anchors.horizontalCenter: parent.horizontalCenter
-            horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 17
-            font.weight: Font.Bold
-            text: qsTrId("this-is-you-signing")
-        }
 
-        StyledText {
+            StatusBaseText {
-            width: 330
+                height: (Style.current.padding * 3)
-            height: Style.current.padding * 4
-            anchors.horizontalCenter: parent.horizontalCenter
-            horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 15
-            wrapMode: Text.WordWrap
-            text: qsTrId("three-words-description")
-        }
-
-        Rectangle {
-            width: parent.width
-            height: 44
-            color: Style.current.inputBackground
-            StyledText {
-                id: signingPhrase
                 anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: 17
+                font.weight: Font.Bold
+                text: qsTrId("this-is-you-signing")
+            }
+
+            StatusBaseText {
+                width: 330
+                height: Style.current.padding * 4
+                anchors.horizontalCenter: parent.horizontalCenter
+                horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: 15
-                text: signPhrasePopup.signingPhraseText
+                wrapMode: Text.WordWrap
+                text: qsTrId("three-words-description")
             }
-        }
 
-        Item {
+            Rectangle {
-            width: parent.width
+                width: parent.width
-            height: 30
+                height: 44
-            SVGImage {
+                color: Theme.palette.baseColor2
-                width: 13.33
+                StatusBaseText {
-                height: 13.33
+                    id: signingPhrase
-                sourceSize.height: (height * 2)
+                    anchors.horizontalCenter: parent.horizontalCenter
-                sourceSize.width: (width * 2)
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 15
+                    text: signPhrasePopup.signingPhraseText
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: 30
+                StatusIcon {
+                    icon: "warning"
+                    width: 13.33
+                    height: 13.33
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.bottom: parent.bottom
+                    color: Theme.palette.dangerColor1
+                }
+            }
+
+            StatusBaseText {
+                width: parent.width
+                height: 18
                 anchors.horizontalCenter: parent.horizontalCenter
-                anchors.bottom: parent.bottom
+                verticalAlignment: Text.AlignVCenter
-                fillMode: Image.PreserveAspectFit
+                horizontalAlignment: Text.AlignHCenter
-                source: Style.svg("exclamation_outline")
+                font.pixelSize: 13
+                color: Theme.palette.dangerColor1
+                //% "If you see a different combination, cancel the transaction and sign out"
+                text: qsTrId("three-words-description-2")
             }
         }
-
-        StyledText {
-            width: parent.width
-            height: 18
-            anchors.horizontalCenter: parent.horizontalCenter
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 13
-            color: Style.current.danger
-            //% "If you see a different combination, cancel the transaction and sign out"
-            text: qsTrId("three-words-description-2")
-        }
     }
 
-    footer: Item {
+    rightButtons: [
-        width: parent.width
+        StatusFlatButton {
-        height: btnRemindLater.height
-        StatusButton {
-            anchors.right: btnRemindLater.left
-            anchors.rightMargin: Style.current.padding
-            type: "secondary"
             //% "Ok, got it"
             text: qsTrId("ens-got-it")
             onClicked: {
@@ -97,17 +96,13 @@ ModalPopup {
                 appSettings.hideSignPhraseModal = true;
                 close();
             }
-        }
+        },
-
-
         StatusButton {
-            id: btnRemindLater
-            anchors.right: parent.right
             //% "Remind me later"
             text: qsTrId("remind-me-later")
             onClicked: {
                 signPhrasePopup.remindLaterButtonClicked();
             }
         }
-    }
+    ]
 }