Merge pull request #2060

42f7afa White theme (xmrdsc)

21 files changed, 843 insertions, 433 deletions

diff --git a/pages/Account.qml b/pages/Account.qml
index 00ac4919..0185b80c 100644
--- a/pages/Account.qml
+++ b/pages/Account.qml
@@ -26,13 +26,15 @@
 // 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 2.0
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
 
 import "../components" as MoneroComponents
+import "../components/effects/" as MoneroEffects
+
 import moneroComponents.Clipboard 1.0
 import moneroComponents.Wallet 1.0
 import moneroComponents.WalletManager 1.0
@@ -84,32 +86,32 @@ Rectangle {
 
             RowLayout {
                 Layout.topMargin: 22 * scaleRatio
-                Text {
+
+                MoneroComponents.TextPlain {
                     text: qsTr("Total balance: ") + translationManager.emptyString
                     Layout.fillWidth: true
-                    color: "#757575"
+                    color: MoneroComponents.Style.defaultFontColor
                     font.pixelSize: 14
                     font.family: MoneroComponents.Style.fontRegular.name
                 }
-                Text {
+
+                MoneroComponents.TextPlain {
                     id: balanceAll
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 14 
-                    color: MoneroComponents.Style.white 
+                    color: MoneroComponents.Style.dimmedFontColor
+                    themeTransition: false
+
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
-                        onEntered: {
-                            parent.color = MoneroComponents.Style.orange
-                        }
-                        onExited: {
-                            parent.color = MoneroComponents.Style.white
-                        }
+                        onEntered: parent.color = MoneroComponents.Style.orange
+                        onExited: parent.color = MoneroComponents.Style.defaultFontColor
                         onClicked: {
-                                console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
-                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+                            console.log("Copied to clipboard");
+                            clipboard.setText(parent.text);
+                            appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
                         }
                     }
                 }
@@ -117,32 +119,33 @@ Rectangle {
 
             RowLayout {
                 Layout.topMargin: 10 * scaleRatio
-                Text {
+
+                MoneroComponents.TextPlain {
                     text: qsTr("Total unlocked balance: ") + translationManager.emptyString
                     Layout.fillWidth: true
-                    color: "#757575"
+                    color: MoneroComponents.Style.defaultFontColor
                     font.pixelSize: 14 
                     font.family: MoneroComponents.Style.fontRegular.name
+                    themeTransition: false
                 }
-                Text {
+
+                MoneroComponents.TextPlain {
                     id: unlockedBalanceAll
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 14
-                    color: MoneroComponents.Style.white
+                    color: MoneroComponents.Style.dimmedFontColor
+                    themeTransition: false
+
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent
                         cursorShape: Qt.PointingHandCursor
-                        onEntered: {
-                            parent.color = MoneroComponents.Style.orange
-                        }
-                        onExited: {
-                            parent.color = MoneroComponents.Style.white
-                        }
+                        onEntered: parent.color = MoneroComponents.Style.orange
+                        onExited: parent.color = MoneroComponents.Style.defaultFontColor
                         onClicked: {
-                                console.log("Copied to clipboard");
-                                clipboard.setText(parent.text);
-                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+                            console.log("Copied to clipboard");
+                            clipboard.setText(parent.text);
+                            appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
                         }
                     }
                 }
@@ -174,19 +177,27 @@ Rectangle {
                     anchors.fill: parent
                     clip: true
                     boundsBehavior: ListView.StopAtBounds
+
                     delegate: Rectangle {
                         id: tableItem2
                         height: subaddressAccountListRow.subaddressAccountListItemHeight
                         width: parent.width
                         Layout.fillWidth: true
                         color: "transparent"
+
                         Rectangle {
+                            color: MoneroComponents.Style.appWindowBorderColor
                             anchors.right: parent.right
                             anchors.left: parent.left
                             anchors.top: parent.top
                             height: 1
-                            color: "#404040"
                             visible: index !== 0
+
+                            MoneroEffects.ColorTransition {
+                                targetObj: parent
+                                blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                                whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                            }
                         }
 
                         Rectangle {
@@ -197,18 +208,19 @@ Rectangle {
 
                             MoneroComponents.Label {
                                 id: idLabel
-                                color: index === appWindow.current_subaddress_account_table_index ? "white" : "#757575"
+                                color: index === appWindow.current_subaddress_account_table_index ? MoneroComponents.Style.defaultFontColor : "#757575"
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: parent.left
                                 anchors.leftMargin: 6 * scaleRatio
                                 fontSize: 14 * scaleRatio
                                 fontBold: true
                                 text: "#" + index
+                                themeTransition: false
                             }
 
                             MoneroComponents.Label {
                                 id: nameLabel
-                                color: "#a5a5a5"
+                                color: MoneroComponents.Style.dimmedFontColor
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: idLabel.right
                                 anchors.leftMargin: 6 * scaleRatio
@@ -217,22 +229,24 @@ Rectangle {
                                 text: label
                                 elide: Text.ElideRight
                                 textWidth: addressLabel.x - nameLabel.x - 1
+                                themeTransition: false
                             }
 
                             MoneroComponents.Label {
                                 id: addressLabel
-                                color: "white"
+                                color: MoneroComponents.Style.defaultFontColor
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: balanceLabel.left
                                 anchors.leftMargin: (mainLayout.width < 510 ? -70 : -125) * scaleRatio
                                 fontSize: 14 * scaleRatio
                                 fontBold: true
                                 text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 3 : 6)
+                                themeTransition: false
                             }
 
                             MoneroComponents.Label {
                                 id: balanceLabel
-                                color: "white"
+                                color: MoneroComponents.Style.defaultFontColor
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: parent.right
                                 anchors.leftMargin: (mainLayout.width < 510 ? -120 : -180) * scaleRatio
@@ -240,49 +254,55 @@ Rectangle {
                                 fontBold: true
                                 text: qsTr("Balance: ") + balance
                                 elide: mainLayout.width < 510 ? Text.ElideRight : Text.ElideNone
-                                textWidth: 120 
+                                textWidth: 120
+                                themeTransition: false
                             }
 
                             MouseArea {
                                 cursorShape: Qt.PointingHandCursor
                                 anchors.fill: parent
                                 hoverEnabled: true
-                                onEntered: {
-                                    tableItem2.color = "#26FFFFFF"
-                                }
-                                onExited: {
-                                    tableItem2.color = "transparent"
-                                }
+                                onEntered: tableItem2.color = MoneroComponents.Style.titleBarButtonHoverColor
+                                onExited: tableItem2.color = "transparent"
                                 onClicked: {
-                                    if (index == subaddressAccountListView.currentIndex && selectAndSend) {
+                                    if (index == subaddressAccountListView.currentIndex && selectAndSend)
                                         appWindow.showPageRequest("Transfer");
-                                    }
                                     subaddressAccountListView.currentIndex = index;
                                 }
                             }
                         }
 
-                        MoneroComponents.IconButton {
-                            id: renameButton
-                            imageSource: "../images/editIcon.png"
+                        RowLayout {
+                            anchors.verticalCenter: parent.verticalCenter
                             anchors.right: parent.right
-                            anchors.rightMargin: 30 * scaleRatio
-                            anchors.topMargin: 1 * scaleRatio
+                            anchors.rightMargin: 6
+                            height: 21
+                            spacing: 10
+
+                            MoneroComponents.IconButton {
+                                id: renameButton
+                                image: "qrc:///images/edit.svg"
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                                Layout.preferredWidth: 23
+                                Layout.preferredHeight: 21
 
-                            onClicked: {
-                                renameSubaddressAccountLabel(index);
+                                onClicked: pageAccount.renameSubaddressAccountLabel(index);
                             }
-                        }
 
-                        MoneroComponents.IconButton {
-                            id: copyButton
-                            imageSource: "../images/dropdownCopy.png"
-                            anchors.right: parent.right
+                            MoneroComponents.IconButton {
+                                id: copyButton
+                                image: "qrc:///images/copy.svg"
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                                Layout.preferredWidth: 16
+                                Layout.preferredHeight: 21
 
-                            onClicked: {
-                                console.log("Address copied to clipboard");
-                                clipboard.setText(address);
-                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3);
+                                onClicked: {
+                                    console.log("Address copied to clipboard");
+                                    clipboard.setText(address);
+                                    appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3);
+                                }
                             }
                         }
                     }
@@ -302,9 +322,15 @@ Rectangle {
             }
 
             Rectangle {
-                color: "#404040"
+                color: MoneroComponents.Style.appWindowBorderColor
                 Layout.fillWidth: true
                 height: 1
+
+                MoneroEffects.ColorTransition {
+                    targetObj: parent
+                    blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                    whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                }
             }
 
             MoneroComponents.CheckBox { 
diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml
index 19ff9c95..e605a5a7 100644
--- a/pages/AddressBook.qml
+++ b/pages/AddressBook.qml
@@ -26,11 +26,14 @@
 // 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 2.0
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
+
 import "../components" as MoneroComponents
+import "../components/effects/" as MoneroEffects
+
 import "../js/TxUtils.js" as TxUtils
 import moneroComponents.AddressBook 1.0
 import moneroComponents.AddressBookModel 1.0
@@ -89,7 +92,7 @@ Rectangle {
 
             TextArea {
                 Layout.fillWidth: true
-                color: MoneroComponents.Style.greyFontColor
+                color: MoneroComponents.Style.dimmedFontColor
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 16 * scaleRatio
                 horizontalAlignment: TextInput.AlignLeft
@@ -159,11 +162,17 @@ Rectangle {
                         }
 
                         Rectangle {
+                            color: MoneroComponents.Style.appWindowBorderColor
                             anchors.right: parent.right
                             anchors.left: parent.left
                             anchors.top: parent.top
                             height: 1
-                            color: MoneroComponents.Style.grey
+
+                            MoneroEffects.ColorTransition {
+                                targetObj: parent
+                                blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                                whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                            }
                         }
 
                         Rectangle {
@@ -206,41 +215,52 @@ Rectangle {
                             }
                         }
 
-                        MoneroComponents.IconButton {
-                            id: sendToButton
-                            imageSource: "../images/arrow-right-in-circle.png"
-                            image.opacity: 0.5
+                        RowLayout {
+                            anchors.verticalCenter: parent.verticalCenter
                             anchors.right: parent.right
-                            anchors.rightMargin: 63 * scaleRatio
-                            onClicked: {
-                                doSend();
+                            anchors.rightMargin: 6
+                            height: 21
+                            spacing: 10
+
+                            MoneroComponents.IconButton {
+                                id: sendToButton
+                                image: "qrc:///images/arrow-right-in-circle-outline-medium-white.svg"
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                                Layout.preferredWidth: 20
+                                Layout.preferredHeight: 20
+                                onClicked: {
+                                    doSend();
+                                }
                             }
-                        }
 
-                        MoneroComponents.IconButton {
-                            id: renameButton
-                            imageSource: "../images/rename.png"
-                            image.opacity: 0.5
-                            anchors.right: parent.right
-                            anchors.rightMargin: 30 * scaleRatio
-                            anchors.topMargin: 1 * scaleRatio
+                            MoneroComponents.IconButton {
+                                id: renameButton
+                                image: "qrc:///images/edit.svg"
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
+                                Layout.preferredWidth: 23
+                                Layout.preferredHeight: 21
 
-                            onClicked: {
-                                addressBookListView.currentIndex = index;
-                                root.showEditAddress(address, description);
+                                onClicked: {
+                                    addressBookListView.currentIndex = index;
+                                    root.showEditAddress(address, description);
+                                }
                             }
-                        }
 
-                        MoneroComponents.IconButton {
-                            id: copyButton
-                            imageSource: "../images/clipboard.png"
-                            image.opacity: 0.5
-                            anchors.right: parent.right
+                            MoneroComponents.IconButton {
+                                id: copyButton
+                                image: "qrc:///images/copy.svg"
+                                Layout.preferredWidth: 16
+                                Layout.preferredHeight: 21
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.5
 
-                            onClicked: {
-                                console.log("Address copied to clipboard");
-                                clipboard.setText(address);
-                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3);
+                                onClicked: {
+                                    console.log("Address copied to clipboard");
+                                    clipboard.setText(address);
+                                    appWindow.showStatusMessage(qsTr("Address copied to clipboard"), 3);
+                                }
                             }
                         }
                     }
@@ -248,9 +268,16 @@ Rectangle {
             }
 
             Rectangle {
-                color: MoneroComponents.Style.grey
+                id: border2
+                color: MoneroComponents.Style.appWindowBorderColor
                 Layout.fillWidth: true
                 height: 1
+
+                MoneroEffects.ColorTransition {
+                    targetObj: border2
+                    blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                    whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                }
             }
 
             MoneroComponents.CheckBox {
@@ -306,6 +333,7 @@ Rectangle {
                         addressLine.text = clipboardText;
                     }
                 }
+
                 inlineButton.text: FontAwesome.qrcode
                 inlineButton.fontPixelSize: 22
                 inlineButton.fontFamily: FontAwesome.fontFamily
diff --git a/pages/History.qml b/pages/History.qml
index 8acd423d..7794a4f7 100644
--- a/pages/History.qml
+++ b/pages/History.qml
@@ -29,6 +29,7 @@
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
+import QtGraphicalEffects 1.0
 import moneroComponents.Wallet 1.0
 import moneroComponents.WalletManager 1.0
 import moneroComponents.TransactionHistory 1.0
@@ -36,6 +37,8 @@ import moneroComponents.TransactionInfo 1.0
 import moneroComponents.TransactionHistoryModel 1.0
 import moneroComponents.Clipboard 1.0
 import FontAwesome 1.0
+
+import "../components/effects/" as MoneroEffects
 import "../components" as MoneroComponents
 import "../js/Utils.js" as Utils
 import "../js/TxUtils.js" as TxUtils
@@ -96,7 +99,7 @@ Rectangle {
                 Layout.preferredHeight: 15
                 spacing: 8 * scaleRatio
 
-                Text {
+                MoneroComponents.TextPlain {
                     Layout.alignment: Qt.AlignVCenter
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 15 * scaleRatio
@@ -113,12 +116,16 @@ Rectangle {
                     }
                 }
 
-                Image {
+                MoneroEffects.ImageMask {
+                    id: sortCollapsedIcon
                     Layout.alignment: Qt.AlignVCenter
                     height: 8 * scaleRatio
                     width: 12 * scaleRatio
-                    source: "../images/whiteDropIndicator.png"
-                    rotation: parent.collapsed ? 0 : 180
+                    image: "qrc:///images/whiteDropIndicator.png"
+                    fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                    fontAwesomeFallbackSize: 14
+                    rotation: sortAndFilter.collapsed ? 0 : 180
+                    color: MoneroComponents.Style.defaultFontColor
 
                     MouseArea {
                         anchors.fill: parent
@@ -215,7 +222,7 @@ Rectangle {
                 Layout.preferredWidth: childrenRect.width + 38 * scaleRatio
                 Layout.preferredHeight: 20
 
-                Text {
+                MoneroComponents.TextPlain {
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 15 * scaleRatio
                     text: qsTr("Sort by") + ":"
@@ -235,21 +242,25 @@ Rectangle {
                     clip: true
                     anchors.fill: parent
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: sortBlockheightText
                         font.family: MoneroComponents.Style.fontRegular.name
                         font.pixelSize: 15 * scaleRatio
                         text: qsTr("Blockheight") + translationManager.emptyString
                         color: root.sortBy === "blockheight" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor
                         anchors.verticalCenter: parent.verticalCenter
+                        themeTransition: false
                     }
 
-                    Image {
+                    MoneroEffects.ImageMask {
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
                         visible: root.sortBy === "blockheight" ? true : false
-                        opacity: root.sortBy === "blockheight" ? 1 : 0.6
-                        source: "../images/whiteDropIndicator.png"
+                        opacity: root.sortBy === "blockheight" ? 1 : 0.2
+                        image: "qrc:///images/whiteDropIndicator.png"
+                        fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                        fontAwesomeFallbackSize: 14
+                        color: MoneroComponents.Style.defaultFontColor
                         rotation: {
                             if(root.sortBy === "blockheight"){
                                 return root.sortDirection ? 0 : 180
@@ -291,21 +302,25 @@ Rectangle {
                     clip: true
                     anchors.fill: parent
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: sortDateText
                         font.family: MoneroComponents.Style.fontRegular.name
                         font.pixelSize: 15 * scaleRatio
                         text: qsTr("Date") + translationManager.emptyString
                         color: root.sortBy === "timestamp" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor
+                        themeTransition: false
                         anchors.verticalCenter: parent.verticalCenter
                     }
 
-                    Image {
+                    MoneroEffects.ImageMask {
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
                         visible: root.sortBy === "timestamp" ? true : false
-                        opacity: root.sortBy === "timestamp" ? 1 : 0.6
-                        source: "../images/whiteDropIndicator.png"
+                        opacity: root.sortBy === "timestamp" ? 1 : 0.2
+                        image: "qrc:///images/whiteDropIndicator.png"
+                        fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                        fontAwesomeFallbackSize: 14
+                        color: MoneroComponents.Style.defaultFontColor
                         rotation: {
                             if(root.sortBy === "timestamp"){
                                 return root.sortDirection ? 0 : 180
@@ -347,21 +362,25 @@ Rectangle {
                     clip: true
                     anchors.fill: parent
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: sortAmountText
                         font.family: MoneroComponents.Style.fontRegular.name
                         font.pixelSize: 15 * scaleRatio
                         text: qsTr("Amount") + translationManager.emptyString
                         color: root.sortBy === "amount" ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor
+                        themeTransition: false
                         anchors.verticalCenter: parent.verticalCenter
                     }
 
-                    Image {
+                    MoneroEffects.ImageMask {
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
                         visible: root.sortBy === "amount" ? true : false
-                        opacity: root.sortBy === "amount" ? 1 : 0.6
-                        source: "../images/whiteDropIndicator.png"
+                        opacity: root.sortBy === "amount" ? 1 : 0.2
+                        image: "qrc:///images/whiteDropIndicator.png"
+                        fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                        fontAwesomeFallbackSize: 14
+                        color: MoneroComponents.Style.defaultFontColor
                         rotation: {
                             if(root.sortBy === "amount"){
                                 return root.sortDirection ? 0 : 180
@@ -397,7 +416,7 @@ Rectangle {
                 visible: !sortAndFilter.collapsed
                 Layout.preferredHeight: 20
 
-                Text {
+                MoneroComponents.TextPlain {
                     // status message
                     font.family: MoneroComponents.Style.fontRegular.name
                     font.pixelSize: 15 * scaleRatio
@@ -424,7 +443,7 @@ Rectangle {
                     Layout.preferredWidth: childrenRect.width + 2 * scaleRatio
                     Layout.preferredHeight: 20
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         font.family: MoneroComponents.Style.fontRegular.name
                         font.pixelSize: 15 * scaleRatio
                         text: qsTr("Page") + ":"
@@ -439,10 +458,10 @@ Rectangle {
                     Layout.leftMargin: 4 * scaleRatio
                     Layout.preferredHeight: 20 * scaleRatio
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: paginationText
                         text: root.txPage + "/" + Math.ceil(root.txCount / root.txMax)
-                        color: "white"
+                        color: MoneroComponents.Style.defaultFontColor
                         anchors.verticalCenter: parent.verticalCenter
 
                         MouseArea {
@@ -480,15 +499,19 @@ Rectangle {
                     Layout.preferredWidth: 18 * scaleRatio
                     Layout.preferredHeight: 20 * scaleRatio
                     color: "transparent"
-                    opacity: enabled ? 1.0 : 0.6
+                    opacity: enabled ? 1.0 : 0.2
                     enabled: false
 
-                    Image {
+                    MoneroEffects.ImageMask {
+                        id: prevIcon
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.left: parent.left
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
-                        source: "../images/whiteDropIndicator.png"
+                        image: "qrc:///images/whiteDropIndicator.png"
+                        fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                        fontAwesomeFallbackSize: 14
+                        color: MoneroComponents.Style.defaultFontColor
                         rotation: 90
                     }
 
@@ -508,16 +531,20 @@ Rectangle {
                     Layout.preferredWidth: 18 * scaleRatio
                     Layout.preferredHeight: 20 * scaleRatio
                     color: "transparent"
-                    opacity: enabled ? 1.0 : 0.6
+                    opacity: enabled ? 1.0 : 0.2
                     enabled: false
 
-                    Image {
+                    MoneroEffects.ImageMask {
+                        id: nextIcon
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
-                        source: "../images/whiteDropIndicator.png"
+                        image: "qrc:///images/whiteDropIndicator.png"
+                        fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                        fontAwesomeFallbackSize: 14
                         rotation: 270
+                        color: MoneroComponents.Style.defaultFontColor
                     }
 
                     MouseArea {
@@ -550,7 +577,10 @@ Rectangle {
                     if(isout && delegate.address !== "") return 320;
                     return 220;
                 }
-                color: collapsed ? "#06FFFFFF" : "transparent"
+                color: {
+                    if(!collapsed) return "transparent"
+                    return MoneroComponents.Style.blackTheme ? "#06FFFFFF" : "#04000000"
+                }
 
                 Rectangle {
                     anchors.top: parent.top
@@ -601,12 +631,14 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
-                                    text: (isout ? qsTr("Sent") : qsTr("Received")) + translationManager.emptyString
-                                    color: "#C0C0C0"
+                                    text: isout ? qsTr("Sent") : qsTr("Received") + translationManager.emptyString
+                                    color: MoneroComponents.Style.historyHeaderTextColor
                                     anchors.verticalCenter: parent.verticalCenter
+                                    themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                    themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                 }
                             }
 
@@ -615,7 +647,7 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
                                     text: _amount + " XMR"
@@ -649,11 +681,13 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
-                                    text: (isout ? qsTr("Fee") : confirmationsRequired === 60 ? qsTr("Mined") : qsTr("Fee")) + translationManager.emptyString
-                                    color: "#C0C0C0"
+                                    text: isout ? qsTr("Fee") : confirmationsRequired === 60 ? qsTr("Mined") : qsTr("Fee") + translationManager.emptyString
+                                    color: MoneroComponents.Style.historyHeaderTextColor
+                                    themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                    themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                     anchors.verticalCenter: parent.verticalCenter
                                 }
                             }
@@ -663,7 +697,7 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
                                     text: {
@@ -708,11 +742,13 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
                                     text: qsTr("Blockheight") + translationManager.emptyString
-                                    color: "#C0C0C0"
+                                    color: MoneroComponents.Style.historyHeaderTextColor
+                                    themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                    themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                     anchors.verticalCenter: parent.verticalCenter
                                 }
                             }
@@ -722,7 +758,7 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 14 * scaleRatio
                                     text: blockheight > 0 ? blockheight : qsTr('Pending') + translationManager.emptyString;
@@ -757,11 +793,13 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
                                     text: qsTr("Confirmations") + translationManager.emptyString
-                                    color: "#C0C0C0"
+                                    color: MoneroComponents.Style.historyHeaderTextColor
+                                    themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                    themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                     anchors.verticalCenter: parent.verticalCenter
                                 }
                             }
@@ -771,7 +809,7 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     property bool confirmed: confirmations < confirmationsRequired ? false : true
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
@@ -812,11 +850,13 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
-                                    text: qsTr("Date") + translationManager.emptyString
-                                    color: "#C0C0C0"
+                                    text: qsTr("Date")
+                                    color: MoneroComponents.Style.historyHeaderTextColor
+                                    themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                    themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                     anchors.verticalCenter: parent.verticalCenter
                                 }
                             }
@@ -826,7 +866,7 @@ Rectangle {
                                 Layout.fillWidth: true
                                 Layout.preferredHeight: 20
 
-                                Text {
+                                MoneroComponents.TextPlain {
                                     font.family: MoneroComponents.Style.fontRegular.name
                                     font.pixelSize: 15 * scaleRatio
                                     text: persistentSettings.historyHumanDates ? dateHuman : date + "  " + time
@@ -867,6 +907,9 @@ Rectangle {
                                         anchors.fill: parent
                                         hoverEnabled: true
                                         z: parent.z + 1
+
+                                        onEntered: parent.opacity = 0.8;
+                                        onExited: parent.opacity = 1.0;
                                     }
                                 }
 
@@ -894,6 +937,9 @@ Rectangle {
                                         anchors.fill: parent
                                         hoverEnabled: true
                                         z: parent.z + 1
+
+                                        onEntered: parent.opacity = 0.8;
+                                        onExited: parent.opacity = 1.0;
                                     }
                                 }
                             }
@@ -910,11 +956,13 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: qsTr("Description") + translationManager.emptyString
-                                color: "#C0C0C0"
+                                color: MoneroComponents.Style.historyHeaderTextColor
+                                themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                 anchors.verticalCenter: parent.verticalCenter
                             }
                         }
@@ -924,7 +972,7 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 id: txNoteText
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
@@ -941,26 +989,25 @@ Rectangle {
                                 }
                             }
 
-                            Image {
+                            MoneroEffects.ImageMask {
                                 anchors.top: parent.top
                                 anchors.left: txNoteText.right
                                 anchors.leftMargin: 12 * scaleRatio
-                                source: "../images/editIcon.png"
-                                opacity: 1
-                                width: 18
-                                height: 18
+                                image: "qrc:///images/edit.svg"
+                                fontAwesomeFallbackIcon: FontAwesome.pencilSquare
+                                fontAwesomeFallbackSize: 22
+                                color: MoneroComponents.Style.defaultFontColor
+                                opacity: 0.75
+                                width: 23
+                                height: 21
 
                                 MouseArea {
                                     id: txNoteArea
                                     state: "set_tx_note"
                                     anchors.fill: parent
                                     hoverEnabled: true
-                                    onEntered: {
-                                        parent.opacity = 0.7;
-                                    }
-                                    onExited: {
-                                        parent.opacity = 1.0;
-                                    }
+                                    onEntered: parent.opacity = 0.4;
+                                    onExited: parent.opacity = 0.75;
                                     cursorShape: Qt.PointingHandCursor
                                 }
                             }
@@ -977,11 +1024,13 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: qsTr("Transaction ID") + translationManager.emptyString
-                                color: "#C0C0C0"
+                                color: MoneroComponents.Style.historyHeaderTextColor
+                                themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                 anchors.verticalCenter: parent.verticalCenter
                             }
                         }
@@ -991,7 +1040,7 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: hash
@@ -1019,11 +1068,13 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: qsTr("Transaction key") + translationManager.emptyString
-                                color: "#C0C0C0"
+                                color: MoneroComponents.Style.historyHeaderTextColor
+                                themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                 anchors.verticalCenter: parent.verticalCenter
                             }
                         }
@@ -1033,7 +1084,7 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: {
@@ -1067,11 +1118,13 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: qsTr("Address sent to") + translationManager.emptyString
-                                color: "#C0C0C0"
+                                color: MoneroComponents.Style.historyHeaderTextColor
+                                themeTransitionBlackColor: MoneroComponents.Style._b_historyHeaderTextColor
+                                themeTransitionWhiteColor: MoneroComponents.Style._w_historyHeaderTextColor
                                 anchors.verticalCenter: parent.verticalCenter
                             }
                         }
@@ -1082,7 +1135,7 @@ Rectangle {
                             Layout.fillWidth: true
                             Layout.preferredHeight: 20
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.family: MoneroComponents.Style.fontRegular.name
                                 font.pixelSize: 15 * scaleRatio
                                 text: {
@@ -1164,15 +1217,16 @@ Rectangle {
 
                     color: "transparent"
 
-                    Image {
+                    MoneroEffects.ImageMask {
+                        id: collapsedIcon
                         anchors.top: parent.top
                         anchors.topMargin: 24 * scaleRatio
                         anchors.horizontalCenter: parent.horizontalCenter
-
                         height: 8 * scaleRatio
                         width: 12 * scaleRatio
-                        source: "../images/whiteDropIndicator.png"
+                        image: "qrc:///images/whiteDropIndicator.png"
                         rotation: delegate.collapsed ? 180 : 0
+                        color: MoneroComponents.Style.defaultFontColor
                     }
                 }
 
@@ -1181,7 +1235,13 @@ Rectangle {
                     anchors.right: parent.right
                     anchors.top: parent.top
                     height: 1
-                    color: "#2b2b2b"
+                    color: MoneroComponents.Style.appWindowBorderColor
+
+                    MoneroEffects.ColorTransition {
+                        targetObj: parent
+                        blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                        whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                    }
                 }
 
                 Rectangle {
@@ -1189,7 +1249,13 @@ Rectangle {
                     anchors.right: parent.right
                     anchors.top: parent.bottom
                     height: 1
-                    color: "#2b2b2b"
+                    color: MoneroComponents.Style.appWindowBorderColor
+
+                    MoneroEffects.ColorTransition {
+                        targetObj: parent
+                        blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                        whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                    }
                 }
             }
         }
@@ -1201,7 +1267,7 @@ Rectangle {
             Layout.leftMargin: sideMargin
             Layout.rightMargin: sideMargin
 
-            Text {
+            MoneroComponents.TextPlain {
                 // status message
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
@@ -1209,6 +1275,8 @@ Rectangle {
                 font.pixelSize: 15 * scaleRatio
                 text: root.historyStatusMessage;
                 color: MoneroComponents.Style.dimmedFontColor
+                themeTransitionBlackColor: MoneroComponents.Style._b_dimmedFontColor
+                themeTransitionWhiteColor: MoneroComponents.Style._w_dimmedFontColor
             }
         }
 
diff --git a/pages/Keys.qml b/pages/Keys.qml
index 9baa5ce8..e46b038d 100644
--- a/pages/Keys.qml
+++ b/pages/Keys.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
@@ -92,7 +92,7 @@ Rectangle {
                 addressValidation: false
                 readOnly: true
                 wrapMode: Text.WordWrap
-                fontColor: "white"
+                fontColor: MoneroComponents.Style.defaultFontColor
             }
         }
 
@@ -208,7 +208,7 @@ Rectangle {
                 fillMode: Image.PreserveAspectFit
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 Layout.fillWidth: true
                 font.bold: true
                 font.pixelSize: 16 * scaleRatio
diff --git a/pages/Mining.qml b/pages/Mining.qml
index 89710d9f..db980888 100644
--- a/pages/Mining.qml
+++ b/pages/Mining.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.Layouts 1.1
 import QtQuick.Dialogs 1.2
 import "../components" as MoneroComponents
@@ -65,7 +65,7 @@ Rectangle {
             visible: walletManager.isDaemonLocal(appWindow.currentDaemonAddress) && !appWindow.daemonSynced
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: soloMainLabel
             text: qsTr("Mining with your computer helps strengthen the Monero network. The more that people mine, the harder it is for the network to be attacked, and every little bit helps.<br> <br>Mining also gives you a small chance to earn some Monero. Your computer will create hashes looking for block solutions. If you find a block, you will get the associated reward. Good luck!") + translationManager.emptyString
             wrapMode: Text.Wrap
@@ -112,7 +112,7 @@ Rectangle {
                     validator: IntValidator { bottom: 1; top: idealThreadCount }
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: numAvailableThreadsText
                     text: qsTr("Max # of CPU threads available for mining: ") + idealThreadCount + translationManager.emptyString
                     wrapMode: Text.WordWrap
diff --git a/pages/Receive.qml b/pages/Receive.qml
index f0392a55..e31a79d7 100644
--- a/pages/Receive.qml
+++ b/pages/Receive.qml
@@ -26,13 +26,15 @@
 // 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 2.0
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
 
 import "../components" as MoneroComponents
+import "../components/effects/" as MoneroEffects
+
 import moneroComponents.Clipboard 1.0
 import moneroComponents.Wallet 1.0
 import moneroComponents.WalletManager 1.0
@@ -113,8 +115,14 @@ Rectangle {
                             anchors.left: parent.left
                             anchors.top: parent.top
                             height: 1
-                            color: "#404040"
+                            color: MoneroComponents.Style.appWindowBorderColor
                             visible: index !== 0
+
+                            MoneroEffects.ColorTransition {
+                                targetObj: parent
+                                blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                                whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                            }
                         }
 
                         Rectangle {
@@ -125,18 +133,19 @@ Rectangle {
 
                             MoneroComponents.Label {
                                 id: idLabel
-                                color: index === appWindow.current_subaddress_table_index ? "white" : "#757575"
+                                color: index === appWindow.current_subaddress_table_index ? MoneroComponents.Style.defaultFontColor : "#757575"
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: parent.left
                                 anchors.leftMargin: 6 * scaleRatio
                                 fontSize: 14 * scaleRatio
                                 fontBold: true
                                 text: "#" + index
+                                themeTransition: false
                             }
 
                             MoneroComponents.Label {
                                 id: nameLabel
-                                color: "#a5a5a5"
+                                color: MoneroComponents.Style.dimmedFontColor
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: idLabel.right
                                 anchors.leftMargin: 6 * scaleRatio
@@ -145,42 +154,42 @@ Rectangle {
                                 text: label
                                 elide: Text.ElideRight
                                 textWidth: addressLabel.x - nameLabel.x - 1
+                                themeTransition: false
                             }
 
                             MoneroComponents.Label {
                                 id: addressLabel
-                                color: "white"
+                                color: MoneroComponents.Style.defaultFontColor
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.left: parent.right
                                 anchors.leftMargin: (mainLayout.width < 510 ? -130 : -190) * scaleRatio
                                 fontSize: 14 * scaleRatio
                                 fontBold: true
                                 text: TxUtils.addressTruncate(address, mainLayout.width < 510 ? 6 : 10)
+                                themeTransition: false
                             }
 
                             MouseArea {
                                 cursorShape: Qt.PointingHandCursor
                                 anchors.fill: parent
                                 hoverEnabled: true
-                                onEntered: {
-                                    tableItem2.color = "#26FFFFFF"
-                                }
-                                onExited: {
-                                    tableItem2.color = "transparent"
-                                }
-                                onClicked: {
-                                    subaddressListView.currentIndex = index;
-                                }
+                                onEntered: tableItem2.color = MoneroComponents.Style.titleBarButtonHoverColor
+                                onExited: tableItem2.color = "transparent"
+                                onClicked: subaddressListView.currentIndex = index;
                             }
                         }
 
                         MoneroComponents.IconButton {
                             id: renameButton
-                            imageSource: "../images/editIcon.png"
+                            image: "qrc:///images/edit.svg"
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                             anchors.verticalCenter: parent.verticalCenter
                             anchors.right: parent.right
                             anchors.rightMargin: 30 * scaleRatio
                             anchors.topMargin: 1 * scaleRatio
+                            width: 23
+                            height: 21
                             visible: index !== 0
 
                             onClicked: {
@@ -190,10 +199,13 @@ Rectangle {
 
                         MoneroComponents.IconButton {
                             id: copyButton
-                            imageSource: "../images/dropdownCopy.png"
+                            image: "qrc:///images/copy.svg"
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                             anchors.verticalCenter: parent.verticalCenter
-                            anchors.top: undefined
                             anchors.right: parent.right
+                            width: 16
+                            height: 21
 
                             onClicked: {
                                 console.log("Address copied to clipboard");
@@ -214,9 +226,15 @@ Rectangle {
             }
 
             Rectangle {
-                color: "#404040"
+                color: MoneroComponents.Style.appWindowBorderColor
                 Layout.fillWidth: true
                 height: 1
+
+                MoneroEffects.ColorTransition {
+                    targetObj: parent
+                    blackColor: MoneroComponents.Style._b_appWindowBorderColor
+                    whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+                }
             }
 
             MoneroComponents.CheckBox {
@@ -249,7 +267,7 @@ Rectangle {
 
             Rectangle {
                 id: qrContainer
-                color: "white"
+                color: MoneroComponents.Style.blackTheme ? "white" : "transparent"
                 Layout.fillWidth: true
                 Layout.maximumWidth: parent.qrSize
                 Layout.preferredHeight: width
@@ -276,12 +294,12 @@ Rectangle {
                 spacing: parent.spacing
 
                 MoneroComponents.StandardButton {
-                    rightIcon: "../images/download-white.png"
+                    rightIcon: "qrc:///images/download-white.png"
                     onClicked: qrFileDialog.open()
                 }
 
                 MoneroComponents.StandardButton {
-                    rightIcon: "../images/external-link-white.png"
+                    rightIcon: "qrc:///images/external-link-white.png"
                     onClicked: {
                         clipboard.setText(TxUtils.makeQRCodeString(appWindow.current_address));
                         appWindow.showStatusMessage(qsTr("Copied to clipboard") + translationManager.emptyString, 3);
diff --git a/pages/SharedRingDB.qml b/pages/SharedRingDB.qml
index d4d5f687..4a353879 100644
--- a/pages/SharedRingDB.qml
+++ b/pages/SharedRingDB.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
@@ -100,7 +100,7 @@ Rectangle {
             text: qsTr("Shared RingDB") + translationManager.emptyString
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             text: qsTr("This page allows you to interact with the shared ring database. " +
                        "This database is meant for use by Monero wallets as well as wallets from Monero clones which reuse the Monero keys.") + translationManager.emptyString
             wrapMode: Text.Wrap
@@ -134,7 +134,7 @@ Rectangle {
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             textFormat: Text.RichText
             font.family: MoneroComponents.Style.fontRegular.name
             font.pixelSize: 14 * scaleRatio
@@ -272,7 +272,7 @@ Rectangle {
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             textFormat: Text.RichText
             font.family: MoneroComponents.Style.fontRegular.name
             font.pixelSize: 14 * scaleRatio
@@ -374,8 +374,6 @@ Rectangle {
                 id: segregatePreForkOutputs
                 checked: persistentSettings.segregatePreForkOutputs
                 text: qsTr("I intend to spend on key-reusing fork(s)") + translationManager.emptyString
-                checkedIcon: "../images/checkedIcon-black.png"
-                uncheckedIcon: "../images/uncheckedIcon.png"
                 onClicked: {
                     persistentSettings.segregatePreForkOutputs = segregatePreForkOutputs.checked
                     if (appWindow.currentWallet) {
@@ -388,8 +386,6 @@ Rectangle {
                 id: keyReuseMitigation2
                 checked: persistentSettings.keyReuseMitigation2
                 text: qsTr("I might want to spend on key-reusing fork(s)") + translationManager.emptyString
-                checkedIcon: "../images/checkedIcon-black.png"
-                uncheckedIcon: "../images/uncheckedIcon.png"
                 onClicked: {
                     persistentSettings.keyReuseMitigation2 = keyReuseMitigation2.checked
                     if (appWindow.currentWallet) {
@@ -402,23 +398,24 @@ Rectangle {
                 id: setRingRelative
                 checked: true
                 text: qsTr("Relative") + translationManager.emptyString
-                checkedIcon: "../images/checkedIcon-black.png"
-                uncheckedIcon: "../images/uncheckedIcon.png"
             }
         }
 
-        RowLayout {
+        GridLayout {
             id: segregationHeightRow
-            Layout.topMargin: 17 * scaleRatio
             Layout.fillWidth: true
+            Layout.topMargin: 17 * scaleRatio
+            columns: (isMobile) ?  1 : 2
+            columnSpacing: 32 * scaleRatio
 
             MoneroComponents.LineEdit {
                 id: segregationHeightLine
+                property bool edited: false
                 Layout.fillWidth: true
 
                 placeholderFontSize: 16 * scaleRatio
                 labelFontSize: 14 * scaleRatio
-                labelText: qsTr("Segregation height:") + translationManager.emptyString
+                labelText: qsTr("Set segregation height:") + translationManager.emptyString
                 validator: IntValidator { bottom: 0 }
                 readOnly: false
                 onEditingFinished: {
@@ -426,8 +423,15 @@ Rectangle {
                     if (appWindow.currentWallet) {
                         appWindow.currentWallet.segregationHeight(segregationHeightLine.text)
                     }
+
+                    // @TODO: LineEdit should visually be able show that an action
+                    // has been completed due to modification of the text
                 }
             }
+
+            Item {
+                Layout.fillWidth: true
+            }
         }
     }
 
diff --git a/pages/Sign.qml b/pages/Sign.qml
index a077ee92..9d26bcd0 100644
--- a/pages/Sign.qml
+++ b/pages/Sign.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
@@ -101,7 +101,7 @@ Rectangle {
             text: qsTr("Sign/verify") + translationManager.emptyString
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             text: qsTr("This page lets you sign/verify a message (or file contents) with your address.") + translationManager.emptyString
             wrapMode: Text.Wrap
             Layout.fillWidth: true
@@ -114,7 +114,7 @@ Rectangle {
             id: modeRow
             Layout.fillWidth: true
 
-            Text {
+            MoneroComponents.TextPlain {
                 id: modeText
                 Layout.fillWidth: true
                 Layout.topMargin: 12 * scaleRatio
diff --git a/pages/Transfer.qml b/pages/Transfer.qml
index 4fcf193d..b4563c7c 100644
--- a/pages/Transfer.qml
+++ b/pages/Transfer.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.Layouts 1.1
 import QtQuick.Dialogs 1.2
 import moneroComponents.Clipboard 1.0
@@ -196,10 +196,6 @@ Rectangle {
                   Layout.fillWidth: true
                   id: priorityDropdown
                   Layout.topMargin: 5 * scaleRatio
-                  shadowReleasedColor: "#FF4304"
-                  shadowPressedColor: "#B32D00"
-                  releasedColor: "#363636"
-                  pressedColor: "#202020"
                   currentIndex: 0
               }
           }
@@ -247,6 +243,7 @@ Rectangle {
                      addressLine.text = clipboardText; 
                   }
               }
+
               inlineButton.text: FontAwesome.qrcode
               inlineButton.fontPixelSize: 22
               inlineButton.fontFamily: FontAwesome.fontFamily
@@ -314,6 +311,8 @@ Rectangle {
               border: false
               checkedIcon: "qrc:///images/minus-white.png"
               uncheckedIcon: "qrc:///images/plus-white.png"
+              imgWidth: 12 * scaleRatio
+              imgHeight: 12 * scaleRatio
               fontSize: paymentIdLine.labelFontSize
               iconOnTheLeft: false
               Layout.fillWidth: true
@@ -343,6 +342,8 @@ Rectangle {
               border: false
               checkedIcon: "qrc:///images/minus-white.png"
               uncheckedIcon: "qrc:///images/plus-white.png"
+              imgWidth: 12 * scaleRatio
+              imgHeight: 12 * scaleRatio
               fontSize: descriptionLine.labelFontSize
               iconOnTheLeft: false
               Layout.fillWidth: true
@@ -381,8 +382,8 @@ Rectangle {
       RowLayout {
           StandardButton {
               id: sendButton
-              rightIcon: "../images/rightArrow.png"
-              rightIconInactive: "../images/rightArrowInactive.png"
+              rightIcon: "qrc:///images/rightArrow.png"
+              rightIconInactive: "qrc:///images/rightArrowInactive.png"
               Layout.topMargin: 4 * scaleRatio
               text: qsTr("Send") + translationManager.emptyString
               enabled: {
diff --git a/pages/TxKey.qml b/pages/TxKey.qml
index ee046b4b..4681df27 100644
--- a/pages/TxKey.qml
+++ b/pages/TxKey.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
@@ -63,7 +63,7 @@ Rectangle {
                 text: qsTr("Prove Transaction") + translationManager.emptyString
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 Layout.fillWidth: true
                 text: qsTr("Generate a proof of your incoming/outgoing payment by supplying the transaction ID, the recipient address and an optional message. \n" +
                            "For the case of outgoing payments, you can get a 'Spend Proof' that proves the authorship of a transaction. In this case, you don't need to specify the recipient address.") + translationManager.emptyString
@@ -123,7 +123,8 @@ Rectangle {
             // underline
             Rectangle {
                 height: 1
-                color: "#404040"
+                color: MoneroComponents.Style.dividerColor
+                opacity: MoneroComponents.Style.dividerOpacity
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
                 anchors.bottomMargin: 3 * scaleRatio
@@ -135,7 +136,7 @@ Rectangle {
                 text: qsTr("Check Transaction") + translationManager.emptyString
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 text: qsTr("Verify that funds were paid to an address by supplying the transaction ID, the recipient address, the message used for signing and the signature.\n" +
                            "For the case with Spend Proof, you don't need to specify the recipient address.") + translationManager.emptyString
                 wrapMode: Text.Wrap
@@ -207,14 +208,14 @@ Rectangle {
             // underline
             Rectangle {
                 height: 1
-                color: "#404040"
+                color: MoneroComponents.Style.dividerColor
+                opacity: MoneroComponents.Style.dividerOpacity
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
                 anchors.bottomMargin: 3 * scaleRatio
-
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 text: qsTr("If a payment had several transactions then each must be checked and the results combined.") + translationManager.emptyString
                 wrapMode: Text.Wrap
                 Layout.fillWidth: true
diff --git a/pages/merchant/Merchant.qml b/pages/merchant/Merchant.qml
index d364fdb5..e748a65c 100644
--- a/pages/merchant/Merchant.qml
+++ b/pages/merchant/Merchant.qml
@@ -1,4 +1,4 @@
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtGraphicalEffects 1.0
@@ -33,7 +33,6 @@ Item {
     property var    hiddenAmounts: []
 
     function onPageCompleted() {
-        appWindow.titlebarToggleOrange();
         appWindow.hideMenu();
 
         // prepare tracking
@@ -53,8 +52,6 @@ Item {
     }
 
     function onPageClosed() {
-        appWindow.titlebarToggleOrange();
-
         // reset component objects
         timer.running = false
         root.enableTracking = false
@@ -68,7 +65,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 300 * scaleRatio
-        source: "../../images/merchant/bg.png"
+        source: "qrc:///images/merchant/bg.png"
         smooth: false
     }
 
@@ -129,11 +126,12 @@ Item {
                                 Layout.preferredWidth: 10 * scaleRatio
                             }
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.pixelSize: 16 * scaleRatio
                                 font.bold: true
                                 color: "#767676"
                                 text: qsTr("Sales") + translationManager.emptyString
+                                themeTransition: false
                             }
 
                             Item {
@@ -267,7 +265,7 @@ Item {
                 width: (parent.width - qrImg.width) - (50 * scaleRatio)
                 height: 32 * scaleRatio
 
-                Text {
+                MoneroComponents.TextPlain {
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
                     font.pixelSize: 12 * scaleRatio
@@ -275,6 +273,7 @@ Item {
                     color: "white"
                     text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 12px;}</style>Currently selected address: " + addressLabel + " <a href='#'>(Change)</a>"
                     textFormat: Text.RichText
+                    themeTransition: false
 
                     MouseArea {
                         anchors.fill: parent
@@ -291,13 +290,14 @@ Item {
                 width: 220 * scaleRatio
                 height: 32 * scaleRatio
 
-                Text {
+                MoneroComponents.TextPlain {
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
                     font.pixelSize: 12 * scaleRatio
                     font.bold: false
                     color: "white"
                     text: qsTr("(right-click, save as)") + translationManager.emptyString
+                    themeTransition: false
                 }
             }
         }
@@ -336,11 +336,12 @@ Item {
                                 Layout.preferredWidth: 10 * scaleRatio
                             }
 
-                            Text {
+                            MoneroComponents.TextPlain {
                                 font.pixelSize: 14 * scaleRatio
                                 font.bold: true
                                 color: "#767676"
                                 text: qsTr("Payment URL") + translationManager.emptyString
+                                themeTransition: false
                             }
 
                             Item {
@@ -356,7 +357,7 @@ Item {
 //                            Layout.fillHeight: true
 //                            color: "transparent"
 
-//                            Text {
+//                            MoneroComponents.TextPlain {
 //                                anchors.verticalCenter: parent.verticalCenter
 //                                anchors.right: parent.right
 //                                anchors.rightMargin: 20 * scaleRatio
@@ -390,7 +391,7 @@ Item {
                         color: "#d9d9d9"
                     }
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         property string _color: "#767676"
                         Layout.fillWidth: true
                         Layout.margins: 20 * scaleRatio
@@ -403,6 +404,7 @@ Item {
                         font.bold: true
                         color: _color
                         text: TxUtils.makeQRCodeString(appWindow.current_address, amountToReceive.text)
+                        themeTransition: false
 
                         MouseArea {
                             anchors.fill: parent
@@ -446,17 +448,18 @@ Item {
                     anchors.left: parent.left
                     anchors.right: parent.right
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         font.pixelSize: 14 * scaleRatio
                         font.bold: false
                         color: "white"
                         text: qsTr("Amount to receive") + " (XMR)"
+                        themeTransition: false
                     }
 
                     Image {
                         height: 28 * scaleRatio
                         width: 220 * scaleRatio
-                        source: "../../images/merchant/input_box.png"
+                        source: "qrc:///images/merchant/input_box.png"
 
                         TextField {
                             id: amountToReceive
@@ -496,7 +499,7 @@ Item {
                         width: 220 * scaleRatio
                     }
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         // @TODO: When we have XMR/USD rate avi. in the future.
                         visible: false
                         font.pixelSize: 14 * scaleRatio
@@ -504,13 +507,14 @@ Item {
                         color: "white"
                         text: qsTr("Amount to receive") + " (USD)"
                         opacity: 0.2
+                        themeTransition: false
                     }
 
                     Image {
                         visible: false
                         height: 28 * scaleRatio
                         width: 220 * scaleRatio
-                        source: "../../images/merchant/input_box.png"
+                        source: "qrc:///images/merchant/input_box.png"
                         opacity: 0.2
                     }
                 }
@@ -536,12 +540,13 @@ Item {
                     }
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: content
                     font.pixelSize: 14 * scaleRatio
                     font.bold: false
                     color: "white"
                     text: qsTr("Leave this page") + translationManager.emptyString
+                    themeTransition: false
 
                     MouseArea {
                         anchors.fill: parent
@@ -564,13 +569,14 @@ Item {
         width: 400 * scaleRatio
         radius: 5
 
-        Text {
+        MoneroComponents.TextPlain {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             font.pixelSize: 14 * scaleRatio
             font.bold: true
             color: MoneroComponents.Style.moneroGrey
             text: qsTr("The merchant page requires a larger window") + translationManager.emptyString
+            themeTransition: false
         }
     }
 
diff --git a/pages/merchant/MerchantCheckbox.qml b/pages/merchant/MerchantCheckbox.qml
index 7b2abc6b..7e498dfa 100644
--- a/pages/merchant/MerchantCheckbox.qml
+++ b/pages/merchant/MerchantCheckbox.qml
@@ -1,7 +1,8 @@
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtGraphicalEffects 1.0
 
+import "../../components" as MoneroComponents
 
 RowLayout {
     id: root
@@ -22,16 +23,17 @@ RowLayout {
             id: imageChecked
             visible: root.checked
             anchors.centerIn: parent
-            source: "../../images/uncheckedIcon.png"
+            source: "qrc:///images/uncheckedIcon.png"
         }
     }
 
-    Text {
+    MoneroComponents.TextPlain {
         id: content
         font.pixelSize: 14 * scaleRatio
         font.bold: false
         color: "white"
         text: ""
+        themeTransition: false
     }
 
     MouseArea {
diff --git a/pages/merchant/MerchantTitlebar.qml b/pages/merchant/MerchantTitlebar.qml
new file mode 100644
index 00000000..b16a4341
--- /dev/null
+++ b/pages/merchant/MerchantTitlebar.qml
@@ -0,0 +1,197 @@
+// Copyright (c) 2014-2018, The Monero Project
+//
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without modification, are
+// permitted provided that the following conditions are met:
+//
+// 1. Redistributions of source code must retain the above copyright notice, this list of
+//    conditions and the following disclaimer.
+//
+// 2. Redistributions in binary form must reproduce the above copyright notice, this list
+//    of conditions and the following disclaimer in the documentation and/or other
+//    materials provided with the distribution.
+//
+// 3. Neither the name of the copyright holder nor the names of its contributors may be
+//    used to endorse or promote products derived from this software without specific
+//    prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
+// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+// 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.9
+import QtQuick.Window 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Layouts 1.2
+
+import FontAwesome 1.0
+import "../../components/" as MoneroComponents
+import "../../components/effects/" as MoneroEffects
+
+Rectangle {
+    id: root
+    property int mouseX: 0
+    property bool customDecorations: persistentSettings.customDecorations
+    property bool showMinimizeButton: true
+    property bool showMaximizeButton: true
+    property bool showCloseButton: true
+
+    height: {
+        if(!persistentSettings.customDecorations || isMobile) return 0;
+        return 50 * scaleRatio;
+    }
+
+    z: 1
+    color: "transparent"
+
+    signal closeClicked
+    signal maximizeClicked
+    signal minimizeClicked
+
+    Rectangle {
+        width: parent.width
+        height: parent.height
+        z: parent.z + 1
+        color: "#ff6600"
+    }
+
+    RowLayout {
+        z: parent.z + 2
+        spacing: 0
+        anchors.fill: parent
+
+        Item {
+            Layout.preferredHeight: parent.height
+            Layout.preferredWidth: parent.height * 3
+        }
+
+        // monero logo
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: parent.height
+
+            Image {
+                id: imgLogo
+                width: 132
+                height: 22
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+
+                source: "qrc:///images/moneroLogo_white.png"
+            }
+        }
+
+        // minimize
+        Rectangle {
+            color: "transparent"
+            visible: root.showMinimizeButton
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
+
+            MoneroEffects.ImageMask {
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 18
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: 3
+                width: 15
+                image: MoneroComponents.Style.titleBarMinimizeSource
+                color: "white"
+                opacity: 0.75
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = "#44FFFFFF"
+                onExited: parent.color = "transparent"
+                onClicked: root.minimizeClicked();
+            }
+        }
+
+        // maximize
+        Rectangle {
+            id: test
+            visible: root.showMaximizeButton
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
+
+            Image {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: MoneroComponents.Style._b_titleBarFullscreenSource
+                sourceSize.width: 16
+                sourceSize.height: 16
+                smooth: true
+                mipmap: true
+                opacity: 0.75
+                rotation: appWindow.visibility === Window.FullScreen ? 180 : 0
+            }
+
+            MouseArea {
+                id: buttonArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = "#44FFFFFF"
+                onExited: parent.color = "transparent"
+                onClicked: root.maximizeClicked();
+            }
+        }
+
+        // close
+        Rectangle {
+            visible: root.showCloseButton
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
+
+            MoneroEffects.ImageMask {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: 16
+                width: 16
+                image: MoneroComponents.Style._b_titleBarCloseSource
+                color: "white"
+                opacity: 0.75
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = "#44FFFFFF"
+                onExited: parent.color = "transparent"
+                onClicked: root.closeClicked();
+            }
+        }
+    }
+
+    MouseArea {
+        enabled: persistentSettings.customDecorations
+        property var previousPosition
+        anchors.fill: parent
+        propagateComposedEvents: true
+        onPressed: previousPosition = globalCursor.getPosition()
+        onPositionChanged: {
+            if (pressedButtons == Qt.LeftButton) {
+                var pos = globalCursor.getPosition()
+                var dx = pos.x - previousPosition.x
+                var dy = pos.y - previousPosition.y
+
+                appWindow.x += dx
+                appWindow.y += dy
+                previousPosition = pos
+            }
+        }
+    }
+}
diff --git a/pages/merchant/MerchantTrackingList.qml b/pages/merchant/MerchantTrackingList.qml
index a96b8be8..04268237 100644
--- a/pages/merchant/MerchantTrackingList.qml
+++ b/pages/merchant/MerchantTrackingList.qml
@@ -1,4 +1,4 @@
-import QtQuick 2.0
+import QtQuick 2.9
 import QtQuick.Controls 2.0
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
@@ -37,7 +37,7 @@ ListView {
         color: "#767676"
         textFormat: Text.RichText
         text: parent.message
-        selectionColor: MoneroComponents.Style.dimmedFontColor
+        selectionColor: MoneroComponents.Style.textSelectionColor
         selectByMouse: true
         readOnly: true
         onFocusChanged: {if(focus === false) deselect() }
@@ -73,11 +73,11 @@ ListView {
                     TextEdit {
                         id: dateString
                         anchors.verticalCenter: parent.verticalCenter
-                        font.pixelSize: 12 * scaleRatio
+                        font.pixelSize: 13 * scaleRatio
                         font.bold: false
                         color: "#707070"
                         text: time_date + " (" + Utils.ago(time_epoch) + ") "
-                        selectionColor: MoneroComponents.Style.dimmedFontColor
+                        selectionColor: MoneroComponents.Style.textSelectionColor
                         selectByMouse: true
                         readOnly: true
                         onFocusChanged: {if(focus === false) deselect() }
@@ -126,7 +126,7 @@ ListView {
                         font.bold: true
                         color: hide_amount ? "#707070" : "#009F1E"
                         text: hide_amount ? '-' : '+' + amount
-                        selectionColor: MoneroComponents.Style.dimmedFontColor
+                        selectionColor: MoneroComponents.Style.textSelectionColor
                         selectByMouse: true
                         readOnly: true
                         onFocusChanged: {if(focus === false) deselect() }
@@ -173,7 +173,7 @@ ListView {
                                 }
                             }
                         }
-                        selectionColor: MoneroComponents.Style.dimmedFontColor
+                        selectionColor: MoneroComponents.Style.textSelectionColor
                         selectByMouse: true
                         readOnly: true
                         onFocusChanged: {if(focus === false) deselect() }
@@ -199,7 +199,7 @@ ListView {
                         anchors.horizontalCenter: parent.horizontalCenter
                         Layout.preferredWidth: 12 * scaleRatio
                         Layout.preferredHeight: 21 * scaleRatio
-                        source: "../../images/merchant/arrow_right.png"
+                        source: "qrc:///images/merchant/arrow_right.png"
                     }
 
                     MouseArea {
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 {