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,27 +3,32 @@ 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
-ModalPopup {
+import StatusQ.Core 0.1
+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()
 
+    contentItem: Item {
+        width: signPhrasePopup.width
+        height: childrenRect.height
         Column {
-        anchors.left: parent.left
-        anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            width: parent.width - 32
+            anchors.horizontalCenter: parent.horizontalCenter
 
-        StyledText {
+            StatusBaseText {
                 height: (Style.current.padding * 3)
                 anchors.horizontalCenter: parent.horizontalCenter
                 horizontalAlignment: Text.AlignHCenter
@@ -32,7 +37,7 @@ ModalPopup {
                 text: qsTrId("this-is-you-signing")
             }
 
-        StyledText {
+            StatusBaseText {
                 width: 330
                 height: Style.current.padding * 4
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -45,8 +50,8 @@ ModalPopup {
             Rectangle {
                 width: parent.width
                 height: 44
-            color: Style.current.inputBackground
-            StyledText {
+                color: Theme.palette.baseColor2
+                StatusBaseText {
                     id: signingPhrase
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
@@ -58,38 +63,32 @@ ModalPopup {
             Item {
                 width: parent.width
                 height: 30
-            SVGImage {
+                StatusIcon {
+                    icon: "warning"
                     width: 13.33
                     height: 13.33
-                sourceSize.height: (height * 2)
-                sourceSize.width: (width * 2)
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.bottom: parent.bottom
-                fillMode: Image.PreserveAspectFit
-                source: Style.svg("exclamation_outline")
+                    color: Theme.palette.dangerColor1
                 }
             }
 
-        StyledText {
+            StatusBaseText {
                 width: parent.width
                 height: 18
                 anchors.horizontalCenter: parent.horizontalCenter
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: 13
-            color: Style.current.danger
+                color: Theme.palette.dangerColor1
                 //% "If you see a different combination, cancel the transaction and sign out"
                 text: qsTrId("three-words-description-2")
             }
         }
+    }
 
-    footer: Item {
-        width: parent.width
-        height: btnRemindLater.height
-        StatusButton {
-            anchors.right: btnRemindLater.left
-            anchors.rightMargin: Style.current.padding
-            type: "secondary"
+    rightButtons: [
+        StatusFlatButton {
             //% "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();
             }
         }
-    }
+    ]
 }