fix(GetSyncCodeInstructionsPopup): mention same network

- integrate it into Settings/Syncing
- simplify the GetSyncCodeInstruction structure

ui/app/AppLayouts/Profile/views/SyncingView.qml

@@ -14,6 +14,7 @@ import StatusQ.Core.Utils 0.1 as StatusQUtils
 import utils 1.0
 
 import shared.panels 1.0
+import shared.popups 1.0
 import shared.controls 1.0
 import shared.controls.chat 1.0
 
@@ -248,6 +249,13 @@ SettingsContentBase {
             }
         }
 
+        StatusFlatButton {
+            Layout.alignment: Qt.AlignHCenter
+            text: qsTr("How to get a sync code")
+            icon.name: "info"
+            onClicked: Global.openPopup(getSyncCodeInstructionsPopup)
+        }
+
         StatusButton {
             objectName: "setupSyncBackupDataButton"
 
@@ -281,6 +289,13 @@ SettingsContentBase {
             }
         }
 
+        Component {
+            id: getSyncCodeInstructionsPopup
+            GetSyncCodeInstructionsPopup {
+                destroyOnClose: true
+            }
+        }
+
         Item {
             Layout.fillHeight: true
             Layout.fillWidth: true

ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml

@@ -14,21 +14,22 @@ Column {
 
     GetSyncCodeInstruction {
         order: "1."
-        orderColor: Theme.palette.baseColor1
+        text1: qsTr("Ensure both devices are on the same network")
+    }
+
+    GetSyncCodeInstruction {
+        order: "2."
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return qsTr("Open Status on the device you want to import from")
             }
             return qsTr("Open Status App on your desktop device")
         }
-        text1Color: Theme.palette.baseColor1
     }
 
     GetSyncCodeInstruction {
-        order: "2."
+        order: "3."
-        orderColor: Theme.palette.baseColor1
         text1: qsTr("Open")
-        text1Color: Theme.palette.baseColor1
         icon: "settings"
         text2: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
@@ -40,15 +41,13 @@ Column {
     }
 
     GetSyncCodeInstruction {
-        order: "3."
+        order: "4."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return qsTr("Click")
             }
             return qsTr("Navigate to the")
         }
-        text1Color: Theme.palette.baseColor1
         icon: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return ""
@@ -65,8 +64,7 @@ Column {
     }
 
     GetSyncCodeInstruction {
-        order: "4."
+        order: "5."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -106,8 +104,7 @@ Column {
     }
 
     GetSyncCodeInstruction {
-        order: "5."
+        order: "6."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -117,7 +114,6 @@ Column {
             }
             return ""
         }
-        text1Color: Theme.palette.baseColor1
         text2: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -137,20 +133,18 @@ Column {
             }
             return qsTr("on this device")
         }
-        text3Color: Theme.palette.baseColor1
     }
 
     GetSyncCodeInstruction {
         order: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
-                    return "6."
+                    return "7."
                 }
                 return ""
             }
-            return "6."
+            return "7."
         }
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -160,6 +154,5 @@ Column {
             }
             return qsTr("Scan or enter the code")
         }
-        text1Color: Theme.palette.baseColor1
     }
 }

ui/imports/shared/controls/GetSyncCodeInstruction.qml

