New history page, including the mobile version.

11 files changed, 592 insertions, 426 deletions

diff --git a/components/DatePicker.qml b/components/DatePicker.qml
index 8988f2bd..6fb3605d 100644
--- a/components/DatePicker.qml
+++ b/components/DatePicker.qml
@@ -29,18 +29,23 @@
 import QtQuick 2.2
 import QtQuick.Controls 1.2
 import QtQuick.Controls.Styles 1.2
+import "../components"
+import "." 1.0
+
 
 Item {
     id: datePicker
     property bool expanded: false
     property date currentDate
     property bool showCurrentDate: true
-    property color backgroundColor : "#FFFFFF"
-    property color errorColor : "#FFDDDD"
+    property color backgroundColor : "#404040"
+    property color errorColor : "red"
     property bool error: false
+    property alias inputLabel: inputLabel
+
+    signal dateChanged();
 
-    height: 37
-    width: 156
+    height: 50
 
     onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
 
@@ -57,28 +62,48 @@ Item {
         return true
     }
 
-    Item {
-        id: head
-        anchors.fill: parent
-        Rectangle {
+    Rectangle {
+        id: inputLabelRect
+        color: "transparent"
+        height: 22
+        width: parent.width
+
+        Text {
+            id: inputLabel
+            anchors.top: parent.top
             anchors.left: parent.left
-            anchors.right: parent.right
-            height: parent.height
-            //radius: 4
-            y: 0
-            color: "#DBDBDB"
+            font.family: Style.fontRegular.name
+            font.pixelSize: 16
+            font.bold: false
+            textFormat: Text.RichText
+            color: Style.defaultFontColor
 
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton
+                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+            }
         }
+    }
+
+    Item {
+        id: head
+        anchors.top: inputLabelRect.bottom
+        anchors.topMargin: 6 * scaleRatio
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 28
 
         Rectangle {
+            anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
             height: parent.height - 1
             anchors.leftMargin: datePicker.expanded ? 1 : 0
             anchors.rightMargin: datePicker.expanded ? 1 : 0
-            //radius: 4
+            radius: 4
             y: 1
-            color: datePicker.error ? datePicker.errorColor : datePicker.backgroundColor
+            color: datePicker.backgroundColor
         }
 
         Item {
@@ -89,24 +114,18 @@ Item {
             anchors.margins: 4
             width: height
 
-            StandardButton {
-                id: button
-                anchors.fill: parent
-                icon: "../images/datePicker.png"
-                visible: !datePicker.expanded
-                onClicked: datePicker.expanded = true
-            }
-
             Image {
+                id: button
                 anchors.centerIn: parent
-                source: "../images/datePicker.png"
-                visible: datePicker.expanded
+                source: "../images/whiteDropIndicator.png"
+                rotation: datePicker.expanded ? 180 : 0
             }
 
             MouseArea {
                 anchors.fill: parent
-                enabled: datePicker.expanded
-                onClicked: datePicker.expanded = false
+                onClicked: datePicker.expanded = !datePicker.expanded
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
             }
         }
 
@@ -117,7 +136,7 @@ Item {
             anchors.rightMargin: 4
             height: 16
             width: 1
-            color: "#DBDBDB"
+            color: "#808080"
             visible: datePicker.expanded
         }
 
@@ -146,9 +165,9 @@ Item {
                 id: dayInput
                 readOnly: true
                 width: 22
-                font.family: "Arial"
-                font.pixelSize: 18
-                // color: "#525252"
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 2
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 01; top: 31;}
@@ -169,19 +188,19 @@ Item {
             }
 
             Text {
-                font.family: "Arial"
-                font.pixelSize: 18
-                // color: "#525252"
-                text: "."
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14
+                color: datePicker.error ? errorColor : Style.defaultFontColor
+                text: "-"
             }
 
             TextInput {
                 id: monthInput
                 readOnly: true
                 width: 22
-                font.family: "Arial"
-                font.pixelSize: 18
-                // color: "#525252"
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 2
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 01; top: 12;}
@@ -201,18 +220,18 @@ Item {
             }
 
             Text {
-                font.family: "Arial"
-                font.pixelSize: 18
-                // color: "#525252"
-                text: "."
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14
+                color: datePicker.error ? errorColor : Style.defaultFontColor
+                text: "-"
             }
 
             TextInput {
                 id: yearInput
                 width: 44
-                font.family: "Arial"
-                font.pixelSize: 18
-                /// color: "#525252"
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14
+                color: datePicker.error ? errorColor : Style.defaultFontColor
                 maximumLength: 4
                 horizontalAlignment: TextInput.AlignHCenter
                 validator: IntValidator{bottom: 1000; top: 9999;}
@@ -268,6 +287,7 @@ Item {
                 gridVisible: false
                 background: Rectangle { color: "transparent" }
                 dayDelegate: Item {
+                    z: 8
                     implicitHeight: implicitWidth
                     implicitWidth: calendar.width / 7
 
@@ -304,6 +324,8 @@ Item {
                                     calendar.showNextMonth()
                                 else calendar.showPreviousMonth()
                             }
+
+                            dateChanged();
                         }
                     }
                 }
diff --git a/components/HistoryTable.qml b/components/HistoryTable.qml
index 18d05f6d..9954e4da 100644
--- a/components/HistoryTable.qml
+++ b/components/HistoryTable.qml
@@ -30,6 +30,7 @@ import QtQuick 2.0
 import moneroComponents.Clipboard 1.0
 import moneroComponents.AddressBookModel 1.0
 import "../components" as MoneroComponents
+import "." 1.0
 
 ListView {
     id: listView
@@ -65,11 +66,10 @@ ListView {
         return addressBookModel.data(idx, AddressBookModel.AddressBookDescriptionRole)
     }
 
-
     footer: Rectangle {
-        height: 127
+        height: 127 * scaleRatio
         width: listView.width
-        color: "#FFFFFF"
+        color: "transparent"
 
         Text {
             anchors.centerIn: parent
@@ -80,396 +80,370 @@ ListView {
         }
     }
 
+    function get_color(i){
+        if (i === 0){
+            return "green";
+        } else {
+            return "red";
+        }
+    }
+
     delegate: Rectangle {
         id: delegate
-        height: 144
+        property bool collapsed: index ? false : true
+        height: collapsed ? 180 * scaleRatio : 70 * scaleRatio
         width: listView.width
-        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
-        z: listView.count - index
-        function collapseDropdown() { dropdown.expanded = false }
+        color: "#CC000000"
 
-        StandardButton {
-            id: detailsButton
-            anchors.right:parent.right
-            anchors.rightMargin: 15
-            anchors.top: parent.top
-            anchors.topMargin: parent.height/2 - this.height/2
-            width: 80
-            fontSize: 14
-            text: qsTr("Details")
-            onClicked: {
-                var tx_key = currentWallet.getTxKey(hash)
-                var tx_note = currentWallet.getUserNote(hash)
-                var rings = currentWallet.getRings(hash)
-                if (rings)
-                    rings = rings.replace(/\|/g, '\n')
-                informationPopup.title = "Transaction details";
-                informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings);
-                informationPopup.onCloseCallback = null
-                informationPopup.open();
-            }
+        function collapse(){
+            delegate.height = 180 * scaleRatio;
         }
 
-
-
-        Row {
-            id: row1
-            anchors.left: parent.left
+        // borders
+        Rectangle{
             anchors.right: parent.right
             anchors.top: parent.top
-            anchors.topMargin: 14
-            // -- direction indicator
-            Rectangle {
-                id: dot
-                width: 14
-                height: width
-                radius: width / 2
-                color: isOut ? "#FF4F41" : "#36B05B"
-            }
-
-            Item { //separator
-                width: 12
-                height: 14
-            }
-
-            // -- description aka recepient name from address book (TODO)
-            /*
-            Text {
-                id: descriptionText
-                width: text.length ? (descriptionArea.containsMouse ? parent.width - x - 12 : 120) : 0
-                anchors.verticalCenter: dot.verticalCenter
-                font.family: "Arial"
-                font.bold: true
-                font.pixelSize: 19
-                color: "#444444"
-                elide: Text.ElideRight
-                text: description
-
-                MouseArea {
-                    id: descriptionArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                }
-            }
-            */
-            /*
-            Item { //separator
-                width: descriptionText.width ? 12 : 0
-                height: 14
-                visible: !descriptionArea.containsMouse
-            }
-            */
-            // -- address (in case outgoing transaction) - N/A in case of incoming
-            MoneroComponents.TextBlock {
-                id: addressText
-                anchors.verticalCenter: dot.verticalCenter
-                width: parent.width - x - 12
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize: 14
-                color: "#545454"
-                text: hash
-                // visible: !descriptionArea.containsMouse
-            }
+            anchors.bottom: parent.bottom
+            width: 1
+            color: "#404040"
         }
 
-        Row {
-            // - Payment ID
-            id: row2
+        Rectangle{
             anchors.left: parent.left
-            anchors.right: parent.right
             anchors.top: parent.top
-            anchors.topMargin: 40
-            anchors.leftMargin: 26
+            anchors.bottom: parent.bottom
+            width: collapsed ? 2 : 1
+            color: collapsed ? "#BBBBBB" : "#404040"
+        }
 
-            // -- "PaymentID" title
-            Text {
-                id: paymentLabel
-                width: 86
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text: paymentId !== "" ? qsTr("Payment ID:")  + translationManager.emptyString : ""
-            }
-            // -- "PaymentID" value
-            MoneroComponents.TextBlock {
-                id: paymentIdValue
-                width: 136
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize:13
-                color: "#545454"
-                text: paymentId
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.top
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
+        }
 
-            }
-            // Address book lookup
-            MoneroComponents.TextBlock {
-                id: addressBookLookupValue
-                width: 136
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize:13
-                color: "#545454"
-                text: "(" + lookupPaymentID(paymentId) + ")"
-                visible: text !== "()"
-            }
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
         }
-        Row {
-            // block height row
-            id: row3
+
+        Rectangle {
+            id: row1
             anchors.left: parent.left
+            anchors.leftMargin: 20 * scaleRatio
             anchors.right: parent.right
-            anchors.top: row2.bottom
-            anchors.topMargin: rowSpacing
-            anchors.leftMargin: 26
+            anchors.rightMargin: 20 * scaleRatio
+            anchors.top: parent.top
+            anchors.topMargin: 15 * scaleRatio
+            height: 40 * scaleRatio
+            color: "transparent"
 
-            // -- "BlockHeight" title
-            Text {
-                id: blockHeghtTitle
-                anchors.bottom: parent.bottom
-                width: 86
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text:  qsTr("BlockHeight:")  + translationManager.emptyString
+            Image {
+                id: arrowImage
+                source: isOut ? "../images/downArrow.png" : "../images/upArrow-green.png"
+                height: 18 * scaleRatio
+                width: 12 * scaleRatio
+                anchors.top: parent.top
+                anchors.topMargin: 12 * scaleRatio
             }
-            // -- "BlockHeight" value
-            MoneroComponents.TextBlock {
-                width: 200
-                anchors.bottom: parent.bottom
-                //elide: Text.ElideRight
-                font.family: "Arial"
-                font.pixelSize: 13
-                color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
-                text: {
-                    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
 
-                }
-            }
-            Item { //separator
-                width: 100
-                height: 14
-            }
-            // -- "Received by" title
             Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 12
-                color: "#535353"
-                text: (isOut ? qsTr("Spent from:") : qsTr("Received by:")) + translationManager.emptyString
-            }
-            Item { //separator
-                width: 5
-                height: 14
+                id: txrxLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                font.family: Style.fontRegular.name
+                font.pixelSize: 14 * scaleRatio
+                text: isOut ? "Sent" : "Received"
+                color: "#808080"
             }
-            // -- "Index" value
+
+//            // -- "BlockHeight" value
+//            TextEdit {
+//                readOnly: true
+//                selectByMouse: true
+//                width: 85
+//                anchors.bottom: parent.bottom
+//                //elide: Text.ElideRight
+//                font.family: "Arial"
+//                font.pixelSize: 13
+//                color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
+//                text: {
+//                    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
+//                }
+//            }
+
             Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 13
+                id: amountLabel
+                anchors.left: arrowImage.right
+                anchors.leftMargin: 18 * scaleRatio
+                anchors.top: txrxLabel.bottom
+                anchors.topMargin: 0 * scaleRatio
+                font.family: Style.fontBold.name
+                font.pixelSize: 18 * scaleRatio
                 font.bold: true
-                color: "#545454"
-                text: "#" + subaddrIndex
-            }
-            Item { //separator
-                width: 5
-                height: 14
-            }
-            // -- "Label" value
-            Text {
-                anchors.bottom: parent.bottom
-                font.family: "Arial"
-                font.pixelSize: 13
-                color: "#545454"
-                text: label
-                elide: Text.ElideRight
-                width: detailsButton.x - x - 30
+                text: { return (displayAmount * 1) + " XMR" }  // hack, removes trailing zeros
+                color: isOut ? "white" : "#2eb358"
             }
-        }
 
-        // -- "Date", "Balance" and "Amound" section
-        Row {
-            id: row4
-            anchors.top: row3.bottom
-            anchors.left: parent.left
-            spacing: 12
-            anchors.topMargin: rowSpacing
+            Rectangle {
+                anchors.right: parent.right
+                width: 300 * scaleRatio
+                height: parent.height
+                color: "transparent"
 
-            Item { //separator
-                width: 14
-                height: 14
-            }
+                Text {
+                    id: dateLabel
+                    anchors.left: parent.left
+                    font.family: Style.fontRegular.name
+                    font.pixelSize: 14 * scaleRatio
+                    text: date
+                    color: "#808080"
+                }
 
-            // -- "Date" column
-            Column {
-                anchors.top: parent.top
-                width: 215
+                Text {
+                    id: timeLabel
+                    anchors.left: dateLabel.right
+                    anchors.leftMargin: 7 * scaleRatio
+                    anchors.top: parent.top
+                    anchors.topMargin: 3 * scaleRatio
+                    font.pixelSize: 12 * scaleRatio
+                    text: time
+                    color: "#808080"
+                }
 
                 Text {
+                    id: toLabel
+                    property string address: ""
+                    color: "#BBBBBB"
                     anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Date") + translationManager.emptyString
+                    anchors.top: dateLabel.bottom
+                    anchors.topMargin: 0
+                    font.family: Style.fontRegular.name
+                    font.pixelSize: 16 * scaleRatio
+                    text: {
+                        if(isOut){
+                            var _address = destinations.split(" ")[1];
+                            if(_address === undefined) return ""
+
+                            if(_address){
+                                address = _address;
+                                var address_truncated = address.substring(0, 6) + "..." + address.substring(address.length-6);
+                                return "To " + address_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(parent.address + " copied to clipboard");
+                                clipboard.setText(parent.address);
+                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3)
+                            }
+                        }
+                    }
                 }
 
-                Row {
-                    anchors.left: parent.left
+                Rectangle {
+                    height: 24 * scaleRatio
+                    width: 24 * scaleRatio
+                    color: "transparent"
                     anchors.right: parent.right
-                    spacing: 33
+                    anchors.verticalCenter: parent.verticalCenter
 
-                    Text {
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#000000"
-                        text: date
+                    Image {
+                        id: dropdownImage
+                        height: 8 * scaleRatio
+                        width: 12 * scaleRatio
+                        source: "../images/whiteDropIndicator.png"
+                        rotation: delegate.collapsed ? 180 : 0
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
                     }
 
-                    Text {
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#000000"
-                        text: time
+                    MouseArea{
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            delegate.collapsed = !delegate.collapsed;
+                        }
                     }
                 }
             }
-            // -- "Balance" column
-            // XXX: we don't have a balance
-            /*
-            Column {
-                anchors.top: parent.top
-                width: 148
-                visible: false
+        }
 
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Balance") + translationManager.emptyString
-                }
+        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
 
-                Text {
-                    font.family: "Arial"
-                    font.pixelSize: 18
-                    color: "#000000"
-                    text: balance
-                }
+            // left column
+            HistoryTableInnerColumn{
+                anchors.left: parent.left
+                anchors.leftMargin: 30 * scaleRatio
+
+                labelHeader: "Transaction ID"
+                labelValue: hash.substring(0, 18) + "..."
+                copyValue: hash
             }
-            */
 
-            // -- "Amount column
-            Column {
-                anchors.top: parent.top
+            // right column
+            HistoryTableInnerColumn{
+                anchors.right: parent.right
+                anchors.rightMargin: 100 * scaleRatio
+                width: 200 * scaleRatio
+                height: parent.height
+                color: "transparent"
 
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Amount") + translationManager.emptyString
+                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 "" }
                 }
+            }
 
-                Row {
-                    spacing: 2
-                    Text {
-                        anchors.bottom: parent.bottom
-                        anchors.bottomMargin: 3
-                        font.family: "Arial"
-                        font.pixelSize: 16
-                        color: isOut ? "#FF4F41" : "#36B05B"
-                        text: isOut ? "↓" : "↑"
-                    }
+        }
 
-                    Text {
-                        id: amountText
-                        anchors.bottom: parent.bottom
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: isOut ? "#FF4F41" : "#36B05B"
-                        text:  displayAmount
-                    }
+        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
+            HistoryTableInnerColumn{
+                anchors.left: parent.left
+                anchors.leftMargin: 30 * scaleRatio
+                labelHeader: qsTr("Payment ID")
+                labelValue: paymentId !== "" && !paymentId.startsWith("00000000") ? paymentId.substring(0, 32) + "..." : "-"
+                copyValue: {
+                    if(paymentId !== "") { return paymentId }
+                    else { return undefined }
                 }
             }
 
-            // -- "Fee column
-            Column {
-                anchors.top: parent.top
-                width: 148
-                visible: isOut && fee != ""
-                Text {
-                    anchors.left: parent.left
-                    font.family: "Arial"
-                    font.pixelSize: 12
-                    color: "#545454"
-                    text: qsTr("Fee") + translationManager.emptyString
-                }
+            // right column
+            HistoryTableInnerColumn {
+                visible: currentWallet.getUserNote(hash)
+                anchors.right: parent.right
+                anchors.rightMargin: 80 * scaleRatio
+                width: 220 * scaleRatio
+                height: parent.height
+                color: "transparent"
 
-                Row {
-                    spacing: 2
-                    Text {
-                        anchors.bottom: parent.bottom
-                        font.family: "Arial"
-                        font.pixelSize: 18
-                        color: "#FF4F41"
-                        text:  fee
+                labelHeader: qsTr("Description")
+                labelValue: {
+                    var note = currentWallet.getUserNote(hash);
+                    if(note){
+                        if(note.length > 28) {
+                            return note.substring(0, 28) + "...";
+                        } else {
+                            return note;
+                        }
+                    } else {
+                        return "";
                     }
                 }
+                copyValue: {
+                    return currentWallet.getUserNote(hash);
+                }
             }
-        }
 
+            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
 
-        /*
-        // Transaction dropdown menu.
-        // Disable for now until AddressBook implemented
-        TableDropdown {
-            id: dropdown
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 11
-            anchors.rightMargin: 5
-            dataModel: dropModel
-            z: 1
-            onExpandedChanged: {
-                if(expanded) {
-                    listView.previousItem = delegate
-                    listView.currentIndex = index
+                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)
+                        if (rings)
+                            rings = rings.replace(/\|/g, '\n')
+                        informationPopup.title = "Transaction details";
+                        informationPopup.content = buildTxDetailsString(hash,paymentId,tx_key,tx_note,destinations, rings);
+                        informationPopup.onCloseCallback = null
+                        informationPopup.open();
+                    }
+
+                    onEntered: {
+                        detailsButton.color = "#656565";
+                    }
+
+                    onExited: {
+                        detailsButton.color = "#404040";
+                    }
                 }
-            }
-            onOptionClicked: {
-                if(option === 0)
-                    clipboard.setText(address)
-            }
-        }
 
-        Rectangle {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            height: 1
-            color: "#DBDBDB"
+                Text {
+                    color: Style.defaultFontColor
+                    text: "?"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 14 * scaleRatio
+                }
+            }
         }
-        */
-    }
-
-    ListModel {
-        id: dropModel
-        ListElement { name: "<b>Copy address to clipboard</b>"; icon: "../images/dropdownCopy.png" }
-        ListElement { name: "<b>Add to address book</b>"; icon: "../images/dropdownAdd.png" }
-        ListElement { name: "<b>Send to this address</b>"; icon: "../images/dropdownSend.png" }
-        ListElement { name: "<b>Find similar transactions</b>"; icon: "../images/dropdownSearch.png" }
     }
 
     Clipboard { id: clipboard }
diff --git a/components/HistoryTableInnerColumn.qml b/components/HistoryTableInnerColumn.qml
new file mode 100644
index 00000000..61c39deb
--- /dev/null
+++ b/components/HistoryTableInnerColumn.qml
@@ -0,0 +1,91 @@
+// Copyright (c) 2014-2015, 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.0
+import QtQuick.Layouts 1.1
+import QtQuick.Dialogs 1.2
+import moneroComponents.Clipboard 1.0
+import moneroComponents.PendingTransaction 1.0
+import moneroComponents.Wallet 1.0
+import "../components"
+import "." 1.0
+
+
+Rectangle{
+    Clipboard { id: clipboard }
+
+    width: label1.width > label2.width ? label1.width : label2.width
+    height: label1.height + label2.height
+    color: "transparent"
+
+    property string copyValue: ""
+    property alias labelHeader: label1.text
+    property alias labelValue: label2.text
+
+    Text {
+        id: label1
+        anchors.left: parent.left
+        font.family: Style.fontRegular.name
+        font.pixelSize: 14 * scaleRatio
+        text: labelHeader
+        color: Style.greyFontColor
+    }
+
+    Text {
+        id: label2
+        anchors.left: parent.left
+        anchors.top: label1.bottom
+        font.family: Style.fontRegular.name
+        font.pixelSize: 14 * scaleRatio
+        text: labelValue
+        color: Style.dimmedFontColor
+    }
+
+    // hover effect / copy value
+    MouseArea {
+        visible: copyValue !== ""
+        hoverEnabled: true
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onEntered: {
+            label1.color = Style.defaultFontColor;
+            label2.color = Style.defaultFontColor;
+        }
+        onExited: {
+            label1.color = Style.greyFontColor;
+            label2.color = Style.dimmedFontColor;
+        }
+        onClicked: {
+            if(copyValue){
+                console.log(copyValue + " copied to clipboard");
+                clipboard.setText(copyValue);
+                appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+            }
+        }
+    }
+}
diff --git a/components/HistoryTableMobile.qml b/components/HistoryTableMobile.qml
index 3b1dc31c..8ea5afcc 100644
--- a/components/HistoryTableMobile.qml
+++ b/components/HistoryTableMobile.qml
@@ -68,7 +68,7 @@ ListView {
     footer: Rectangle {
         height: 127 * scaleRatio
         width: listView.width
-        color: "#FFFFFF"
+        color: "transparent"
 
         Text {
             anchors.centerIn: parent
@@ -83,10 +83,35 @@ ListView {
         id: delegate
         height: tableContent.height + 20 * scaleRatio
         width: listView.width
-        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
+        color: "transparent"
         Layout.leftMargin: 10 * scaleRatio
         z: listView.count - index
         function collapseDropdown() { dropdown.expanded = false }
+
+        Rectangle{
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            width: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.top: parent.top
+            width: 1
+            color: "#404040"
+        }
+
+        Rectangle{
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            height: 1
+            color: "#404040"
+        }
+
         MouseArea {
             anchors.fill: parent
             onClicked: {
@@ -109,7 +134,7 @@ ListView {
             anchors.topMargin: parent.height/2 - this.height/2
             width: 30 * scaleRatio; height: 30 * scaleRatio
             radius: 25
-            color: "#FF4304"
+            color: "#404040"
 
             Image {
                 width: 20 * scaleRatio
@@ -127,16 +152,16 @@ ListView {
                 Layout.topMargin: 20 * scaleRatio
                 Layout.leftMargin: 10 * scaleRatio
                 Text {
-                    font.family: "Arial"
+                    font.family: Style.fontMedium.name
                     font.pixelSize: 14 * scaleRatio
-                    color: "#555555"
+                    color: Style.defaultFontColor
                     text: date
                 }
 
                 Text {
-                    font.family: "Arial"
+                    font.family: Style.fontRegular.name
                     font.pixelSize: 14 * scaleRatio
-                    color: "#555555"
+                    color: Style.dimmedFontColor
                     text: time
                 }
 
@@ -144,7 +169,7 @@ ListView {
                 Text {
                     visible: confirmations < confirmationsRequired || isPending
                     Layout.leftMargin: 5 * scaleRatio
-                    font.family: "Arial"
+                    font.family: Style.fontRegular.name
                     font.pixelSize: 14 * scaleRatio
                     color:  (confirmations < confirmationsRequired)? "#FF6C3C" : "#545454"
                     text: {
@@ -161,7 +186,6 @@ ListView {
                 }
             }
 
-
             // Amount & confirmations
             RowLayout {
                 Layout.leftMargin: 10 * scaleRatio
@@ -169,7 +193,7 @@ ListView {
                 Text {
                     font.family: "Arial"
                     font.pixelSize: 14 * scaleRatio
-                    color: isOut ? "#FF4F41" : "#36B05B"
+                    color: isOut ? Style.defaultFontColor : "#2eb358"
                     text: isOut ? "↓" : "↑"
                 }
 
@@ -177,7 +201,7 @@ ListView {
                     id: amountText
                     font.family: "Arial"
                     font.pixelSize: 18 * scaleRatio
-                    color: isOut ? "#FF4F41" : "#36B05B"
+                    color: isOut ? Style.defaultFontColor : "#2eb358"
                     text:  displayAmount
                 }
             }
diff --git a/components/LineEdit.qml b/components/LineEdit.qml
index 42da1e9d..243cc767 100644
--- a/components/LineEdit.qml
+++ b/components/LineEdit.qml
@@ -33,6 +33,8 @@ Item {
     id: item
     property alias text: input.text
     property alias placeholderText: placeholderLabel.text
+    property bool placeholderCenter: false
+    property int placeholderFontSize: 18
     property alias validator: input.validator
     property alias readOnly : input.readOnly
     property alias cursorPosition: input.cursorPosition
@@ -41,6 +43,7 @@ Item {
     property alias inlineButtonText: inlineButtonId.text
     property alias inlineIcon: inlineIcon.visible
     property bool copyButton: false
+    property bool borderDisabled: false
     property int fontSize: 18 * scaleRatio
     property bool showBorder: true
     property bool fontBold: true
@@ -48,12 +51,14 @@ Item {
     property alias labelText: inputLabel.text
     property alias labelColor: inputLabel.color
     property alias labelTextFormat: inputLabel.textFormat
+    property string backgroundColor: "transparent"
     property string tipText: ""
     property int labelFontSize: 16 * scaleRatio
     property bool labelFontBold: false
     property alias labelWrapMode: inputLabel.wrapMode
     property alias labelHorizontalAlignment: inputLabel.horizontalAlignment
     property bool showingHeader: inputLabel.text !== "" || copyButton
+    property int inputHeight: 42
     signal labelLinkActivated(); // input label, rich text <a> signal
     signal editingFinished();
     signal accepted();
@@ -115,7 +120,7 @@ Item {
 
     Item{
         id: inputItem
-        height: 40 * scaleRatio
+        height: inputHeight * scaleRatio
         anchors.top: showingHeader ? inputLabel.bottom : parent.top
         anchors.topMargin: showingHeader ? 6 * scaleRatio : 2
         width: parent.width
@@ -124,12 +129,20 @@ Item {
             id: placeholderLabel
             visible: input.text ? false : true
             anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            anchors.leftMargin: inlineIcon.visible ? 50 * scaleRatio : 10 * scaleRatio
+            anchors.horizontalCenter: placeholderCenter ? parent.horizontalCenter : undefined
+            anchors.left: placeholderCenter ? undefined : parent.left
+            anchors.leftMargin: {
+                if(placeholderCenter){
+                    return undefined;
+                }
+                else if(inlineIcon.visible){ return 50 * scaleRatio; }
+                else { return 10 * scaleRatio; }
+            }
+
             opacity: 0.25
             color: Style.defaultFontColor
             font.family: Style.fontRegular.name
-            font.pixelSize: 18 * scaleRatio
+            font.pixelSize: placeholderFontSize * scaleRatio
             text: ""
             z: 3
         }
@@ -141,8 +154,10 @@ Item {
         }
 
         Rectangle {
-            color: "transparent"
-            border.width: 1
+            id: inputFill
+            color: backgroundColor
+            anchors.fill: parent
+            border.width: borderDisabled ? 0 : 1
             border.color: {
                 if(input.activeFocus){
                     return Qt.rgba(255, 255, 255, 0.35);
@@ -151,7 +166,6 @@ Item {
                 }
             }
             radius: 4
-            anchors.fill: parent
         }
 
         Image {
diff --git a/components/LineEditMulti.qml b/components/LineEditMulti.qml
index 6c9dcf7a..abed2696 100644
--- a/components/LineEditMulti.qml
+++ b/components/LineEditMulti.qml
@@ -39,13 +39,14 @@ ColumnLayout {
     property alias readOnly: multiLine.readOnly
     property alias addressValidation: multiLine.addressValidation
     property alias labelButtonText: labelButton.text
+    property bool labelFontBold: false
     property bool labelButtonVisible: false
     property bool copyButton: false
     signal labelButtonClicked();
     signal inputLabelLinkActivated();
 
     spacing: 0
-    Rectangle{
+    Rectangle {
         id: inputLabelRect
         color: "transparent"
         Layout.fillWidth: true
@@ -77,9 +78,9 @@ ColumnLayout {
             anchors.rightMargin: labelButton.visible? 4 : 0
             onClicked: {
                 if (multiLine.text.length > 0) {
-                    console.log(multiLine.text + " copied to clipboard")
-                    clipboard.setText(multiLine.text)
-                    appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
+                    console.log(multiLine.text + " copied to clipboard");
+                    clipboard.setText(multiLine.text);
+                    appWindow.showStatusMessage(qsTr("Copied to clipboard"), 3);
                 }
             }
         }
@@ -91,6 +92,8 @@ ColumnLayout {
         addressValidation: true
         anchors.top: inputLabelRect.bottom
         Layout.fillWidth: true
+        topPadding: 10
+        bottomPadding: 10
 
         Text {
             id: placeholderLabel
diff --git a/components/StandardButton.qml b/components/StandardButton.qml
index 0429c77e..02e08be8 100644
--- a/components/StandardButton.qml
+++ b/components/StandardButton.qml
@@ -62,7 +62,7 @@ Item {
         color: parent.enabled ? Style.buttonBackgroundColor : Style.buttonBackgroundColorDisabled
         border.width: parent.focus ? 1 : 0
 
-        MouseArea{
+        MouseArea {
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
             hoverEnabled: true
diff --git a/components/StandardDialog.qml b/components/StandardDialog.qml
index 7c9315d5..4804f294 100644
--- a/components/StandardDialog.qml
+++ b/components/StandardDialog.qml
@@ -37,7 +37,7 @@ import "../components" as MoneroComponents
 
 Rectangle {
     id: root
-    color: "white"
+    color: "transparent"
     visible: false
     property alias title: dialogTitle.text
     property alias text: dialogContent.text
@@ -55,6 +55,14 @@ Rectangle {
     signal rejected()
     signal closeCallback();
 
+    Image {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        source: "../images/middlePanelBg.jpg"
+    }
+
     // Make window draggable
     MouseArea {
         anchors.fill: parent
@@ -99,7 +107,7 @@ Rectangle {
                 horizontalAlignment: Text.AlignHCenter
                 font.pixelSize: 18 * scaleRatio
                 font.family: "Arial"
-                color: "#555555"
+                color: Style.defaultFontColor
             }
 
         }
@@ -115,6 +123,10 @@ Rectangle {
                 font.pixelSize: 12 * scaleRatio
                 selectByMouse: false
                 wrapMode: TextEdit.Wrap
+                textColor: Style.defaultFontColor
+                style: TextAreaStyle {
+                    backgroundColor: "black"
+                }
 
                 MouseArea {
                     anchors.fill: parent
diff --git a/components/StandardDropdown.qml b/components/StandardDropdown.qml
index f22cbab0..371b426e 100644
--- a/components/StandardDropdown.qml
+++ b/components/StandardDropdown.qml
@@ -39,10 +39,16 @@ Item {
     property string textColor: "#FFFFFF"
     property alias currentIndex: column.currentIndex
     property bool expanded: false
+    property int dropdownHeight: 40
+    property int fontHeaderSize: 16 * scaleRatio
+    property int fontItemSize: 14 * scaleRatio
+    property string colorHeaderBackground: "transparent"
+    property bool headerBorder: true
+    property bool headerFontBold: true
 
-    signal changed();
+    height: dropdownHeight
 
-    height: 40 * scaleRatio
+    signal changed();
 
     onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
     function hide() { dropdown.expanded = false }
@@ -68,15 +74,14 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
-        height: 40 * scaleRatio
+        height: dropdown.dropdownHeight
 
         Rectangle {
-            color: "transparent"
-            border.width: 1
+            color: dropdown.colorHeaderBackground
+            border.width: dropdown.headerBorder ? 1 : 0
             border.color: Qt.rgba(1, 1, 1, 0.25)
             radius: 4
             anchors.fill: parent
-            z: 4
         }
 
         Text {
@@ -86,8 +91,8 @@ Item {
             anchors.leftMargin: 12 * scaleRatio
             elide: Text.ElideRight
             font.family: Style.fontRegular.name
-            font.bold: true
-            font.pixelSize: 16 * scaleRatio
+            font.bold: dropdown.headerFontBold
+            font.pixelSize: dropdown.fontHeaderSize
             color: "#FFFFFF"
         }
 
@@ -109,6 +114,8 @@ Item {
             id: dropArea
             anchors.fill: parent
             onClicked: dropdown.expanded = !dropdown.expanded
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
         }
     }
 
@@ -162,23 +169,23 @@ Item {
                 property string stringSent:  qsTr("Sent") + translationManager.emptyString
                 property string stringReceived:  qsTr("Received") + translationManager.emptyString
 
-
                 delegate: Rectangle {
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    height: 30 * scaleRatio
+                    height: (dropdown.dropdownHeight * 0.75) * scaleRatio
                     //radius: index === repeater.count - 1 ? 4 : 0
                     color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
 
                     Text {
+                        id: col1Text
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.left: parent.left
                         anchors.right: col2Text.left
                         anchors.leftMargin: 12 * scaleRatio
-                        anchors.rightMargin: column2.length > 0 ? 12  * scaleRatio: 0
+                        anchors.rightMargin: 0
                         font.family: Style.fontRegular.name
                         font.bold: true
-                        font.pixelSize: 14 * scaleRatio
+                        font.pixelSize: fontItemSize
                         color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
                         text: qsTr(column1) + translationManager.emptyString
                     }
@@ -191,7 +198,7 @@ Item {
                         font.family: Style.fontRegular.name
                         font.pixelSize: 14 * scaleRatio
                         color: "#FFFFFF"
-                        text: column2
+                        text: ""
                     }
 
                     Rectangle {
diff --git a/components/Style.qml b/components/Style.qml
index 5e1dd26f..ffe9c194 100644
--- a/components/Style.qml
+++ b/components/Style.qml
@@ -8,7 +8,11 @@ QtObject {
     property QtObject fontLight: FontLoader { id: _fontLight; source: "qrc:/fonts/SFUIDisplay-Light.otf"; }
     property QtObject fontRegular: FontLoader { id: _fontRegular; source: "qrc:/fonts/SFUIDisplay-Regular.otf"; }
 
+    property string grey: "#404040"
+
     property string defaultFontColor: "white"
+    property string greyFontColor: "#808080"
+    property string dimmedFontColor: "#BBBBBB"
     property string inputBoxBackground: "black"
     property string inputBoxBackgroundError: "#FFDDDD"
     property string inputBoxColor: "white"
@@ -17,7 +21,6 @@ QtObject {
     property string buttonBackgroundColorHover: "#E65E00"
     property string buttonBackgroundColorDisabled: "#707070"
     property string buttonBackgroundColorDisabledHover: "#808080"
-
     property string buttonTextColor: "white"
     property string buttonTextColorDisabled: "black"
     property string dividerColor: "white"
diff --git a/components/TableHeader.qml b/components/TableHeader.qml
index d1f1778b..2936599e 100644
--- a/components/TableHeader.qml
+++ b/components/TableHeader.qml
@@ -36,26 +36,40 @@ Rectangle {
     property int offset: 0
 
     height: 31
-    color: "#FFFFFF"
+    color: "transparent"
+
+    Rectangle{
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: 1
+        color: "#808080"
+    }
+
+    Rectangle{
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: 1
+        color: "#808080"
+    }
 
     Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         height: 1
-        color: "#DBDBDB"
+        color: "#808080"
     }
 
     Row {
         id: row
-        anchors.horizontalCenter: header.offset !== 0 ? undefined: parent.horizontalCenter
-        anchors.left: header.offset !== 0 ? parent.left : undefined
-        anchors.leftMargin: header.offset
+        anchors.horizontalCenter: parent.horizontalCenter
 
         Rectangle {
             height: 31
             width: 1
-            color: "#DBDBDB"
+            color: "#808080"
         }
 
         Repeater {
@@ -70,6 +84,7 @@ Rectangle {
             delegate: Rectangle {
                 id: delegate
                 property bool desc: false
+                color: "transparent"
                 height: 31
                 width: columnWidth
 
@@ -86,7 +101,7 @@ Rectangle {
                     color: {
                         if(delegateArea.pressed)
                             return "#FF4304"
-                        return index === header.activeSortColumn || delegateArea.containsMouse ? "#FF6C3C" : "#4A4949"
+                        return index === header.activeSortColumn || delegateArea.containsMouse ? "white" : "#808080"
                     }
                     text: qsTr(columnName) + translationManager.emptyString
                 }
@@ -95,6 +110,7 @@ Rectangle {
                     id: delegateArea
                     hoverEnabled: true
                     anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: {
                         delegate.desc = !delegate.desc
                         header.activeSortColumn = index
@@ -170,7 +186,7 @@ Rectangle {
                     anchors.right: parent.right
                     anchors.bottom: parent.bottom
                     height: 1
-                    color: index === header.activeSortColumn ? "#FFFFFF" : "#DBDBDB"
+                    color: "transparent"
                 }
 
                 Rectangle {
@@ -178,7 +194,7 @@ Rectangle {
                     anchors.bottom: parent.bottom
                     anchors.right: parent.right
                     width: 1
-                    color: "#DBDBDB"
+                    color: "#808080"
                 }
             }
         }