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,85 +4,89 @@ 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
+    anchors.centerIn: parent
     //% "Before you get started..."
-    title: qsTrId("before-you-get-started---")
+    header.title: qsTrId("before-you-get-started---")
-    width: 480
+    hasCloseButton: false
-    height: 318
 
-    ColumnLayout {
+    contentItem: Item {
-        anchors.centerIn: parent
+        implicitHeight: childrenRect.height
-        width: parent.width
+        width: popup.width
+        Column {
+            spacing: 12
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: 32
+            anchors.rightMargin: 32
 
-        StatusCheckBox {
+            Item { height: 12;  width: parent.width }
-            id: acknowledge
-            objectName: "acknowledgeCheckBox"
-            Layout.preferredWidth: 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-")
-        }
 
-        StatusCheckBox {
+            StatusCheckBox {
-            id: termsOfUse
+                id: acknowledge
-            objectName: "termsOfUseCheckBox"
+                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-")
+            }
 
-            contentItem: Row {
+            StatusCheckBox {
-                spacing: 4
+                id: termsOfUse
-                leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
+                objectName: "termsOfUseCheckBox"
 
-                StyledText {
+                contentItem: Row {
-                    //% "I accept"
+                    spacing: 4
-                    text: qsTrId("i-accept")
+                    leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
-                }
 
-                StyledText {
+                    StatusBaseText {
-                    //% "Terms of Use"
+                        //% "I accept"
-                    text: qsTrId("terms-of-service")
+                        text: qsTrId("i-accept")
-                    color: Style.current.blue
+                        color: Theme.palette.directColor1
-                    objectName: "termsOfUseLink"
+                    }
 
-                    MouseArea {
+                    StatusBaseText {
-                        anchors.fill: parent
+                        //% "Terms of Use"
-                        cursorShape: Qt.PointingHandCursor
+                        text: qsTrId("terms-of-service")
-                        hoverEnabled: true
+                        color: Theme.palette.primaryColor1
-                        onEntered: {
+                        objectName: "termsOfUseLink"
-                            parent.font.underline = true
+
-                        }
+                        MouseArea {
-                        onExited: {
+                            anchors.fill: parent
-                            parent.font.underline = false
+                            cursorShape: Qt.PointingHandCursor
-                        }
+                            hoverEnabled: true
-                        onClicked: {
+                            onEntered: {
-                            Qt.openUrlExternally("https://status.im/terms-of-service/")
+                                parent.font.underline = true
+                            }
+                            onExited: {
+                                parent.font.underline = false
+                            }
+                            onClicked: {
+                                Qt.openUrlExternally("https://status.im/terms-of-service/")
+                            }
                         }
                     }
                 }
             }
+
+            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()
             }
         }
-    }
+    ]
 }