feat: design onboarding

ui/onboarding/KeysMain.qml

@@ -3,88 +3,88 @@ 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
+        }
 
-    Image {
-        id: img1
+        anchors.verticalCenter: parent.verticalCenter
         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"
+
+        Image {
+            id: keysImg
+            anchors.horizontalCenter: parent.horizontalCenter
+            sourceSize.width: 160
+            sourceSize.height: 160
+            anchors.top: parent.top
+            fillMode: Image.PreserveAspectFit
+            source: "img/key@2x.png"
+        }
+
+        Text {
+            id: txtTitle1
+            text: qsTr("Get your keys")
+            anchors.topMargin: Theme.padding
+            font.bold: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: keysImg.bottom
+            font.letterSpacing: -0.2
+            font.pixelSize: 22
+        }
+
+        Text {
+            id: txtDesc1
+            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
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.top: txtTitle1.bottom
+            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: btnGenKey.bottom
+            anchors.topMargin: Theme.padding
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 44
+            background: Rectangle {color: "transparent"}
+        }
     }
-
-    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
-        font.bold: true
-        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.")
-        horizontalAlignment: Text.AlignHCenter
-        font.weight: Font.Normal
-        style: Text.Normal
-        anchors.horizontalCenterOffset: 0
-        anchors.top: txtTitle1.bottom
-        anchors.topMargin: 14
-        font.bold: true
-        font.family: "Inter"
-        anchors.horizontalCenter: parent.horizontalCenter
-        font.pixelSize: 15
-    }
-
-    StyledButton {
-        id: btnExistingKey
-        label: "Access existing key"
-        anchors.top: txtDesc1.bottom
-        anchors.topMargin: 87
-        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}
 }
 ##^##*/