refactor(@desktop/startup): refactor modal to use StatusQ components

This needs https://github.com/status-im/StatusQ/pull/494

ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml

@@ -4,29 +4,35 @@ import QtQuick.Layouts 1.14
 
 import utils 1.0
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
 
-import shared.panels 1.0
+StatusModal {
-import shared.popups 1.0
-
-// TODO: replace with StatusModal
-ModalPopup {
     id: popup
 
-    displayCloseButton: false
-    //% "Before you get started..."
-    title: qsTrId("before-you-get-started---")
-    width: 480
-    height: 318
-
-    ColumnLayout {
     anchors.centerIn: parent
-        width: parent.width
+    //% "Before you get started..."
+    header.title: qsTrId("before-you-get-started---")
+    hasCloseButton: false
+
+    contentItem: Item {
+        implicitHeight: childrenRect.height
+        width: popup.width
+        Column {
+            spacing: 12
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 32
+            anchors.rightMargin: 32
+
+            Item { height: 12;  width: parent.width }
 
             StatusCheckBox {
                 id: acknowledge
                 objectName: "acknowledgeCheckBox"
-            Layout.preferredWidth: parent.width
+                width: parent.width
                 //% "I acknowledge that Status Desktop is in Beta and by using it, I take the full responsibility for all risks concerning my data and funds."
                 text: qsTrId("i-acknowledge-that-status-desktop-is-in-beta-and-by-using-it--i-take-the-full-responsibility-for-all-risks-concerning-my-data-and-funds-")
             }
@@ -34,21 +40,21 @@ ModalPopup {
             StatusCheckBox {
                 id: termsOfUse
                 objectName: "termsOfUseCheckBox"
-            Layout.preferredWidth: parent.width
 
                 contentItem: Row {
                     spacing: 4
                     leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
 
-                StyledText {
+                    StatusBaseText {
                         //% "I accept"
                         text: qsTrId("i-accept")
+                        color: Theme.palette.directColor1
                     }
 
-                StyledText {
+                    StatusBaseText {
                         //% "Terms of Use"
                         text: qsTrId("terms-of-service")
-                    color: Style.current.blue
+                        color: Theme.palette.primaryColor1
                         objectName: "termsOfUseLink"
 
                         MouseArea {
@@ -68,21 +74,19 @@ ModalPopup {
                     }
                 }
             }
+
+            Item { height: 12;  width: parent.width }
+        }
     }
 
-    footer: Item {
+    leftButtons: [
-        width: parent.width
+        StatusBaseText {
-        implicitHeight: getStartedButton.height > ppText.height?
-                            getStartedButton.height : ppText.height
-
-        StyledText {
             id: ppText
             //% "Privacy Policy"
             objectName: "privacyPolicyLink"
             text: qsTrId("privacy-policy")
-            color: Style.current.blue
+            color: Theme.palette.primaryColor1
             anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
 
             MouseArea {
                 anchors.fill: parent
@@ -100,19 +104,18 @@ ModalPopup {
             }
         }
 
+    ]
+
+    rightButtons: [
         StatusButton {
             id: getStartedButton
             objectName: "getStartedStatusButton"
-            anchors.right: parent.right
             enabled: acknowledge.checked && termsOfUse.checked
-            width: 130
-            height: 44
             //% "Get Started"
             text: qsTrId("get-started")
-
             onClicked: {
                 popup.close()
             }
         }
-    }
+    ]
 }