use StatusQ components

ui/onboarding/Keycard/CreatePINModal.qml

@@ -1,12 +1,16 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import "../../imports"
+import StatusQ.Popups 0.1
+
+import "../../imports/utils" as Imports
 import "../../shared"
 import "../../shared/keycard"
 
-ModalPopup {
+StatusModal {
     property bool firstPINFieldValid: false
     property bool repeatPINFieldValid: false
     property string pinValidationError: ""
@@ -14,7 +18,8 @@ ModalPopup {
     property bool submitted: false
 
     id: popup
-    title: qsTr("Create PIN")
+    header.title: qsTr("Create PIN")
+    anchors.centerIn: parent
     height: 500
 
     onOpened: {
@@ -23,83 +28,75 @@ ModalPopup {
         firstPINField.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    Input {
+    contentItem: Item {
-        id: firstPINField
+        Input {
-        anchors.rightMargin: 56
+            id: firstPINField
-        anchors.leftMargin: 56
+            anchors.rightMargin: 56
-        anchors.top: parent.top
+            anchors.leftMargin: 56
-        anchors.topMargin: 88
+            anchors.top: parent.top
-        placeholderText:  qsTr("New PIN")
+            anchors.topMargin: 88
-        textField.echoMode: TextInput.Password
+            placeholderText:  qsTr("New PIN")
-        onTextChanged: {
+            textField.echoMode: TextInput.Password
-            [firstPINFieldValid, pinValidationError] =
+            onTextChanged: {
-                Utils.validatePINs("first", firstPINField, repeatPINField);
+                [firstPINFieldValid, pinValidationError] =
-        }
+                    Imports.Utils.validatePINs("first", firstPINField, repeatPINField);
-    }
-
-    Input {
-        id: repeatPINField
-        enabled: firstPINFieldValid
-        anchors.rightMargin: 0
-        anchors.leftMargin: 0
-        anchors.right: firstPINField.right
-        anchors.left: firstPINField.left
-        anchors.top: firstPINField.bottom
-        anchors.topMargin: Style.current.xlPadding
-        placeholderText: qsTr("Confirm PIN")
-        textField.echoMode: TextInput.Password
-        Keys.onReturnPressed: function(event) {
-            if (submitBtn.enabled) {
-                submitBtn.clicked(event)
             }
         }
-        onTextChanged: {
+
-            [repeatPINFieldValid, repeatPINValidationError] =
+        Input {
-                Utils.validatePINs("repeat", firstPINField, repeatPINField);
+            id: repeatPINField
+            enabled: firstPINFieldValid
+            anchors.rightMargin: 0
+            anchors.leftMargin: 0
+            anchors.right: firstPINField.right
+            anchors.left: firstPINField.left
+            anchors.top: firstPINField.bottom
+            anchors.topMargin: 32
+            placeholderText: qsTr("Confirm PIN")
+            textField.echoMode: TextInput.Password
+            Keys.onReturnPressed: function(event) {
+                if (submitBtn.enabled) {
+                    submitBtn.clicked(event)
+                }
+            }
+            onTextChanged: {
+                [repeatPINFieldValid, repeatPINValidationError] =
+                    Imports.Utils.validatePINs("repeat", firstPINField, repeatPINField);
+            }
+        }
+
+        StatusBaseText {
+            id: validationError
+            text: {
+                if (pinValidationError !== "") return pinValidationError;
+                if (repeatPINValidationError !== "") return repeatPINValidationError;
+                return "";
+            }
+            anchors.top: repeatPINField.bottom
+            anchors.topMargin: 20
+            anchors.right: parent.right
+            anchors.left: parent.left
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.dangerColor1
+            font.pixelSize: 11
+        }
+
+        StatusBaseText {
+            text: qsTr("Create a 6 digit long PIN")
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
+            horizontalAlignment: Text.AlignHCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+            color: Theme.palette.directColor1
+            font.pixelSize: 12
         }
     }
 
-    StyledText {
+    rightButtons: [
-        id: validationError
-        text: {
-            if (pinValidationError !== "") return pinValidationError;
-            if (repeatPINValidationError !== "") return repeatPINValidationError;
-            return "";
-        }
-        anchors.top: repeatPINField.bottom
-        anchors.topMargin: 20
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.xlPadding
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.xlPadding
-        horizontalAlignment: Text.AlignHCenter
-        color: Style.current.danger
-        font.pixelSize: 11
-    }
-
-    StyledText {
-        text: qsTr("Create a 6 digit long PIN")
-        wrapMode: Text.WordWrap
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.xlPadding
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.xlPadding
-        horizontalAlignment: Text.AlignHCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-        color: Style.current.secondaryText
-        font.pixelSize: 12
-    }
-
-    footer: Item {
-        width: parent.width
-        height: submitBtn.height
-
         StatusButton {
             id: submitBtn
-            anchors.bottom: parent.bottom
-            anchors.topMargin: Style.current.padding
-            anchors.right: parent.right
             text: qsTr("Create PIN")
             enabled: firstPINFieldValid && repeatPINFieldValid
 
@@ -109,5 +106,5 @@ ModalPopup {
                 popup.close()
             }
         }
-    }
+    ]
 }

ui/onboarding/KeycardFlowSelection.qml

@@ -14,7 +14,6 @@ Item {
     property int flow: OnboardingFlow.Recover
 
     id: keycardView
-    anchors.fill: parent
     Component.onCompleted: {
         insertCard.open()
         keycardModel.startConnection()

ui/shared/keycard/PINModal.qml

@@ -1,16 +1,21 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import "../../imports"
+import StatusQ.Popups 0.1
+
+import "../../imports/utils" as Imports
 import "../../shared"
 
-ModalPopup {
+StatusModal {
     property bool pinFieldValid: false
     property bool submitted: false
 
     id: popup
-    title: qsTr("Authenticate PIN")
+    header.title: qsTr("Authenticate PIN")
+    anchors.centerIn: parent
     height: 400
 
     onOpened: {
@@ -19,43 +24,37 @@ ModalPopup {
         pinField.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    Input {
+    contentItem: Item {
-        id: pinField
+        Input {
-        anchors.rightMargin: 56
+            id: pinField
-        anchors.leftMargin: 56
+            anchors.rightMargin: 56
-        anchors.top: parent.top
+            anchors.leftMargin: 56
-        anchors.topMargin: 88
+            anchors.top: parent.top
-        placeholderText:  qsTr("PIN")
+            anchors.topMargin: 88
-        textField.echoMode: TextInput.Password
+            placeholderText:  qsTr("PIN")
-        onTextChanged: {
+            textField.echoMode: TextInput.Password
-            [pinFieldValid, _] =
+            onTextChanged: {
-                Utils.validatePINs("first", pinField, pinField);
+                [pinFieldValid, _] =
+                    Imports.Utils.validatePINs("first", pinField, pinField);
+            }
+        }
+
+        StatusBaseText {
+            text: qsTr("Insert your 6-digit PIN")
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.directColor1
+            font.pixelSize: 12
         }
     }
 
-    StyledText {
+    rightButtons: [
-        text: qsTr("Insert your 6-digit PIN")
-        wrapMode: Text.WordWrap
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.xlPadding
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.xlPadding
-        horizontalAlignment: Text.AlignHCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-        color: Style.current.secondaryText
-        font.pixelSize: 12
-    }
-
-    footer: Item {
-        width: parent.width
-        height: submitBtn.height
-
         StatusButton {
             id: submitBtn
-            anchors.bottom: parent.bottom
-            anchors.topMargin: Style.current.padding
-            anchors.right: parent.right
             text: qsTr("Authenticate")
             enabled: pinFieldValid
 
@@ -65,5 +64,6 @@ ModalPopup {
                 popup.close()
             }
         }
-    }
+    ]
+
 }

ui/shared/keycard/PairingModal.qml

@@ -1,16 +1,19 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import "../../imports"
+import StatusQ.Popups 0.1
 import "../../shared"
 
-ModalPopup {
+StatusModal {
     property bool pairingPasswordFieldValid: false
     property bool submitted: false
 
     id: popup
-    title: qsTr("Insert pairing code")
+    header.title: qsTr("Insert pairing code")
+    anchors.centerIn: parent
     height: 400
 
     onOpened: {
@@ -19,42 +22,37 @@ ModalPopup {
         pairingPasswordField.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    Input {
+    contentItem: Item {
-        id: pairingPasswordField
+        Input {
-        anchors.rightMargin: 56
+            id: pairingPasswordField
-        anchors.leftMargin: 56
+            anchors.rightMargin: 56
-        anchors.top: parent.top
+            anchors.leftMargin: 56
-        anchors.topMargin: 88
+            anchors.top: parent.top
-        placeholderText:  qsTr("Pairing code")
+            anchors.topMargin: 88
-        textField.echoMode: TextInput.Password
+            anchors.bottomMargin: 0
-        onTextChanged: {
+            placeholderText:  qsTr("Pairing code")
-          pairingPasswordFieldValid = pairingPasswordField.text !== "";
+            textField.echoMode: TextInput.Password
+            onTextChanged: {
+                pairingPasswordFieldValid = pairingPasswordField.text !== "";
+            }
+        }
+
+        StatusBaseText {
+            text: qsTr("Insert the Keycard pairing code")
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.directColor1
+            font.pixelSize: 12
         }
     }
 
-    StyledText {
+    rightButtons: [
-        text: qsTr("Insert the Keycard pairing code")
-        wrapMode: Text.WordWrap
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.xlPadding
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.xlPadding
-        horizontalAlignment: Text.AlignHCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-        color: Style.current.secondaryText
-        font.pixelSize: 12
-    }
-
-    footer: Item {
-        width: parent.width
-        height: submitBtn.height
-
         StatusButton {
             id: submitBtn
-            anchors.bottom: parent.bottom
-            anchors.topMargin: Style.current.padding
-            anchors.right: parent.right
             text: qsTr("Pair")
             enabled: pairingPasswordFieldValid
 
@@ -64,5 +62,5 @@ ModalPopup {
                 popup.close()
             }
         }
-    }
+    ]
 }