@@ -2,6 +2,7 @@ import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 RowLayout {
     id: root
@@ -9,41 +10,37 @@ RowLayout {
     height: 40
 
     property string order: ""
-    property string orderColor: ""
+    property color orderColor: Theme.palette.baseColor1
     property string text1: ""
-    property string text1Color: ""
+    property color text1Color: Theme.palette.baseColor1
     property string icon: ""
     property string text2: ""
     property string text2Color: ""
     property string text3: ""
-    property string text3Color: ""
+    property color text3Color: Theme.palette.baseColor1
 
     StatusBaseText {
-        Layout.alignment: Qt.AlignVCenter
+        visible: text
-        visible: !!root.order
         color: root.orderColor
         text: root.order
     }
     StatusBaseText {
-        Layout.alignment: Qt.AlignVCenter
+        visible: text
-        visible: !!root.text1
         color: root.text1Color
-        text: "%1".arg(root.text1)
+        text: root.text1
     }
     StatusRoundIcon {
         visible: !!root.icon
         asset.name: root.icon
     }
     StatusBaseText {
-        Layout.alignment: Qt.AlignVCenter
+        visible: text
-        visible: !!root.text2
         color: root.text2Color
-        text: "%1".arg(root.text2)
+        text: root.text2
     }
     StatusBaseText {
-        Layout.alignment: Qt.AlignVCenter
+        visible: text
-        visible: !!root.text3
         color: root.text3Color
-        text: "%1".arg(root.text3)
+        text: root.text3
     }
 }

ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml

@@ -14,21 +14,22 @@ Column {
 
     GetSyncCodeInstruction {
         order: "1."
-        orderColor: Theme.palette.baseColor1
+        text1: qsTr("Ensure both devices are on the same network")
+    }
+
+    GetSyncCodeInstruction {
+        order: "2."
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return qsTr("Open Status on the device you want to import from")
             }
             return qsTr("Open Status App on your mobile device")
         }
-        text1Color: Theme.palette.baseColor1
     }
 
     GetSyncCodeInstruction {
-        order: "2."
+        order: "3."
-        orderColor: Theme.palette.baseColor1
+        text1: qsTr("Open your")
-        text1: qsTr("Open")
-        text1Color: Theme.palette.baseColor1
         icon: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return "settings"
@@ -39,21 +40,19 @@ Column {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return qsTr("Settings / Wallet")
             }
-            return qsTr("Settings")
+            return qsTr("Profile")
         }
         text2Color: Theme.palette.directColor1
     }
 
     GetSyncCodeInstruction {
-        order: "3."
+        order: "4."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return qsTr("Tap")
             }
             return qsTr("Go to")
         }
-        text1Color: Theme.palette.baseColor1
         icon: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 return ""
@@ -70,8 +69,7 @@ Column {
     }
 
     GetSyncCodeInstruction {
-        order: "4."
+        order: "5."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -111,8 +109,7 @@ Column {
     }
 
     GetSyncCodeInstruction {
-        order: "5."
+        order: "6."
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -122,7 +119,6 @@ Column {
             }
             return qsTr("Tap")
         }
-        text1Color: Theme.palette.baseColor1
         text2: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -142,20 +138,18 @@ Column {
             }
             return qsTr("on this device")
         }
-        text3Color: Theme.palette.baseColor1
     }
 
     GetSyncCodeInstruction {
         order: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
-                    return "6."
+                    return "7."
                 }
                 return ""
             }
-            return "6."
+            return "7."
         }
-        orderColor: Theme.palette.baseColor1
         text1: {
             if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
                 if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
@@ -165,6 +159,5 @@ Column {
             }
             return qsTr("Scan or enter the code")
         }
-        text1Color: Theme.palette.baseColor1
     }
 }

ui/imports/shared/popups/GetSyncCodeInstructionsPopup.qml

@@ -8,7 +8,8 @@ StatusDialog {
     id: root
 
     title: qsTr("How to get a sync code on...")
-    padding: 40
+    horizontalPadding: 24
+    verticalPadding: 32
     footer: null
 
     SyncingCodeInstructions {

ui/imports/shared/views/SyncingCodeInstructions.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.14
 
 import StatusQ.Controls 0.1
 
+import utils 1.0
 import shared.controls 1.0
 
 ColumnLayout {
@@ -21,11 +22,13 @@ ColumnLayout {
     property int purpose: SyncingCodeInstructions.Purpose.AppSync
     property int type: SyncingCodeInstructions.Type.QRCode
 
-    spacing: 0
+    spacing: Style.current.xlPadding
 
     StatusSwitchTabBar {
         id: switchTabBar
         Layout.fillWidth: true
+        Layout.leftMargin: Style.current.padding
+        Layout.rightMargin: Style.current.padding
         Layout.minimumWidth: 400
         currentIndex: 0
 
@@ -38,11 +41,6 @@ ColumnLayout {
         }
     }
 
-    Item {
-        Layout.fillWidth: true
-        implicitHeight: 41
-    }
-
     StackLayout {
         Layout.fillWidth: false
         Layout.alignment: Qt.AlignHCenter