White theme

7 files changed, 243 insertions, 184 deletions

diff --git a/pages/settings/Navbar.qml b/pages/settings/Navbar.qml
index 6d58582c..b582c132 100644
--- a/pages/settings/Navbar.qml
+++ b/pages/settings/Navbar.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.0
+import QtQuick 2.9
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
@@ -53,11 +53,12 @@ Rectangle {
             id: grid
             Layout.alignment: Qt.AlignHCenter
             columnSpacing: 0
-            property string fontColor: "white"
-            property int fontSize: 13 * scaleRatio
+            property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white"
+            property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor
+            property int fontSize: 15 * scaleRatio
             property bool fontBold: true
             property var fontFamily: MoneroComponents.Style.fontRegular.name
-            property string borderColor: "#808080"
+            property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9"
             property int textMargin: {
                 // left-right margins for a given cell
                 if(isMobile){
@@ -68,20 +69,54 @@ Rectangle {
                     return 64;
                 }
             }
-            Image {
+
+            Rectangle {
+                // navbar left side border
+                id: navBarLeft
+                property bool isActive: settingsStateView.state === "Wallet"
                 Layout.preferredWidth: 2
                 Layout.preferredHeight: 32
-                source: {
-                    if(settingsStateView.state === "Wallet"){
-                        return "../../images/settings_navbar_side_active.png"
-                    } else {
-                        return "../../images/settings_navbar_side.png"
+                color: "transparent"
+
+                Rectangle {
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 1
+                    height: parent.height - 2
+                    color: grid.borderColor
+                }
+
+                ColumnLayout {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: 1
+                    spacing: 0
+
+                    Rectangle {
+                        Layout.preferredHeight: 1
+                        Layout.preferredWidth: 1
+                        color: grid.borderColor
+                    }
+
+                    Rectangle {
+                        Layout.fillHeight: true
+                        width: 1
+                        color: navBarLeft.isActive ? grid.borderColor : "transparent"
+                    }
+
+                    Rectangle {
+                        color: grid.borderColor
+                        Layout.preferredHeight: 1
+                        Layout.preferredWidth: 1
                     }
                 }
             }
+
             ColumnLayout {
                 // WALLET
                 id: navWallet
+                property bool isActive: settingsStateView.state === "Wallet"
                 Layout.preferredWidth: navWalletText.width + grid.textMargin
                 Layout.minimumWidth: 72 * scaleRatio
                 Layout.preferredHeight: 32
@@ -94,11 +129,11 @@ Rectangle {
                 }
 
                 Rectangle {
-                    color: settingsStateView.state === "Wallet" ? grid.borderColor : "transparent"
+                    color: parent.isActive ? grid.borderColor : "transparent"
                     height: 30 * scaleRatio
                     Layout.fillWidth: true
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: navWalletText
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
@@ -106,7 +141,8 @@ Rectangle {
                         font.pixelSize: grid.fontSize
                         font.bold: grid.fontBold
                         text: qsTr("Wallet") + translationManager.emptyString
-                        color: grid.fontColor
+                        color: navWallet.isActive ? grid.fontColorActive : grid.fontColorInActive
+                        themeTransition: false
                     }
 
                     MouseArea {
@@ -132,6 +168,7 @@ Rectangle {
             ColumnLayout {
                 // UI
                 id: navUI
+                property bool isActive: settingsStateView.state === "UI"
                 Layout.preferredWidth: navUIText.width + grid.textMargin
                 Layout.preferredHeight: 32
                 Layout.minimumWidth: 72 * scaleRatio
@@ -144,11 +181,11 @@ Rectangle {
                 }
 
                 Rectangle {
-                    color: settingsStateView.state === "UI" ? grid.borderColor : "transparent"
+                    color: parent.isActive ? grid.borderColor : "transparent"
                     height: 30 * scaleRatio
                     Layout.fillWidth: true
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: navUIText
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
@@ -156,7 +193,8 @@ Rectangle {
                         font.pixelSize: grid.fontSize
                         font.bold: grid.fontBold
                         text: qsTr("Layout") + translationManager.emptyString
-                        color: grid.fontColor
+                        color: navUI.isActive ? grid.fontColorActive : grid.fontColorInActive
+                        themeTransition: false
                     }
 
                     MouseArea {
@@ -182,6 +220,7 @@ Rectangle {
             ColumnLayout {
                 // NODE
                 id: navNode
+                property bool isActive: settingsStateView.state === "Node"
                 visible: appWindow.walletMode >= 2
                 Layout.preferredWidth: navNodeText.width + grid.textMargin
                 Layout.preferredHeight: 32
@@ -195,11 +234,11 @@ Rectangle {
                 }
 
                 Rectangle {
-                    color: settingsStateView.state === "Node" ? grid.borderColor : "transparent"
+                    color: parent.isActive ? grid.borderColor : "transparent"
                     height: 30 * scaleRatio
                     Layout.fillWidth: true
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: navNodeText
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
@@ -207,7 +246,8 @@ Rectangle {
                         font.pixelSize: grid.fontSize
                         font.bold: grid.fontBold
                         text: qsTr("Node") + translationManager.emptyString
-                        color: grid.fontColor
+                        color: navNode.isActive ? grid.fontColorActive : grid.fontColorInActive
+                        themeTransition: false
                     }
 
                     MouseArea {
@@ -234,6 +274,7 @@ Rectangle {
             ColumnLayout {
                 // LOG
                 id: navLog
+                property bool isActive: settingsStateView.state === "Log"
                 visible: appWindow.walletMode >= 2
                 Layout.preferredWidth: navLogText.width + grid.textMargin
                 Layout.preferredHeight: 32
@@ -247,11 +288,11 @@ Rectangle {
                 }
 
                 Rectangle {
-                    color: settingsStateView.state === "Log" ? grid.borderColor : "transparent"
+                    color: parent.isActive ? grid.borderColor : "transparent"
                     height: 30 * scaleRatio
                     Layout.fillWidth: true
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: navLogText
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
@@ -259,7 +300,8 @@ Rectangle {
                         font.pixelSize: grid.fontSize
                         font.bold: grid.fontBold
                         text: qsTr("Log") + translationManager.emptyString
-                        color: grid.fontColor
+                        color: navLog.isActive ? grid.fontColorActive : grid.fontColorInActive
+                        themeTransition: false
                     }
 
                     MouseArea {
@@ -286,6 +328,7 @@ Rectangle {
             ColumnLayout {
                 // INFO
                 id: navInfo
+                property bool isActive: settingsStateView.state === "Info"
                 Layout.preferredWidth: navInfoText.width + grid.textMargin
                 Layout.preferredHeight: 32
                 Layout.minimumWidth: 72 * scaleRatio
@@ -298,11 +341,11 @@ Rectangle {
                 }
 
                 Rectangle {
-                    color: settingsStateView.state === "Info" ? grid.borderColor : "transparent"
+                    color: parent.isActive ? grid.borderColor : "transparent"
                     height: 30 * scaleRatio
                     Layout.fillWidth: true
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: navInfoText
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
@@ -310,7 +353,8 @@ Rectangle {
                         font.pixelSize: grid.fontSize
                         font.bold: grid.fontBold
                         text: qsTr("Info") + translationManager.emptyString
-                        color: grid.fontColor
+                        color: navInfo.isActive ? grid.fontColorActive : grid.fontColorInActive
+                        themeTransition: false
                     }
 
                     MouseArea {
@@ -328,19 +372,51 @@ Rectangle {
                     Layout.fillWidth: true
                 }
             }
-            Image {
+
+            Rectangle {
+                // navbar right side border
+                id: navBarRight
+                property bool isActive: settingsStateView.state === "Info"
                 Layout.preferredWidth: 2
                 Layout.preferredHeight: 32
-                source: {
-                    if(settingsStateView.state === "Info"){
-                        return "../../images/settings_navbar_side_active.png"
-                    } else {
-                        return "../../images/settings_navbar_side.png"
-                    }    
-                    
-                }
+                color: "transparent"
                 rotation: 180
+
+                Rectangle {
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 1
+                    height: parent.height - 2
+                    color: grid.borderColor
+                }
+
+                ColumnLayout {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: 1
+                    spacing: 0
+
+                    Rectangle {
+                        Layout.preferredHeight: 1
+                        Layout.preferredWidth: 1
+                        color: grid.borderColor
+                    }
+
+                    Rectangle {
+                        Layout.fillHeight: true
+                        width: 1
+                        color: navBarRight.isActive ? grid.borderColor : "transparent"
+                    }
+
+                    Rectangle {
+                        color: grid.borderColor
+                        Layout.preferredHeight: 1
+                        Layout.preferredWidth: 1
+                    }
+                }
             }
+
             Rectangle {
                 color: "transparent"
                 Layout.fillWidth: true
diff --git a/pages/settings/Settings.qml b/pages/settings/Settings.qml
index 9f3d11cd..332fe25e 100644
--- a/pages/settings/Settings.qml
+++ b/pages/settings/Settings.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.0
+import QtQuick 2.9
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
diff --git a/pages/settings/SettingsInfo.qml b/pages/settings/SettingsInfo.qml
index 4e98463a..207e56cc 100644
--- a/pages/settings/SettingsInfo.qml
+++ b/pages/settings/SettingsInfo.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtQuick.Dialogs 1.2
@@ -71,6 +71,7 @@ Rectangle {
 
             MoneroComponents.TextBlock {
                 font.pixelSize: 14 * scaleRatio
+                color: MoneroComponents.Style.dimmedFontColor
                 text: Version.GUI_VERSION + " (Qt " + qtRuntimeVersion + ")" + translationManager.emptyString
             }
 
@@ -100,6 +101,7 @@ Rectangle {
 
             MoneroComponents.TextBlock {
                 font.pixelSize: 14 * scaleRatio
+                color: MoneroComponents.Style.dimmedFontColor
                 text: Version.GUI_MONERO_VERSION + translationManager.emptyString
             }
 
@@ -130,6 +132,7 @@ Rectangle {
             MoneroComponents.TextBlock {
                 Layout.fillWidth: true
                 Layout.maximumWidth: 360 * scaleRatio
+                color: MoneroComponents.Style.dimmedFontColor
                 font.pixelSize: 14 * scaleRatio
                 text: {
                     var wallet_path = walletPath();
@@ -168,8 +171,8 @@ Rectangle {
                 id: restoreHeightText
                 Layout.fillWidth: true
                 textFormat: Text.RichText
+                color: MoneroComponents.Style.dimmedFontColor
                 font.pixelSize: 14 * scaleRatio
-                font.bold: true
                 property var style: "<style type='text/css'>a {cursor:pointer;text-decoration: none; color: #FF6C3C}</style>"
                 text: (currentWallet ? currentWallet.walletCreationHeight : "") + style + qsTr(" <a href='#'> (Click to change)</a>") + translationManager.emptyString
                 onLinkActivated: {
@@ -255,6 +258,7 @@ Rectangle {
 
             MoneroComponents.TextBlock {
                 Layout.fillWidth: true
+                color: MoneroComponents.Style.dimmedFontColor
                 font.pixelSize: 14 * scaleRatio
                 text: walletLogPath
             }
@@ -285,9 +289,41 @@ Rectangle {
 
             MoneroComponents.TextBlock {
                 Layout.fillWidth: true
+                color: MoneroComponents.Style.dimmedFontColor
                 font.pixelSize: 14 * scaleRatio
                 text: walletModeString
             }
+
+            Rectangle {
+                height: 1
+                Layout.topMargin: 2 * scaleRatio
+                Layout.bottomMargin: 2 * scaleRatio
+                Layout.fillWidth: true
+                color: MoneroComponents.Style.dividerColor
+                opacity: MoneroComponents.Style.dividerOpacity
+            }
+
+            Rectangle {
+                height: 1
+                Layout.topMargin: 2 * scaleRatio
+                Layout.bottomMargin: 2 * scaleRatio
+                Layout.fillWidth: true
+                color: MoneroComponents.Style.dividerColor
+                opacity: MoneroComponents.Style.dividerOpacity
+            }
+
+            MoneroComponents.TextBlock {
+                Layout.fillWidth: true
+                font.pixelSize: 14 * scaleRatio
+                text: qsTr("Graphics mode: ") + translationManager.emptyString
+            }
+
+            MoneroComponents.TextBlock {
+                Layout.fillWidth: true
+                color: MoneroComponents.Style.dimmedFontColor
+                font.pixelSize: 14 * scaleRatio
+                text: isOpenGL ? "OpenGL" : "Low graphics mode"
+            }
         }
 
         // Copy info to clipboard
@@ -311,6 +347,7 @@ Rectangle {
 
                 data += "\nWallet log path: " + walletLogPath;
                 data += "\nWallet mode: " + walletModeString;
+                data += "\nGraphics: " + isOpenGL ? "OpenGL" : "Low graphics mode";
 
                 console.log("Copied to clipboard");
                 clipboard.setText(data);
diff --git a/pages/settings/SettingsLayout.qml b/pages/settings/SettingsLayout.qml
index 7a294a2d..ab1919ee 100644
--- a/pages/settings/SettingsLayout.qml
+++ b/pages/settings/SettingsLayout.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtQuick.Dialogs 1.2
@@ -96,6 +96,16 @@ Rectangle {
             text: qsTr("Lock wallet on inactivity") + translationManager.emptyString
         }
 
+        MoneroComponents.CheckBox {
+            id: themeCheckbox
+            checked: !MoneroComponents.Style.blackTheme
+            text: qsTr("Light theme") + translationManager.emptyString
+            onClicked: {
+                MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
+                persistentSettings.blackTheme = MoneroComponents.Style.blackTheme;
+            }
+        }
+
         ColumnLayout {
             visible: userInActivityCheckbox.checked
             Layout.fillWidth: true
@@ -131,7 +141,7 @@ Rectangle {
                     width: parent.availableWidth
                     height: implicitHeight
                     radius: 2
-                    color: MoneroComponents.Style.grey
+                    color: MoneroComponents.Style.progressBarBackgroundColor
 
                     Rectangle {
                         width: parent.visualPosition * parent.width
diff --git a/pages/settings/SettingsLog.qml b/pages/settings/SettingsLog.qml
index 1933ae93..b9d35865 100644
--- a/pages/settings/SettingsLog.qml
+++ b/pages/settings/SettingsLog.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 
@@ -60,7 +60,7 @@ Rectangle {
 //            opacity: MoneroComponents.Style.dividerOpacity
 //        }
 
-        Text {
+        MoneroComponents.TextPlain {
             Layout.bottomMargin: 2 * scaleRatio
             color: MoneroComponents.Style.defaultFontColor
             font.pixelSize: 18 * scaleRatio
@@ -102,10 +102,6 @@ Rectangle {
                 }
                 Layout.fillWidth: true
                 Layout.preferredWidth: logColumn.width
-                shadowReleasedColor: "#FF4304"
-                shadowPressedColor: "#B32D00"
-                releasedColor: "#363636"
-                pressedColor: "#202020"
                 z: parent.z + 1
             }
 
@@ -129,7 +125,7 @@ Rectangle {
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             Layout.topMargin: 10 * scaleRatio
             Layout.bottomMargin: 2 * scaleRatio
             color: MoneroComponents.Style.defaultFontColor
@@ -146,7 +142,7 @@ Rectangle {
             Rectangle {
                 anchors.fill: parent
                 color: "transparent"
-                border.color: MoneroComponents.Style.inputBorderColorActive
+                border.color: MoneroComponents.Style.inputBorderColorInActive
                 border.width: 1
                 radius: 4
             }
@@ -158,7 +154,7 @@ Rectangle {
                 TextArea.flickable: TextArea {
                     id : consoleArea
                     color: MoneroComponents.Style.defaultFontColor
-                    selectionColor: MoneroComponents.Style.dimmedFontColor
+                    selectionColor: MoneroComponents.Style.textSelectionColor
                     textFormat: TextEdit.RichText
                     selectByMouse: true
                     selectByKeyboard: true
@@ -172,11 +168,11 @@ Rectangle {
                     }
                     function logMessage(msg){
                         msg = msg.trim();
-                        var color = "white";
+                        var color = MoneroComponents.Style.defaultFontColor;
                         if(msg.toLowerCase().indexOf('error') >= 0){
-                            color = "red";
+                            color = MoneroComponents.Style.errorColor;
                         } else if (msg.toLowerCase().indexOf('warning') >= 0){
-                            color = "yellow";
+                            color = MoneroComponents.Style.warningColor;
                         }
 
                         // format multi-lines
@@ -196,7 +192,7 @@ Rectangle {
                             timeZoneName: undefined
                         });
 
-                        var _timestamp = log_color("[" + timestamp + "]", "#FFFFFF");
+                        var _timestamp = log_color("[" + timestamp + "]", MoneroComponents.Style.defaultFontColor);
                         var _msg = log_color(msg, color);
                         consoleArea.append(_timestamp + " " + _msg);
 
diff --git a/pages/settings/SettingsNode.qml b/pages/settings/SettingsNode.qml
index 81386674..8159ea87 100644
--- a/pages/settings/SettingsNode.qml
+++ b/pages/settings/SettingsNode.qml
@@ -26,10 +26,13 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
+import FontAwesome 1.0
+
 import "../../components" as MoneroComponents
+import "../../components/effects" as MoneroEffects
 
 Rectangle{
     color: "transparent"
@@ -73,7 +76,7 @@ Rectangle{
                 Layout.fillHeight: true
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
-                color: "white"
+                color: MoneroComponents.Style.blackTheme ? "white" : "darkgrey"
                 width: 2
             }
 
@@ -93,21 +96,27 @@ Rectangle{
                     anchors.leftMargin: 16 * scaleRatio
                     anchors.verticalCenter: parent.verticalCenter
 
-                    Image{
+                    MoneroEffects.ImageMask {
                         height: 27
                         width: 27
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "../../images/settings_local.png"
+                        fontAwesomeFallbackIcon: FontAwesome.shield
+                        fontAwesomeFallbackSize: 26
+                        image: "qrc:///images/settings_local.svg"
+
+                        color: MoneroComponents.Style.defaultFontColor
+                        opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     }
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: localNodeHeader
                     anchors.left: localNodeIcon.right
                     anchors.leftMargin: 14 * scaleRatio
                     anchors.top: parent.top
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
@@ -173,7 +182,7 @@ Rectangle{
                 Layout.fillHeight: true
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
-                color: "white"
+                color: MoneroComponents.Style.blackTheme ? "white" : "darkgrey"
                 width: 2
             }
 
@@ -193,21 +202,26 @@ Rectangle{
                     anchors.leftMargin: 16 * scaleRatio
                     anchors.verticalCenter: parent.verticalCenter
 
-                    Image{
-                        height: 27
+                    MoneroEffects.ImageMask {
+                        height: 29
                         width: 22
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "../../images/settings_remote.png"
+                        fontAwesomeFallbackIcon: FontAwesome.cloudDownload
+                        fontAwesomeFallbackSize: 26
+                        image: "qrc:///images/settings_remote.svg"
+                        color: MoneroComponents.Style.defaultFontColor
+                        opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     }
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: remoteNodeHeader
                     anchors.left: remoteNodeIcon.right
                     anchors.leftMargin: 14 * scaleRatio
                     anchors.top: parent.top
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
@@ -282,12 +296,6 @@ Rectangle{
             MoneroComponents.RemoteNodeEdit {
                 id: remoteNodeEdit
                 Layout.minimumWidth: 100 * scaleRatio
-
-                lineEditBackgroundColor: "transparent"
-                lineEditFontColor: "white"
-                lineEditFontBold: false
-                lineEditBorderColor: Qt.rgba(255, 255, 255, 0.35)
-                labelFontSize: 14 * scaleRatio
                 placeholderFontSize: 15 * scaleRatio
 
                 daemonAddrLabelText: qsTr("Address")
@@ -436,14 +444,6 @@ Rectangle{
                         id: bootstrapNodeEdit
                         Layout.minimumWidth: 100 * scaleRatio
                         Layout.bottomMargin: 20 * scaleRatio
-    
-                        lineEditBackgroundColor: "transparent"
-                        lineEditFontColor: "white"
-                        lineEditBorderColor: MoneroComponents.Style.inputBorderColorActive
-                        placeholderFontSize: 15 * scaleRatio
-                        labelFontSize: 14 * scaleRatio
-                        lineEditFontBold: false
-                        lineEditFontSize: 15 * scaleRatio
 
                         daemonAddrLabelText: qsTr("Bootstrap Address")
                         daemonPortLabelText: qsTr("Bootstrap Port")
diff --git a/pages/settings/SettingsWallet.qml b/pages/settings/SettingsWallet.qml
index cd1b17cc..92482ef5 100644
--- a/pages/settings/SettingsWallet.qml
+++ b/pages/settings/SettingsWallet.qml
@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtQuick.Dialogs 1.2
@@ -69,39 +69,27 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 spacing: 0
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20 * scaleRatio
                     Layout.topMargin: 8 * scaleRatio
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
                     text: qsTr("Close this wallet") + translationManager.emptyString
                 }
 
-                TextArea {
-                    Layout.fillWidth: true
+                MoneroComponents.TextPlainArea {
                     color: MoneroComponents.Style.dimmedFontColor
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 14 * scaleRatio
+                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                    width: parent.width
+                    Layout.fillWidth: true
                     horizontalAlignment: TextInput.AlignLeft
-                    selectByMouse: false
-                    wrapMode: Text.WordWrap;
-                    textMargin: 0
-                    leftPadding: 0
-                    topPadding: 0
                     text: qsTr("Logs out of this wallet.") + translationManager.emptyString
-                    width: parent.width
-                    readOnly: true
-
-                    // @TODO: Legacy. Remove after Qt 5.8.
-                    // https://stackoverflow.com/questions/41990013
-                    MouseArea {
-                        anchors.fill: parent
-                        enabled: false
-                    }
-                } 
+                }
             }
 
             MoneroComponents.StandardButton {
@@ -138,39 +126,27 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 spacing: 0
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20 * scaleRatio
                     Layout.topMargin: 8 * scaleRatio
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
                     text: qsTr("Create a view-only wallet") + translationManager.emptyString
                 }
 
-                TextArea {
-                    Layout.fillWidth: true
+                MoneroComponents.TextPlainArea {
                     color: MoneroComponents.Style.dimmedFontColor
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 14 * scaleRatio
+                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                    width: parent.width
+                    Layout.fillWidth: true
                     horizontalAlignment: TextInput.AlignLeft
-                    selectByMouse: false
-                    wrapMode: Text.WordWrap;
-                    textMargin: 0
-                    leftPadding: 0
-                    topPadding: 0
                     text: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
-                    width: parent.width
-                    readOnly: true
-
-                    // @TODO: Legacy. Remove after Qt 5.8.
-                    // https://stackoverflow.com/questions/41990013
-                    MouseArea {
-                        anchors.fill: parent
-                        enabled: false
-                    }
-                } 
+                }
             }
 
             MoneroComponents.StandardButton {
@@ -215,39 +191,27 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 spacing: 0
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20 * scaleRatio
                     Layout.topMargin: 8 * scaleRatio
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
                     text: qsTr("Show seed & keys") + translationManager.emptyString
                 }
 
-                TextArea {
-                    Layout.fillWidth: true
+                MoneroComponents.TextPlainArea {
                     color: MoneroComponents.Style.dimmedFontColor
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 14 * scaleRatio
+                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                    width: parent.width
+                    Layout.fillWidth: true
                     horizontalAlignment: TextInput.AlignLeft
-                    selectByMouse: false
-                    wrapMode: Text.WordWrap;
-                    textMargin: 0 * scaleRatio
-                    leftPadding: 0
-                    topPadding: 0
                     text: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
-                    width: parent.width
-                    readOnly: true
-
-                    // @TODO: Legacy. Remove after Qt 5.8.
-                    // https://stackoverflow.com/questions/41990013
-                    MouseArea {
-                        anchors.fill: parent
-                        enabled: false
-                    }
-                } 
+                }
             }
 
             MoneroComponents.StandardButton {
@@ -281,39 +245,27 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 spacing: 0
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20 * scaleRatio
                     Layout.topMargin: 8 * scaleRatio
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
                     text: qsTr("Rescan wallet balance") + translationManager.emptyString
                 }
 
-                TextArea {
-                    Layout.fillWidth: true
+                MoneroComponents.TextPlainArea {
                     color: MoneroComponents.Style.dimmedFontColor
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 14 * scaleRatio
+                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                    width: parent.width
+                    Layout.fillWidth: true
                     horizontalAlignment: TextInput.AlignLeft
-                    selectByMouse: false
-                    wrapMode: Text.WordWrap;
-                    textMargin: 0
-                    leftPadding: 0
-                    topPadding: 0
                     text: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
-                    width: parent.width
-                    readOnly: true
-
-                    // @TODO: Legacy. Remove after Qt 5.8.
-                    // https://stackoverflow.com/questions/41990013
-                    MouseArea {
-                        anchors.fill: parent
-                        enabled: false
-                    }
-                } 
+                }
             }
 
             MoneroComponents.StandardButton {
@@ -359,39 +311,27 @@ Rectangle {
                 Layout.alignment: Qt.AlignVCenter
                 spacing: 0
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.fillWidth: true
                     Layout.preferredHeight: 20 * scaleRatio
                     Layout.topMargin: 8 * scaleRatio
-                    color: "white"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
                     font.bold: true
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 16 * scaleRatio
                     text: qsTr("Change wallet password") + translationManager.emptyString
                 }
 
-                TextArea {
-                    Layout.fillWidth: true
+                MoneroComponents.TextPlainArea {
                     color: MoneroComponents.Style.dimmedFontColor
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 14 * scaleRatio
+                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                    width: parent.width
+                    Layout.fillWidth: true
                     horizontalAlignment: TextInput.AlignLeft
-                    selectByMouse: false
-                    wrapMode: Text.WordWrap;
-                    textMargin: 0
-                    leftPadding: 0
-                    topPadding: 0
                     text: qsTr("Change the password of your wallet.") + translationManager.emptyString
-                    width: parent.width
-                    readOnly: true
-
-                    // @TODO: Legacy. Remove after Qt 5.8.
-                    // https://stackoverflow.com/questions/41990013
-                    MouseArea {
-                        anchors.fill: parent
-                        enabled: false
-                    }
-                } 
+                }
             }
 
             MoneroComponents.StandardButton {