uiux(Wallet): improve asset manager usability and UI

This commit does a couple of things:

- It changes a label in the wallet menu from "Add/remove Token" to "Manage Assets"
  as it has been designed
- It changes the asset list so a hover state could be introduced. Previously there
  was no visual effect or response to mouse hover on asset items
- It improves usability of the asset list by making an entire asset item
  clickable to toggle the asset in the wallet. This was not possible before.
  Users had to click the checkbox achieve this effect

Closes #1631

ui/app/AppLayouts/Wallet/TokenSettingsModal.qml

@@ -2,23 +2,28 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import "../../../imports"
 import "../../../shared"
+import "../../../shared/status"
 import "./components"
 
 ModalPopup {
     id: popup
-    //% "Add/Remove Tokens"
+    title: qsTr("Manage Assets")
-    title: qsTrId("add/remove-tokens")
     
     
     TokenSettingsModalContent {
         id: settingsModalContent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+        anchors.leftMargin: Style.current.padding
+        anchors.rightMargin: Style.current.padding
     }
 
-    footer: StyledButton {
+    footer: StatusButton {
         anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
         //% "Add custom token"
-        label: qsTrId("add-custom-token")
+        text: qsTrId("add-custom-token")
         anchors.top: parent.top
         onClicked: addCustomTokenModal.openEditable()
     }

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -148,8 +148,7 @@ Item {
                     }
                 }
                 Action {
-                    //% "Add/Remove Tokens"
+                    text: qsTr("Manage Assets")
-                    text: qsTrId("add/remove-tokens")
                     icon.source: "../../img/add_remove_token.svg"
                     icon.width: 16
                     icon.height: 16

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

@@ -10,7 +10,6 @@ import "../data/"
 
 Item {
     id: modalBody
-    anchors.fill: parent
 
     SearchBox {
         id: searchBox
@@ -21,25 +20,26 @@ Item {
 
     Component {
         id: tokenComponent
-        Item {
+        Rectangle {
             id: tokenContainer
-            anchors.left: parent.left
+            property bool hovered: false
-            anchors.leftMargin: Style.current.smallPadding
+            width: modalBody.width
-            width: 300
+            anchors.topMargin: Style.current.smallPadding
+            color: hovered ? Style.current.backgroundHover : "transparent"
             property bool isVisible: symbol && (searchBox.text == "" || name.toLowerCase().includes(searchBox.text.toLowerCase()) || symbol.toLowerCase().includes(searchBox.text.toLowerCase()))
 
             visible: isVisible
             height: isVisible ? 40 + Style.current.smallPadding : 0
+            radius: Style.current.radius
 
             Image {
                 id: assetInfoImage
                 width: 36
                 height: tokenContainer.isVisible !== "" ? 36 : 0
-                anchors.top: parent.top
-                anchors.topMargin: 0
                 source: hasIcon ? "../../../img/tokens/" + symbol + ".png" : "../../../img/tokens/0-native.png"
                 anchors.left: parent.left
-                anchors.leftMargin: 0
+                anchors.leftMargin: Style.current.smallPadding
+                anchors.verticalCenter: parent.verticalCenter
             }
             StyledText {
                 id: assetSymbol
@@ -53,26 +53,40 @@ Item {
             StyledText {
                 id: assetFullTokenName
                 text: name || ""
-                anchors.bottom: assetInfoImage.bottom
+                anchors.top: assetSymbol.bottom
-                anchors.bottomMargin: 0
+                anchors.topMargin: 0
                 anchors.left: assetInfoImage.right
                 anchors.leftMargin: Style.current.smallPadding
                 color: Style.current.darkGrey
                 font.pixelSize: 15
-                width: 330
             }
             StatusCheckBox  {
                 id: assetCheck
                 checked: walletModel.hasAsset("0x123", symbol)
-                anchors.left: assetFullTokenName.right
+                anchors.right: parent.right
-                anchors.leftMargin: Style.current.smallPadding
+                anchors.rightMargin: Style.current.smallPadding
                 onClicked: walletModel.toggleAsset(symbol)
+                anchors.verticalCenter: parent.verticalCenter
             }
 
             MouseArea {
-                acceptedButtons: Qt.RightButton
+                acceptedButtons: Qt.LeftButton | Qt.RightButton
+                cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
-                onClicked: contextMenu.popup(assetSymbol.x - 100, assetSymbol.y + 25)
+                hoverEnabled: true
+                onClicked: function (event) {
+                    if (event.button === Qt.RightButton) {
+                        return contextMenu.popup(assetSymbol.x - 100, assetSymbol.y + 25)
+                    }
+                    assetCheck.checked = !assetCheck.checked
+                    walletModel.toggleAsset(symbol)
+                }
+                onEntered: {
+                    tokenContainer.hovered = true
+                }
+                onExited: {
+                    tokenContainer.hovered = false
+                }
                 PopupMenu {
                     id: contextMenu
                     Action {
@@ -115,6 +129,7 @@ Item {
 
             Column {
                 id: customTokens
+                spacing: Style.current.halfPadding
 
                 StyledText {
                     id: customLbl
@@ -145,6 +160,7 @@ Item {
                 anchors.top: customTokens.bottom
                 anchors.topMargin: Style.current.smallPadding
                 id: defaultTokens
+                spacing: Style.current.halfPadding
 
                 StyledText {
                     id: defaultLbl
@@ -160,6 +176,8 @@ Item {
                     delegate: tokenComponent
                     anchors.top: defaultLbl.bottom
                     anchors.topMargin: Style.current.smallPadding
+                    anchors.left: parent.left
+                    anchors.right: parent.right
                 }
             }
         }