From fa8c3c6efdc7ddf7274856ca8b992c0d94b7bc4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Mon, 11 Jul 2022 17:20:35 +0200
Subject: [PATCH] fix(BackupSeed): backup seed phrase form is not centered

Fixes #6387

TLDR; since this is a GridView, it needs a width/height set and then
centered on top of the parent component (as opposed to `anchors.fill`)

Also added a scroll indicator in case the window height is not tall
enough and fixed some small warnings
---
 .../Profile/popups/BackupSeedModal.qml        |  4 ++--
 .../popups/backupseed/BackupSeedStepBase.qml  |  2 ++
 .../backupseed/ConfirmSeedPhrasePanel.qml     | 19 ++++++++++++-------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml b/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml
index 63e9b1c0ff..363378f22a 100644
--- a/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml
@@ -72,10 +72,10 @@ StatusStackModal {
             switch (root.currentIndex) {
             case 0:
             case 1:
-                return  qsTr("Confirm Seed Phrase");
+                return qsTr("Confirm Seed Phrase");
             case 2:
             case 3:
-                return qsTr("Continue");;
+                return qsTr("Continue");
             default:
                 return "";
             }
diff --git a/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml b/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
index 8d3667dfb2..8641b171e4 100644
--- a/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
@@ -55,4 +55,6 @@ Flickable {
             Layout.fillWidth: true
         }
     }
+
+    ScrollIndicator.vertical: ScrollIndicator {}
 }
diff --git a/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml b/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml
index 7d3b03fa75..a6700eddae 100644
--- a/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml
@@ -22,24 +22,28 @@ BackupSeedStepBase {
 
         GridView {
             id: grid
-            anchors.fill: parent
+            leftMargin: grid.spacing/2
+            width: cellWidth*2
+            height: parent.height
+            anchors.centerIn: parent
             visible: !hideSeed
             flow: GridView.FlowTopToBottom
             cellWidth: 208
             cellHeight: 48
             interactive: false
             model: 12
-            property var wordIndex: ["1", "3", "5", "7", "9", "11", "2", "4", "6", "8", "10", "12"]
+            readonly property var wordIndex: ["1", "3", "5", "7", "9", "11", "2", "4", "6", "8", "10", "12"]
+            readonly property int spacing: 4
             delegate: StatusSeedPhraseInput {
                 id: seedWordInput
-                width: (grid.cellWidth - 4)
-                height: (grid.cellHeight - 4)
+                width: (grid.cellWidth - grid.spacing)
+                height: (grid.cellHeight - grid.spacing)
                 textEdit.input.edit.enabled: false
                 text: {
-                    var index = parseInt(leftComponentText) - 1;
-                    if (!root.seedPhrase || index < 0 || index > root.seedPhrase.length - 1)
+                    const idx = parseInt(leftComponentText) - 1;
+                    if (!root.seedPhrase || idx < 0 || idx > root.seedPhrase.length - 1)
                         return "";
-                    return root.seedPhrase[index];
+                    return root.seedPhrase[idx];
                 }
                 leftComponentText: grid.wordIndex[index]
             }
@@ -52,6 +56,7 @@ BackupSeedStepBase {
             source: grid
             radius: 16
             samples: 16
+            transparentBorder: true
         }
 
         StatusButton {