fix(onboarding): Mobile onboarding slider is shown on desktop

Mobile onboarding screen is removed. Instead of it "Before you get started..." modal popup is added to the "Get your keys" screen.

Fixes: #2558

ui/main.qml

@@ -169,12 +169,7 @@ StatusWindow {
 
         DSM.State {
             id: onboardingState
-            initialState: hasAccounts ? stateLogin : stateIntro
+            initialState: hasAccounts ? stateLogin : keysMainState
-
-            DSM.State {
-                id: stateIntro
-                onEntered: loader.sourceComponent = intro
-            }
 
             DSM.State {
                 id: keysMainState
@@ -227,7 +222,7 @@ StatusWindow {
             }
 
             DSM.SignalTransition {
-                targetState: hasAccounts ? stateLogin : stateIntro
+                targetState: hasAccounts ? stateLogin : keysMainState
                 signal: applicationWindow.navigateTo
                 guard: path === "InitialState"
             }
@@ -352,16 +347,10 @@ StatusWindow {
         AppMain {}
     }
 
-    Component {
-        id: intro
-        Intro {
-            btnGetStarted.onClicked: applicationWindow.navigateTo("KeysMain")
-        }
-    }
-
     Component {
         id: keysMain
         KeysMain {
+            displayBeforeGetStartedModal: !hasAccounts
             btnGenKey.onClicked: applicationWindow.navigateTo("GenKey")
             btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
         }
@@ -419,8 +408,7 @@ StatusWindow {
         visible: Qt.platform.os === "osx" && !applicationWindow.isFullScreen
 
         onClose: {
-            if (loader.sourceComponent == login ||
+            if (loader.sourceComponent == login) {
-                    loader.sourceComponent == intro) {
                 applicationWindow.visible = false;
             }
             else if (loader.sourceComponent == app) {

ui/nim-status-client.pro

@@ -347,7 +347,6 @@ DISTFILES += \
     onboarding/ExistingKey.qml \
     onboarding/GenKey.qml \
     onboarding/GenKeyModal.qml \
-    onboarding/Intro.qml \
     onboarding/KeysMain.qml \
     onboarding/Login.qml \
     onboarding/Login/AccountList.qml \
@@ -358,7 +357,6 @@ DISTFILES += \
     onboarding/Login/samples/AccountsData.qml \
     onboarding/Login/samples/qmldir \
     onboarding/OnboardingMain.qml \
-    onboarding/Slide.qml \
     onboarding/img/browser-dark@2x.jpg \
     onboarding/img/browser-dark@3x.jpg \
     onboarding/img/browser@2x.jpg \

ui/onboarding/BeforeGetStartedModal.qml

@@ -0,0 +1,97 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.14
+
+import "../imports"
+import "../shared"
+import "../shared/status"
+
+ModalPopup {
+    id: popup
+    displayCloseButton: false
+    title: qsTr("Before you get started...")
+    width: 430
+    height: 300
+
+    ColumnLayout {
+        anchors.centerIn: parent
+        width: parent.width
+
+        StatusCheckBox {
+            id: acknowledge
+            Layout.preferredWidth: parent.width
+            text: qsTr("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 {
+            id: termsOfService
+            Layout.preferredWidth: parent.width
+
+            contentItem: Row {
+                spacing: 4
+                leftPadding: termsOfService.indicator.width + termsOfService.spacing
+
+                StyledText {
+                    text: qsTr("I accept")
+                }
+
+                StyledText {
+                    text: qsTr("Terms of Service")
+                    color: Style.current.blue
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+                        onEntered: {
+                            parent.font.underline = true
+                        }
+                        onExited: {
+                            parent.font.underline = false
+                        }
+                        onClicked: {
+                            Qt.openUrlExternally("https://status.im/terms-of-service/")
+                        }
+                    }
+                }
+
+                StyledText {
+                    id: orText
+                    text: "&"
+                }
+
+                StyledText {
+                    text: qsTr("Privacy Policy")
+                    color: Style.current.blue
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+                        onEntered: {
+                            parent.font.underline = true
+                        }
+                        onExited: {
+                            parent.font.underline = false
+                        }
+                        onClicked: {
+                            Qt.openUrlExternally("https://status.im/privacy-policy/")
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    footer: StatusButton {
+        anchors.right: parent.right
+        enabled: acknowledge.checked && termsOfService.checked
+        width: 146
+        height: 44
+        text: qsTr("Get Started")
+
+        onClicked: {
+            popup.close()
+        }
+    }
+}

ui/onboarding/Intro.qml

@@ -1,137 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import QtQuick.Controls.Universal 2.12
-import "../shared"
-import "../shared/status"
-import "../imports"
-
-RowLayout {
-    property alias btnGetStarted: btnGetStarted
-
-    id: obLayout
-    anchors.fill: parent
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-
-    Rectangle {
-        border.width: 0
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        color: Style.current.background
-
-        SwipeView {
-            id: vwOnboarding
-            width: parent.width
-            height: parent.height
-            currentIndex: 0
-            interactive: false
-            anchors.fill: parent
-
-            Slide {
-                image: "img/chat@2x.png"
-                //% "Truly private communication"
-                title: qsTrId("intro-title1")
-                //% "Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked"
-                description: qsTrId("chat-over-a-peer-to-peer--encrypted-network-n-where-messages-can-t-be-censored-or-hacked")
-                isFirst: true
-            }
-            Slide {
-                image: Universal.theme === Universal.Dark ? "img/wallet-dark@2x.jpg" : "img/wallet@2x.jpg"
-                //% "Secure crypto wallet"
-                title: qsTrId("intro-title2")
-                //% "Send and receive digital assets anywhere in the\nworld--no bank account required"
-                description: qsTrId("send-and-receive-digital-assets-anywhere-in-the-nworld--no-bank-account-required")
-            }
-            Slide {
-                image: "img/browser@2x.png"
-                //% "Decentralized apps"
-                title: qsTrId("intro-title3")
-                //% "Explore games, exchanges and social networks\nwhere you alone own your data"
-                description: qsTrId("explore-games--exchanges-and-social-networks-nwhere-you-alone-own-your-data")
-                isLast: true
-            }
-        }
-
-        Rectangle {
-            id: rctPageIndicator
-            border.width: 0
-            anchors.bottom: vwOnboarding.bottom
-            anchors.bottomMargin: 191
-            anchors.top: vwOnboarding.top
-            anchors.topMargin: 567
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width
-            color: Style.current.background
-
-            PageIndicator {
-                id: pgOnboarding
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 5
-                padding: 0
-                topPadding: 0
-                bottomPadding: 0
-                rightPadding: 0
-                leftPadding: 0
-                font.pixelSize: 6
-                count: vwOnboarding.count
-                currentIndex: vwOnboarding.currentIndex
-            }
-        }
-
-        StyledText {
-            id: warningMessage
-            x: 772
-            //% "Thanks for trying Status Desktop! Please note that this is an alpha release and we advise you that using this app should be done for testing purposes only and you assume the full responsibility for all risks concerning your data and funds. Status makes no claims of security or integrity of funds in these builds."
-            text: qsTrId("thanks-for-trying-status-desktop!-please-note-that-this-is-an-alpha-release-and-we-advise-you-that-using-this-app-should-be-done-for-testing-purposes-only-and-you-assume-the-full-responsibility-for-all-risks-concerning-your-data-and-funds.-status-makes-no-claims-of-security-or-integrity-of-funds-in-these-builds.")
-            font.bold: true
-            anchors.top: rctPageIndicator.bottom
-            anchors.topMargin: 5
-            anchors.horizontalCenter: parent.horizontalCenter
-            font.pixelSize: 14
-            font.letterSpacing: 0.1
-            width: 700
-            wrapMode: Text.Wrap
-        }
-
-        StatusCheckBox {
-            id: warningCheckBox
-            anchors.top: warningMessage.bottom
-            anchors.topMargin: 0
-            anchors.horizontalCenter: parent.horizontalCenter
-            //% "I understand"
-            text: qsTrId("i-understand")
-        }
-
-        StatusButton {
-            id: btnGetStarted
-            enabled: warningCheckBox.checked
-            text: "Get Started"
-            anchors.top: warningCheckBox.bottom
-            anchors.topMargin: 5
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: 146
-            height: 44
-        }
-
-        StyledText {
-            id: txtPrivacyPolicy
-            x: 772
-            //% "Status does not collect, share or sell any personal data. By continuing you agree with the privacy policy."
-            text: qsTrId("status-does-not-collect,-share-or-sell-any-personal-data.-by-continuing-you-agree-with-the-privacy-policy.")
-            anchors.top: btnGetStarted.bottom
-            anchors.topMargin: 8
-            anchors.horizontalCenter: parent.horizontalCenter
-            font.pixelSize: 12
-            font.letterSpacing: 0.1
-            color: "#939BA1"
-        }
-    }
-}
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:770;width:1232}
-}
-##^##*/

ui/onboarding/KeysMain.qml

@@ -9,11 +9,21 @@ Page {
     id: page
     property alias btnExistingKey: btnExistingKey
     property alias btnGenKey: btnGenKey
+    property bool displayBeforeGetStartedModal: true
 
     background: Rectangle {
         color: Style.current.background
     }
 
+    Component.onCompleted: {
+        if(displayBeforeGetStartedModal)
+            beforeGetStartedModal.open()
+    }
+
+    BeforeGetStartedModal {
+        id: beforeGetStartedModal
+    }
+
     Item {
         id: container
         width: 425

ui/onboarding/Slide.qml

@@ -1,119 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import "../imports"
-import "../shared"
-
-Item {
-    id: slide
-    property string image: "img/chat@2x.png"
-    property string title: "Truly private communication"
-    property string description: "Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked"
-    property bool isFirst: false
-    property bool isLast: false
-
-    Image {
-        id: img1
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.topMargin: 17
-        fillMode: Image.PreserveAspectFit
-        source: image
-    }
-
-    StyledText {
-        id: txtTitle1
-        text: title
-        anchors.right: parent.right
-        anchors.rightMargin: 177
-        anchors.left: parent.left
-        anchors.leftMargin: 177
-        anchors.top: img1.bottom
-        anchors.topMargin: 44
-        font.letterSpacing: -0.2
-        font.weight: Font.Bold
-        lineHeight: 1
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        transformOrigin: Item.Center
-        font.bold: true
-        font.pixelSize: 22
-        font.kerning: true
-    }
-
-    Button {
-        id: btnPrevious1
-        width: 40
-        height: 40
-        anchors.top: txtDesc1.top
-        anchors.bottomMargin: -2
-        anchors.bottom: txtDesc1.bottom
-        anchors.topMargin: -2
-        anchors.right: txtDesc1.left
-        anchors.rightMargin: 32
-        onClicked: vwOnboarding.currentIndex--
-        visible: !isFirst
-        background: Rectangle {
-            id: rctPrevious1
-            color: Style.current.grey
-            border.width: 0
-            radius: 50
-
-            SVGImage {
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-                source: "img/next.svg"
-                width: 10
-                height: 10
-                mirror: true
-            }
-        }
-    }
-
-    StyledText {
-        id: txtDesc1
-        x: 772
-        color: Style.current.darkGrey
-        text: description
-        font.weight: Font.Normal
-        style: Text.Normal
-        anchors.horizontalCenterOffset: 0
-        anchors.top: txtTitle1.bottom
-        anchors.topMargin: 14
-        font.bold: true
-        anchors.horizontalCenter: parent.horizontalCenter
-        font.pixelSize: 15
-    }
-
-    Button {
-        id: btnNext1
-        width: 40
-        height: 40
-        anchors.top: txtDesc1.top
-        anchors.bottomMargin: -2
-        anchors.bottom: txtDesc1.bottom
-        anchors.topMargin: -2
-        anchors.left: txtDesc1.right
-        anchors.leftMargin: 32
-        onClicked: vwOnboarding.currentIndex++
-        visible: !isLast
-        background: Rectangle {
-            id: rctNext1
-            color: Style.current.grey
-            border.width: 0
-            radius: 50
-
-            SVGImage {
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-                source: "img/next.svg"
-                width: 10
-                height: 10
-            }
-        }
-    }
-}
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:600;width:800}
-}
-##^##*/

ui/onboarding/qmldir

@@ -1,10 +1,9 @@
 ExistingKey 1.0 ExistingKey.qml
 GenKey 1.0 GenKey.qml
-Intro 1.0 Intro.qml
 KeysMain 1.0 KeysMain.qml
 Login 1.0 Login.qml
 OnboardingMain 1.0 OnboardingMain.qml
-Slide 1.0 Slide.qml
 EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
 CreatePasswordModal 1.0 CreatePasswordModal.qml
 GenKeyModal 1.0 GenKeyModal.qml
+BeforeGetStartedModal 1.0 BeforeGetStartedModal.qml

ui/shared/ModalPopup.qml

@@ -7,6 +7,7 @@ import "../imports"
 Popup {
     property string title
     property bool noTopMargin: false
+    property bool displayCloseButton: true
     default property alias content: popupContent.children
     property alias contentWrapper: popupContent
     property alias header: headerContent.children
@@ -18,7 +19,8 @@ Popup {
     Overlay.modal: Rectangle {
         color: Qt.rgba(0, 0, 0, 0.4)
     }
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    closePolicy: displayCloseButton? Popup.CloseOnEscape | Popup.CloseOnPressOutside
+                                   : Popup.NoAutoClose
     parent: Overlay.overlay
     x: Math.round(((parent ? parent.width : 0) - width) / 2)
     y: Math.round(((parent ? parent.height : 0) - height) / 2)
@@ -71,6 +73,7 @@ Popup {
         Rectangle {
             id: closeButton
             property bool hovered: false
+            visible: displayCloseButton
             height: 32
             width: 32
             anchors.top: parent.top