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
-    property alias description: description.text
-    property alias title: title.text
+    id: settingsListItem
+    property alias iconText: iconLabel.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
-        Layout.preferredHeight: 1
+        id: root
         Layout.fillWidth: true
-        Layout.bottomMargin: 8
-        color: MoneroComponents.Style.dividerColor
-        opacity: MoneroComponents.Style.dividerOpacity
-    }
+        Layout.minimumHeight: 75
+        Layout.preferredHeight: rect.height + 15
+        color: "transparent"
 
-    RowLayout {
-        Layout.fillWidth: true
-        spacing: 0
+        Rectangle {
+            id: divider
+            anchors.topMargin: 0
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 1
+            color: MoneroComponents.Style.dividerColor
+            opacity: MoneroComponents.Style.dividerOpacity
+        }
 
-        ColumnLayout {
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignVCenter
-            spacing: 0
+        Rectangle {
+            id: rect
+            width: parent.width
+            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
-                Layout.fillWidth: true
-                Layout.preferredHeight: 20
-                Layout.topMargin: 8
+                id: header
+                anchors.left: icon.right
+                anchors.leftMargin: 16
+                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 {
-                id: description
+            Text {
+                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
-                colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                Layout.fillWidth: true
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 15
                 horizontalAlignment: TextInput.AlignLeft
+                wrapMode: Text.WordWrap;
+                leftPadding: 0
+                topPadding: 0
+                width: parent.width - (icon.width + icon.anchors.leftMargin + anchors.leftMargin)
             }
         }
 
-        MoneroComponents.StandardButton {
-            id: button
-            small: true
+        Rectangle {
+            id: bottomDivider
+            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
         }
     }
 }