fix(Onboarding): Insert user details layout issues

Closes #5833

ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

@@ -55,8 +55,9 @@ Item {
 
     ColumnLayout {
         height: 461
-        anchors.centerIn: parent
-        spacing: Style.current.padding
+        anchors.top: parent.top
+        anchors.topMargin: 185
+        anchors.horizontalCenter: parent.horizontalCenter
 
         StyledText {
             id: usernameText
@@ -69,26 +70,29 @@ Item {
         StyledText {
             id: txtDesc
             Layout.preferredWidth: (root.state === "username") ? 338 : 643
+            Layout.preferredHeight: 44
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            Layout.topMargin: Style.current.padding
             color: Style.current.secondaryText
             text: qsTr("Longer and unusual names are better as they are less likely to be used by someone else.")
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter
             font.pixelSize: 15
         }
 
         Item {
-            implicitWidth: 100
-            implicitHeight: 100
-            Layout.alignment: Qt.AlignHCenter
+            implicitWidth: 80
+            implicitHeight: 80
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            Layout.topMargin: 27
             StatusSmartIdenticon {
+                anchors.left: parent.left
                 id: userImage
                 image {
                     width: 86
                     height: 86
                     isIdenticon: false
                 }
-
                 icon {
                     width: 86
                     height: 86
@@ -96,7 +100,6 @@ Item {
                     color: Theme.palette.miscColor5
                     charactersLen: 2
                 }
-
                 ringSettings {
                     ringSpecModel: Utils.getColorHashAsJson(root.pubKey)
                 }
@@ -107,43 +110,49 @@ Item {
                 height: 40
                 anchors.top: parent.top
                 anchors.right: parent.right
+                anchors.rightMargin: -20
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "add"
                 onClicked: {
-                    cropperModal.chooseImageToCrop()
+                    cropperModal.chooseImageToCrop();
                 }
             }
         }
 
-        StatusInput {
-            id: nameInput
+        Item {
+            id: nameInputItem
             implicitWidth: 328
-            Layout.preferredHeight: 44
-            Layout.alignment: Qt.AlignHCenter
-            input.placeholderText: qsTr("Display name")
-            input.rightComponent: RoundedIcon {
-                width: 14
-                height: 14
-                iconWidth: 14
-                iconHeight: 14
-                visible: (nameInput.input.text.length > 0)
-                color: "transparent"
-                source: Style.svg("close-filled")
-                onClicked: {
-                    nameInput.input.edit.clear();
+            Layout.preferredHeight: 69
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.topMargin: 37
+            StatusInput {
+                id: nameInput
+                width: parent.width
+                input.placeholderText: qsTr("Display name")
+                input.rightComponent: RoundedIcon {
+                    width: 14
+                    height: 14
+                    iconWidth: 14
+                    iconHeight: 14
+                    visible: (nameInput.input.text.length > 0)
+                    color: "transparent"
+                    source: Style.svg("close-filled")
+                    onClicked: {
+                        nameInput.input.edit.clear();
+                    }
                 }
-            }
-            errorMessageCmp.wrapMode: Text.NoWrap
-            errorMessageCmp.horizontalAlignment: Text.AlignHCenter
-            validators: Constants.validators.displayName
-            onTextChanged: {
-                userImage.name = text;
-            }
-            input.acceptReturn: true
-            onKeyPressed: {
-                if (input.edit.keyEvent === Qt.Key_Return || input.edit.keyEvent === Qt.Key_Enter) {
-                    event.accepted = true
-                    nextBtn.clicked(null)
+                errorMessageCmp.wrapMode: Text.NoWrap
+                errorMessageCmp.horizontalAlignment: Text.AlignHCenter
+                validators: Constants.validators.displayName
+                onTextChanged: {
+                    userImage.name = text;
+                }
+                input.acceptReturn: true
+                onKeyPressed: {
+                    if (input.edit.keyEvent === Qt.Key_Return || input.edit.keyEvent === Qt.Key_Enter) {
+                        event.accepted = true
+                        nextBtn.clicked(null)
+                    }
                 }
             }
         }
@@ -155,46 +164,51 @@ Item {
             text: qsTr("Chatkey:") + " " + Utils.getCompressedPk(root.pubKey)
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
-            Layout.alignment: Qt.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.topMargin: 13
             font.pixelSize: 15
         }
 
         Item {
             id: chainsChatKeyImg
             Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: 400
-            Layout.preferredHeight: 84
+            Layout.topMargin: Style.current.padding
+            Layout.preferredWidth: 215
+            Layout.preferredHeight: 77
             Image {
+                id: imgChains
                 anchors.horizontalCenter: parent.horizontalCenter
-                source: Style.png("onboarding/chains")
+                source: Style.svg("onboarding/chains")
             }
             EmojiHash {
                 anchors {
                     bottom: parent.bottom
                     left: parent.left
-                    leftMargin: 80
                 }
-
                 publicKey: root.pubKey
             }
             StatusSmartIdenticon {
                 id: userImageCopy
-
                 anchors {
                     bottom: parent.bottom
                     right: parent.right
-                    rightMargin: 116
+                    rightMargin: 25
                 }
-
                 icon.width: 44
                 icon.height: 44
                 icon.color: "transparent"
                 ringSettings { ringSpecModel: Utils.getColorHashAsJson(root.pubKey) }
             }
         }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
         StatusButton {
             id: nextBtn
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
             enabled: !!nameInput.text && nameInput.valid
             text: qsTr("Next")
             onClicked: {
@@ -202,7 +216,7 @@ Item {
                     if (OnboardingStore.accountCreated) {
                         OnboardingStore.updatedDisplayName(nameInput.text);
                     }
-                    OnboardingStore.displayName = nameInput.text
+                    OnboardingStore.displayName = nameInput.text;
                     root.displayName = nameInput.text;
                     root.state = "chatkey";
                 } else {
@@ -213,18 +227,16 @@ Item {
 
         ImageCropWorkflow {
             id: cropperModal
-
             imageFileDialogTitle: qsTr("Choose an image for profile picture")
             title: qsTr("Profile picture")
             acceptButtonText: qsTr("Make this my profile picture")
-
             onImageCropped: {
                 const croppedImg = OnboardingStore.generateImage(image,
-                                              cropRect.x.toFixed(),
-                                              cropRect.y.toFixed(),
-                                              (cropRect.x + cropRect.width).toFixed(),
-                                              (cropRect.y + cropRect.height).toFixed())
-                userImage.image.source = croppedImg
+                                                                 cropRect.x.toFixed(),
+                                                                 cropRect.y.toFixed(),
+                                                                 (cropRect.x + cropRect.width).toFixed(),
+                                                                 (cropRect.y + cropRect.height).toFixed());
+                userImage.image.source = croppedImg;
             }
         }
     }
@@ -257,7 +269,7 @@ Item {
                 opacity: 1.0
             }
             PropertyChanges {
-                target: nameInput
+                target: nameInputItem
                 visible: true
             }
         },
@@ -288,7 +300,7 @@ Item {
                 opacity: 0.0
             }
             PropertyChanges {
-                target: nameInput
+                target: nameInputItem
                 visible: false
             }
         }

ui/imports/assets/icons/onboarding/chains.svg

@@ -0,0 +1,4 @@
+<svg width="105" height="27" viewBox="0 0 105 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50864 24.7149C6.16162 24.3774 5.9064 23.9573 5.76985 23.4868C5.56359 22.7761 5.65068 22.0373 6.01504 21.4065L7.59153 18.676C7.94629 18.0615 8.52111 17.6235 9.2146 17.4377C9.23327 17.4327 9.25204 17.4279 9.27091 17.4233C9.74678 17.3062 10.2383 17.3171 10.7041 17.4488L10.9356 17.0479C10.5886 16.7103 10.3333 16.2903 10.1967 15.8198C9.99045 15.109 10.0776 14.37 10.4422 13.7389L12.0187 11.0083C12.383 10.3773 12.9798 9.93267 13.6979 9.7557C14.1737 9.6387 14.6651 9.64972 15.1309 9.78149L15.3622 9.38076C15.0151 9.04321 14.7599 8.623 14.6233 8.15238C14.4172 7.44169 14.5044 6.70273 14.8688 6.0717L16.445 3.34144C17.0725 2.25435 18.3683 1.78076 19.557 2.11481L20.2209 0.965586L21.4491 1.675L20.7854 2.824C21.6691 3.68633 21.9071 5.04509 21.2798 6.13236L19.7037 8.86252C19.349 9.47706 18.7742 9.91513 18.0805 10.1009C18.0618 10.1059 18.0429 10.1108 18.024 10.1154C17.548 10.2325 17.0564 10.2215 16.5905 10.0898L16.3592 10.4905C16.7063 10.828 16.9616 11.2482 17.0982 11.7189C17.3045 12.4295 17.2174 13.1685 16.8531 13.7995L15.2766 16.5301C14.9218 17.1447 14.347 17.5826 13.6536 17.7684C13.6349 17.7734 13.6161 17.7782 13.5973 17.7828C13.1212 17.8999 12.6297 17.8889 12.1639 17.7571L11.9325 18.1577C12.2796 18.4953 12.5348 18.9156 12.6713 19.3864C12.8774 20.0971 12.7902 20.8361 12.4259 21.4667L10.8497 24.1973C10.4838 24.8306 9.89122 25.2557 9.2251 25.4342C8.748 25.562 8.2332 25.5632 7.73708 25.4238L7.07328 26.5736L5.84483 25.8648L6.50864 24.7149ZM16.1195 8.06859L16.7175 7.0325L17.946 7.7416L17.3478 8.77781C17.4609 8.77852 17.574 8.7655 17.6852 8.73817C18.0246 8.65662 18.3059 8.44689 18.4753 8.15347L20.0513 5.42338C20.2848 5.0186 20.259 4.53039 20.0276 4.13592L19.8207 4.49423L18.5924 3.78483L18.7988 3.42754C18.6751 3.42681 18.5531 3.44209 18.4361 3.47342C18.1211 3.55783 17.8435 3.75571 17.6733 4.05061L16.097 6.78103C15.9276 7.07434 15.888 7.42102 15.9855 7.75716C16.0174 7.8669 16.0625 7.97123 16.1195 8.06859ZM11.6931 15.7361L12.2915 14.6998L13.5198 15.4091L12.9215 16.4453C13.0343 16.446 13.1474 16.433 13.2584 16.4056C13.5988 16.3214 13.8789 16.1143 14.0482 15.8211L15.6247 13.0904C15.794 12.7972 15.8336 12.4505 15.736 12.1144C15.7041 12.0045 15.6589 11.9001 15.6018 11.8026L15.0037 12.8386L13.7753 12.1296L14.3735 11.0933C14.2607 11.0926 14.1476 11.1057 14.0367 11.133C14.0276 11.1352 14.0185 11.1375 14.0095 11.1399C13.6819 11.2277 13.4119 11.432 13.2471 11.7174L11.6705 14.448L11.6705 14.4482C11.501 14.7415 11.4614 15.0882 11.559 15.4243C11.5907 15.5342 11.636 15.6386 11.6931 15.7361ZM7.26605 23.4028L7.47255 23.0451L8.70092 23.7543L8.49475 24.1115C8.952 24.1145 9.38762 23.8927 9.6214 23.4882L11.1976 20.7577C11.3669 20.4645 11.4065 20.1178 11.309 19.7816C11.2771 19.6717 11.232 19.5673 11.1749 19.4698L10.5765 20.5061L9.3482 19.7968L9.94653 18.7608C9.83372 18.7601 9.72084 18.7732 9.60983 18.8005C9.60076 18.8027 9.59176 18.805 9.58275 18.8075C9.25494 18.8953 8.98482 19.0996 8.81997 19.3851L7.24348 22.1157L7.24341 22.1159C7.07412 22.409 7.03451 22.7554 7.1321 23.0914C7.16391 23.2011 7.20908 23.3055 7.26605 23.4028Z" fill="#939BA1"/>
+<path d="M98.4914 24.7149C98.8384 24.3774 99.0936 23.9573 99.2302 23.4868C99.4364 22.7761 99.3493 22.0373 98.985 21.4065L97.4085 18.676C97.0537 18.0615 96.4789 17.6235 95.7854 17.4377C95.7667 17.4327 95.748 17.4279 95.7291 17.4233C95.2532 17.3062 94.7617 17.3171 94.2959 17.4488L94.0644 17.0479C94.4114 16.7103 94.6667 16.2903 94.8033 15.8198C95.0095 15.109 94.9224 14.37 94.5578 13.7389L92.9813 11.0083C92.617 10.3773 92.0202 9.93267 91.3021 9.7557C90.8263 9.6387 90.3349 9.64972 89.8691 9.78149L89.6378 9.38076C89.9849 9.04321 90.2401 8.623 90.3767 8.15238C90.5828 7.44169 90.4956 6.70273 90.1312 6.0717L88.555 3.34144C87.9275 2.25435 86.6317 1.78076 85.443 2.11481L84.7791 0.965586L83.5509 1.675L84.2146 2.824C83.3309 3.68633 83.0929 5.04509 83.7202 6.13236L85.2963 8.86252C85.651 9.47706 86.2258 9.91513 86.9195 10.1009C86.9382 10.1059 86.9571 10.1108 86.976 10.1154C87.452 10.2325 87.9436 10.2215 88.4095 10.0898L88.6408 10.4905C88.2937 10.828 88.0384 11.2482 87.9018 11.7189C87.6955 12.4295 87.7826 13.1685 88.1469 13.7995L89.7234 16.5301C90.0782 17.1447 90.653 17.5826 91.3464 17.7684C91.3651 17.7734 91.3839 17.7782 91.4027 17.7828C91.8788 17.8999 92.3703 17.8889 92.8361 17.7571L93.0675 18.1577C92.7204 18.4953 92.4652 18.9156 92.3287 19.3864C92.1226 20.0971 92.2098 20.8361 92.5741 21.4667L94.1503 24.1973C94.5162 24.8306 95.1088 25.2557 95.7749 25.4342C96.252 25.562 96.7668 25.5632 97.2629 25.4238L97.9267 26.5736L99.1552 25.8648L98.4914 24.7149ZM88.8805 8.06859L88.2825 7.0325L87.054 7.7416L87.6522 8.77781C87.5391 8.77852 87.426 8.7655 87.3148 8.73817C86.9754 8.65662 86.6941 8.44689 86.5247 8.15347L84.9487 5.42338C84.7152 5.0186 84.741 4.53039 84.9724 4.13592L85.1793 4.49423L86.4076 3.78483L86.2012 3.42754C86.3249 3.42681 86.4469 3.44209 86.5639 3.47342C86.8789 3.55783 87.1565 3.75571 87.3267 4.05061L88.903 6.78103C89.0724 7.07434 89.112 7.42102 89.0145 7.75716C88.9826 7.8669 88.9375 7.97123 88.8805 8.06859ZM93.3069 15.7361L92.7085 14.6998L91.4802 15.4091L92.0785 16.4453C91.9657 16.446 91.8526 16.433 91.7416 16.4056C91.4012 16.3214 91.1211 16.1143 90.9518 15.8211L89.3753 13.0904C89.206 12.7972 89.1664 12.4505 89.264 12.1144C89.2959 12.0045 89.3411 11.9001 89.3982 11.8026L89.9963 12.8386L91.2247 12.1296L90.6265 11.0933C90.7393 11.0926 90.8524 11.1057 90.9633 11.133C90.9724 11.1352 90.9815 11.1375 90.9905 11.1399C91.3181 11.2277 91.5881 11.432 91.7529 11.7174L93.3295 14.448L93.3295 14.4482C93.499 14.7415 93.5386 15.0882 93.441 15.4243C93.4093 15.5342 93.364 15.6386 93.3069 15.7361ZM97.7339 23.4028L97.5274 23.0451L96.2991 23.7543L96.5052 24.1115C96.048 24.1145 95.6124 23.8927 95.3786 23.4882L93.8024 20.7577C93.6331 20.4645 93.5935 20.1178 93.691 19.7816C93.7229 19.6717 93.768 19.5673 93.8251 19.4698L94.4235 20.5061L95.6518 19.7968L95.0535 18.7608C95.1663 18.7601 95.2792 18.7732 95.3902 18.8005C95.3992 18.8027 95.4082 18.805 95.4173 18.8075C95.7451 18.8953 96.0152 19.0996 96.18 19.3851L97.7565 22.1157L97.7566 22.1159C97.9259 22.409 97.9655 22.7554 97.8679 23.0914C97.8361 23.2011 97.7909 23.3055 97.7339 23.4028Z" fill="#939BA1"/>
+</svg>