Settings: rework wallet page

components/SettingsListItem.qml

@@ -1,41 +1,71 @@
 import QtQuick 2.9
 import QtQuick.Layouts 1.1
+import FontAwesome 1.0
 
 import "../components" as MoneroComponents
 
 ColumnLayout {
-    property alias buttonText: button.text
+    id: settingsListItem
-    property alias description: description.text
+    property alias iconText: iconLabel.text
-    property alias title: title.text
+    property alias description: area.text
+    property alias title: header.text
+    property bool isLast: false
     signal clicked()
 
-    id: settingsListItem
     Layout.fillWidth: true
     spacing: 0
 
     Rectangle {
-        // divider
+        id: root
-        Layout.preferredHeight: 1
         Layout.fillWidth: true
-        Layout.bottomMargin: 8
+        Layout.minimumHeight: 75
-        color: MoneroComponents.Style.dividerColor
+        Layout.preferredHeight: rect.height + 15
-        opacity: MoneroComponents.Style.dividerOpacity
+        color: "transparent"
-    }
 
-    RowLayout {
+        Rectangle {
-        Layout.fillWidth: true
+            id: divider
-        spacing: 0
+            anchors.topMargin: 0
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 1
+            color: MoneroComponents.Style.dividerColor
+            opacity: MoneroComponents.Style.dividerOpacity
+        }
 
-        ColumnLayout {
+        Rectangle {
-            Layout.fillWidth: true
+            id: rect
-            Layout.alignment: Qt.AlignVCenter
+            width: parent.width
-            spacing: 0
+            height: header.height + area.contentHeight
+            color: "transparent";
+            anchors.left: parent.left
+            anchors.bottomMargin: 4
+            anchors.topMargin: 4
+            anchors.verticalCenter: parent.verticalCenter
+
+            Rectangle {
+                id: icon
+                color: "transparent"
+                height: 32
+                width: 32
+                anchors.left: parent.left
+                anchors.leftMargin: 16
+                anchors.verticalCenter: parent.verticalCenter
+
+                MoneroComponents.Label {
+                    id: iconLabel
+                    fontSize: 32
+                    fontFamily: FontAwesome.fontFamilySolid
+                    anchors.centerIn: parent
+                    fontColor: MoneroComponents.Style.defaultFontColor
+                    styleName: "Solid"
+                }
+            }
 
             MoneroComponents.TextPlain {
-                id: title
+                id: header
-                Layout.fillWidth: true
+                anchors.left: icon.right
-                Layout.preferredHeight: 20
+                anchors.leftMargin: 16
-                Layout.topMargin: 8
+                anchors.top: parent.top
                 color: MoneroComponents.Style.defaultFontColor
                 opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                 font.bold: true
@@ -43,23 +73,43 @@ ColumnLayout {
                 font.pixelSize: 16
             }
 
-            MoneroComponents.TextPlainArea {
+            Text {
-                id: description
+                id: area
+                anchors.top: header.bottom
+                anchors.topMargin: 4
+                anchors.left: icon.right
+                anchors.leftMargin: 16
                 color: MoneroComponents.Style.dimmedFontColor
-                colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                font.family: MoneroComponents.Style.fontRegular.name
-                colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                font.pixelSize: 15
-                Layout.fillWidth: true
                 horizontalAlignment: TextInput.AlignLeft
+                wrapMode: Text.WordWrap;
+                leftPadding: 0
+                topPadding: 0
+                width: parent.width - (icon.width + icon.anchors.leftMargin + anchors.leftMargin)
             }
         }
 
-        MoneroComponents.StandardButton {
+        Rectangle {
-            id: button
+            id: bottomDivider
-            small: true
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 1
+            color: MoneroComponents.Style.dividerColor
+            opacity: MoneroComponents.Style.dividerOpacity
+            visible: settingsListItem.isLast
+        }
+
+        MouseArea {
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: root.color = MoneroComponents.Style.titleBarButtonHoverColor
+            onExited: root.color = "transparent"
             onClicked: {
                 settingsListItem.clicked()
             }
-            width: 135
         }
     }
 }

pages/settings/SettingsWallet.qml

@@ -30,6 +30,7 @@ import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtQuick.Dialogs 1.2
+import FontAwesome 1.0
 
 import "../../js/Utils.js" as Utils
 import "../../components" as MoneroComponents
@@ -47,10 +48,10 @@ Rectangle {
         anchors.right: parent.right
         anchors.margins: 20
         anchors.topMargin: 0
-        spacing: 8
+        spacing: 0
 
         MoneroComponents.SettingsListItem {
-            buttonText: qsTr("Close wallet") + translationManager.emptyString
+            iconText: FontAwesome.signOutAlt
             description: qsTr("Logs out of this wallet.") + translationManager.emptyString
             title: qsTr("Close this wallet") + translationManager.emptyString
 
@@ -58,7 +59,7 @@ Rectangle {
         }
 
         MoneroComponents.SettingsListItem {
-            buttonText: qsTr("Create wallet") + translationManager.emptyString
+            iconText: FontAwesome.eye
             description: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
             title: qsTr("Create a view-only wallet") + translationManager.emptyString
             visible: !appWindow.viewOnly
@@ -80,7 +81,7 @@ Rectangle {
         }
 
         MoneroComponents.SettingsListItem {
-            buttonText: qsTr("Show seed") + translationManager.emptyString
+            iconText: FontAwesome.key
             description: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
             title: qsTr("Show seed & keys") + translationManager.emptyString
 
@@ -90,7 +91,7 @@ Rectangle {
         }
 
         MoneroComponents.SettingsListItem {
-            buttonText: qsTr("Rescan") + translationManager.emptyString
+            iconText: FontAwesome.repeat
             description: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
             title: qsTr("Rescan wallet balance") + translationManager.emptyString
             visible: appWindow.walletMode >= 2
@@ -114,7 +115,8 @@ Rectangle {
         }
 
         MoneroComponents.SettingsListItem {
-            buttonText: qsTr("Change password") + translationManager.emptyString
+            iconText: FontAwesome.ellipsisH
+            isLast: true
             description: qsTr("Change the password of your wallet.") + translationManager.emptyString
             title: qsTr("Change wallet password") + translationManager.emptyString