feat: design onboarding

ui/onboarding/KeysMain.qml

@@ -3,17 +3,34 @@ import QtQuick.Controls 1.3
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 import "../shared"
+import "../imports"
 
 Page {
+    id: page
     property alias btnExistingKey: btnExistingKey
     property alias btnGenKey: btnGenKey
     
+    Item {
+        id: container
+        width: 425
+        height: {
+            let h = 0
+            const children = this.children
+            Object.keys(children).forEach(function (key) {
+                const child = children[key]
+                h += child.height + Theme.padding
+            })
+            return h
+        }
+
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
         Image {
-        id: img1
+            id: keysImg
             anchors.horizontalCenter: parent.horizontalCenter
             sourceSize.width: 160
             sourceSize.height: 160
-        anchors.topMargin: 24
             anchors.top: parent.top
             fillMode: Image.PreserveAspectFit
             source: "img/key@2x.png"
@@ -22,69 +39,52 @@ Page {
         Text {
             id: txtTitle1
             text: qsTr("Get your keys")
-        anchors.right: parent.right
-        anchors.rightMargin: 177
-        anchors.left: parent.left
-        anchors.leftMargin: 177
-        anchors.top: img1.bottom
-        anchors.topMargin: 16
-        font.letterSpacing: -0.2
-        font.weight: Font.Bold
-        lineHeight: 1
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        transformOrigin: Item.Center
+            anchors.topMargin: Theme.padding
             font.bold: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: keysImg.bottom
+            font.letterSpacing: -0.2
             font.pixelSize: 22
-        font.kerning: true
-
         }
 
         Text {
             id: txtDesc1
-        x: 772
-        color: "#939BA1"
-        text: qsTr("A set of keys controls your account. Your keys live on\nyour device, so only you can use them.")
+            color: Theme.darkGrey
+            text: qsTr("A set of keys controls your account. Your keys live on your device, so only you can use them.")
             horizontalAlignment: Text.AlignHCenter
-        font.weight: Font.Normal
-        style: Text.Normal
-        anchors.horizontalCenterOffset: 0
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
             anchors.top: txtTitle1.bottom
-        anchors.topMargin: 14
-        font.bold: true
-        font.family: "Inter"
-        anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: Theme.padding
             font.pixelSize: 15
         }
 
+
+        StyledButton {
+            id: btnGenKey
+            height: 44
+            anchors.top: txtDesc1.bottom
+            anchors.topMargin: 40
+            anchors.horizontalCenter: parent.horizontalCenter
+            label: "I'm new, generate keys"
+        }
+
         StyledButton {
             id: btnExistingKey
             label: "Access existing key"
-        anchors.top: txtDesc1.bottom
-        anchors.topMargin: 87
+            anchors.top: btnGenKey.bottom
+            anchors.topMargin: Theme.padding
             anchors.horizontalCenter: parent.horizontalCenter
-        // onClicked: logic.generateAddresses()
-        width: 142
             height: 44
-    }
-
-    StyledButton {
-        id: btnGenKey
-        width: 194
-        height: 44
-        anchors.top: btnExistingKey.bottom
-        anchors.topMargin: 19
-        anchors.horizontalCenter: parent.horizontalCenter
-        label: "I'm new, generate me a key"
             background: Rectangle {color: "transparent"}
         }
-
+    }
 }
 
 
-
 /*##^##
 Designer {
-    D{i:0;autoSize:true;height:480;width:720}
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:760;width:1080}
 }
 ##^##*/