White theme

LeftPanel.qml

@@ -1,4 +1,4 @@
-// Copyright (c) 2014-2018, The Monero Project
+// Copyright (c) 2014-2019, The Monero Project
 // 
 // All rights reserved.
 // 
@@ -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.2
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtGraphicalEffects 1.0
 import moneroComponents.Wallet 1.0
 import moneroComponents.NetworkType 1.0
 import moneroComponents.Clipboard 1.0
+
 import "components" as MoneroComponents
+import "components/effects/" as MoneroEffects
 
 Rectangle {
     id: panel
@@ -86,13 +88,18 @@ Rectangle {
     anchors.bottom: parent.bottom
     anchors.top: parent.top
 
-    Image {
+    MoneroEffects.GradientBackground {
-        anchors.left: parent.left
+        anchors.fill: parent
-        anchors.right: parent.right
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
-        anchors.top: parent.top
+        initialStartColor: MoneroComponents.Style.leftPanelBackgroundGradientStart
-        height: panel.height
+        initialStopColor: MoneroComponents.Style.leftPanelBackgroundGradientStop
-        source: "images/leftPanelBg.jpg"
+        blackColorStart: MoneroComponents.Style._b_leftPanelBackgroundGradientStart
-        z: 1
+        blackColorStop: MoneroComponents.Style._b_leftPanelBackgroundGradientStop
+        whiteColorStart: MoneroComponents.Style._w_leftPanelBackgroundGradientStart
+        whiteColorStop: MoneroComponents.Style._w_leftPanelBackgroundGradientStop
+        posStart: 0.6
+        start: Qt.point(0, 0)
+        end: Qt.point(height, width)
     }
 
     // card with monero logo
@@ -107,7 +114,6 @@ Rectangle {
         anchors.topMargin: (persistentSettings.customDecorations)? 50 : 0
 
         RowLayout {
-            visible: true
             Item {
                 anchors.left: parent.left
                 anchors.top: parent.top
@@ -118,12 +124,27 @@ Rectangle {
                 width: 260 * scaleRatio
 
                 Image {
-                    width: 260; height: 170
+                    id: card
+                    visible: !isOpenGL || MoneroComponents.Style.blackTheme
+                    width: 260
+                    height: 170
                     fillMode: Image.PreserveAspectFit
-                    source: "images/card-background.png"
+                    source: "qrc:///images/card-background.png"
                 }
 
-                Text {
+                DropShadow {
+                    visible: isOpenGL && !MoneroComponents.Style.blackTheme
+                    anchors.fill: card
+                    horizontalOffset: 3
+                    verticalOffset: 3
+                    radius: 10.0
+                    samples: 15
+                    color: "#3B000000"
+                    source: card
+                    cached: true
+                }
+
+                MoneroComponents.TextPlain {
                     id: testnetLabel
                     visible: persistentSettings.nettype != NetworkType.MAINNET
                     text: (persistentSettings.nettype == NetworkType.TESTNET ? qsTr("Testnet") : qsTr("Stagenet")) + translationManager.emptyString
@@ -134,9 +155,10 @@ Rectangle {
                     font.bold: true
                     font.pixelSize: 12
                     color: "#f33434"
+                    themeTransition: false
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: viewOnlyLabel
                     visible: viewOnly
                     text: qsTr("View Only") + translationManager.emptyString
@@ -147,6 +169,7 @@ Rectangle {
                     font.pixelSize: 12
                     font.bold: true
                     color: "#ff9323"
+                    themeTransition: false
                 }
 
                 Rectangle {
@@ -164,7 +187,7 @@ Rectangle {
                         anchors.horizontalCenter: parent.horizontalCenter
                         height: 16 * scaleRatio
                         width: 13 * scaleRatio
-                        source: "../images/logout.png"
+                        source: "qrc:///images/logout.png"
                     }
 
                     MouseArea{
@@ -190,9 +213,10 @@ Rectangle {
                 height: 490 * scaleRatio
                 width: 50 * scaleRatio
 
-                Text {
+                MoneroComponents.TextPlain {
                     visible: !isMobile
                     id: balanceText
+                    themeTransition: false
                     anchors.left: parent.left
                     anchors.leftMargin: 20
                     anchors.top: parent.top
@@ -228,9 +252,10 @@ Rectangle {
                     }
                 }
 
-                Text {
+                MoneroComponents.TextPlain {
                     id: unlockedBalanceText
                     visible: true
+                    themeTransition: false
                     anchors.left: parent.left
                     anchors.leftMargin: 20
                     anchors.top: parent.top
@@ -270,17 +295,20 @@ Rectangle {
                     id: unlockedBalanceLabel
                     visible: true
                     text: qsTr("Unlocked balance") + translationManager.emptyString
+                    color: "white"
                     fontSize: 14
                     anchors.left: parent.left
                     anchors.leftMargin: 20
                     anchors.top: parent.top
                     anchors.topMargin: 110
+                    themeTransition: false
                 }
 
                 MoneroComponents.Label {
                     visible: !isMobile
                     id: balanceLabel
                     text: qsTr("Balance") + translationManager.emptyString
+                    color: "white"
                     fontSize: 14
                     anchors.left: parent.left
                     anchors.leftMargin: 20
@@ -288,6 +316,7 @@ Rectangle {
                     anchors.topMargin: 60
                     elide: Text.ElideRight
                     textWidth: 238
+                    themeTransition: false
                 }
                 Item { //separator
                     anchors.left: parent.left
@@ -307,7 +336,6 @@ Rectangle {
         anchors.top: (isMobile)? parent.top : column1.bottom
         color: "transparent"
 
-
         Flickable {
             id:flicker
             contentHeight: menuColumn.height
@@ -317,7 +345,6 @@ Rectangle {
             clip: true
 
         Column {
-
             id: menuColumn
             anchors.left: parent.left
             anchors.right: parent.right
@@ -326,12 +353,10 @@ Rectangle {
             property var previousButton: transferButton
 
             // top border
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Account tab ---------------
@@ -349,13 +374,11 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: accountButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Transfer tab ---------------
@@ -373,13 +396,11 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: transferButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- AddressBook tab ---------------
@@ -399,13 +420,11 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: addressBookButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Receive tab ---------------
@@ -422,13 +441,12 @@ Rectangle {
                     panel.receiveClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: receiveButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Merchant tab ---------------
@@ -449,13 +467,11 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: merchantButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- History tab ---------------
@@ -473,13 +489,12 @@ Rectangle {
                     panel.historyClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: historyButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Advanced tab ---------------
@@ -497,13 +512,11 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: advancedButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
             // ------------- Mining tab ---------------
@@ -523,14 +536,13 @@ Rectangle {
                 }
             }
 
-            Rectangle {
+            MoneroComponents.MenuButtonDivider {
                 visible: miningButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: miningButton.checked || settingsButton.checked ? "#1C1C1C" : "#313131"
-                height: 1
             }
+
             // ------------- TxKey tab ---------------
             MoneroComponents.MenuButton {
                 id: txkeyButton
@@ -547,14 +559,14 @@ Rectangle {
                     panel.txkeyClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: txkeyButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
+
             // ------------- Shared RingDB tab ---------------
             MoneroComponents.MenuButton {
                 id: sharedringdbButton
@@ -571,16 +583,14 @@ Rectangle {
                     panel.sharedringdbClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: sharedringdbButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
-
             // ------------- Sign/verify tab ---------------
             MoneroComponents.MenuButton {
                 id: signButton
@@ -597,14 +607,14 @@ Rectangle {
                     panel.signClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: signButton.present && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
+
             // ------------- Settings tab ---------------
             MoneroComponents.MenuButton {
                 id: settingsButton
@@ -619,14 +629,14 @@ Rectangle {
                     panel.settingsClicked()
                 }
             }
-            Rectangle {
+
+            MoneroComponents.MenuButtonDivider {
                 visible: settingsButton.present
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
+
             // ------------- Sign/verify tab ---------------
             MoneroComponents.MenuButton {
                 id: keysButton
@@ -643,13 +653,12 @@ Rectangle {
                     panel.keysClicked()
                 }
             }
-            Rectangle {
+
-                visible: settingsButton.present && appWindow.walletMode >= 2
+            MoneroComponents.MenuButtonDivider {
+                visible: settingsButton.present && settingsButton.checked && appWindow.walletMode >= 2
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: 16
-                color: "#313131"
-                height: 1
             }
 
         } // Column
@@ -697,16 +706,5 @@ Rectangle {
             visible: networkStatus.connected
             height: 62 * scaleRatio
         }
-    } // menuRect
+    }
-
-
-
-    // indicate disabled state
-//    Desaturate {
-//        anchors.fill: parent
-//        source: parent
-//        desaturation: panel.enabled ? 0.0 : 1.0
-//    }
-
-
 }

MiddlePanel.qml

@@ -28,18 +28,18 @@
 
 
 import QtQml 2.0
-import QtQuick 2.2
+import QtQuick 2.9
 import QtQuick.Controls 2.0
 import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.1
 import QtGraphicalEffects 1.0
 import moneroComponents.Wallet 1.0
 
-import "components" as MoneroComponents
 import "./pages"
 import "./pages/settings"
 import "./pages/merchant"
-import "components" as MoneroComponents
+import "./components" as MoneroComponents
+import "./components/effects/" as MoneroEffects
 
 Rectangle {
     id: root
@@ -54,7 +54,6 @@ Rectangle {
     property int minHeight: (appWindow.height > 800) ? appWindow.height : 800 * scaleRatio
     property alias contentHeight: mainFlickable.contentHeight
     property alias flickable: mainFlickable
-//    property int headerHeight: header.height
 
     property Transfer transferView: Transfer { }
     property Receive receiveView: Receive { }
@@ -82,10 +81,18 @@ Rectangle {
         anchors.fill: parent
     }
 
-    Image {
+    MoneroEffects.GradientBackground {
-        anchors.fill: parent
         visible: currentView !== merchantView
-        source: "../images/middlePanelBg.jpg"
+        anchors.fill: parent
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
+        initialStartColor: MoneroComponents.Style.middlePanelBackgroundGradientStart
+        initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop
+        blackColorStart: MoneroComponents.Style._b_middlePanelBackgroundGradientStart
+        blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop
+        whiteColorStart: MoneroComponents.Style._w_middlePanelBackgroundGradientStart
+        whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop
+        start: Qt.point(0, 0)
+        end: Qt.point(height, width)
     }
 
     onCurrentViewChanged: {
@@ -249,11 +256,28 @@ Rectangle {
 
     // border
     Rectangle {
+        id: borderLeft
+        visible: middlePanel.state !== "Merchant"
         anchors.top: styledRow.bottom
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         width: 1
-        color: "#313131"
+        color: MoneroComponents.Style.appWindowBorderColor
+
+        MoneroEffects.ColorTransition {
+            targetObj: parent
+            blackColor: MoneroComponents.Style._b_appWindowBorderColor
+            whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+        }
+    }
+
+    // border shadow
+    Image {
+        source: "qrc:///images/middlePanelShadow.png"
+        width: 12
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: borderLeft.right
     }
 
     /* connect "payment" click */

RightPanel.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.2
+import QtQuick 2.9
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
 import QtGraphicalEffects 1.0

components/CheckBox.qml

@@ -26,16 +26,20 @@
 // 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 FontAwesome 1.0
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
 Item {
     id: checkBox
     property alias text: label.text
-    property string checkedIcon: "../images/checkedIcon-black.png"
+    property string checkedIcon: "qrc:///images/check-white.svg"
     property string uncheckedIcon
+    property int imgWidth: 13 * scaleRatio
+    property int imgHeight: 13 * scaleRatio
     property bool checked: false
     property alias background: backgroundRect.color
     property bool border: true
@@ -63,6 +67,7 @@ Item {
 
             Rectangle {
                 id: backgroundRect
+                visible: checkBox.border
                 anchors.fill: parent
                 radius: 3
                 color: "transparent"
@@ -72,22 +77,26 @@ Item {
                     } else {
                         return MoneroComponents.Style.inputBorderColorInActive;
                     }
-                visible: checkBox.border
             }
 
-            Image {
+            MoneroEffects.ImageMask {
+                id: img
+                visible: checkBox.checked || checkBox.uncheckedIcon != ""
                 anchors.centerIn: parent
-                source: {
+                width: checkBox.imgWidth
-                    if (checkBox.checked || checkBox.uncheckedIcon == "") {
+                height: checkBox.imgHeight
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.plus
+                fontAwesomeFallbackSize: 14
+                image: {
+                    if (checkBox.checked || checkBox.uncheckedIcon == "")
                         return checkBox.checkedIcon;
-                    }
                     return checkBox.uncheckedIcon;
                 }
-                visible: checkBox.checked || checkBox.uncheckedIcon != ""
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: label
             font.family: MoneroComponents.Style.fontRegular.name
             font.pixelSize: checkBox.fontSize

components/CheckBox2.qml

@@ -26,22 +26,22 @@
 // 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 QtGraphicalEffects 1.0
+import FontAwesome 1.0
+
 import "." 1.0
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
 RowLayout {
     id: checkBox
     property alias text: label.text
-    property string checkedIcon: "../images/checkedIcon-black.png"
-    property string uncheckedIcon
     property bool checked: false
-    property string background: "backgroundRect.color"
     property int fontSize: 14 * scaleRatio
     property alias fontColor: label.color
     property int textMargin: 8 * scaleRatio
-    property bool darkDropIndicator: false
     signal clicked()
     height: 25 * scaleRatio
 
@@ -58,7 +58,7 @@ RowLayout {
             width: (label.width + indicatorRect.width + checkBox.textMargin)
             color: "transparent"
 
-            Text {
+            MoneroComponents.TextPlain {
                 id: label
                 font.family: Style.fontLight.name
                 font.pixelSize: checkBox.fontSize
@@ -77,17 +77,23 @@ RowLayout {
                 color: "transparent"
                 rotation: checkBox.checked ? 180  * scaleRatio : 0
 
-                Image {
+                MoneroEffects.ImageMask {
                     id: indicatorImage
                     anchors.centerIn: parent
-                    source: "../images/whiteDropIndicator.png"
+                    width: 12 * scaleRatio
-                    visible: !darkDropIndicator
+                    height: 8 * scaleRatio
+                    image: "qrc:///images/whiteDropIndicator.png"
+                    color: MoneroComponents.Style.defaultFontColor
+                    opacity: MoneroComponents.Style.blackTheme ? 1 : 0.75
+                    fontAwesomeFallbackIcon: FontAwesome.arrowDown
+                    fontAwesomeFallbackSize: 14
+
+                    MoneroEffects.ColorTransition {
+                        targetObj: indicatorImage
+                        blackColor: "white"
+                        whiteColor: "black"
+                        duration: 500
                     }
-                ColorOverlay {
-                    anchors.fill: indicatorImage
-                    source: indicatorImage
-                    color: "#FF000000"
-                    visible: darkDropIndicator
                 }
             }
 
@@ -100,7 +106,5 @@ RowLayout {
                 }
             }
         }
-
-
     }
 }

components/DaemonConsole.qml

@@ -26,14 +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.Dialogs 1.2
 import QtQuick.Layouts 1.1
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Window 2.2
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 import "../js/Windows.js" as Windows
 import "../js/Utils.js" as Utils
 
@@ -64,10 +65,18 @@ Window {
     width:  480
     height: 280
 
-    // background gradient
+    // background
-    Image {
+    MoneroEffects.GradientBackground {
         anchors.fill: parent
-        source: "../images/middlePanelBg.jpg"
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
+        initialStartColor: MoneroComponents.Style.middlePanelBackgroundGradientStart
+        initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop
+        blackColorStart: MoneroComponents.Style._b_middlePanelBackgroundGradientStart
+        blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop
+        whiteColorStart: MoneroComponents.Style._w_middlePanelBackgroundGradientStart
+        whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop
+        start: Qt.point(0, 0)
+        end: Qt.point(height, width)
     }
 
     // Make window draggable
@@ -111,20 +120,20 @@ Window {
                     font.family: MoneroComponents.Style.defaultFontColor
                     font.pixelSize: 14 * scaleRatio
                     color: MoneroComponents.Style.defaultFontColor
-                    selectionColor: MoneroComponents.Style.dimmedFontColor
+                    selectionColor: MoneroComponents.Style.textSelectionColor
                     wrapMode: TextEdit.Wrap
                     readOnly: true
                     function logCommand(msg){
-                        msg = log_color(msg, "lime");
+                        msg = log_color(msg, MoneroComponents.Style.blackTheme ? "lime" : "#009100");
                         textArea.append(msg);
                     }
                     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

components/DaemonManagerDialog.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.Dialogs 1.2
 import QtQuick.Layouts 1.1
@@ -89,12 +89,14 @@ Window {
                 }
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 text: qsTr("Starting local node in %1 seconds").arg(countDown) + translationManager.emptyString;
                 font.pixelSize: 18
                 Layout.alignment: Qt.AlignHCenter
                 Layout.fillWidth: true
                 horizontalAlignment: Text.AlignHCenter
+                themeTransition: false
+                color: "black"
             }
 
         }

components/DatePicker.qml

@@ -26,18 +26,22 @@
 // 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.2
+import QtQuick 2.9
 import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.2
+import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.2
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
 Item {
     id: datePicker
+    z: parent.z + 1
     property bool expanded: false
     property date currentDate
     property bool showCurrentDate: true
-    property color backgroundColor : "#404040"
+    property color backgroundColor : MoneroComponents.Style.appWindowBorderColor
     property color errorColor : "red"
     property bool error: false
     property alias inputLabel: inputLabel
@@ -67,7 +71,7 @@ Item {
         height: 22
         width: parent.width
 
-        Text {
+        MoneroComponents.TextPlain {
             id: inputLabel
             anchors.top: parent.top
             anchors.topMargin: 2
@@ -77,6 +81,7 @@ Item {
             font.bold: false
             textFormat: Text.RichText
             color: MoneroComponents.Style.defaultFontColor
+            themeTransition: false
 
             MouseArea {
                 anchors.fill: parent
@@ -106,45 +111,14 @@ Item {
             color: datePicker.backgroundColor
         }
 
-        Item {
+        RowLayout {
-            id: buttonItem
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.margins: 4
-            width: height
-
-            Image {
-                id: button
-                anchors.centerIn: parent
-                source: "../images/whiteDropIndicator.png"
-                rotation: datePicker.expanded ? 180 : 0
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: datePicker.expanded = !datePicker.expanded
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
-
-        Rectangle {
-            id: separator
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: buttonItem.left
-            anchors.rightMargin: 4
-            height: 16
-            width: 1
-            color: "#808080"
-            visible: datePicker.expanded
-        }
-
-        Row {
             id: dateInput
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 10
+            anchors.leftMargin: 2
+            anchors.right: parent.right
+            property string headerFontColor: MoneroComponents.Style.blackTheme ? "#e6e6e6" : "#333333"
+            spacing: 0
 
             function setDate(date) {
                 var day = date.getDate()
@@ -164,12 +138,14 @@ Item {
             TextInput {
                 id: dayInput
                 readOnly: true
-                width: 22
+                Layout.preferredWidth: childrenRect.width + 40
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
+                color: datePicker.error ? errorColor : parent.headerFontColor
-                maximumLength: 2
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 2
                 validator: IntValidator{bottom: 01; top: 31;}
                 KeyNavigation.tab: monthInput
 
@@ -187,22 +163,25 @@ Item {
                 }
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
                 color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
                 text: "-"
+                themeTransition: false
             }
 
             TextInput {
                 id: monthInput
                 readOnly: true
-                width: 22
+                Layout.preferredWidth: childrenRect.width + 40
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
+                color: datePicker.error ? errorColor : parent.headerFontColor
-                maximumLength: 2
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 2
                 validator: IntValidator{bottom: 01; top: 12;}
                 KeyNavigation.tab: yearInput
                 text: {
@@ -219,23 +198,27 @@ Item {
                 }
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
                 color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
                 text: "-"
+                themeTransition: false
             }
 
             TextInput {
                 id: yearInput
-                width: 44
+                Layout.preferredWidth: childrenRect.width + 60
                 font.family: MoneroComponents.Style.fontRegular.name
                 font.pixelSize: 14
-                color: datePicker.error ? errorColor : MoneroComponents.Style.defaultFontColor
+                color: datePicker.error ? errorColor : parent.headerFontColor
-                maximumLength: 4
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectByMouse: true
                 horizontalAlignment: TextInput.AlignHCenter
+                maximumLength: 4
                 validator: IntValidator{bottom: 1000; top: 9999;}
                 text: if(datePicker.showCurrentDate) datePicker.currentDate.getFullYear()
+
                 onFocusChanged: {
                     if(focus === false) {
                         var d = new Date()
@@ -245,6 +228,36 @@ Item {
                     }
                 }
             }
+
+            Rectangle {
+                Layout.preferredHeight: parent.height
+                Layout.fillWidth: true
+                color: "transparent"
+
+                Image {
+                    id: button
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10 * scaleRatio
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: "qrc:///images/whiteDropIndicator.png"
+                    visible: false
+                }
+
+                ColorOverlay {
+                    source: button
+                    anchors.fill: button
+                    color: MoneroComponents.Style.defaultFontColor
+                    rotation: datePicker.expanded ? 180 : 0
+                    opacity: 1
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: datePicker.expanded = !datePicker.expanded
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                }
+            }
         }
     }
 
@@ -253,12 +266,12 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: head.bottom
-        color: "#FFFFFF"
+        anchors.topMargin: 10 * scaleRatio
+        color: MoneroComponents.Style.middlePanelBackgroundColor
         border.width: 1
-        border.color: "#DBDBDB"
+        border.color: MoneroComponents.Style.appWindowBorderColor
         height: datePicker.expanded ? calendar.height + 2 : 0
         clip: true
-        //radius: 4
 
         Behavior on height {
             NumberAnimation { duration: 100; easing.type: Easing.InQuad }
@@ -270,7 +283,7 @@ Item {
             anchors.leftMargin: 1
             anchors.rightMargin: 1
             anchors.top: parent.top
-            color: "#FFFFFF"
+            color: MoneroComponents.Style.appWindowBorderColor
             height: 1
         }
 
@@ -280,40 +293,58 @@ Item {
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.margins: 1
-            height: 180
+            anchors.bottomMargin: 10 * scaleRatio
+            height: 220
             frameVisible: false
 
             style: CalendarStyle {
                 gridVisible: false
-                background: Rectangle { color: "transparent" }
+                background: Rectangle { color: MoneroComponents.Style.middlePanelBackgroundColor }
                 dayDelegate: Item {
                     z: parent.z + 1
                     implicitHeight: implicitWidth
                     implicitWidth: calendar.width / 7
 
                     Rectangle {
+                        id: dayRect
                         anchors.fill: parent
                         radius: parent.implicitHeight / 2
-                        color: dayArea.pressed && styleData.visibleMonth ? "#FF6C3B" : "transparent"
+                        color: {
+                            if(dayArea.pressed && styleData.visibleMonth)
+                                return MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                            return "transparent";
+                        }
                     }
 
-                    Text {
+                    MoneroComponents.TextPlain {
+                        id: dayText
                         anchors.centerIn: parent
-                        font.family: "Arial"
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: 12
+                        font.pixelSize: {
-                        font.bold: dayArea.pressed
+                            if(!styleData.visibleMonth) return 12
+                            return 14
+                        }
+                        font.bold: {
+                            if(dayArea.pressed || styleData.visibleMonth) return true;
+                            return false;
+                        }
                         text: styleData.date.getDate()
+                        themeTransition: false
                         color: {
-                            if(!styleData.visibleMonth) return "#DBDBDB"
+                            if(!styleData.visibleMonth) return MoneroComponents.Style.lightGreyFontColor
-                            if(dayArea.pressed) return "#FFFFFF"
+                            if(dayArea.pressed) return MoneroComponents.Style.defaultFontColor
-                            if(styleData.today) return "#FF6C3B"
+                            if(styleData.today) return MoneroComponents.Style.orange
-                            return "#4A4848"
+                            return MoneroComponents.Style.defaultFontColor
                         }
                     }
 
                     MouseArea {
                         id: dayArea
                         anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: dayRect.color = MoneroComponents.Style.blackTheme ? "#20FFFFFF" : "#10000000"
+                        onExited: dayRect.color = "transparent"
+                        cursorShape: Qt.PointingHandCursor
                         onClicked: {
                             if(styleData.visibleMonth) {
                                 currentDate = styleData.date
@@ -325,7 +356,7 @@ Item {
                                 else calendar.showPreviousMonth()
                             }
 
-                            dateChanged();
+                            datePicker.dateChanged();
                         }
                     }
                 }
@@ -334,12 +365,13 @@ Item {
                     implicitHeight: 20
                     implicitWidth: calendar.width / 7
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         anchors.centerIn: parent
                         elide: Text.ElideRight
-                        font.family: "Arial"
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: 9
+                        font.pixelSize: 12
-                        color: "#535353"
+                        color: MoneroComponents.Style.lightGreyFontColor
+                        themeTransition: false
                         text: {
                             var locale = Qt.locale()
                             return locale.dayName(styleData.dayOfWeek, Locale.ShortFormat)
@@ -348,29 +380,44 @@ Item {
                 }
 
                 navigationBar: Rectangle {
+                    color: MoneroComponents.Style.middlePanelBackgroundColor
                     implicitWidth: calendar.width
                     implicitHeight: 30
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         anchors.centerIn: parent
-                        font.family: "Arial"
+                        font.family: MoneroComponents.Style.fontMonoRegular.name
-                        font.pixelSize: 12
+                        font.pixelSize: 14
-                        color: "#4A4646"
+                        color: MoneroComponents.Style.dimmedFontColor
+                        themeTransition: false
                         text: styleData.title
                     }
 
+
                     Item {
                         anchors.left: parent.left
+                        anchors.leftMargin: 4 * scaleRatio
                         anchors.top: parent.top
                         anchors.bottom: parent.bottom
                         width: height
 
                         Image {
+                            id: prevMonthIcon
                             anchors.centerIn: parent
-                            source: "../images/prevMonth.png"
+                            source: "qrc:///images/prevMonth.png"
+                            visible: false
+                        }
+
+                        ColorOverlay {
+                            source: prevMonthIcon
+                            anchors.fill: prevMonthIcon
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                         }
 
                         MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
                             anchors.fill: parent
                             onClicked: calendar.showPreviousMonth()
                         }
@@ -378,18 +425,29 @@ Item {
 
                     Item {
                         anchors.right: parent.right
+                        anchors.rightMargin: 4 * scaleRatio
                         anchors.top: parent.top
                         anchors.bottom: parent.bottom
                         width: height
 
                         Image {
+                            id: nextMonthIcon
                             anchors.centerIn: parent
-                            source: "../images/prevMonth.png"
+                            source: "qrc:///images/prevMonth.png"
-                            transformOrigin: Item.Center
+                            visible: false
+                        }
+
+                        ColorOverlay {
+                            source: nextMonthIcon
+                            anchors.fill: nextMonthIcon
+                            color: MoneroComponents.Style.defaultFontColor
+                            opacity: 0.5
                             rotation: 180
                         }
 
                         MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
                             anchors.fill: parent
                             onClicked: calendar.showNextMonth()
                         }

components/HistoryTable.qml

@@ -0,0 +1,506 @@
+// Copyright (c) 2014-2019, 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 moneroComponents.Clipboard 1.0
+import moneroComponents.AddressBookModel 1.0
+
+import "../components" as MoneroComponents
+import "../js/TxUtils.js" as TxUtils
+
+ListView {
+    id: listView
+    clip: true
+    boundsBehavior: ListView.StopAtBounds
+    property var previousItem
+    property int rowSpacing: 12
+    property var addressBookModel: null
+
+    function buildTxDetailsString(tx_id, paymentId, tx_key,tx_note, destinations, rings, address, address_label) {
+        var trStart = '<tr><td width="85" style="padding-top:5px"><b>',
+            trMiddle = '</b></td><td style="padding-left:10px;padding-top:5px;">',
+            trEnd = "</td></tr>";
+
+        return '<table border="0">'
+            + (tx_id ? trStart + qsTr("Tx ID:") + trMiddle + tx_id + trEnd : "")
+            + (address_label ? trStart + qsTr("Address label:") + trMiddle + address_label + trEnd : "")
+            + (address ? trStart + qsTr("Address:") + trMiddle + address + trEnd : "")
+            + (paymentId ? trStart + qsTr("Payment ID:") + trMiddle + paymentId + trEnd : "")
+            + (tx_key ? trStart + qsTr("Tx key:") + trMiddle + tx_key + trEnd : "")
+            + (tx_note ? trStart + qsTr("Tx note:") + trMiddle + tx_note + trEnd : "")
+            + (destinations ? trStart + qsTr("Destinations:") + trMiddle + destinations + trEnd : "")
+            + (rings ? trStart + qsTr("Rings:") + trMiddle + rings + trEnd : "")
+            + "</table>"
+            + translationManager.emptyString;
+    }
+
+    function lookupPaymentID(paymentId) {
+        if (!addressBookModel)
+            return ""
+        var idx = addressBookModel.lookupPaymentID(paymentId)
+        if (idx < 0)
+            return ""
+        idx = addressBookModel.index(idx, 0)
+        return addressBookModel.data(idx, AddressBookModel.AddressBookDescriptionRole)
+    }
+
+    footer: Rectangle {
+        height: 127 * scaleRatio
+        width: listView.width
+        color: "transparent"
+
+        MoneroComponents.TextPlain {
+            anchors.centerIn: parent
+            font.family: "Arial"
+            font.pixelSize: 14
+            color: "#545454"
+            text: qsTr("No more results") + translationManager.emptyString
+        }
+    }
+
+    delegate: Rectangle {
+        id: delegate
+        property bool collapsed: index ? false : true
+        height: collapsed ? 180 * scaleRatio : 70 * scaleRatio
+        width: listView.width
+        color: "transparent"
+
+        function collapse(){
+            delegate.height = 180 * scaleRatio;
+        }
+
+        // borders
+        Rectangle{
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: collapsed ? 2 : 1
+            color: collapsed ? "#BBBBBB" : "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.top
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
+        }
+
+        Rectangle {
+            id: row1
+            anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
+            anchors.right: parent.right
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: parent.top
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
+
+            Image {
+                id: arrowImage
+                source: isOut ? "qrc:///images/downArrow.png" : confirmationsRequired === 60  ? "qrc:///images/miningxmr.png" : "qrc:///images/upArrow-green.png"
+                height: 18 * scaleRatio
+                width: (confirmationsRequired === 60  ? 18 : 12) * scaleRatio
+                anchors.top: parent.top
+                anchors.topMargin: 12 * scaleRatio
+            }
+
+            MoneroComponents.TextPlain {
+                id: txrxLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                font.family: MoneroComponents.Style.fontLight.name
+                font.pixelSize: 14 * scaleRatio
+                text: isOut ? qsTr("Sent") + translationManager.emptyString : qsTr("Received") + translationManager.emptyString
+                color: "#808080"
+            }
+
+            MoneroComponents.TextPlain {
+                id: amountLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                anchors.top: txrxLabel.bottom
+                anchors.topMargin: 0 * scaleRatio
+                font.family: MoneroComponents.Style.fontBold.name
+                font.pixelSize: 18 * scaleRatio
+                font.bold: true
+                text: {
+                    var _amount = amount;
+                    if(_amount === 0){
+                        // *sometimes* amount is 0, while the 'destinations string' 
+                        // has the correct amount, so we try to fetch it from that instead.
+                        _amount = TxUtils.destinationsToAmount(destinations);
+                        _amount = (_amount *1);
+                    }
+
+                    return _amount + " XMR";
+                }
+                color: isOut ? MoneroComponents.Style.white : MoneroComponents.Style.green
+
+                MouseArea {
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onEntered: {
+                            parent.color = MoneroComponents.Style.orange
+                        }
+                        onExited: {
+                            parent.color = isOut ? MoneroComponents.Style.white : MoneroComponents.Style.green                        }
+                        onClicked: {
+                                console.log("Copied to clipboard");
+                                clipboard.setText(parent.text.split(" ")[0]);
+                                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+                        }
+                    }
+            }
+
+            Rectangle {
+                anchors.right: parent.right
+                width: 300 * scaleRatio
+                height: parent.height
+                color: "transparent"
+
+                MoneroComponents.TextPlain {
+                    id: dateLabel
+                    anchors.left: parent.left
+                    font.family: MoneroComponents.Style.fontRegular.name
+                    font.pixelSize: 14 * scaleRatio
+                    text: date
+                    color: "#808080"
+                }
+
+                MoneroComponents.TextPlain {
+                    id: timeLabel
+                    anchors.left: dateLabel.right
+                    anchors.leftMargin: 7 * scaleRatio
+                    anchors.top: parent.top
+                    anchors.topMargin: 1 * scaleRatio
+                    font.pixelSize: 12 * scaleRatio
+                    text: time
+                    color: "#808080"
+                }
+
+                MoneroComponents.TextPlain {
+                    id: toLabel
+                    property string address: ""
+                    color: "#BBBBBB"
+                    anchors.left: parent.left
+                    anchors.top: dateLabel.bottom
+                    anchors.topMargin: 0
+                    font.family: MoneroComponents.Style.fontRegular.name
+                    font.pixelSize: 16 * scaleRatio
+                    text: {
+                        if(isOut){
+                            address = TxUtils.destinationsToAddress(destinations);
+                            if(address){
+                                var truncated = TxUtils.addressTruncate(address);
+                                return qsTr("To ") + translationManager.emptyString + truncated;
+                            } else {
+                                return "Unknown recipient";
+                            }
+                        }
+                        return "";
+                    }
+
+                    MouseArea{
+                        visible: parent.address !== undefined
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onEntered: {
+                            toLabel.color = "white";
+                        }
+                        onExited: {
+                            toLabel.color = "#BBBBBB";
+                        }
+                        onClicked: {
+                            if(parent.address){
+                                console.log("Address copied to clipboard");
+                                clipboard.setText(parent.address);
+                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3)
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    height: 24 * scaleRatio
+                    width: 24 * scaleRatio
+                    color: "transparent"
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    Image {
+                        id: dropdownImage
+                        height: 8 * scaleRatio
+                        width: 12 * scaleRatio
+                        source: "qrc:///images/whiteDropIndicator.png"
+                        rotation: delegate.collapsed ? 180 : 0
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    MouseArea{
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            delegate.collapsed = !delegate.collapsed;
+                        }
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            id: row2
+            anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
+            anchors.right: parent.right
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: row1.bottom
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
+            visible: delegate.collapsed
+
+            // left column
+            MoneroComponents.HistoryTableInnerColumn{
+                anchors.left: parent.left
+                anchors.leftMargin: 30 * scaleRatio
+
+                labelHeader: qsTr("Transaction ID") + translationManager.emptyString
+                labelValue: hash.substring(0, 18) + "..."
+                copyValue: hash
+            }
+
+            // right column
+            MoneroComponents.HistoryTableInnerColumn{
+                anchors.right: parent.right
+                anchors.rightMargin: 100 * scaleRatio
+                width: 200 * scaleRatio
+                height: parent.height
+                color: "transparent"
+
+                labelHeader: qsTr("Fee")
+                labelValue: {
+                    if(!isOut && !fee){
+                        return "-";
+                    } else if(isOut && fee){
+                        return fee + " XMR";
+                    } else {
+                        return "Unknown"
+                    }
+                }
+                copyValue: {
+                    if(isOut && fee){ return fee }
+                    else { return "" }
+                }
+            }
+
+        }
+
+        Rectangle {
+            id: row3
+            anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
+            anchors.right: parent.right
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: row2.bottom
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
+            visible: delegate.collapsed
+
+            // left column
+            MoneroComponents.HistoryTableInnerColumn{
+                anchors.left: parent.left
+                anchors.leftMargin: 30 * scaleRatio
+                labelHeader: qsTr("Blockheight")
+                labelValue: {
+                    if (!isPending)
+                        if(confirmations < confirmationsRequired)
+                            return blockHeight + " " + qsTr("(%1/%2 confirmations)").arg(confirmations).arg(confirmationsRequired);
+                        else
+                            return blockHeight;
+                    if (!isOut)
+                        return qsTr("UNCONFIRMED") + translationManager.emptyString
+                    if (isFailed)
+                        return qsTr("FAILED") + translationManager.emptyString
+                    return qsTr("PENDING") + translationManager.emptyString
+                }
+                copyValue: labelValue.indexOf(" ") > 0 ? labelValue.slice(0, labelValue.indexOf(" ")) : labelValue
+            }
+
+            // right column
+            MoneroComponents.HistoryTableInnerColumn {
+                anchors.right: parent.right
+                anchors.rightMargin: 80 * scaleRatio
+                width: 220 * scaleRatio
+                height: parent.height
+                color: "transparent"
+                hashValue: hash
+                labelHeader: qsTr("Description") + translationManager.emptyString
+                labelHeaderIconImageSource: "qrc:///images/editIcon.png"
+
+                labelValue: {
+                    var note = currentWallet.getUserNote(hash);
+                    if(note){
+                        if(note.length > 28) {
+                            return note.substring(0, 28) + "...";
+                        } else {
+                            return note;
+                        }
+                    } else {
+                        return qsTr("None") + translationManager.emptyString;
+                    }
+                }
+
+                copyValue: {
+                    return currentWallet.getUserNote(hash);
+                }
+            }
+
+            Rectangle {
+                id: proofButton
+                visible: isOut
+                color: "#404040"
+                height: 24 * scaleRatio
+                width: 24 * scaleRatio
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 36
+                radius: 20 * scaleRatio
+
+                MouseArea {
+                    id: proofButtonMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        var address = TxUtils.destinationsToAddress(destinations);
+                        if(address === undefined){
+                            console.log('getProof: Error fetching address')
+                            return;
+                        }
+
+                        var checked = (TxUtils.checkTxID(hash) && TxUtils.checkAddress(address, appWindow.persistentSettings.nettype));
+                        if(!checked){
+                            console.log('getProof: Error checking TxId and/or address');
+                        }
+
+                        console.log("getProof: Generate clicked: txid " + hash + ", address " + address);
+                        root.getProofClicked(hash, address, '');
+                    }
+
+                    onEntered: {
+                        proofButton.color = "#656565";
+                    }
+
+                    onExited: {
+                        proofButton.color = "#404040";
+                    }
+                }
+
+                MoneroComponents.TextPlain {
+                    color: MoneroComponents.Style.defaultFontColor
+                    text: "P"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 14 * scaleRatio
+                }
+            }
+
+            Rectangle {
+                id: detailsButton
+                color: "#404040"
+                height: 24 * scaleRatio
+                width: 24 * scaleRatio
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 6
+                radius: 20 * scaleRatio
+
+                MouseArea {
+                    id: detailsButtonMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        var tx_key = currentWallet.getTxKey(hash)
+                        var tx_note = currentWallet.getUserNote(hash)
+                        var rings = currentWallet.getRings(hash)
+                        var address_label = subaddrIndex == 0 ? qsTr("Primary address") : currentWallet.getSubaddressLabel(subaddrAccount, subaddrIndex)
+                        var address = currentWallet.address(subaddrAccount, subaddrIndex)
+                        if (rings)
+                            rings = rings.replace(/\|/g, '\n')
+                        informationPopup.title = "Transaction details";
+                        informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings, address, address_label);
+                        informationPopup.onCloseCallback = null
+                        informationPopup.open();
+                    }
+
+                    onEntered: {
+                        detailsButton.color = "#656565";
+                    }
+
+                    onExited: {
+                        detailsButton.color = "#404040";
+                    }
+                }
+
+                MoneroComponents.TextPlain {
+                    color: MoneroComponents.Style.defaultFontColor
+                    text: "?"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 14 * scaleRatio
+                }
+            }
+        }
+    }
+
+    Clipboard { id: clipboard }
+}

components/IconButton.qml

@@ -26,55 +26,33 @@
 // 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 "../components" as MoneroComponents
+import "../components/effects" as MoneroEffects
 
-import QtQuick 2.0
+MoneroEffects.ImageMask {
-
+    id: button
-Item {
+    z: 666
-    property alias image : buttonImage
+    color: MoneroComponents.Style.defaultFontColor
-    property alias imageSource : buttonImage.source
+    image: ""
 
     signal clicked(var mouse)
 
-    id: button
-    width: parent.height
-    height: parent.height
-    anchors.right: parent.right
-    anchors.top: parent.top
-    anchors.bottom: parent.bottom
-
-    Image {
-        id: buttonImage
-        source: ""
-        x : (parent.width - width) / 2
-        y : (parent.height - height) / 2
-        z: 100
-    }
-
     MouseArea {
-        id: buttonArea
+        anchors.fill: parent
-        anchors.fill: buttonImage
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
 
-        onPressed: {
+        onEntered: {
-            buttonImage.x = buttonImage.x + 2
+            button.width = button.width + 2
-            buttonImage.y = buttonImage.y + 2
+            button.height = button.height + 2
-        }
-
-        onReleased: {
-            buttonImage.x = (parent.width - width) / 2
-            buttonImage.y = (parent.height - height) / 2
         }
 
         onExited: {
-            if (pressed) {
+            button.width = button.width - 2
-                buttonImage.x = (parent.width - width) / 2
+            button.height = button.height - 2
-                buttonImage.y = (parent.height - height) / 2
-            }
         }
 
-        onClicked: {
+        onClicked: button.clicked(mouse)
-            parent.clicked(mouse)
-        }
     }
 }

components/InlineButton.qml

@@ -26,10 +26,12 @@
 // 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 QtGraphicalEffects 1.0
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "./effects/" as MoneroEffects
 
 Item {
     id: inlineButton
@@ -43,9 +45,9 @@ Item {
     property string pressedColor: "#FF4304"
     property string releasedColor: "#FF6C3C"
     property string icon: ""
-    property string textColor: "black"
+    property string textColor: MoneroComponents.Style.inlineButtonTextColor
     property int fontSize: small ? 14 * scaleRatio : 16 * scaleRatio
-    property int rectHeight: small ? 24 * scaleRatio : 28 * scaleRatio
+    property int rectHeight: small ? 24 * scaleRatio : 24 * scaleRatio
     property int rectHMargin: small ? 16 * scaleRatio : 22 * scaleRatio
     property alias text: inlineText.text
     property alias fontPixelSize: inlineText.font.pixelSize
@@ -61,16 +63,16 @@ Item {
 
     Rectangle{
         id: rect
-        color: MoneroComponents.Style.buttonBackgroundColorDisabled
+        color: MoneroComponents.Style.buttonInlineBackgroundColor
-        border.color: "black"
+        height: 24 * scaleRatio
-        height: 28 * scaleRatio
+        width: inlineText.text ? (inlineText.width + 16) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height
-        width: inlineText.text ? (inlineText.width + 22) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height
         radius: 4
 
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
+        anchors.rightMargin: 4 * scaleRatio
 
-        Text {
+        MoneroComponents.TextPlain {
             id: inlineText
             font.family: MoneroComponents.Style.fontBold.name
             font.bold: true
@@ -78,6 +80,13 @@ Item {
             color: inlineButton.textColor
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
+            themeTransition: false
+
+            MoneroEffects.ColorTransition {
+                targetObj: inlineText
+                blackColor: MoneroComponents.Style._b_inlineButtonTextColor
+                whiteColor: MoneroComponents.Style._w_inlineButtonTextColor
+            }
         }
 
         Image {
@@ -104,6 +113,18 @@ Item {
         }
     }
 
+    DropShadow {
+        visible: !MoneroComponents.Style.blackTheme
+        anchors.fill: rect
+        horizontalOffset: 2
+        verticalOffset: 2
+        radius: 7.0
+        samples: 10
+        color: "#1B000000"
+        cached: true
+        source: rect
+    }
+
     Keys.onSpacePressed: doClick()
     Keys.onReturnPressed: doClick()
 }

components/Input.qml

@@ -27,7 +27,7 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick.Controls 2.0
-import QtQuick 2.7
+import QtQuick 2.9
 
 import "../components" as MoneroComponents
 
@@ -38,8 +38,8 @@ TextField {
     horizontalAlignment: TextInput.AlignLeft
     selectByMouse: true
     color: MoneroComponents.Style.defaultFontColor
-    selectionColor: MoneroComponents.Style.dimmedFontColor
+    selectionColor: MoneroComponents.Style.textSelectionColor
-    selectedTextColor: MoneroComponents.Style.defaultFontColor
+    selectedTextColor: MoneroComponents.Style.textSelectedColor
 
     background: Rectangle {
         color: "transparent"

components/InputDialog.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.Controls 2.0
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
@@ -49,7 +49,7 @@ Item {
         inactiveOverlay.visible = true
         leftPanel.enabled = false
         middlePanel.enabled = false
-        titleBar.enabled = false
+        titleBar.state = "essentials"
         show()
         root.visible = true;
         input.focus = true;
@@ -60,7 +60,7 @@ Item {
         inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
-        titleBar.enabled = true
+        titleBar.state = "default"
         root.visible = false;
     }
 
@@ -101,14 +101,14 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
-                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectionColor: MoneroComponents.Style.textSelectionColor
-                selectedTextColor: MoneroComponents.Style.defaultFontColor
+                selectedTextColor: MoneroComponents.Style.textSelectedColor
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    border.color: MoneroComponents.Style.inputBorderColorActive
                     border.width: 1
-                    color: "black"
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
                 }
 
                 Keys.onReturnPressed: {

components/InputMulti.qml

@@ -27,7 +27,7 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick.Controls 2.0
-import QtQuick 2.7
+import QtQuick 2.9
 
 import "../js/TxUtils.js" as TxUtils
 import "../components" as MoneroComponents
@@ -48,8 +48,8 @@ TextArea {
     font.bold: fontBold
     horizontalAlignment: TextInput.AlignLeft
     selectByMouse: mouseSelection
-    selectionColor: MoneroComponents.Style.dimmedFontColor
+    selectionColor: MoneroComponents.Style.textSelectionColor
-    selectedTextColor: MoneroComponents.Style.defaultFontColor
+    selectedTextColor: MoneroComponents.Style.textSelectedColor
 
     property int minimumHeight: 100 * scaleRatio
     height: contentHeight > minimumHeight ? contentHeight : minimumHeight

components/Label.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.5
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 
 import "../components" as MoneroComponents
@@ -43,15 +43,15 @@ Item {
     property string fontFamily: ""
     property alias wrapMode: label.wrapMode
     property alias horizontalAlignment: label.horizontalAlignment
-    property alias hoveredLink: label.hoveredLink
     property alias elide: label.elide
     property alias textWidth: label.width
+    property alias themeTransition: label.themeTransition
     signal linkActivated()
     height: label.height * scaleRatio
     width: label.width * scaleRatio
     Layout.topMargin: 10 * scaleRatio
 
-    Text {
+    MoneroComponents.TextPlain {
         id: label
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 2 * scaleRatio

components/LabelButton.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 "../components" as MoneroComponents
@@ -37,14 +37,14 @@ Rectangle {
     property alias text: labelButtonText.text
 
     id: labelButton
-    color: "#808080"
+    color: MoneroComponents.Style.buttonBackgroundColorDisabled
     radius: 3
     height: 20
     width: labelButtonText.width + 14
     anchors.right: copyButton.left
     anchors.rightMargin: 6
 
-    Text {
+    MoneroComponents.TextPlain {
         id: labelButtonText
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
@@ -52,7 +52,7 @@ Rectangle {
         font.pixelSize: 12
         font.bold: true
         text: ""
-        color: "black"
+        color: MoneroComponents.Style.inlineButtonTextColor
     }
 
     MouseArea {
@@ -61,11 +61,11 @@ Rectangle {
         hoverEnabled: true
         onClicked: labelButton.clicked()
         onEntered: {
-            labelButton.color = "#707070";
+            labelButton.color = MoneroComponents.Style.buttonBackgroundColorDisabledHover;
             labelButtonText.opacity = 0.8;
         }
         onExited: {
-            labelButton.color = "#808080";
+            labelButton.color = MoneroComponents.Style.buttonBackgroundColorDisabled;
             labelButtonText.opacity = 1.0;
         }
     }

components/LabelSubheader.qml

@@ -26,9 +26,10 @@
 // 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 "../components" as MoneroComponents
+import "../components/effects/" as MoneroEffects
 
 Label {
     id: item
@@ -40,13 +41,12 @@ Label {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 2
-        color: MoneroComponents.Style.dividerColor
+        color: MoneroComponents.Style.appWindowBorderColor
-        opacity: MoneroComponents.Style.dividerOpacity
-    }
 
-    MouseArea {
+        MoneroEffects.ColorTransition {
-        anchors.fill: parent
+            targetObj: parent
-        acceptedButtons: Qt.NoButton
+            blackColor: MoneroComponents.Style._b_appWindowBorderColor
-        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+            whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+        }
     }
 }

components/LanguageSidebar.qml

@@ -28,7 +28,7 @@
 
 import "../components" as MoneroComponents
 
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.XmlListModel 2.0
 import QtQuick.Layouts 1.2
 import QtQuick.Controls 2.0
@@ -79,7 +79,7 @@ Drawer {
                 width: sideBar.width
                 height: 32 * scaleRatio
 
-                Text {
+                MoneroComponents.TextPlain {
                     anchors.left: parent.left
                     anchors.leftMargin: 16 * scaleRatio
                     font.bold: true
@@ -101,7 +101,7 @@ Drawer {
                 // button gradient while checked
                 Image {
                     anchors.fill: parent
-                    source: "../images/menuButtonGradient.png"
+                    source: "qrc:///images/menuButtonGradient.png"
                     opacity: 0.65
                     visible: true
 

components/LineEdit.qml

@@ -26,7 +26,8 @@
 // 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 QtGraphicalEffects 1.0
 
 import "../components" as MoneroComponents
 
@@ -106,7 +107,7 @@ Item {
         }
     }
 
-    Text {
+    MoneroComponents.TextPlain {
         id: inputLabel
         anchors.top: parent.top
         anchors.left: parent.left
@@ -146,7 +147,7 @@ Item {
         width: parent.width
         clip: true
 
-        Text {
+        MoneroComponents.TextPlain {
             id: placeholderLabel
             visible: input.text ? false : true
             anchors.verticalCenter: parent.verticalCenter
@@ -192,7 +193,7 @@ Item {
             anchors.topMargin: 8 * scaleRatio
             anchors.left: parent.left
             anchors.leftMargin: 12 * scaleRatio
-            source: "../images/moneroIcon-28x28.png"
+            source: "qrc:///images/moneroIcon-28x28.png"
             visible: false
         }
 

components/LineEditMulti.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 "../components" as MoneroComponents
@@ -72,7 +72,7 @@ ColumnLayout {
     property int labelFontSize: 16 * scaleRatio
     property bool labelButtonVisible: false
 
-    property string fontColor: "white"
+    property string fontColor: MoneroComponents.Style.defaultFontColor
     property bool fontBold: false
     property int fontSize: 16 * scaleRatio
 
@@ -103,7 +103,7 @@ ColumnLayout {
         height: (inputLabel.height + 10) * scaleRatio
         visible: showingHeader ? true : false
 
-        Text {
+        MoneroComponents.TextPlain {
             id: inputLabel
             anchors.top: parent.top
             anchors.left: parent.left
@@ -172,7 +172,7 @@ ColumnLayout {
         onEditingFinished: item.editingFinished()
         error: item.error
 
-        Text {
+        MoneroComponents.TextPlain {
             id: placeholderLabel
             visible: input.text ? false : true
             anchors.verticalCenter: parent.verticalCenter

components/MenuButton.qml

@@ -26,9 +26,11 @@
 // 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.5
+import QtQuick 2.9
+import QtGraphicalEffects 1.0
 
 import "../components" as MoneroComponents
+import "effects/" as MoneroEffects
 
 Rectangle {
     id: button
@@ -46,7 +48,6 @@ Rectangle {
         clicked();
     }
 
-
     function getOffset() {
         var offset = 0
         var item = button
@@ -61,16 +62,27 @@ Rectangle {
     property bool present: !under || under.checked || checked || under.numSelectedChildren > 0
     height: present ? ((appWindow.height >= 800) ? 44 * scaleRatio  : 38 * scaleRatio ) : 0
 
-    // button gradient while checked
+    LinearGradient {
-    Image {
+        visible: isOpenGL && button.checked
         height: parent.height
         width: 260
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: -20
         anchors.leftMargin: parent.getOffset()
-        source: "../images/menuButtonGradient.png"
+        start: Qt.point(width, 0)
-        visible: button.checked
+        end: Qt.point(0, 0)
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: MoneroComponents.Style.menuButtonGradientStart }
+            GradientStop { position: 1.0; color: MoneroComponents.Style.menuButtonGradientStop }
+        }
+    }
+
+    // fallback hover effect when opengl is not available
+    Rectangle {
+        visible: !isOpenGL && button.checked
+        anchors.fill: parent
+        color: MoneroComponents.Style.menuButtonFallbackBackgroundColor
     }
 
     // button decorations that are subject to leftMargin offsets
@@ -79,7 +91,7 @@ Rectangle {
         anchors.leftMargin: parent.getOffset() + 20 * scaleRatio
         height: parent.height
         width: button.checked ? 20: 10
-        color: "#00000000"
+        color: "transparent"
 
         // dot if unchecked
         Rectangle {
@@ -93,43 +105,48 @@ Rectangle {
             Image {
                 anchors.centerIn: parent
                 anchors.left: parent.left
-                source: "../images/arrow-right-medium-white.png"
+                source: MoneroComponents.Style.menuButtonImageDotArrowSource
                 visible: button.checked
             }
         }
 
         // button text
-        Text {
+        MoneroComponents.TextPlain {
             id: label
+            color: MoneroComponents.Style.menuButtonTextColor
+            themeTransitionBlackColor: MoneroComponents.Style._b_menuButtonTextColor
+            themeTransitionWhiteColor: MoneroComponents.Style._w_menuButtonTextColor
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.right
             anchors.leftMargin: 8 * scaleRatio
-            font.family: MoneroComponents.Style.fontMedium.name
             font.bold: true
-            font.pixelSize: 16 * scaleRatio
+            font.pixelSize: 14 * scaleRatio
-            color: "#FFFFFF"
         }
     }
 
     // menu button right arrow
-    Image {
+    MoneroEffects.ImageMask {
         anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: parent.getOffset()
         anchors.right: parent.right
         anchors.rightMargin: 20 * scaleRatio
-        anchors.leftMargin: parent.getOffset()
+        height: 14
-        source: "../images/right.png"
+        width: 8
-        opacity: button.checked ? 1.0 : 0.4
+        image: MoneroComponents.Style.menuButtonImageRightSource
+        color: button.checked ? MoneroComponents.Style.menuButtonImageRightColorActive : MoneroComponents.Style.menuButtonImageRightColor
+        opacity: button.checked ? 0.8 : 0.25
     }
 
-    Text {
+    MoneroComponents.TextPlain {
         id: symbolText
         anchors.right: parent.right
         anchors.rightMargin: 44 * scaleRatio
         anchors.verticalCenter: parent.verticalCenter
         font.pixelSize: 12 * scaleRatio
         font.bold: true
-        color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
+        color: button.checked || buttonArea.containsMouse ? MoneroComponents.Style.menuButtonTextColor : dot.color
         visible: appWindow.ctrlPressed
+        themeTransition: false
     }
 
     MouseArea {

components/MenuButtonDivider.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.9
+
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
+
+Rectangle {
+    color: MoneroComponents.Style.appWindowBorderColor
+    height: 1
+
+    MoneroEffects.ColorTransition {
+        targetObj: parent
+        blackColor: MoneroComponents.Style._b_appWindowBorderColor
+        whiteColor: MoneroComponents.Style._w_appWindowBorderColor
+    }
+}

components/MobileHeader.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.2
+import QtQuick 2.9
 import QtGraphicalEffects 1.0
 import QtQuick.Layouts 1.1
 
@@ -21,7 +21,7 @@ Rectangle {
         anchors.verticalCenterOffset: -5
         anchors.left: parent.left
         anchors.leftMargin: 50 * scaleRatio
-        source: "../images/moneroLogo2.png"
+        source: "qrc:///images/moneroLogo2.png"
     }
 
     Image {
@@ -30,7 +30,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.leftMargin: 40 * scaleRatio 
-        source: "../images/moneroIcon.png"
+        source: "qrc:///images/moneroIcon.png"
     }
 
     Grid {
@@ -41,7 +41,7 @@ Rectangle {
         width: 256 * scaleRatio
         columns: 3
 
-        Text {
+        MoneroComponents.TextPlain {
             id: balanceLabel
             width: 116 * scaleRatio
             height: 20 * scaleRatio
@@ -55,7 +55,7 @@ Rectangle {
             text: leftPanel.balanceLabelText + ":"
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: balanceText
             width: 110 * scaleRatio
             height: 20 * scaleRatio
@@ -76,11 +76,11 @@ Rectangle {
             Image {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
-                source: "../images/lockIcon.png"
+                source: "qrc:///images/lockIcon.png"
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             width: 116 * scaleRatio
             height: 20 * scaleRatio
             font.family: "Arial"
@@ -93,7 +93,7 @@ Rectangle {
             text: qsTr("Unlocked Balance:")
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: availableBalanceText
             width: 110 * scaleRatio
             height: 20 * scaleRatio

components/NetworkStatusItem.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 moneroComponents.Wallet 1.0
@@ -79,11 +79,11 @@ Rectangle {
                 anchors.rightMargin: !appWindow.isMining ? 11 * scaleRatio : 0
                 source: {
                     if(appWindow.isMining) {
-                       return "../images/miningxmr.png"
+                       return "qrc:///images/miningxmr.png"
                     } else if(item.connected == Wallet.ConnectionStatus_Connected) {
-                        return "../images/lightning.png"
+                        return "qrc:///images/lightning.png"
                     } else {
-                        return "../images/lightning-white.png"
+                        return "qrc:///images/lightning-white.png"
                     }
                 }
                 MouseArea {
@@ -105,7 +105,7 @@ Rectangle {
             height: 40 * scaleRatio
             width: 260 * scaleRatio
 
-            Text {
+            MoneroComponents.TextPlain {
                 id: statusText
                 anchors.left: parent.left
                 anchors.top: parent.top
@@ -113,20 +113,24 @@ Rectangle {
                 font.family: MoneroComponents.Style.fontMedium.name
                 font.bold: true
                 font.pixelSize: 13 * scaleRatio
-                color: "white"
+                color: MoneroComponents.Style.dimmedFontColor
-                opacity: 0.5
+                opacity: MoneroComponents.Style.blackTheme ? 0.65 : 0.5
                 text: qsTr("Network status") + translationManager.emptyString
+                themeTransition: false
             }
 
-            Text {
+            MoneroComponents.TextPlain {
                 id: statusTextVal
                 anchors.left: parent.left
                 anchors.top: parent.top
                 anchors.topMargin: 14
                 font.family: MoneroComponents.Style.fontMedium.name
                 font.pixelSize: 20 * scaleRatio
-                color: "white"
+                color: MoneroComponents.Style.defaultFontColor
                 text: getConnectionStatusString(item.connected) + translationManager.emptyString
+                opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.7
+                themeTransition: false
+
                 MouseArea {
                     anchors.fill: parent
                     cursorShape: Qt.PointingHandCursor

components/NewPasswordDialog.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.Controls 2.0
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
@@ -52,7 +52,9 @@ Item {
         inactiveOverlay.visible = true
         leftPanel.enabled = false
         middlePanel.enabled = false
-        titleBar.enabled = false
+        titleBar.state = "essentials"
+
+        show();
         root.visible = true;
         passwordInput1.text = "";
         passwordInput2.text = "";
@@ -63,7 +65,7 @@ Item {
         inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
-        titleBar.enabled = true
+        titleBar.state = "default"
         root.visible = false;
         closeCallback();
     }
@@ -123,22 +125,22 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
-                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectionColor: MoneroComponents.Style.textSelectionColor
-                selectedTextColor: MoneroComponents.Style.defaultFontColor
+                selectedTextColor: MoneroComponents.Style.textSelectedColor
                 KeyNavigation.tab: passwordInput2
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    border.color: MoneroComponents.Style.inputBorderColorInActive
                     border.width: 1
-                    color: "black"
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
 
                     Image {
                         width: 26 * scaleRatio
                         height: 26 * scaleRatio
                         opacity: 0.7
                         fillMode: Image.PreserveAspectFit
-                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
+                        source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
@@ -202,24 +204,25 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
-                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectionColor: MoneroComponents.Style.textSelectionColor
-                selectedTextColor: MoneroComponents.Style.defaultFontColor
+                selectedTextColor: MoneroComponents.Style.textSelectedColor
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    border.color: MoneroComponents.Style.inputBorderColorInActive
                     border.width: 1
-                    color: "black"
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
 
                     Image {
                         width: 26 * scaleRatio
                         height: 26 * scaleRatio
                         opacity: 0.7
                         fillMode: Image.PreserveAspectFit
-                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
+                        source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
+
                         MouseArea {
                             anchors.fill: parent
                             cursorShape: Qt.PointingHandCursor

components/Notifier.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 moneroComponents.Wallet 1.0
 

components/PassphraseDialog.qml

@@ -58,7 +58,9 @@ Item {
 
         leftPanel.enabled = false
         middlePanel.enabled = false
-        titleBar.enabled = false
+        titleBar.state = "essentials"
+
+        show();
         root.visible = true;
         passphaseInput1.text = "";
         passphaseInput2.text = "";
@@ -69,7 +71,7 @@ Item {
         inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
-        titleBar.enabled = true
+        titleBar.state = "default"
         root.visible = false;
         closeCallback();
     }
@@ -155,22 +157,22 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
-                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectionColor: MoneroComponents.Style.textSelectionColor
-                selectedTextColor: MoneroComponents.Style.defaultFontColor
+                selectedTextColor: MoneroComponents.Style.textSelectedColor
                 KeyNavigation.tab: passphaseInput2
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    border.color: MoneroComponents.Style.inputBorderColorInActive
                     border.width: 1
-                    color: "black"
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
 
                     Image {
                         width: 26 * scaleRatio
                         height: 26 * scaleRatio
                         opacity: 0.7
                         fillMode: Image.PreserveAspectFit
-                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
+                        source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
@@ -207,7 +209,7 @@ Item {
                 Layout.alignment: Qt.AlignHCenter
                 height: 10
                 opacity: 0
-                color: "black"
+                color: "transparent"
             }
 
             Label {
@@ -239,16 +241,16 @@ Item {
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    border.color: MoneroComponents.Style.inputBorderColorInActive
                     border.width: 1
-                    color: "black"
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
 
                     Image {
                         width: 26 * scaleRatio
                         height: 26 * scaleRatio
                         opacity: 0.7
                         fillMode: Image.PreserveAspectFit
-                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
+                        source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20

components/PasswordDialog.qml

@@ -26,14 +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.7
+import QtQuick 2.9
 import QtQuick.Controls 2.0
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Window 2.0
 
-import "../components" as MoneroComponents
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 import "../js/Utils.js" as Utils
 
 Item {
@@ -62,7 +63,9 @@ Item {
         errorTextLabel.text = errorText ? errorText : "";
         leftPanel.enabled = false
         middlePanel.enabled = false
-        titleBar.enabled = false
+
+        titleBar.state = "essentials"
+        show()
         root.visible = true;
         passwordInput.forceActiveFocus();
         passwordInput.text = ""
@@ -78,7 +81,8 @@ Item {
         inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
-        titleBar.enabled = true
+        titleBar.state = "default"
+
         root.visible = false;
         appWindow.hideBalanceForced = false;
         appWindow.updateBalance();
@@ -133,8 +137,8 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
-                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectionColor: MoneroComponents.Style.textSelectionColor
-                selectedTextColor: MoneroComponents.Style.defaultFontColor
+                selectedTextColor: MoneroComponents.Style.textSelectedColor
 
                 onTextChanged: {
                     var letter = text[passwordInput.text.length - 1];
@@ -149,19 +153,26 @@ Item {
 
                 background: Rectangle {
                     radius: 2
-                    border.color: Qt.rgba(255, 255, 255, 0.35)
+                    color: MoneroComponents.Style.blackTheme ? "black" : "#A9FFFFFF"
+                    border.color: MoneroComponents.Style.inputBorderColorInActive
                     border.width: 1
-                    color: "black"
+
+                    MoneroEffects.ColorTransition {
+                        targetObj: parent
+                        blackColor: "black"
+                        whiteColor: "#A9FFFFFF"
+                    }
 
                     Image {
                         width: 26 * scaleRatio
                         height: 26 * scaleRatio
                         opacity: 0.7
                         fillMode: Image.PreserveAspectFit
-                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
+                        source: isHidden ? "qrc:///images/eyeShow.png" : "qrc:///images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
+
                         MouseArea {
                             anchors.fill: parent
                             cursorShape: Qt.PointingHandCursor

components/PrivacyLevelSmall.qml

@@ -28,7 +28,7 @@
 
 // @TODO: Remove component after wizard redesign
 
-import QtQuick 2.0
+import QtQuick 2.9
 
 Item {
     id: item
@@ -89,7 +89,7 @@ Item {
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             anchors.verticalCenter: parent.verticalCenter
             font.family: "Arial"
             font.pixelSize: 15
@@ -98,7 +98,7 @@ Item {
             text: qsTr("Low") + translationManager.emptyString
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             anchors.verticalCenter: parent.verticalCenter
             font.family: "Arial"
             font.pixelSize: 15
@@ -107,7 +107,7 @@ Item {
             text: qsTr("Medium") + translationManager.emptyString
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             anchors.verticalCenter: parent.verticalCenter
             font.family: "Arial"
             font.pixelSize: 15

components/ProcessingSplash.qml

@@ -26,14 +26,16 @@
 // 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.Window 2.1
 import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.1
 
+import "../components" as MoneroComponents
+
 Rectangle {
     id: root
-    color: "white"
+    color: MoneroComponents.Style.blackTheme ? "white" : "transparent"
     visible: false
     z: 11
     property alias messageText: messageTitle.text
@@ -61,12 +63,14 @@ Rectangle {
         anchors.leftMargin: 30 * scaleRatio
         anchors.rightMargin: 30 * scaleRatio
 
+        spacing: 12
+
         BusyIndicator {
             running: parent.visible
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: messageTitle
             text: "Please wait..."
             font {
@@ -75,10 +79,12 @@ Rectangle {
             horizontalAlignment: Text.AlignHCenter
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
             Layout.fillWidth: true
+            themeTransition: false
+            color: "black"
         }
 
 
-        Text {
+        MoneroComponents.TextPlain {
             id: heightProgress
             font {
                 pixelSize: 18 * scaleRatio
@@ -86,6 +92,8 @@ Rectangle {
             horizontalAlignment: Text.AlignHCenter
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
             Layout.fillWidth: true
+            themeTransition: false
+            color: "black"
         }
     }
 }

components/ProgressBar.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 moneroComponents.Wallet 1.0
 
 import "../components" as MoneroComponents
@@ -46,8 +46,10 @@ Rectangle {
             fillLevel = progressLevel
             if(typeof statusTxt != "undefined" && statusTxt != "") {
                 progressText.text = statusTxt;
+                progressTextValue.text = "";
             } else {
-                progressText.text = syncText + remaining.toFixed(0);
+                progressText.text = syncText;
+                progressTextValue.text = remaining.toFixed(0);
             }
         }
     }
@@ -59,31 +61,30 @@ Rectangle {
         anchors.rightMargin: 15 * scaleRatio
         anchors.fill: parent
 
-        Text {
+        MoneroComponents.TextPlain {
             id: progressText
             anchors.top: parent.top
             anchors.topMargin: 6
             font.family: MoneroComponents.Style.fontMedium.name
             font.pixelSize: 13 * scaleRatio
-            font.bold: true
+            font.bold: MoneroComponents.Style.progressBarProgressTextBold
-            color: "white"
+            color: MoneroComponents.Style.defaultFontColor
             text: qsTr("Synchronizing %1").arg(syncType) + translationManager.emptyString
             height: 18 * scaleRatio
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: progressTextValue
             anchors.top: parent.top
             anchors.topMargin: 6
             anchors.right: parent.right
             font.family: MoneroComponents.Style.fontMedium.name
             font.pixelSize: 13 * scaleRatio
-            font.bold: true
+            font.bold: MoneroComponents.Style.progressBarProgressTextBold
-            color: "white"
+            color: MoneroComponents.Style.defaultFontColor
             height:18 * scaleRatio
         }
 
-
         Rectangle {
             id: bar
             anchors.left: parent.left
@@ -92,7 +93,24 @@ Rectangle {
             anchors.topMargin: 4
             height: 8 * scaleRatio
             radius: 8 * scaleRatio
-            color: "#333333" // progressbar bg
+            color: MoneroComponents.Style.progressBarBackgroundColor
+
+            states: [
+                State {
+                    name: "black";
+                    when: MoneroComponents.Style.blackTheme
+                    PropertyChanges { target: bar; color: MoneroComponents.Style._b_progressBarBackgroundColor}
+                }, State {
+                    name: "white";
+                    when: !MoneroComponents.Style.blackTheme
+                    PropertyChanges { target: bar; color: MoneroComponents.Style._w_progressBarBackgroundColor}
+                }
+            ]
+
+            transitions: Transition {
+                enabled: appWindow.themeTransition
+                ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: 300 }
+            }
 
             Rectangle {
                 id: fillRect
@@ -103,7 +121,6 @@ Rectangle {
                 property int maxWidth: bar.width * scaleRatio
                 width: (maxWidth * fillLevel) / 100
                 radius: 8
-                // could change color based on progressbar status; if(item.fillLevel < 99 )
                 color: "#FA6800"
             }
 
@@ -116,7 +133,4 @@ Rectangle {
         }
 
     }
-
-
-
 }

components/QRCodeScanner.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 QtMultimedia 5.4
 import QtQuick.Dialogs 1.2
 import moneroComponents.QRCodeScanner 1.0

components/RadioButton.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 "../components" as MoneroComponents
@@ -41,8 +41,8 @@ Item {
     height: 26 * scaleRatio
     width: layout.width
     // legacy properties
-    property var checkedColor: "white"
+    property var checkedColor: MoneroComponents.Style.blackTheme ? "white" : "#666666"
-    property var borderColor: checked ? Qt.rgba(1, 1, 1, 0.35) : Qt.rgba(1, 1, 1, 0.25)
+    property var borderColor: checked ? MoneroComponents.Style.inputBorderColorActive : MoneroComponents.Style.inputBorderColorInActive
 
     function toggle(){
         radioButton.checked = !radioButton.checked
@@ -72,7 +72,7 @@ Item {
             }
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: label
             Layout.leftMargin: (!isMobile ? 10 : 8) * scaleRatio
             color: MoneroComponents.Style.defaultFontColor

components/RemoteNodeEdit.qml

@@ -28,7 +28,7 @@
 
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
-import QtQuick 2.2
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 
 import "../js/Utils.js" as Utils
@@ -47,16 +47,16 @@ GridLayout {
     // the wizards get redesigned to the black-theme
     property string placeholderFontFamily: MoneroComponents.Style.fontRegular.name
     property bool placeholderFontBold: false
-    property int placeholderFontSize: 18 * scaleRatio
+    property int placeholderFontSize: 15 * scaleRatio
     property string placeholderColor: MoneroComponents.Style.defaultFontColor
     property real placeholderOpacity: 0.35
+    property int labelFontSize: 14 * scaleRatio
 
-    property string lineEditBorderColor: Qt.rgba(0, 0, 0, 0.15)
+    property string lineEditBackgroundColor: "transparent"
-    property string lineEditBackgroundColor: "white"
+    property string lineEditBorderColor: MoneroComponents.Style.inputBorderColorInActive
-    property string lineEditFontColor: "black"
+    property string lineEditFontColor: MoneroComponents.Style.defaultFontColor
-    property int lineEditFontSize: 18 * scaleRatio
+    property bool lineEditFontBold: false
-    property int labelFontSize: 16 * scaleRatio
+    property int lineEditFontSize: 15 * scaleRatio
-    property bool lineEditFontBold: true
 
     signal editingFinished()
     signal textChanged()

components/Scroll.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 "." as MoneroComponents
 
 Item {

components/StandardButton.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 "../components" as MoneroComponents
@@ -51,7 +51,6 @@ Item {
     implicitWidth: width
 
     function doClick(){
-        // Android workaround
         releaseFocus();
         clicked();
     }
@@ -64,6 +63,7 @@ Item {
 
         state: button.enabled ? "active" : "disabled"
         Component.onCompleted: state = state
+
         states: [
             State {
                 name: "hover"
@@ -90,7 +90,9 @@ Item {
                 }
             }
         ]
+
         transitions: Transition {
+            enabled: appWindow.themeTransition
             ColorAnimation { duration: 100 }
         }
     }
@@ -101,15 +103,16 @@ Item {
         spacing: 11 * scaleRatio
         anchors.centerIn: parent
 
-        Text {
+        MoneroComponents.TextPlain {
             id: label
             font.family: MoneroComponents.Style.fontBold.name
             font.bold: true
             font.pixelSize: button.fontSize
             color: !buttonArea.pressed ? button.textColor : "transparent"
             visible: text !== ""
+            themeTransition: false
 
-            Text {
+            MoneroComponents.TextPlain {
                 anchors.centerIn: parent
                 color: button.textColor
                 font.bold: label.font.bold
@@ -117,6 +120,7 @@ Item {
                 font.pixelSize: label.font.pixelSize - 1
                 text: label.text
                 opacity: buttonArea.pressed ? 1 : 0
+                themeTransition: false
             }
         }
 

components/StandardDialog.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 2.0
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
@@ -34,6 +34,7 @@ import QtQuick.Controls.Styles 1.4
 import QtQuick.Window 2.0
 
 import "../components" as MoneroComponents
+import "effects/" as MoneroEffects
 
 Rectangle {
     id: root
@@ -56,12 +57,18 @@ Rectangle {
     signal rejected()
     signal closeCallback();
 
-    Image {
+    // background
-        anchors.left: parent.left
+    MoneroEffects.GradientBackground {
-        anchors.right: parent.right
+        anchors.fill: parent
-        anchors.top: parent.top
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
-        anchors.bottom: parent.bottom
+        initialStartColor: MoneroComponents.Style.middlePanelBackgroundGradientStart
-        source: "../images/middlePanelBg.jpg"
+        initialStopColor: MoneroComponents.Style.middlePanelBackgroundGradientStop
+        blackColorStart: MoneroComponents.Style._b_middlePanelBackgroundGradientStart
+        blackColorStop: MoneroComponents.Style._b_middlePanelBackgroundGradientStop
+        whiteColorStart: MoneroComponents.Style._w_middlePanelBackgroundGradientStart
+        whiteColorStop: MoneroComponents.Style._w_middlePanelBackgroundGradientStop
+        start: Qt.point(0, 0)
+        end: Qt.point(height, width)
     }
 
     // Make window draggable
@@ -188,11 +195,13 @@ Rectangle {
         height: 48 * scaleRatio
         color: "transparent"
 
-        Image {
+        MoneroEffects.ImageMask {
             anchors.centerIn: parent
             width: 16 * scaleRatio
             height: 16 * scaleRatio
-            source: "../images/close.png"
+            image: MoneroComponents.Style.titleBarCloseSource
+            color: MoneroComponents.Style.defaultFontColor
+            opacity: 0.75
         }
 
         MouseArea {

components/StandardDropdown.qml

@@ -26,9 +26,11 @@
 // 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 QtGraphicalEffects 1.0
 
 import "../components" as MoneroComponents
+import "../components/effects/" as MoneroEffects
 
 Item {
     id: dropdown
@@ -36,9 +38,9 @@ Item {
     property alias dataModel: repeater.model
     property string shadowPressedColor
     property string shadowReleasedColor
-    property string pressedColor
+    property string pressedColor: MoneroComponents.Style.appWindowBorderColor
-    property string releasedColor
+    property string releasedColor: MoneroComponents.Style.titleBarButtonHoverColor
-    property string textColor: "#FFFFFF"
+    property string textColor: MoneroComponents.Style.defaultFontColor
     property alias currentIndex: columnid.currentIndex
     property bool expanded: false
     property int dropdownHeight: 42
@@ -81,14 +83,14 @@ Item {
         height: dropdown.dropdownHeight
 
         Rectangle {
-            color: dropdown.colorHeaderBackground
+            color: "transparent"
             border.width: dropdown.headerBorder ? 1 : 0
             border.color: dropdown.colorBorder
             radius: 4
             anchors.fill: parent
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: firstColText
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
@@ -97,7 +99,7 @@ Item {
             font.family: MoneroComponents.Style.fontRegular.name
             font.bold: dropdown.headerFontBold
             font.pixelSize: dropdown.fontHeaderSize
-            color: "#FFFFFF"
+            color: dropdown.textColor
         }
 
         Item {
@@ -108,9 +110,18 @@ Item {
             width: 32 * scaleRatio
 
             Image {
+                id: dropdownIcon
                 anchors.centerIn: parent
-                source: "../images/whiteDropIndicator.png"
+                source: "qrc:///images/whiteDropIndicator.png"
+                visible: false
+            }
+
+            ColorOverlay {
+                source: dropdownIcon
+                anchors.fill: dropdownIcon
+                color: MoneroComponents.Style.defaultFontColor
                 rotation: dropdown.expanded ? 180  * scaleRatio : 0
+                opacity: 1
             }
         }
 
@@ -131,7 +142,6 @@ Item {
         clip: true
         height: dropdown.expanded ? columnid.height : 0
         color: dropdown.pressedColor
-        //radius: 4
 
         Rectangle {
             anchors.left: parent.left
@@ -180,7 +190,7 @@ Item {
                     //radius: index === repeater.count - 1 ? 4 : 0
                     color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: col1Text
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.left: parent.left
@@ -194,7 +204,7 @@ Item {
                         text: qsTr(column1) + translationManager.emptyString
                     }
 
-                    Text {
+                    MoneroComponents.TextPlain {
                         id: col2Text
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right

components/Style.qml

@@ -3,6 +3,7 @@ pragma Singleton
 import QtQuick 2.5
 
 QtObject {
+    property bool blackTheme: true
     property QtObject fontMedium: FontLoader { id: _fontMedium; source: "qrc:/fonts/Roboto-Medium.ttf"; }
     property QtObject fontBold: FontLoader { id: _fontBold; source: "qrc:/fonts/Roboto-Bold.ttf"; }
     property QtObject fontLight: FontLoader { id: _fontLight; source: "qrc:/fonts/Roboto-Light.ttf"; }
@@ -18,27 +19,176 @@ QtObject {
     property string white: "#FFFFFF"
     property string green: "#2EB358"
     property string moneroGrey: "#4C4C4C"
+    property string warningColor: "orange"
 
-    property string defaultFontColor: "white"
+    property string defaultFontColor: blackTheme ? _b_defaultFontColor : _w_defaultFontColor
-    property string dimmedFontColor: "#BBBBBB"
+    property string dimmedFontColor: blackTheme ? _b_dimmedFontColor : _w_dimmedFontColor
-    property string lightGreyFontColor: "#DFDFDF"
+    property string lightGreyFontColor: blackTheme ? _b_lightGreyFontColor : _w_lightGreyFontColor
-    property string greyFontColor: "#808080"
+    property string errorColor: blackTheme ? _b_errorColor : _w_errorColor
-    property string warningColor: "#963E00"
+    property string textSelectionColor: blackTheme ? _b_textSelectionColor : _w_textSelectionColor
-    property string errorColor: "#FA6800"
+    property string textSelectedColor: blackTheme ? _b_textSelectedColor : _w_textSelectedColor
-    property string inputBoxBackground: "black"
-    property string inputBoxBackgroundError: "#FFDDDD"
-    property string inputBoxColor: "white"
-    property string legacy_placeholderFontColor: "#BABABA"
-    property string inputBorderColorActive: Qt.rgba(255, 255, 255, 0.38)
-    property string inputBorderColorInActive: Qt.rgba(255, 255, 255, 0.32)
-    property string inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.40)
 
-    property string buttonBackgroundColor: "#FA6800"
+    property string inputBoxBackground: blackTheme ? _b_inputBoxBackground : _w_inputBoxBackground
-    property string buttonBackgroundColorHover: "#E65E00"
+    property string inputBoxBackgroundError: blackTheme ? _b_inputBoxBackgroundError : _w_inputBoxBackgroundError
-    property string buttonBackgroundColorDisabled: "#707070"
+    property string inputBoxColor: blackTheme ? _b_inputBoxColor : _w_inputBoxColor
-    property string buttonBackgroundColorDisabledHover: "#808080"
+    property string legacy_placeholderFontColor: blackTheme ? _b_legacy_placeholderFontColor : _w_legacy_placeholderFontColor
-    property string buttonTextColor: "white"
+    property string inputBorderColorActive: blackTheme ? _b_inputBorderColorActive : _w_inputBorderColorActive
-    property string buttonTextColorDisabled: "black"
+    property string inputBorderColorInActive: blackTheme ? _b_inputBorderColorInActive : _w_inputBorderColorInActive
-    property string dividerColor: "white"
+    property string inputBorderColorInvalid: blackTheme ? _b_inputBorderColorInvalid : _w_inputBorderColorInvalid
-    property real dividerOpacity: 0.20
+
+    property string buttonBackgroundColor: blackTheme ? _b_buttonBackgroundColor : _w_buttonBackgroundColor
+    property string buttonBackgroundColorHover: blackTheme ? _b_buttonBackgroundColorHover : _w_buttonBackgroundColorHover
+    property string buttonBackgroundColorDisabled: blackTheme ? _b_buttonBackgroundColorDisabled : _w_buttonBackgroundColorDisabled
+    property string buttonBackgroundColorDisabledHover: blackTheme ? _b_buttonBackgroundColorDisabledHover : _w_buttonBackgroundColorDisabledHover
+    property string buttonInlineBackgroundColor: blackTheme ? _b_buttonInlineBackgroundColor : _w_buttonInlineBackgroundColor
+    property string buttonTextColor: blackTheme ? _b_buttonTextColor : _w_buttonTextColor
+    property string buttonTextColorDisabled: blackTheme ? _b_buttonTextColorDisabled : _w_buttonTextColorDisabled
+    property string dividerColor: blackTheme ? _b_dividerColor : _w_dividerColor
+    property real dividerOpacity: blackTheme ? _b_dividerOpacity : _w_dividerOpacity
+
+    property string titleBarBackgroundGradientStart: blackTheme ? _b_titleBarBackgroundGradientStart : _w_titleBarBackgroundGradientStart
+    property string titleBarBackgroundGradientStop: blackTheme ? _b_titleBarBackgroundGradientStop : _w_titleBarBackgroundGradientStop
+    property string titleBarBackgroundBorderColor: blackTheme ? _b_titleBarBackgroundBorderColor : _w_titleBarBackgroundBorderColor
+    property string titleBarLogoSource: blackTheme ? _b_titleBarLogoSource : _w_titleBarLogoSource
+    property string titleBarMinimizeSource: blackTheme ? _b_titleBarMinimizeSource : _w_titleBarMinimizeSource
+    property string titleBarExpandSource: blackTheme ? _b_titleBarExpandSource : _w_titleBarExpandSource
+    property string titleBarFullscreenSource: blackTheme ? _b_titleBarFullscreenSource : _w_titleBarFullscreenSource
+    property string titleBarCloseSource: blackTheme ? _b_titleBarCloseSource : _w_titleBarCloseSource
+    property string titleBarButtonHoverColor: blackTheme ? _b_titleBarButtonHoverColor : _w_titleBarButtonHoverColor
+
+    property string wizardBackgroundGradientStart: blackTheme ? _b_wizardBackgroundGradientStart : _w_wizardBackgroundGradientStart
+    property string middlePanelBackgroundGradientStart: blackTheme ? _b_middlePanelBackgroundGradientStart : _w_middlePanelBackgroundGradientStart
+    property string middlePanelBackgroundGradientStop: blackTheme ? _b_middlePanelBackgroundGradientStop : _w_middlePanelBackgroundGradientStop
+    property string middlePanelBackgroundColor: blackTheme ? _b_middlePanelBackgroundColor : _w_middlePanelBackgroundColor
+    property string menuButtonFallbackBackgroundColor: blackTheme ? _b_menuButtonFallbackBackgroundColor : _w_menuButtonFallbackBackgroundColor
+    property string menuButtonGradientStart: blackTheme ? _b_menuButtonGradientStart : _w_menuButtonGradientStart
+    property string menuButtonGradientStop: blackTheme ? _b_menuButtonGradientStop : _w_menuButtonGradientStop
+    property string menuButtonTextColor: blackTheme ? _b_menuButtonTextColor : _w_menuButtonTextColor
+    property string menuButtonImageRightColorActive: blackTheme ? _b_menuButtonImageRightColorActive : _w_menuButtonImageRightColorActive
+    property string menuButtonImageRightColor: blackTheme ? _b_menuButtonImageRightColor : _w_menuButtonImageRightColor
+    property string menuButtonImageRightSource: blackTheme ? _b_menuButtonImageRightSource : _w_menuButtonImageRightSource
+    property string menuButtonImageDotArrowSource: blackTheme ? _b_menuButtonImageDotArrowSource : _w_menuButtonImageDotArrowSource
+    property string inlineButtonTextColor: blackTheme ? _b_inlineButtonTextColor : _w_inlineButtonTextColor
+    property string inlineButtonBorderColor: blackTheme ? _b_inlineButtonBorderColor : _w_inlineButtonBorderColor
+    property string appWindowBackgroundColor: blackTheme ? _b_appWindowBackgroundColor : _w_appWindowBackgroundColor
+    property string appWindowBorderColor: blackTheme ? _b_appWindowBorderColor : _w_appWindowBorderColor
+    property bool progressBarProgressTextBold: blackTheme ? _b_progressBarProgressTextBold : _w_progressBarProgressTextBold
+    property string progressBarBackgroundColor: blackTheme ? _b_progressBarBackgroundColor : _w_progressBarBackgroundColor
+    property string leftPanelBackgroundGradientStart: blackTheme ? _b_leftPanelBackgroundGradientStart : _w_leftPanelBackgroundGradientStart
+    property string leftPanelBackgroundGradientStop: blackTheme ? _b_leftPanelBackgroundGradientStop : _w_leftPanelBackgroundGradientStop
+    property string historyHeaderTextColor: blackTheme ? _b_historyHeaderTextColor : _w_historyHeaderTextColor
+
+    property string _b_defaultFontColor: "white"
+    property string _b_dimmedFontColor: "#BBBBBB"
+    property string _b_lightGreyFontColor: "#DFDFDF"
+    property string _b_errorColor: "#FA6800"
+    property string _b_textSelectionColor: "#BBBBBB"
+    property string _b_textSelectedColor: "white"
+
+    property string _b_inputBoxBackground: "black"
+    property string _b_inputBoxBackgroundError: "#FFDDDD"
+    property string _b_inputBoxColor: "white"
+    property string _b_legacy_placeholderFontColor: "#BABABA"
+    property string _b_inputBorderColorActive: Qt.rgba(255, 255, 255, 0.38)
+    property string _b_inputBorderColorInActive: Qt.rgba(255, 255, 255, 0.32)
+    property string _b_inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.40)
+
+    property string _b_buttonBackgroundColor: "#FA6800"
+    property string _b_buttonBackgroundColorHover: "#E65E00"
+    property string _b_buttonBackgroundColorDisabled: "#707070"
+    property string _b_buttonBackgroundColorDisabledHover: "#808080"
+    property string _b_buttonInlineBackgroundColor: "#707070"
+    property string _b_buttonTextColor: "white"
+    property string _b_buttonTextColorDisabled: "black"
+    property string _b_dividerColor: "white"
+    property real _b_dividerOpacity: 0.20
+
+    property string _b_titleBarBackgroundGradientStart: "#262626";
+    property string _b_titleBarBackgroundGradientStop: "#191919"
+    property string _b_titleBarBackgroundBorderColor: "#2f2f2f"
+    property string _b_titleBarLogoSource: "qrc:///images/titlebarLogo.png"
+    property string _b_titleBarMinimizeSource: "qrc:///images/minimize.svg"
+    property string _b_titleBarExpandSource: "qrc:///images/sidebar.svg"
+    property string _b_titleBarFullscreenSource: "qrc:///images/fullscreen.svg"
+    property string _b_titleBarCloseSource: "qrc:///images/close.svg"
+    property string _b_titleBarButtonHoverColor: "#10FFFFFF"
+
+    property string _b_wizardBackgroundGradientStart: "#1e1e1e"
+    property string _b_middlePanelBackgroundGradientStart: "#232323"
+    property string _b_middlePanelBackgroundGradientStop: "#101010"
+    property string _b_middlePanelBackgroundColor: "#181818"
+    property string _b_menuButtonFallbackBackgroundColor: "#09FFFFFF"
+    property string _b_menuButtonGradientStart: "#11FFFFFF"
+    property string _b_menuButtonGradientStop: "#00000000"
+    property string _b_menuButtonTextColor: "white"
+    property string _b_menuButtonImageRightColorActive: "white"
+    property string _b_menuButtonImageRightColor: "white"
+    property string _b_menuButtonImageRightSource: "qrc:///images/right.svg"
+    property string _b_menuButtonImageDotArrowSource: "qrc:///images/arrow-right-medium-white.png"
+    property string _b_inlineButtonTextColor: "black"
+    property string _b_inlineButtonBorderColor: "black"
+    property string _b_appWindowBackgroundColor: "white"
+    property string _b_appWindowBorderColor: "#313131"
+    property bool _b_progressBarProgressTextBold: true
+    property string _b_progressBarBackgroundColor: "#24FFFFFF"
+    property string _b_leftPanelBackgroundGradientStart: "#222222"
+    property string _b_leftPanelBackgroundGradientStop: "#1a1a1a"
+    property string _b_historyHeaderTextColor: "#C0C0C0"
+
+    property string _w_defaultFontColor: "black"
+    property string _w_dimmedFontColor: "#3f3f3f"
+    property string _w_lightGreyFontColor: "#515151"
+    property string _w_errorColor: "#FA6800"
+    property string _w_textSelectionColor: "#BBBBBB"
+    property string _w_textSelectedColor: "black"
+
+    property string _w_inputBoxBackground: "white"
+    property string _w_inputBoxBackgroundError: "#FFDDDD"
+    property string _w_inputBoxColor: "black"
+    property string _w_legacy_placeholderFontColor: "#BABABA"
+    property string _w_inputBorderColorActive: Qt.rgba(0, 0, 0, 0.30)
+    property string _w_inputBorderColorInActive: Qt.rgba(0, 0, 0, 0.16)
+    property string _w_inputBorderColorInvalid: Qt.rgba(255, 0, 0, 0.50)
+
+    property string _w_buttonBackgroundColor: "#FA6800"
+    property string _w_buttonBackgroundColorHover: "#E65E00"
+    property string _w_buttonBackgroundColorDisabled: "#bbbbbb"
+    property string _w_buttonBackgroundColorDisabledHover: "#D1D1D1"
+    property string _w_buttonInlineBackgroundColor: "#bbbbbb"
+    property string _w_buttonTextColor: "white"
+    property string _w_buttonTextColorDisabled: "black"
+    property string _w_dividerColor: "black"
+    property real _w_dividerOpacity: 0.20
+
+    property string _w_titleBarBackgroundGradientStart: "#fcfcfc"
+    property string _w_titleBarBackgroundGradientStop: "#FBFBFB"
+    property string _w_titleBarBackgroundBorderColor: "#DEDEDE"
+    property string _w_titleBarLogoSource: "qrc:///images/themes/white/titlebarLogo.png"
+    property string _w_titleBarMinimizeSource: "qrc:///images/themes/white/minimize.svg"
+    property string _w_titleBarExpandSource: "qrc:///images/themes/white/expand.svg"
+    property string _w_titleBarFullscreenSource: "qrc:///images/themes/white/fullscreen.svg"
+    property string _w_titleBarCloseSource: "qrc:///images/themes/white/close.svg"
+    property string _w_titleBarButtonHoverColor: "#11000000"
+
+    property string _w_wizardBackgroundGradientStart: "white"
+    property string _w_middlePanelBackgroundGradientStart: "white"
+    property string _w_middlePanelBackgroundGradientStop: "#ededed"
+    property string _w_middlePanelBackgroundColor: "#f5f5f5"
+    property string _w_menuButtonFallbackBackgroundColor: "#09000000"
+    property string _w_menuButtonGradientStart: "#08000000"
+    property string _w_menuButtonGradientStop: "#10FFFFFF"
+    property string _w_menuButtonTextColor: "#787878"
+    property string _w_menuButtonImageRightSource: "qrc:///images/right.svg"
+    property string _w_menuButtonImageRightColorActive: "#FA6800"
+    property string _w_menuButtonImageRightColor: "#808080"
+    property string _w_menuButtonImageDotArrowSource: "qrc:///images/arrow-right-medium-white.png"
+    property string _w_inlineButtonTextColor: "white"
+    property string _w_inlineButtonBorderColor: "transparent"
+    property string _w_appWindowBackgroundColor: "black"
+    property string _w_appWindowBorderColor: "#dedede"
+    property bool _w_progressBarProgressTextBold: false
+    property string _w_progressBarBackgroundColor: "#24000000"
+    property string _w_leftPanelBackgroundGradientStart: "white"
+    property string _w_leftPanelBackgroundGradientStop: "#f5f5f5"
+    property string _w_historyHeaderTextColor: "#515151"
 }

components/TableDropdown.qml

@@ -0,0 +1,237 @@
+// 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
+
+Item {
+    id: dropdown
+    property bool expanded: false
+    property alias dataModel: repeater.model
+    signal collapsed()
+    signal optionClicked(int option)
+    width: 72
+    height: 37
+
+    onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
+    function hide() { dropdown.expanded = false }
+    function containsPoint(px, py) {
+        if(px < 0)
+            return false
+        if(px > width)
+            return false
+        if(py < 0)
+            return false
+        if(py > height + dropArea.height)
+            return false
+        return true
+    }
+
+    Item {
+        id: head
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height - 1
+            y: dropdown.expanded || dropArea.height > 0 ? 0 : 1
+            //radius: 3
+            color: dropdown.expanded || dropArea.height > 0 ? "#888888" : "#DBDBDB"
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height - 1
+            y: dropdown.expanded || dropArea.height > 0 ? 1 : 0
+            //radius: 3
+            color: dropdown.expanded || dropArea.height > 0 ? "#DBDBDB" : "#F0EEEE"
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            height: 3
+            width: 3
+            color: "#DBDBDB"
+            visible: dropdown.expanded || dropArea.height > 0
+        }
+
+        Rectangle {
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 3
+            width: 3
+            color: "#DBDBDB"
+            visible: dropdown.expanded || dropArea.height > 0
+        }
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            source: "qrc:///images/tableOptions.png"
+        }
+
+        Rectangle {
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: 1
+            height: 23
+            width: 1
+            color: dropdown.expanded || dropArea.height > 0 ? "#FFFFFF" : "#DBDBDB"
+        }
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            source: "qrc:///images/dropIndicator.png"
+        }
+    }
+
+    Timer {
+        id: timer
+        interval: 50
+        repeat: true
+        running: false
+        onTriggered: {
+            if(((appWindow.toolTip.visible && !appWindow.toolTip.containsMouse) || !appWindow.toolTip.visible) && !mouseArea.containsMouse) {
+                appWindow.toolTip.visible = false
+                dropdown.expanded = false
+                currentIndex = -1
+                timer.stop()
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.left: head.left
+        anchors.right: head.right
+        anchors.top: head.top
+        height: head.height + dropArea.height
+        hoverEnabled: true
+        onEntered: dropdown.expanded = true
+
+        property int currentIndex: -1
+        onMouseYChanged: {
+            if(mouseY > head.height) {
+                var posY = parseInt((mouseY - head.height) / 30)
+                currentIndex = posY
+            } else {
+                currentIndex = -1
+            }
+        }
+
+        onClicked: {
+            optionClicked(currentIndex)
+        }
+
+        onExited: timer.start()
+        preventStealing: true
+        z: 1
+
+        Item {
+            id: dropArea
+            anchors.left: parent.left
+            anchors.right: parent.right
+            y: head.height
+            height: dropdown.expanded ? column.height : 0
+            onHeightChanged: if(height === 0) dropdown.collapsed()
+            clip: true
+
+            Behavior on height {
+                NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+            }
+
+            Column {
+                id: column
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                Repeater {
+                    id: repeater
+
+                    // Workaround for translations in listElements. All translated strings needs to be listed in this file.
+                    property string stringCopy: qsTr("<b>Copy address to clipboard</b>") + translationManager.emptyString
+                    property string stringSend: qsTr("<b>Send to this address</b>") + translationManager.emptyString
+                    property string stringFind: qsTr("<b>Find similar transactions</b>") + translationManager.emptyString
+                    property string stringRemove: qsTr("<b>Remove from address book</b>") + translationManager.emptyString
+
+                    delegate: Rectangle {
+                        id: delegate
+                        property bool containsMouse: index === mouseArea.currentIndex
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        height: 30
+                        color: containsMouse ? "#F0EEEE" : "#DBDBDB"
+                        //radius: index === repeater.count - 1 ? 5 : 0
+                        Rectangle {
+                            anchors.left: parent.left
+                            anchors.top: parent.top
+                            width: 5
+                            height: 5
+                            color: delegate.color
+                        }
+
+                        Rectangle {
+                            anchors.right: parent.right
+                            anchors.top: parent.top
+                            width: 5
+                            height: 5
+                            color: delegate.color
+                        }
+
+                        Image {
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            anchors.leftMargin: 10
+                            source: icon
+                        }
+
+                        onContainsMouseChanged: {
+                            if(containsMouse) {
+                                var pos = rootItem.mapFromItem(delegate, 30, -25)
+                                appWindow.toolTip.text = qsTr(name) + translationManager.emptyString
+                                appWindow.toolTip.x = pos.x - appWindow.toolTip.width
+//                                if(appWindow.toolTip.height > 30)
+//                                    pos.y -= appWindow.toolTip.height - 30
+                                appWindow.toolTip.y = pos.y
+                                appWindow.toolTip.visible = true
+                                appWindow.toolTip.z = 3
+
+                            }
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+}

components/TextBlock.qml

@@ -1,11 +1,11 @@
-import QtQuick 2.0
+import QtQuick 2.9
 
 import "../components" as MoneroComponents
 
 TextEdit {
     color: MoneroComponents.Style.defaultFontColor
     font.family: MoneroComponents.Style.fontRegular.name
-    selectionColor: MoneroComponents.Style.dimmedFontColor
+    selectionColor: MoneroComponents.Style.textSelectionColor
     wrapMode: Text.Wrap
     readOnly: true
     selectByMouse: true

components/TextPlain.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.9
+
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
+
+Text {
+    // When using this component, please note that if you use a color different
+    // than `defaultFontColor`, you are required to also define `themeTransitionXColor`.
+    // If you do not set these the component will receive the wrong color after a transition.
+    // If you do not want to set these, use `themeTransition: false`.
+    id: root
+    property bool themeTransition: true
+    property string themeTransitionBlackColor: ""
+    property string themeTransitionWhiteColor: ""
+    font.family: MoneroComponents.Style.fontMedium.name
+    font.bold: false
+    font.pixelSize: 14 * scaleRatio
+    textFormat: Text.PlainText
+
+    MoneroEffects.ColorTransition {
+        enabled: root.themeTransition
+        themeTransition: root.themeTransition
+        targetObj: root
+        duration: 750
+        blackColor: root.themeTransitionBlackColor !== "" ? root.themeTransitionBlackColor : MoneroComponents.Style._b_defaultFontColor
+        whiteColor: root.themeTransitionWhiteColor !== "" ? root.themeTransitionWhiteColor : MoneroComponents.Style._w_defaultFontColor
+    }
+}

components/TextPlainArea.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.0
+
+import "." as MoneroComponents
+
+TextArea {
+    id: textArea
+    property bool themeTransition: true
+    property string colorWhiteTheme: ""
+    property string colorBlackTheme: ""
+    color: MoneroComponents.Style.defaultFontColor
+    font.family: MoneroComponents.Style.fontRegular.name
+    font.pixelSize: 14 * scaleRatio
+    selectByMouse: false
+    wrapMode: Text.WordWrap;
+    textMargin: 0
+    leftPadding: 0
+    topPadding: 0
+    readOnly: true
+    textFormat: TextEdit.PlainText
+
+    states: [
+        State {
+            name: "black";
+            when: textArea.themeTransition && MoneroComponents.Style.blackTheme
+            PropertyChanges {
+                target: textArea
+                color: {
+                    return textArea.colorBlackTheme ? textArea.colorBlackTheme : MoneroComponents.Style._b_defaultFontColor
+                }
+            }
+        }, State {
+            name: "white";
+            when: textArea.themeTransition && !MoneroComponents.Style.blackTheme
+            PropertyChanges {
+                target: textArea
+                color: {
+                    return textArea.colorWhiteTheme ? textArea.colorWhiteTheme : MoneroComponents.Style._w_defaultFontColor
+                }
+            }
+        }
+    ]
+
+    transitions: Transition {
+        enabled: appWindow.themeTransition
+        ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: 750 }
+    }
+}

components/TipItem.qml

@@ -26,9 +26,11 @@
 // 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.2
+import QtQuick 2.9
 import QtQuick.Window 2.1
 
+import "../components" as MoneroComponents
+
 Window {
     property alias text: content.text
     property alias containsMouse: tipArea.containsMouse
@@ -55,10 +57,10 @@ Window {
             anchors.top: parent.bottom
             anchors.left: parent.left
             anchors.leftMargin: 5
-            source: "../images/tip.png"
+            source: "qrc:///images/tip.png"
         }
 
-        Text {
+        MoneroComponents.TextPlain {
             id: content
             anchors.horizontalCenter: parent.horizontalCenter
             y: 6

components/TitleBar.qml

@@ -26,304 +26,320 @@
 // 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.5
+import QtQuick 2.9
 import QtQuick.Window 2.0
-import QtQuick.Layouts 1.1
+import QtGraphicalEffects 1.0
+import QtQuick.Layouts 1.2
+
+import FontAwesome 1.0
+import "." as MoneroComponents
+import "effects/" as MoneroEffects
 
 Rectangle {
-    id: titleBar
+    id: root
-
-    height: {
-        if(!customDecorations || isMobile){
-            return 0;
-        }
-
-        if(small) return 38 * scaleRatio;
-        else return 50 * scaleRatio;
-    }
-    y: -height
-    z: 1
-
-    property string title
     property int mouseX: 0
-    property bool containsMouse: false
     property bool basicButtonVisible: false
     property bool customDecorations: persistentSettings.customDecorations
-    property bool showWhatIsButton: true
+    property bool showMinimizeButton: true
-    property bool showMinimizeButton: false
+    property bool showMaximizeButton: true
-    property bool showMaximizeButton: false
     property bool showCloseButton: true
-    property bool showMoneroLogo: false
+
-    property bool small: false
+    height: {
-    property alias titleBarGradientImageOpacity: titleBarGradientImage.opacity
+        if(!persistentSettings.customDecorations || isMobile) return 0;
-    property bool orange: false
+        return 50 * scaleRatio;
-    property string buttonHoverColor: "#262626"
+    }
-    property string buttonHoverColorOrange: "#44FFFFFF"
+
+    z: 1
+    color: "transparent"
 
     signal closeClicked
     signal maximizeClicked
     signal minimizeClicked
+    signal languageClicked
     signal goToBasicVersion(bool yes)
 
-    Item {
+    state: "default"
-        // Background gradient
+    states: [
-        width: parent.width
+        State {
-        height: parent.height
+            name: "default";
-        z: parent.z + 1
+            PropertyChanges { target: btnSidebarCollapse; visible: true}
+            PropertyChanges { target: btnLanguageToggle; visible: true}
+        }, State {
+            // show only theme switcher and window controls
+            name: "essentials";
+            PropertyChanges { target: btnSidebarCollapse; visible: false}
+            PropertyChanges { target: btnLanguageToggle; visible: false}
+        }
+    ]
 
-        Image {
+    MoneroEffects.GradientBackground {
-           id: titleBarGradientImage
-           visible: !titleBar.orange
         anchors.fill: parent
-           height: titleBar.height
+        duration: 300
-           width: titleBar.width
+        fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
-           source: "../images/titlebarGradient.jpg"
+        initialStartColor: MoneroComponents.Style.titleBarBackgroundGradientStart
-        }
+        initialStopColor: MoneroComponents.Style.titleBarBackgroundGradientStop
-
+        blackColorStart: MoneroComponents.Style._b_titleBarBackgroundGradientStart
-        Rectangle {
+        blackColorStop: MoneroComponents.Style._b_titleBarBackgroundGradientStop
-            visible: titleBar.orange
+        whiteColorStart: MoneroComponents.Style._w_titleBarBackgroundGradientStart
-            width: parent.width
+        whiteColorStop: MoneroComponents.Style._w_titleBarBackgroundGradientStop
-            height: parent.height
+        start: Qt.point(width, 0)
-            color: "#ff6600"
+        end: Qt.point(0, 0)
-        }
-    }
-
-    Item {
-        id: titlebarlogo
-        width: 125
-        height: parent.height
-        anchors.centerIn: parent
-        visible: customDecorations
-        z: parent.z + 1
-
-        Image {
-            visible: !isMobile && showMoneroLogo && !titleBar.orange
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: 11
-            width: 125
-            height: 28
-            source: "../images/titlebarLogo.png"
-        }
-
-        Image {
-            visible: !isMobile && showMoneroLogo && titleBar.orange
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: 11
-            width: 132
-            height: 22
-            source: "../images/moneroLogo_white.png"
-        }
-    }
-
-    Label {
-        id: titleLabel
-        visible: !showMoneroLogo && customDecorations && titleBar.title !== ''
-        anchors.centerIn: parent
-        fontSize: 18
-        text: titleBar.title
-        z: parent.z + 1
     }
 
     RowLayout {
-        anchors.left: parent.left
-        anchors.top: parent.top
-        width: 40
-        height: parent.height
-        spacing: 0
         z: parent.z + 2
+        spacing: 0
+        anchors.fill: parent
 
+        // collapse sidebar
         Rectangle {
-            Layout.preferredHeight: parent.height
+            id: btnSidebarCollapse
-            Layout.preferredWidth: Layout.preferredHeight
+            visible: root.basicButtonVisible
-
-            id: goToBasicVersionButton
-            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
-            property bool checked: false
             color: "transparent"
-            height: titleBar.height
+            Layout.preferredWidth: parent.height
-            width: height
+            Layout.preferredHeight: parent.height
-            visible: !titleBar.orange && titleBar.basicButtonVisible
 
-            Image {
+            MoneroEffects.ImageMask {
-                width: 14
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
                 height: 14
-                anchors.centerIn: parent
+                width: 14
-                source: "../images/expand.png"
+                image: MoneroComponents.Style.titleBarExpandSource
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.cube
+                fontAwesomeFallbackSize: 14
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.9
+                opacity: 0.75
             }
 
             MouseArea {
-                id: basicMouseArea
-                hoverEnabled: true
                 anchors.fill: parent
+                hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: goToBasicVersionButton.color = "transparent";
+                onExited: parent.color = "transparent"
-                onClicked: {
+                onClicked: root.goToBasicVersion(leftPanel.visible)
-                    releaseFocus()
-                    parent.checked = !parent.checked
-                    titleBar.goToBasicVersion(leftPanel.visible)
-                }
             }
         }
 
         // language selection
         Rectangle {
+            id: btnLanguageToggle
+            color: "transparent"
+            Layout.preferredWidth: parent.height
             Layout.preferredHeight: parent.height
-            Layout.preferredWidth: Layout.preferredHeight
-            visible: !titleBar.orange && persistentSettings.customDecorations
 
-            id: languageSelection
+            Text {
-            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
+                text: FontAwesome.globe
-            property bool checked: false
+                font.family: FontAwesome.fontFamily
-            color:  "transparent"
+                font.pixelSize: 16 * scaleRatio
-            height: titleBar.height
+                color: MoneroComponents.Style.defaultFontColor
-            width: height
+                anchors.verticalCenter: parent.verticalCenter
-            z: parent.z + 2
+                anchors.horizontalCenter: parent.horizontalCenter
-
+                opacity: 0.75
-            Image {
-                width: 14
-                height: 14
-                anchors.centerIn: parent
-                source: "../images/langFlagGrey.png"
             }
 
             MouseArea {
-                hoverEnabled: true
                 anchors.fill: parent
+                hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = "#262626";
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent";
+                onExited: parent.color = "transparent"
+                onClicked: root.languageClicked()
+            }
+        }
+
+        // switch theme
+        Rectangle {
+            color: "transparent"
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
+
+            Text {
+                text: MoneroComponents.Style.blackTheme ? FontAwesome.lightbulbO : FontAwesome.moonO
+                font.family: FontAwesome.fontFamily
+                font.pixelSize: 16 * scaleRatio
+                color: MoneroComponents.Style.defaultFontColor
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                opacity: 0.75
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                onExited: parent.color = "transparent"
                 onClicked: {
-                    releaseFocus();
+                    MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
-                    appWindow.toggleLanguageView();
+                    persistentSettings.blackTheme = MoneroComponents.Style.blackTheme;
-                }
                 }
             }
         }
 
-    Row {
+        Item {
-        id: row
+            // make dummy space when hiding buttons when titlebar
-        anchors.right: parent.right
+            // state is 'essentials' in order for the
-        anchors.top: parent.top
+            // monero logo to still be centered
-        anchors.bottom: parent.bottom
+            Layout.preferredWidth: parent.height * 2  // amount of buttons we hide
-        visible: parent.customDecorations
+            Layout.preferredHeight: parent.height
-        z: parent.z + 2
+            visible: root.state == "essentials"
+        }
 
+        // monero logo
+        Item {
+            Layout.fillWidth: true
+            Layout.preferredHeight: parent.height
+
+            Image {
+                id: imgLogo
+                width: 125
+                height: 28
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+
+                source: MoneroComponents.Style.titleBarLogoSource
+                visible: {
+                    if(!isOpenGL) return true;
+                    if(!MoneroComponents.Style.blackTheme) return true;
+                    return false;
+                }
+            }
+
+            Colorize {
+                visible: isOpenGL && MoneroComponents.Style.blackTheme
+                anchors.fill: imgLogo
+                source: imgLogo
+                saturation: 0.0
+            }
+        }
+
+        // minimize
         Rectangle {
-            id: minimizeButton
-            visible: showMinimizeButton
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 42
             color: "transparent"
+            visible: root.showMinimizeButton
+            Layout.preferredWidth: parent.height
+            Layout.preferredHeight: parent.height
 
-            Image {
+            MoneroEffects.ImageMask {
-                anchors.centerIn: parent
+                anchors.bottom: parent.bottom
-                source: "../images/minimize.png"
+                anchors.bottomMargin: 18
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: 3
+                width: 15
+                image: MoneroComponents.Style.titleBarMinimizeSource
+                color: MoneroComponents.Style.defaultFontColor
+                fontAwesomeFallbackIcon: FontAwesome.minus
+                fontAwesomeFallbackSize: 18
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
+                opacity: 0.75
             }
 
             MouseArea {
-                id: minimizeArea
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                    if(titleBar.orange){
+                onExited: parent.color = "transparent"
-                        minimizeButton.color = titleBar.buttonHoverColorOrange;
+                onClicked: root.minimizeClicked();
-                    } else {
-                        minimizeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: minimizeButton.color = "transparent";
-                onClicked: minimizeClicked();
             }
         }
 
+        // maximize
         Rectangle {
-            id: maximizeButton
+            id: test
-            visible: showMaximizeButton
+            visible: root.showMaximizeButton
-            anchors.top: parent.top
+            color: "transparent"
-            anchors.bottom: parent.bottom
+            Layout.preferredWidth: parent.height
-            width: 42
+            Layout.preferredHeight: parent.height
-            color: "transparent";
 
             Image {
-                anchors.centerIn: parent
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: MoneroComponents.Style.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 = MoneroComponents.Style.titleBarButtonHoverColor
+                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
-                source: appWindow.visibility === Window.FullScreen ?  "../images/backToWindowIcon.png" :
+                image: MoneroComponents.Style.titleBarCloseSource
-                                                                      "../images/fullscreen.png"
+                color: MoneroComponents.Style.defaultFontColor
-            }
+                fontAwesomeFallbackIcon: FontAwesome.timesRectangle
-
+                fontAwesomeFallbackSize: 18
-            MouseArea {
+                fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
-                id: maximizeArea
+                opacity: 0.75
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onEntered: {
-                    if(titleBar.orange){
-                        maximizeButton.color = titleBar.buttonHoverColorOrange;
-                    } else {
-                        maximizeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: maximizeButton.color = "transparent";
-                onClicked: maximizeClicked();
-            }
-        }
-
-        Rectangle {
-            id: closeButton
-            visible: showCloseButton
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 42
-            color: containsMouse ? "#E04343" : "#00000000"
-
-            Image {
-                anchors.centerIn: parent
-                width: 16
-                height: 16
-                source: "../images/close.png"
             }
 
             MouseArea {
                 anchors.fill: parent
-                onClicked: closeClicked();
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: {
+                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                    if(titleBar.orange){
+                onExited: parent.color = "transparent"
-                        closeButton.color = titleBar.buttonHoverColorOrange;
+                onClicked: root.closeClicked();
-                    } else {
-                        closeButton.color = titleBar.buttonHoverColor;
-                    }
-                }
-                onExited: closeButton.color = "transparent";
             }
         }
     }
 
-    // window borders
     Rectangle {
-        visible: !titleBar.orange
+        z: parent.z + 3
         anchors.bottom: parent.bottom
-        anchors.right: parent.right
         anchors.left: parent.left
-        height: 1
+        anchors.right: parent.right
-        color: "#2F2F2F"
+        height: MoneroComponents.Style.blackTheme ? 1 : 1
-        z: parent.z + 1
+        color: MoneroComponents.Style.titleBarBackgroundBorderColor
+
+        MoneroEffects.ColorTransition {
+            targetObj: parent
+            blackColor: MoneroComponents.Style._b_titleBarBackgroundBorderColor
+            whiteColor: MoneroComponents.Style._w_titleBarBackgroundBorderColor
+        }
     }
 
-    Rectangle {
+    MouseArea {
-        visible: titleBar.small && !titleBar.orange
+        enabled: persistentSettings.customDecorations
-        anchors.top: parent.top
+        property var previousPosition
-        anchors.right: parent.right
+        anchors.fill: parent
-        anchors.left: parent.left
+        propagateComposedEvents: true
-        height: 1
+        onPressed: previousPosition = globalCursor.getPosition()
-        color: "#2F2F2F"
+        onPositionChanged: {
-        z: parent.z + 1
+            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
+            }
+        }
     }
 }

components/WarningBox.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.7
+import QtQuick 2.9
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 
@@ -13,7 +13,7 @@ Rectangle {
     Layout.fillWidth: true
     Layout.preferredHeight: warningLayout.height
 
-    color: "#09FFFFFF"
+    color: MoneroComponents.Style.titleBarButtonHoverColor
     radius: 4
     border.color: MoneroComponents.Style.inputBorderColorInActive
     border.width: 1
@@ -34,7 +34,7 @@ Rectangle {
             Layout.leftMargin: 18 * scaleRatio
             Layout.topMargin: 12 * scaleRatio
             Layout.bottomMargin: 12 * scaleRatio
-            source: "../images/warning.png"
+            source: "qrc:///images/warning.png"
         }
 
         TextArea {
@@ -55,8 +55,8 @@ Rectangle {
             readOnly: true
             onLinkActivated: root.linkActivated();
 
-            selectionColor: MoneroComponents.Style.dimmedFontColor
+            selectionColor: MoneroComponents.Style.textSelectionColor
-            selectedTextColor: MoneroComponents.Style.defaultFontColor
+            selectedTextColor: MoneroComponents.Style.textSelectedColor
         }
     }
 }

components/effects/ColorTransition.qml

@@ -0,0 +1,58 @@
+// Copyright (c) 2014-2019, 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 QtGraphicalEffects 1.0
+
+import "../" as MoneroComponents
+
+Item {
+    id: root
+    property var targetObj
+    property string blackColor: ""
+    property string whiteColor: ""
+    property int duration: 300
+    property bool themeTransition: true
+
+    states: [
+        State {
+            name: "black";
+            when: MoneroComponents.Style.blackTheme && root.themeTransition
+            PropertyChanges { target: root.targetObj; color: root.blackColor}
+        }, State {
+            name: "white";
+            when: !MoneroComponents.Style.blackTheme && root.themeTransition
+            PropertyChanges { target: root.targetObj; color: root.whiteColor}
+        }
+    ]
+
+    transitions: Transition {
+        enabled: appWindow.themeTransition
+        ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: root.duration }
+    }
+}

components/effects/GradientBackground.qml

@@ -0,0 +1,107 @@
+// Copyright (c) 2014-2019, 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 QtGraphicalEffects 1.0
+
+import "../" as MoneroComponents
+
+Item {
+    id: root
+    property string fallBackColor: ""
+    property string blackColorStart: ""
+    property string blackColorStop: ""
+    property string whiteColorStart: ""
+    property string whiteColorStop: ""
+    property string initialStartColor: ""
+    property string initialStopColor: ""
+    property double posStart: 0.1
+    property double posStop: 1.0
+    property int duration: 300
+    property variant start
+    property variant end
+    anchors.fill: parent
+
+    // background software renderer
+    Rectangle {
+        visible: !isOpenGL
+        anchors.fill: parent
+        color: root.fallBackColor
+    }
+
+    // background opengl
+    LinearGradient {
+        visible: isOpenGL
+        anchors.fill: parent
+        start: root.start
+        end: root.end
+        gradient: Gradient {
+            GradientStop {
+                id: gradientStart
+                position: root.posStart
+                color: root.initialStartColor
+            }
+            GradientStop {
+                id: gradientStop
+                position: root.posStop
+                color: root.initialStopColor
+            }
+        }
+
+        states: [
+            State {
+                name: "black";
+                when: isOpenGL && MoneroComponents.Style.blackTheme
+                PropertyChanges {
+                    target: gradientStart
+                    color: root.blackColorStart
+                }
+                PropertyChanges {
+                    target: gradientStop
+                    color: root.blackColorStop
+                }
+            }, State {
+                name: "white";
+                when: isOpenGL && !MoneroComponents.Style.blackTheme
+                PropertyChanges {
+                    target: gradientStart
+                    color: root.whiteColorStart
+                }
+                PropertyChanges {
+                    target: gradientStop
+                    color: root.whiteColorStop
+                }
+            }
+        ]
+
+        transitions: Transition {
+            enabled: appWindow.themeTransition
+            ColorAnimation { properties: "color"; easing.type: Easing.InOutQuad; duration: root.duration }
+        }
+    }
+}

components/effects/ImageMask.qml

@@ -0,0 +1,84 @@
+// Copyright (c) 2014-2019, 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 QtGraphicalEffects 1.0
+
+import "../" as MoneroComponents
+import FontAwesome 1.0
+
+Item {
+    // Use this component to color+opacity change images with transparency (svg/png)
+    // Does not work in low graphics mode, use fontAwesome fallback option.
+
+    id: root
+    property string image: ""
+    property string color: ""
+    property bool fontAwesomeFallbackEnabled: true
+    property var fontAwesomeFallbackIcon: ""
+    property int fontAwesomeFallbackSize: 16
+    property double fontAwesomeFallbackOpacity: 0.8
+    property string fontAwesomeFallbackColor: MoneroComponents.Style.defaultFontColor
+
+    property alias fontAwesomeFallback: fontAwesomeFallback
+    property alias svgMask: svgMask
+    property alias imgMockColor: imgMockColor
+
+    width: 0
+    height: 0
+
+    Image {
+        id: svgMask
+        source: root.image
+        sourceSize.width: root.width
+        sourceSize.height: root.height
+        smooth: true
+        mipmap: true
+        visible: false
+    }
+
+    ColorOverlay {
+        id: imgMockColor
+        anchors.fill: root
+        source: svgMask
+        color: root.color
+        visible: isOpenGL
+    }
+
+    Text {
+        id: fontAwesomeFallback
+        visible: !isOpenGL && root.fontAwesomeFallback
+        text: !isOpenGL ? root.fontAwesomeFallbackIcon : ""
+        font.family: FontAwesome.fontFamily
+        font.pixelSize: root.fontAwesomeFallbackSize
+        color: root.fontAwesomeFallbackColor
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        opacity: root.fontAwesomeFallbackOpacity
+    }
+}

fonts/FontAwesome/FontAwesome.qml

@@ -1,5 +1,5 @@
 pragma Singleton
-import QtQuick 2.0
+import QtQuick 2.9
 
 Object {
 

fonts/FontAwesome/Object.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.0
+import QtQuick 2.9
 
 QtObject {
     id: object

images/arrow-right-in-circle-outline-medium-white.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="1.5" opacity="1">
+        <path fill-rule="nonzero" d="M10 .75C4.9.75.75 4.9.75 10S4.9 19.25 10 19.25s9.25-4.15 9.25-9.25S15.1.75 10 .75z"/>
+        <g stroke-linecap="round">
+            <path d="M11.1 12.786L13.5 10l-2.4-2.786M5.7 10h7.627"/>
+        </g>
+    </g>
+</svg>

images/check-white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
+    <path fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.647" d="M1 8.295L6.732 13 15 1"/>
+</svg>

images/close.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="round" stroke-width="1.85" opacity="1">
+        <path d="M1 1l14 14M15 1L1 15"/>
+    </g>
+</svg>

images/copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="21" viewBox="0 0 16 21">
+    <g fill="none" fill-rule="evenodd" opacity="1">
+        <path fill="#FFF" d="M4 1v2H2v16h12V3h-2V1h2.5A1.5 1.5 0 0 1 16 2.5v17a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 19.5v-17A1.5 1.5 0 0 1 1.5 1H4zm2-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1z"/>
+        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M4.41 11.634l2.874 2.44 4.08-5.926"/>
+    </g>
+</svg>

images/edit.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="21" viewBox="0 0 23 21">
+    <g fill="none" fill-rule="evenodd" opacity="1">
+        <path fill="#FFF" d="M7.642 20H1.5A1.5 1.5 0 0 1 0 18.5v-17A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v6.372h-2V2H2v16h5.642v2zM4 4.615h8v2H4v-2zm0 9.231h5v2H4v-2zm0-4.615h8v2H4v-2z"/>
+        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.08" d="M21.771 10.034l-8.44 8.695-3.205.886.908-3.323 8.387-8.695"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M21.985 10.532l.374-.387a2.333 2.333 0 0 0 0-3.213 2.138 2.138 0 0 0-3.098 0l-.374.388 3.098 3.212zM11.087 16.237l2.35 2.381-3.097.776z"/>
+    </g>
+</svg>

images/fullscreen.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="1.636" opacity="1">
+        <rect width="16.364" height="16.364" x=".818" y=".818" rx="1.636"/>
+        <rect width="16.364" height="3.273" x=".818" y=".818" fill="#FFF" rx="1.636"/>
+    </g>
+</svg>

images/minimize.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="4" viewBox="0 0 18 4">
+    <rect width="16" height="2" x="899" y="31" fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width="2" opacity="1" rx="1" transform="translate(-898 -30)"/>
+</svg>

images/right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
+    <path fill="none" fill-rule="evenodd" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M1 1l6 6-6 6" opacity="1"/>
+</svg>

images/settings_local.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="round" stroke-width="1.25">
+        <path d="M1.595 2.19h5.357v5.358"/>
+        <path d="M6.682 3.021A12.49 12.49 0 0 0 1 13.5C1 20.404 6.596 26 13.5 26S26 20.404 26 13.5 20.404 1 13.5 1"/>
+    </g>
+</svg>

images/settings_remote.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="27" viewBox="0 0 22 27">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="round" stroke-width="1.071">
+        <path d="M20.412 7.818h-6.47v-6.25"/>
+        <path d="M21 26H1V1h12.941L21 7.818z"/>
+        <path d="M7.154 15.404l3.333-3.333 3.334 3.334M10.487 20.286v-7.548"/>
+    </g>
+</svg>

images/sidebar.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="1.636" opacity="1">
+        <rect width="16.364" height="16.364" x=".818" y=".818" rx="1.636"/>
+        <path fill="#FFF" d="M6.182 17.182V.818H1.64a.822.822 0 0 0-.822.822v14.72c0 .454.368.822.822.822h4.542z"/>
+    </g>
+</svg>

images/themes/white/Monero-Logo.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   width="282"
+   height="75"
+   id="Monero-Logo">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <path
+     d="m 37.3,0.35329395 c -20.377,0 -36.903,16.524 -36.903,36.902 0,4.074 0.66,7.992 1.88,11.657 l 11.036,0 0,-31.049 23.987,23.987 23.987,-23.987 0,31.049 11.037,0 c 1.22,-3.665 1.88,-7.583 1.88,-11.657 0,-20.378 -16.526,-36.902 -36.904,-36.902"
+     id="path22"
+     style="fill:#ff6600" />
+  <path
+     d="m 21.3164,36.895994 0,19.537 -15.55,0 c 6.478,10.628 18.178,17.726 31.533,17.726 13.355,0 25.056,-7.098 31.533,-17.726 l -15.549,0 0,-19.537 -15.984,15.984 z"
+     id="path26"
+     style="fill:#4c4c4c" />
+  <path
+     d="m 272.7087,47.761494 c -1.951,2.009 -4.317,3.01 -7.099,3.01 -2.458,0 -4.631,-0.772 -6.533,-2.324 -2.445,-1.979 -3.666,-4.674 -3.666,-8.084 0,-3.053 0.972,-5.576 2.916,-7.556 1.937,-1.987 4.331,-2.974 7.184,-2.974 2.817,0 5.212,1.016 7.177,3.045 1.973,2.03 2.959,4.512 2.959,7.449 0,2.945 -0.978,5.418 -2.938,7.434 m 4.097,-18.937 c -3.132,-3.151 -6.877,-4.731 -11.238,-4.731 -2.874,0 -5.561,0.723 -8.048,2.166 -2.496,1.444 -4.455,3.402 -5.877,5.876 -1.423,2.473 -2.137,5.183 -2.137,8.127 0,4.397 1.529,8.192 4.59,11.389 3.058,3.202 6.898,4.796 11.514,4.796 4.411,0 8.165,-1.551 11.26,-4.668 3.095,-3.11 4.639,-6.919 4.639,-11.416 0,-4.533 -1.566,-8.378 -4.703,-11.539"
+     id="path30"
+     style="fill:#4c4c4c" />
+  <path
+     d="m 238.3063,35.970494 c -0.743,0.518 -1.094,0.773 -3.06,0.773 l -7.736,0 0,-6.618 7.496,0 c 1.503,0 1.769,0.113 2.385,0.345 0.614,0.225 1.102,0.601 1.47,1.118 0.368,0.518 0.548,1.133 0.548,1.838 0,1.186 -0.368,2.034 -1.103,2.544 m 0.93,6.093 c 2.049,-0.736 3.587,-1.816 4.607,-3.241 1.021,-1.433 1.524,-3.205 1.524,-5.335 0,-2.019 -0.457,-3.775 -1.381,-5.253 -0.923,-1.478 -2.146,-2.536 -3.661,-3.174 -1.516,-0.638 -4.06,-0.96 -7.639,-0.96 l -11.329,0 0,32.34 6.153,0 0,-13.694 5.37,0 7.28,13.694 6.73,0 -7.654,-14.377 z"
+     id="path34"
+     style="fill:#4c4c4c" />
+  <path
+     d="m 193.7751,24.093494 20.968,0 0,6.025 -14.852,0 0,6.619 14.852,0 0,5.92 -14.852,0 0,7.728 14.852,0 0,6.049 -20.968,0 0,-32.341 z"
+     id="path38"
+     style="fill:#4c4c4c" />
+  <path
+     d="m 161.2868,24.093494 5.891,0 13.874,21.28 0,-21.28 6.153,0 0,32.34 -5.913,0 -13.852,-21.212 0,21.212 -6.153,0 0,-32.34 z"
+     id="path42"
+     style="fill:#4c4c4c" />
+  <use
+     transform="translate(-125.0586,0)"
+     id="use46"
+     x="0"
+     y="0"
+     width="282"
+     height="75"
+     xlink:href="#path30" />
+  <path
+     d="m 89.6882,24.092594 6.025,0 7.473,22.557 7.587,-22.557 5.935,0 5.449,32.341 -5.936,0 -3.474,-20.425 -6.881,20.425 -5.426,0 -6.79,-20.425 -3.542,20.425 -6.003,0 5.583,-32.341 z"
+     id="path50"
+     style="fill:#4c4c4c" />
+</svg>

images/themes/white/close.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" opacity="1">
+        <path fill="none" d="M-10-10h36v36h-36z" opacity="1"/>
+        <path stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M1 1l14 14M15 1L1 15"/>
+    </g>
+</svg>

images/themes/white/expand.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd" opacity="1">
+        <path fill="none" d="M-11-11h36v36h-36z" opacity="1"/>
+        <path stroke="#000" stroke-linecap="round" stroke-width="1.556" d="M13 13L1.686 1.686M1 7.222V1h6.222"/>
+    </g>
+</svg>

images/themes/white/fullscreen.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd" opacity="1" transform="translate(-9 -9)">
+        <path fill="none" d="M0 0h36v36H0z" opacity="1"/>
+        <rect width="16" height="16" x="10" y="10" stroke="#000" stroke-width="1.5" rx="1.5"/>
+        <path fill="#FFF" stroke="#000" stroke-width="1.5" d="M11 10h14a1 1 0 0 1 1 1v2H10v-2a1 1 0 0 1 1-1z"/>
+    </g>
+</svg>

images/themes/white/minimize.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="2" viewBox="0 0 16 2">
+    <rect width="16" height="2" x="10" y="25" fill="#000" fill-rule="evenodd" opacity="1" rx="1" transform="translate(-10 -25)"/>
+</svg>

images/themes/white/question.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18">
+    <g fill="none" fill-rule="evenodd" opacity="1">
+        <path fill="none" d="M-13-9h36v36h-36z" opacity="1"/>
+        <g fill="#000" fill-rule="nonzero">
+            <path d="M5 0C3.75 0 2.571.468 1.643 1.296A5.057 5.057 0 0 0 0 5.04c0 .396.321.72.714.72h.715a.72.72 0 0 0 .714-.72c0-.828.357-1.584.964-2.16A2.823 2.823 0 0 1 5 2.16c.107 0 .214 0 .321.036 1.322.144 2.358 1.224 2.5 2.52.143 1.188-.464 2.304-1.5 2.88-1.5.792-2.428 2.304-2.428 3.96v2.124c0 .396.321.72.714.72h.714a.72.72 0 0 0 .715-.72v-2.124c0-.828.5-1.62 1.285-2.052A4.98 4.98 0 0 0 9.93 4.5C9.714 2.16 7.857.288 5.57.036 5.393 0 5.18 0 5 0zM5.714 18H4.286a.358.358 0 0 1-.357-.36V16.2c0-.2.16-.36.357-.36h1.428c.198 0 .357.16.357.36v1.44c0 .2-.16.36-.357.36z"/>
+        </g>
+    </g>
+</svg>