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,75 +17,58 @@ 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
+    StyledText {
-            x: 143
+        id: title
-            y: 16
+        //% "Wallet"
-            //% "Wallet"
+        text: qsTrId("wallet")
-            text: qsTrId("wallet")
+        anchors.top: parent.top
-            anchors.top: parent.top
+        anchors.topMargin: Style.current.padding
-            anchors.topMargin: Style.current.padding
+        anchors.horizontalCenter: parent.horizontalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+        font.weight: Font.Bold
-            font.weight: Font.Bold
+        font.pixelSize: 17
-            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: walletModel.totalFiatBalance
+            selectByMouse: true
+            cursorVisible: true
+            readOnly: true
+            anchors.left: parent.left
+            font.weight: Font.Medium
+            font.pixelSize: 30
         }
 
-        Item {
+        StyledText {
-            id: walletValueTextContainer
+            id: totalValue
-            x: 16
+            color: Style.current.darkGrey
-            y: 52
+            text: "Total value"
-            anchors.left: parent.left
+            anchors.left: walletAmountValue.left
-            anchors.leftMargin: Style.current.padding
+            anchors.top: walletAmountValue.bottom
-            anchors.top: title.bottom
+            font.weight: Font.Medium
-            anchors.topMargin: Style.current.padding
+            font.pixelSize: 13
-            height: walletAmountValue.height + totalValue.height
-
-            StyledTextEdit {
-                id: walletAmountValue
-                color: Style.current.textColor
-                text: walletModel.totalFiatBalance
-                selectByMouse: true
-                cursorVisible: true
-                readOnly: true
-                anchors.left: parent.left
-                anchors.leftMargin: 1
-                font.weight: Font.Medium
-                font.pixelSize: 30
-            }
-
-            StyledText {
-                id: totalValue
-                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,114 +99,65 @@ 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 {
-                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 {
+
+        HeaderButton {
             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 {
-                id: receiveText
-                text: "Receive"
-                anchors.left: receiveImg.right
-                anchors.leftMargin: walletMenu.btnMargin
-                font.pixelSize: 13
-                color: Style.current.blue
-            }
         }
-        Item {
+
+        HeaderButton {
             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 {
+            PopupMenu {
-                anchors.rightMargin: -Style.current.smallPadding
+                id: newSettingsMenu
-                anchors.leftMargin: -Style.current.smallPadding
+                width: 280
-                anchors.bottomMargin: -Style.current.smallPadding
+                Action {
-                anchors.topMargin: -Style.current.smallPadding
+                    //% "Account Settings"
-                anchors.fill: parent
+                    text: qsTrId("account-settings")
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    icon.source: "../../img/walletIcon.svg"
-                cursorShape: Qt.PointingHandCursor
+                    onTriggered: {
-                onClicked: {
+                        accountSettingsModal.open()
-                    let x = settingsImg.x + settingsImg.width / 2 - newSettingsMenu.width / 2
+                    }
-                    newSettingsMenu.popup(x, settingsImg.height + 10)
                 }
-
+                Action {
-                PopupMenu {
+                    //% "Add/Remove Tokens"
-                    id: newSettingsMenu
+                    text: qsTrId("add/remove-tokens")
-                    width: 280
+                    icon.source: "../../img/add_remove_token.svg"
-                    Action {
+                    onTriggered: {
-                        //% "Account Settings"
+                        tokenSettingsModal.open()
-                        text: qsTrId("account-settings")
-                        icon.source: "../../img/walletIcon.svg"
-                        onTriggered: {
-                            accountSettingsModal.open()
-                        }
                     }
-                    Action {
+                }
-                        //% "Add/Remove Tokens"
+                Action {
-                        text: qsTrId("add/remove-tokens")
+                    //% "Set Currency"
-                        icon.source: "../../img/add_remove_token.svg"
+                    text: qsTrId("set-currency")
-                        onTriggered: {
+                    icon.source: "../../img/set_currency.svg"
-                            tokenSettingsModal.open()
+                    onTriggered: {
-                        }
+                        setCurrencyModal.open()
-                    }
-                    Action {
-                        //% "Set Currency"
-                        text: qsTrId("set-currency")
-                        icon.source: "../../img/set_currency.svg"
-                        onTriggered: {
-                            setCurrencyModal.open()
-                        }
                     }
                 }
             }

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/ModalPopup.qml

@@ -124,18 +124,18 @@ Popup {
         }
 
         Item {
-          id: footerContent
+            id: footerContent
-          visible: !!children[0]
+            visible: !!children[0]
-          height: children[0] && children[0].height
+            height: children[0] && children[0].height
-          width: parent.width
+            width: parent.width
-          anchors.top: separator2.bottom
+            anchors.top: separator2.bottom
-          anchors.left: parent.left
+            anchors.left: parent.left
-          anchors.right: parent.right
+            anchors.right: parent.right
-          anchors.bottom: parent.bottom
+            anchors.bottom: parent.bottom
-          anchors.topMargin: Style.current.padding
+            anchors.topMargin: Style.current.padding
-          anchors.bottomMargin: Style.current.padding
+            anchors.bottomMargin: Style.current.padding
-          anchors.rightMargin: Style.current.padding
+            anchors.rightMargin: Style.current.padding
-          anchors.leftMargin: Style.current.padding
+            anchors.leftMargin: Style.current.padding
         }
   }
 }

ui/shared/StatusTabButton.qml

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