fix(Wallet/LeftTabView): style fixes

Align the Wallet left section navigation bar to the design

Fixes #6479
Fixes #6480

- simplify using layouts
- fix margins/spacing
- fix font sizes and weights

ui/app/AppLayouts/Wallet/views/LeftTabView.qml

@@ -17,140 +17,132 @@ import "../popups"
 import "../stores"
 
 Rectangle {
-    id: walletInfoContainer
+    id: root
 
     property var changeSelectedAccount: function(){}
     property var showSavedAddresses: function(showSavedAddresses){}
     property var emojiPopup: null
 
     function onAfterAddAccount () {
-        walletInfoContainer.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
+        root.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
     }
 
     color: Style.current.secondaryMenuBackground
 
-    StyledText {
-        id: title
-        text: qsTr("Wallet")
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
-        font.weight: Font.Bold
-        font.pixelSize: 17
-    }
-
-    Item {
-        id: walletValueTextContainer
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.top: title.bottom
-        anchors.topMargin: Style.current.padding
-        height: childrenRect.height
-
-        StyledTextEdit {
-            id: walletAmountValue
-            color: Style.current.textColor
-            text: {
-                Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
-            }
-            selectByMouse: true
-            cursorVisible: true
-            readOnly: true
-            anchors.left: parent.left
-            font.weight: Font.Medium
-            font.pixelSize: 30
-        }
-
-        StyledText {
-            id: totalValue
-            color: Style.current.secondaryText
-            text: qsTr("Total value")
-            anchors.left: walletAmountValue.left
-            anchors.top: walletAmountValue.bottom
-            font.weight: Font.Medium
-            font.pixelSize: 13
-        }
-    }
-
     AddAccountModal {
         id: addAccountModal
         anchors.centerIn: parent
-        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
+        onAfterAddAccount: root.onAfterAddAccount()
-        emojiPopup: walletInfoContainer.emojiPopup
+        emojiPopup: root.emojiPopup
     }
 
-    ScrollView {
+    ColumnLayout {
-        anchors.bottom: parent.bottom
+        anchors.fill: parent
-        anchors.bottomMargin: btnSavedAddresses.height + Style.current.padding
+        anchors.margins: Style.current.padding
-        anchors.top: walletValueTextContainer.bottom
+        anchors.bottomMargin: Style.current.smallPadding
-        anchors.topMargin: Style.current.padding
+        spacing: Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: 272
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-        clip: true
 
-        ListView {
+        StyledText {
-            id: listView
+            Layout.fillWidth: true
+            text: qsTr("Wallet")
+            font.weight: Font.Bold
+            font.pixelSize: 17
+        }
 
-            spacing: 5
+        Item {
-            anchors.top: parent.top
+            height: childrenRect.height
-            width: parent.width
+            Layout.fillWidth: true
-            height: parent.height
+
-            boundsBehavior: Flickable.StopAtBounds
+            StyledTextEdit {
+                id: walletAmountValue
+                color: Style.current.textColor
+                text: {
+                    Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
+                }
+                selectByMouse: true
+                cursorVisible: true
+                readOnly: true
+                width: parent.width
+                font.weight: Font.Medium
+                font.pixelSize: 22
+            }
+
+            StyledText {
+                id: totalValue
+                color: Style.current.secondaryText
+                text: qsTr("Total value")
+                width: parent.width
+                anchors.top: walletAmountValue.bottom
+                anchors.topMargin: 4
+                font.pixelSize: 12
+            }
+        }
+
+        ScrollView {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.halfPadding
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
             clip: true
 
-            delegate: StatusListItem {
+            ListView {
-                width: parent.width
+                id: listView
-                highlighted: RootStore.currentAccount.name === model.name
-                title: model.name
-                subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
-                icon.emoji: !!model.emoji ? model.emoji: ""
-                icon.color: model.color
-                icon.name: !model.emoji ? "filled-account": ""
-                icon.letterSize: 14
-                icon.isLetterIdenticon: !!model.emoji ? true : false
-                icon.background.color: Theme.palette.primaryColor3
-                onClicked: {
-                    changeSelectedAccount(index)
-                    showSavedAddresses(false)
-                }
-            }
 
-            footer: Item {
+                spacing: Style.current.smallPadding
+                anchors.top: parent.top
                 width: parent.width
-                height: addAccountBtn.height + Style.current.xlPadding
+                height: parent.height
-                StatusButton {
+                boundsBehavior: Flickable.StopAtBounds
-                    id: addAccountBtn
+                clip: true
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.margins: Style.current.bigPadding
-                    text: qsTr("Add account")
-                    onClicked: addAccountModal.open()
-                }
-            }
 
-            model: RootStore.accounts
+                delegate: StatusListItem {
-//            model: RootStore.exampleWalletModel
+                    width: ListView.view.width
+                    highlighted: RootStore.currentAccount.name === model.name
+                    title: model.name
+                    subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
+                    icon.emoji: !!model.emoji ? model.emoji: ""
+                    icon.color: model.color
+                    icon.name: !model.emoji ? "filled-account": ""
+                    icon.letterSize: 14
+                    icon.isLetterIdenticon: !!model.emoji ? true : false
+                    icon.background.color: Theme.palette.primaryColor3
+                    statusListItemTitle.font.weight: Font.Medium
+                    onClicked: {
+                        changeSelectedAccount(index)
+                        showSavedAddresses(false)
+                    }
+                }
+
+                footer: Item {
+                    width: ListView.view.width
+                    height: addAccountBtn.height + Style.current.xlPadding
+                    StatusButton {
+                        id: addAccountBtn
+                        anchors.top: parent.top
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.margins: Style.current.bigPadding
+                        text: qsTr("Add account")
+                        onClicked: addAccountModal.open()
+                    }
+                }
+
+                model: RootStore.accounts
+                // model: RootStore.exampleWalletModel
+            }
         }
-    }
 
-    StatusNavigationListItem {
+        Item { Layout.fillHeight: true }
-        id: btnSavedAddresses
 
-        anchors.bottom: parent.bottom
+        StatusButton {
-        anchors.bottomMargin: Style.current.halfPadding
+            size: StatusBaseButton.Size.Small
-        anchors.left: parent.left
+            topPadding: Style.current.halfPadding
-        anchors.leftMargin: Style.current.smallPadding
+            bottomPadding: Style.current.halfPadding
-        anchors.right: parent.right
+            normalColor: "transparent"
-        anchors.rightMargin: Style.current.smallPadding
+            hoverColor: Theme.palette.primaryColor3
-
+            font.weight: Font.Medium
-        title: qsTr("Saved addresses")
+            text: qsTr("Saved addresses")
-        icon.name: "address"
+            icon.name: "address"
-        onClicked: {
+            onClicked: showSavedAddresses(true)
-            showSavedAddresses(true)
         }
     }
 }