fix: wallet ui errors

Fixes # 472

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -16,13 +16,12 @@ Item {
 
     StyledText {
         id: title
-        x: 772
         //% "Chat"
         text: qsTrId("chat")
         anchors.top: parent.top
-        anchors.topMargin: 17
+        anchors.topMargin: Style.current.padding
-        font.bold: true
         anchors.horizontalCenter: parent.horizontalCenter
+        font.weight: Font.Bold
         font.pixelSize: 17
     }
 
@@ -40,8 +39,8 @@ Item {
 
     SearchBox {
         id: searchBox
-        anchors.top: parent.top
+        anchors.top: title.bottom
-        anchors.topMargin: 59
+        anchors.topMargin: Style.current.padding
         anchors.right: addChat.left
         anchors.rightMargin: Style.current.padding
         anchors.left: parent.left
@@ -52,8 +51,8 @@ Item {
         id: addChat
         anchors.right: parent.right
         anchors.rightMargin: Style.current.padding
-        anchors.top: parent.top
+        anchors.top: title.bottom
-        anchors.topMargin: 59
+        anchors.topMargin: Style.current.padding
     }
 
     StackLayout {

ui/app/AppLayouts/Wallet/AssetsTab.qml

@@ -49,7 +49,7 @@ Item {
             }
             StyledText {
                 id: assetValue
-                text: value
+                text: value.toUpperCase()
                 anchors.right: parent.right
                 anchors.rightMargin: 0
                 font.pixelSize: 15
@@ -58,7 +58,7 @@ Item {
             StyledText {
                 id: assetFiatValue
                 color: Style.current.darkGrey
-                text: fiatValue
+                text: fiatValue.toUpperCase()
                 anchors.right: parent.right
                 anchors.rightMargin: 0
                 anchors.bottom: parent.bottom

ui/app/AppLayouts/Wallet/LeftTab.qml

@@ -17,21 +17,10 @@ Item {
     }
     id: walletInfoContainer
 
-    Rectangle {
+
-        id: walletInfoHeader
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        height: walletValueTextContainer.y + walletValueTextContainer.height + Style.current.padding
-        color: Style.current.background
-        z: 1
-        border.width: 0
 
     StyledText {
         id: title
-            x: 143
-            y: 16
         //% "Wallet"
         text: qsTrId("wallet")
         anchors.top: parent.top
@@ -43,13 +32,13 @@ Item {
 
     Item {
         id: walletValueTextContainer
-            x: 16
-            y: 52
         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: walletAmountValue.height + totalValue.height
+        height: childrenRect.height
 
         StyledTextEdit {
             id: walletAmountValue
@@ -59,7 +48,6 @@ Item {
             cursorVisible: true
             readOnly: true
             anchors.left: parent.left
-                anchors.leftMargin: 1
             font.weight: Font.Medium
             font.pixelSize: 30
         }
@@ -69,22 +57,17 @@ Item {
             color: Style.current.darkGrey
             text: "Total value"
             anchors.left: walletAmountValue.left
-                anchors.leftMargin: 0
             anchors.top: walletAmountValue.bottom
-                anchors.topMargin: 0
             font.weight: Font.Medium
             font.pixelSize: 13
         }
-        }
 
         AddAccount {
-            anchors.topMargin: 3
+            anchors.top: parent.top
-            anchors.top: walletValueTextContainer.top
             anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
+        }
+    }
 
-        }
-    }
 
     Component {
         id: walletDelegate
@@ -145,7 +128,7 @@ Item {
             }
             StyledText {
                 id: walletBalance
-                text: balance
+                text: balance.toUpperCase()
                 anchors.top: parent.top
                 anchors.topMargin: Style.current.smallPadding
                 anchors.right: parent.right
@@ -166,7 +149,8 @@ Item {
     ListView {
         id: listView
         anchors.bottom: parent.bottom
-        anchors.top: walletInfoHeader.bottom
+        anchors.top: walletValueTextContainer.bottom
+        anchors.topMargin: Style.current.padding
         spacing: 5
         anchors.right: parent.right
         anchors.left: parent.left

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../imports"
 import "../../../shared"
+import "./components"
 
 Item {
     property var currentAccount: walletModel.currentAccount
@@ -44,7 +45,7 @@ Item {
 
     StyledText {
         id: walletBalance
-        text: currentAccount.balance
+        text: currentAccount.balance.toUpperCase()
         anchors.left: separatorDot.right
         anchors.leftMargin: 8
         anchors.verticalCenter: title.verticalCenter
@@ -89,7 +90,7 @@ Item {
 
     Item {
         property int btnMargin: 8
-        property int btnOuterMargin: 32
+        property int btnOuterMargin: Style.current.bigPadding
         id: walletMenu
         width: sendBtn.width + receiveBtn.width + settingsBtn.width
                + walletMenu.btnOuterMargin * 2
@@ -98,87 +99,39 @@ Item {
         anchors.right: parent.right
         anchors.rightMargin: 16
 
-        Item {
+        HeaderButton {
             id: sendBtn
-            width: sendImg.width + sendText.width + walletMenu.btnMargin
+            imageSource: "../../img/send.svg"
-            height: sendText.height
+            text: qsTr("Send")
-
+            onClicked: function () {
-            SVGImage {
+                sendModal.open()
-                id: sendImg
+            }
-                width: 12
-                height: 12
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/diagonalArrow.svg"
         }
 
-            StyledText {
+        HeaderButton {
-                id: sendText
-                text: "Send"
-                anchors.left: sendImg.right
-                anchors.leftMargin: walletMenu.btnMargin
-                font.pixelSize: 13
-                color: Style.current.blue
-            }
-            MouseArea {
-                anchors.rightMargin: -Style.current.smallPadding
-                anchors.leftMargin: -Style.current.smallPadding
-                anchors.bottomMargin: -Style.current.smallPadding
-                anchors.topMargin: -Style.current.smallPadding
-                anchors.fill: parent
-                onClicked: sendModal.open()
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
-        Item {
             id: receiveBtn
-            width: receiveImg.width + receiveText.width + walletMenu.btnMargin
+            imageSource: "../../img/send.svg"
+            flipImage: true
+            text: qsTr("Receive")
+            onClicked: function () {
+                // Nothing for now
+            }
             anchors.left: sendBtn.right
             anchors.leftMargin: walletMenu.btnOuterMargin
-
-            SVGImage {
-                id: receiveImg
-                width: 12
-                height: 12
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/diagonalArrow.svg"
-                rotation: 180
         }
 
-            StyledText {
+        HeaderButton {
-                id: receiveText
-                text: "Receive"
-                anchors.left: receiveImg.right
-                anchors.leftMargin: walletMenu.btnMargin
-                font.pixelSize: 13
-                color: Style.current.blue
-            }
-        }
-        Item {
             id: settingsBtn
+            imageSource: "../../img/settings.svg"
+            flipImage: true
+            text: ""
+            onClicked: function () {
+                // FIXME the button is too much on the right, so the arrow can never align
+                let x = settingsBtn.x + settingsBtn.width / 2 - newSettingsMenu.width / 2
+                newSettingsMenu.popup(x, settingsBtn.height)
+            }
             anchors.left: receiveBtn.right
             anchors.leftMargin: walletMenu.btnOuterMargin
-            width: settingsImg.width
-            height: settingsImg.height
-            SVGImage {
-                id: settingsImg
-                width: 18
-                height: 18
-                fillMode: Image.PreserveAspectFit
-                source: "../../img/settings.svg"
-            }
-
-            MouseArea {
-                anchors.rightMargin: -Style.current.smallPadding
-                anchors.leftMargin: -Style.current.smallPadding
-                anchors.bottomMargin: -Style.current.smallPadding
-                anchors.topMargin: -Style.current.smallPadding
-                anchors.fill: parent
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    let x = settingsImg.x + settingsImg.width / 2 - newSettingsMenu.width / 2
-                    newSettingsMenu.popup(x, settingsImg.height + 10)
-                }
 
             PopupMenu {
                 id: newSettingsMenu
@@ -210,7 +163,6 @@ Item {
             }
         }
     }
-    }
 }
 
 /*##^##

ui/app/AppLayouts/Wallet/components/HeaderButton.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.13
+import "../../../../imports"
+import "../../../../shared"
+
+
+Rectangle {
+    property string text: ""
+    property url imageSource
+    property bool flipImage: false
+    property var onClicked: function () {}
+
+    id: headerButton
+    width: buttonImage.width + buttonText.width + Style.current.smallPadding * 2
+           + (text === "" ? 0 : walletMenu.btnMargin)
+    height: buttonText.height + Style.current.smallPadding * 2
+    border.width: 0
+    color: Style.current.transparent
+    radius: Style.current.radius
+
+    SVGImage {
+        id: buttonImage
+        height: 18
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+        source: imageSource
+        rotation: flipImage ? 180 : 0
+    }
+
+    StyledText {
+        id: buttonText
+        visible: !!headerButton.text
+        text: headerButton.text
+        anchors.left: buttonImage.right
+        anchors.leftMargin: walletMenu.btnMargin
+        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: 13
+        color: Style.current.blue
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            parent.color = Style.current.border
+        }
+        onExited: {
+            parent.color = Style.current.transparent
+        }
+        onClicked: {
+            headerButton.onClicked()
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
+}

ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml

@@ -17,13 +17,14 @@ Item {
     }
 
     ListView {
+        id: tokenListView
+        spacing: 0
+        clip: true
         anchors.top: searchBox.bottom
+        anchors.topMargin: Style.current.smallPadding
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        spacing: 0
-        id: tokenListView
-        anchors.topMargin: Style.current.smallPadding
         model: Tokens {}
         ScrollBar.vertical: ScrollBar { active: true }
 

ui/app/img/diagonalArrow.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 0C4.44775 -4.82789e-08 4 0.447754 4 1C4 1.55225 4.44775 2 5 2L8.58594 2L0.292969 10.2928C-0.0976562 10.6835 -0.0976563 11.3165 0.292969 11.7072C0.683349 12.0977 1.31665 12.0977 1.70703 11.7072L10 3.41419L10 7C10 7.55225 10.4478 8 11 8C11.5522 8 12 7.55225 12 7L12 1C12 0.447755 11.5522 5.72816e-07 11 5.24537e-07L5 0Z" fill="#4360DF"/>
-</svg>

ui/app/img/send.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.61923 15.1568L1.00164 17.8817C0.45399 18.1072 -0.0905163 17.553 0.144557 17.0094L7.30153 0.458929C7.42199 0.180353 7.69648 0 7.99998 0C8.30349 0 8.57797 0.180354 8.69844 0.458929L15.8554 17.0094C16.0905 17.553 15.546 18.1072 14.9983 17.8817L8.38073 15.1568C8.13683 15.0563 7.86313 15.0564 7.61923 15.1568ZM7.24998 13.4818C7.24998 13.6096 7.16631 13.7211 7.04811 13.7698L3.47933 15.2393C3.06444 15.4101 2.65194 14.9903 2.83002 14.5785L6.77052 5.46607C6.87825 5.21695 7.24998 5.29388 7.24998 5.5653V13.4818ZM8.74998 13.4818C8.74998 13.6096 8.83366 13.7211 8.95186 13.7698L12.5206 15.2393C12.9355 15.4101 13.348 14.9903 13.1699 14.5785L9.22945 5.46607C9.12172 5.21695 8.74998 5.29388 8.74998 5.5653V13.4818Z" fill="#4360DF"/>
+</svg>

ui/nim-status-client.pro

@@ -74,6 +74,7 @@ DISTFILES += \
     app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \
     app/AppLayouts/Chat/components/EmojiPopup.qml \
     app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
+    app/AppLayouts/Wallet/components/HeaderButton.qml \
     fonts/InterStatus/InterStatus-Black.otf \
     fonts/InterStatus/InterStatus-BlackItalic.otf \
     fonts/InterStatus/InterStatus-Bold.otf \

ui/shared/StatusTabButton.qml

@@ -24,6 +24,7 @@ TabButton {
     }
 
     Rectangle {
+        visible: parent.checked
         color: Style.current.blue
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 0