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,37 +17,41 @@ 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
 
+    AddAccountModal {
+        id: addAccountModal
+        anchors.centerIn: parent
+        onAfterAddAccount: root.onAfterAddAccount()
+        emojiPopup: root.emojiPopup
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: Style.current.padding
+        anchors.bottomMargin: Style.current.smallPadding
+        spacing: Style.current.padding
+
         StyledText {
-        id: title
+            Layout.fillWidth: true
             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
+            Layout.fillWidth: true
 
             StyledTextEdit {
                 id: walletAmountValue
@@ -58,36 +62,25 @@ Rectangle {
                 selectByMouse: true
                 cursorVisible: true
                 readOnly: true
-            anchors.left: parent.left
+                width: parent.width
                 font.weight: Font.Medium
-            font.pixelSize: 30
+                font.pixelSize: 22
             }
 
             StyledText {
                 id: totalValue
                 color: Style.current.secondaryText
                 text: qsTr("Total value")
-            anchors.left: walletAmountValue.left
+                width: parent.width
                 anchors.top: walletAmountValue.bottom
-            font.weight: Font.Medium
+                anchors.topMargin: 4
-            font.pixelSize: 13
+                font.pixelSize: 12
             }
         }
 
-    AddAccountModal {
-        id: addAccountModal
-        anchors.centerIn: parent
-        onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
-        emojiPopup: walletInfoContainer.emojiPopup
-    }
-
         ScrollView {
-        anchors.bottom: parent.bottom
+            Layout.fillWidth: true
-        anchors.bottomMargin: btnSavedAddresses.height + Style.current.padding
+            Layout.topMargin: Style.current.halfPadding
-        anchors.top: walletValueTextContainer.bottom
-        anchors.topMargin: 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
@@ -95,7 +88,7 @@ Rectangle {
             ListView {
                 id: listView
 
-            spacing: 5
+                spacing: Style.current.smallPadding
                 anchors.top: parent.top
                 width: parent.width
                 height: parent.height
@@ -103,7 +96,7 @@ Rectangle {
                 clip: true
 
                 delegate: StatusListItem {
-                width: parent.width
+                    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()
@@ -113,6 +106,7 @@ Rectangle {
                     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)
@@ -120,7 +114,7 @@ Rectangle {
                 }
 
                 footer: Item {
-                width: parent.width
+                    width: ListView.view.width
                     height: addAccountBtn.height + Style.current.xlPadding
                     StatusButton {
                         id: addAccountBtn
@@ -137,20 +131,18 @@ Rectangle {
             }
         }
 
-    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"
-        onClicked: {
+            onClicked: showSavedAddresses(true)
-            showSavedAddresses(true)
         }
     }
 }