feat(@desktop/wallet): fixing some issues in UI alignments

storybook/pages/SendModalFooterPage.qml

@@ -22,8 +22,9 @@ SplitView {
             width: 595
 
             loading: loadingCheckbox.checked
+            error: errorCheckbox.checked
 
-            onReviewSendClicked: console.log("review send clicked")
+            onReviewSendClicked: logs.logEvent("review send clicked")
         }
     }
 
@@ -41,11 +42,16 @@ SplitView {
                 text: "loading"
             }
 
+            CheckBox {
+                id: errorCheckbox
+                text: "error"
+            }
+
             Button {
                 text: "set fees values"
                 onClicked: {
                     loadingCheckbox.checked = false
-                    footer.estimateTime = "~60s"
+                    footer.estimatedTime = "~60s"
                     footer.estimatedFees = "1.45 EUR"
                 }
             }

storybook/pages/SimpleSendModalPage.qml

@@ -121,10 +121,16 @@ SplitView {
             }
         })
 
-        onFetchFees: {
-            console.log("Fetch fees...")
-            d.setFees()
+        onFormChanged: {
+            estimatedCryptoFees = ""
+            estimatedFiatFees = ""
+            estimatedTime = ""
+            if(formCorrectlyFilled) {
+                console.log("Fetch fees...")
+                d.setFees()
+            }
         }
+
         onReviewSendClicked: console.log("Review send clicked")
 
         Binding on selectedAccountAddress {
@@ -488,7 +494,7 @@ SplitView {
         }
     }
 
-    LogsAndControlsPanel {
+    Pane {
         SplitView.minimumHeight: 100
         SplitView.minimumWidth: 300
         SplitView.maximumWidth: 380

storybook/pages/SimpleTransactionsFeesPage.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core.Theme 0.1
 
@@ -9,7 +10,6 @@ import AppLayouts.Wallet.panels 1.0
 
 SplitView {
     orientation: Qt.Vertical
-    Logs { id: logs }
 
     Rectangle {
         SplitView.fillHeight: true
@@ -23,20 +23,26 @@ SplitView {
             cryptoFees: qsTr("0.0007 ETH")
             fiatFees: qsTr("1.45 EUR")
             loading: loadingCheckbox.checked
+            error: errorCheckbox.checked
         }
     }
 
-    LogsAndControlsPanel {
+    Pane {
         id: logsAndControlsPanel
 
         SplitView.minimumHeight: 100
         SplitView.preferredHeight: 200
 
-        logsView.logText: logs.logText
+        ColumnLayout {
+            CheckBox {
+                id: loadingCheckbox
+                text: "loading"
+            }
 
-        CheckBox {
-            id: loadingCheckbox
-            text: "loading"
+            CheckBox {
+                id: errorCheckbox
+                text: "error"
+            }
         }
     }
 }

ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml

@@ -11,7 +11,7 @@ Rectangle {
     border.width: 1
     border.color: Theme.palette.directColor7
     radius: 8
-    color: root.active ? Theme.palette.baseColor2 : "transparent"
+    color: root.active ? Theme.palette.directColor8 : "transparent"
     HoverHandler {
         cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
     }

ui/app/AppLayouts/Wallet/controls/TokenSelector.qml

@@ -17,9 +17,6 @@ Control {
     /** Expected model structure: see SearchableCollectiblesPanel::model **/
     property alias collectiblesModel: tokenSelectorPanel.collectiblesModel
 
-    /** Exposes insatnce of popup **/
-    property var popup: dropdown
-
     /** Sets size of the TokenSelectorButton **/
     property alias size: tokenSelectorButton.size
 
@@ -45,6 +42,10 @@ Control {
         }
     }
 
+    function close() {
+        dropdown.close()
+    }
+
     QObject {
         id: d
 

ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml

@@ -65,7 +65,7 @@ RowLayout {
     /** signal to propagate that a collectible was selected **/
     signal collectibleSelected(string key)
     /** signal to propagate that a network was selected **/
-    signal networkSelected(string chainId)
+    signal networkSelected(int chainId)
 
     /** input function for programatic selection of token
     (asset/collectible/collection) **/
@@ -79,7 +79,7 @@ RowLayout {
 
     // if not closed during scrolling they move with the header and it feels undesirable
     onIsScrollingChanged: {
-        tokenSelector.popup.close()
+        tokenSelector.close()
         networkFilter.control.popup.close()
     }
 
@@ -135,7 +135,7 @@ RowLayout {
 
         Layout.alignment: Qt.AlignTop
 
-        control.bottomPadding: 0
+        control.popup.y: networkFilter.height
 
         flatNetworks: root.networksModel
 

ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -16,22 +16,23 @@ Control {
     property string fiatFees
     /** property to set loading state in the fees component **/
     property bool loading
+    /** property to set error state in the fees component **/
+    property bool error
 
     QtObject {
         id: d
 
-        readonly property string loadingText: "----------"
+        readonly property string loadingText: "XXXXXXXXXX"
     }
 
     implicitHeight: 64
 
     padding: Theme.padding
-    topPadding: 12
-    bottomPadding: 12
+    verticalPadding: 12
 
     background: Rectangle {
         color: Theme.palette.indirectColor1
-        radius: 8
+        radius: Theme.radius
     }
 
     contentItem: RowLayout {
@@ -64,7 +65,8 @@ Control {
                 Layout.fillWidth: true
 
                 loading: root.loading
-                customColor: Theme.palette.baseColor1
+                customColor: root.error ? Theme.palette.dangerColor1:
+                                          Theme.palette.baseColor1
                 lineHeightMode: Text.FixedHeight
                 lineHeight: 22
 
@@ -78,7 +80,8 @@ Control {
             Layout.alignment: Qt.AlignRight
 
             loading: root.loading
-            customColor: Theme.palette.baseColor1
+            customColor: root.error ? Theme.palette.dangerColor1:
+                                      Theme.palette.baseColor1
             lineHeightMode: Text.FixedHeight
             lineHeight: 22
 

ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml

@@ -1,10 +1,11 @@
-import QtQuick 2.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Popups.Dialog 0.1
 
-Rectangle {
+Control {
     id: root
 
     /**
@@ -48,10 +49,10 @@ Rectangle {
     Not using visible property directly here as the animation on
     implicitHeight doesnt work
     **/
-    property bool isScrolling
+    property bool stickyHeaderVisible
 
     /** input property for programatic selection of network **/
-    property int selectedChainId: -1
+    property int selectedChainId
 
     /** signal to propagate that an asset was selected **/
     signal assetSelected(string key)
@@ -60,56 +61,64 @@ Rectangle {
     /** signal to propagate that a collectible was selected **/
     signal collectibleSelected(string key)
     /** signal to propagate that a network was selected **/
-    signal networkSelected(string chainId)
+    signal networkSelected(int chainId)
 
     /** input function for programatic selection of token
     (asset/collectible/collection) **/
     function setToken(name, icon, key) {
         sendModalHeader.setToken(name, icon, key)
     }
 
-    enabled: root.isScrolling
-    color: Theme.palette.baseColor3
-    radius: 8
+    QtObject {
+        id: d
+        readonly property int bottomMargin: 12
+    }
 
-    implicitHeight: root.isScrolling ?
-                        sendModalHeader.implicitHeight +
-                        sendModalHeader.anchors.topMargin +
-                        sendModalHeader.anchors.bottomMargin:
-                        0
-    implicitWidth: sendModalHeader.implicitWidth +
-                   sendModalHeader.anchors.leftMargin +
-                   sendModalHeader.anchors.rightMargin
+    implicitHeight: root.stickyHeaderVisible ?
+                        implicitContentHeight + Theme.padding + d.bottomMargin : 0
 
+    horizontalPadding: Theme.xlPadding
+    bottomPadding: d.bottomMargin
+    topPadding: root.stickyHeaderVisible ? Theme.padding : -implicitContentHeight - Theme.padding
 
-    // Drawer animation for stickey heade
     Behavior on implicitHeight {
         NumberAnimation { duration: 350 }
     }
-
-    // cover for the bottom rounded corners
-    Rectangle {
-        width: parent.width
-        height: parent.radius
-        anchors.bottom: parent.bottom
-        color: parent.color
+    Behavior on topPadding {
+        NumberAnimation { duration: 350 }
     }
 
-    SendModalHeader {
-        id: sendModalHeader
+    background: Rectangle {
+        color: root.implicitHeight > d.bottomMargin ? Theme.palette.baseColor3: Theme.palette.transparent
+        radius: 8
 
-        width: parent.width
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 2
+            samples: 37
+            color: Theme.palette.dropShadow
+        }
+
+        // cover for the bottom rounded corners
+        Rectangle {
+            width: parent.width
+            height: parent.radius
+            anchors.bottom: parent.bottom
+            color: parent.color
+        }
 
-        anchors {
-            fill: parent
-            leftMargin: Theme.xlPadding
-            rightMargin: Theme.xlPadding
-            topMargin: 16
-            bottomMargin: 12
+        StatusDialogDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
         }
+    }
+
+    contentItem: SendModalHeader {
+        id: sendModalHeader
 
         isStickyHeader: true
-        isScrolling: root.isScrolling
+        isScrolling: root.stickyHeaderVisible
 
         networksModel: root.networksModel
         assetsModel: root.assetsModel
@@ -122,18 +131,4 @@ Rectangle {
         onAssetSelected: root.assetSelected(key)
         onNetworkSelected: root.networkSelected(chainId)
     }
-
-    StatusDialogDivider {
-        anchors.bottom: parent.bottom
-        width: parent.width
-    }
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        horizontalOffset: 0
-        verticalOffset: 2
-        samples: 37
-        color: Theme.palette.dropShadow
-    }
 }
-