fix(SyncingEnterCode): tweak to local pairing messaging

... to clarify both devices should be on the same network

- add the view to storybook
- fix some layout/margin issues

Fixes #12261

storybook/figma.json

@@ -270,6 +270,10 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
     ],
+    "SyncingEnterCode": [
+        "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1930-136137&mode=design&t=RSriG02fbmVOMAEx-0",
+        "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=13578-276069&mode=design&t=RSriG02fbmVOMAEx-0"
+    ],
     "TransferOwnershipAlertPopup": [
         "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86828&mode=design&t=coHVo1E6fHrKNNhQ-1",
         "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86847&mode=design&t=coHVo1E6fHrKNNhQ-1"

storybook/pages/SyncingEnterCodePage.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import Storybook 1.0
+
+import mainui 1.0
+import shared.views 1.0
+
+SplitView {
+    id: root
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    Popups {
+        popupParent: root
+        rootStore: QtObject {}
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        SyncingEnterCode {
+            id: syncView
+            width: 400
+            anchors.horizontalCenter: parent.horizontalCenter
+            validateConnectionString: (stringValue) => !Number.isNaN(parseInt(stringValue))
+
+            onDisplayInstructions: logs.logEvent("SyncingEnterCode::displayInstructions")
+            onProceed: (connectionString) => logs.logEvent("SyncingEnterCode::proceed", ["connectionString"], arguments)
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+    }
+}
+
+// category: Views
+
+// "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1930-136137&mode=design&t=RSriG02fbmVOMAEx-0"
+// "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=13578-276069&mode=design&t=RSriG02fbmVOMAEx-0"

storybook/pages/SyncingViewPage.qml

@@ -129,3 +129,5 @@ SplitView {
 }
 
 // category: Views
+
+// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1592-128606&mode=design&t=1xZLPCet6yRCZCuz-0

ui/imports/shared/controls/StatusSyncCodeScan.qml

@@ -77,9 +77,9 @@ Column {
     Component {
         id: btnComponent
 
-        Rectangle {
+        ShapeRectangle {
             anchors.fill: parent
-            color: Theme.palette.baseColor4
+            path.fillColor: Theme.palette.baseColor4
             radius: d.radius
 
             ColumnLayout {
@@ -145,7 +145,7 @@ Column {
     
     Item {
         width: parent.width
-        height: 16
+        height: 8
     }
 
     StatusBaseText {
@@ -158,12 +158,24 @@ Column {
         text: d.errorMessage
     }
 
+    StatusBaseText {
+        visible: !d.showCamera
+        width: parent.width
+        height: visible ? implicitHeight : 0
+        wrapMode: Text.WordWrap
+        color: Theme.palette.baseColor1
+        font.pixelSize: Theme.tertiaryTextFontSize
+        horizontalAlignment: Text.AlignHCenter
+        text: qsTr("Ensure both devices are on the same network")
+    }
+
     StatusBaseText {
         visible: d.showCamera && cameraLoader.item.camera ? true : false
         width: parent.width
         height: visible ? implicitHeight : 0
         wrapMode: Text.WordWrap
         color: Theme.palette.baseColor1
+        font.pixelSize: Theme.tertiaryTextFontSize
         horizontalAlignment: Text.AlignHCenter
         text: qsTr("Ensure that the QR code is in focus to scan")
     }

ui/imports/shared/views/SyncingEnterCode.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
 
@@ -17,13 +19,14 @@ ColumnLayout {
     property string  syncCodeErrorMessage: qsTr("This does not look like a sync code")
     property string  syncCodeLabel: qsTr("Paste sync code")
 
-    property var validateConnectionString: function(){}
+    property var validateConnectionString: function(stringValue) { return true }
 
     readonly property bool syncViaQr:  !switchTabBar.currentIndex
 
     signal displayInstructions()
     signal proceed(string connectionString)
 
+    spacing: 8
 
     StatusSwitchTabBar {
         id: switchTabBar
@@ -44,6 +47,7 @@ ColumnLayout {
     StackLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: Math.max(syncQr.implicitHeight, syncCode.implicitHeight)
+        Layout.topMargin: 24
         currentIndex: switchTabBar.currentIndex
 
         // StackLayout doesn't support alignment, so we create an `Item` wrappers
@@ -68,14 +72,15 @@ ColumnLayout {
             }
         }
 
-        Item {
+        ColumnLayout {
+            spacing: 20
             StatusSyncCodeInput {
                 id: syncCode
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
-                width: 424
+                Layout.preferredWidth: 424
 
                 mode: StatusSyncCodeInput.Mode.WriteMode
-                label:root.syncCodeLabel
+                label: root.syncCodeLabel
                 input.placeholderText: qsTr("eg. %1").arg("0x2Ef19")
 
                 validators: [
@@ -91,6 +96,14 @@ ColumnLayout {
                     root.proceed(syncCode.text)
                 }
             }
+            StatusBaseText {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
+                horizontalAlignment: Text.AlignHCenter
+                color: Theme.palette.baseColor1
+                font.pixelSize: Theme.tertiaryTextFontSize
+                text: qsTr("Ensure both devices are on the same network")
+            }
         }
     }