Design update iteration with icon file rename

Update the PathView path and add remaining icons and with full spec.

23 files changed, 345 insertions, 96 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index b697292..07d21ad 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -58,9 +58,11 @@ Item {
 
     property int toolBarSize: 80
     property string uiColor: "#46a2da"
-    property string uiBorderColor: "#7ebde5"
+    property string uiSeparatorColor: "#7ebee5"
+    property string uiSeparatorColor2: "#a3d1ed"
     property string buttonHighlightColor: "#3f91c4"
     property string uiSelectionColor: "#fddd5c"
+    property string defaultFontFamily: "Open Sans"
 
     property int animationDuration: 200
     property int velocityThreshold: 500
@@ -110,7 +112,7 @@ Item {
             tabs.createEmptyTab()
             navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
-            tabs.makeCurrent(tabs.count - 1)
+            tabs.currentIndex = tabs.count - 1
         }
     }
     Action {
@@ -126,7 +128,7 @@ Item {
 
         style: ToolBarStyle {
             background: Rectangle {
-                color: uiColor
+                color: uiSeparatorColor
             }
             padding {
                 left: 0
@@ -147,8 +149,10 @@ Item {
 
         RowLayout {
             spacing: 0
+            height: toolBarSize - 2
             anchors.fill: parent
             UIButton {
+                color: uiSeparatorColor
                 id: newTabButton
                 source: "qrc:///newtab"
                 onClicked: newTabAction.trigger()
@@ -159,18 +163,18 @@ Item {
                     top: parent.top
                     bottom: parent.bottom
                 }
-                color: uiBorderColor
+                color: uiSeparatorColor2
             }
             Rectangle {
-                width: 50
+                width: 40
                 anchors {
                     top: parent.top
                     bottom: parent.bottom
                 }
-                color: uiColor
+                color: uiSeparatorColor
             }
             Rectangle {
-                color: uiColor
+                color: uiSeparatorColor
                 Layout.fillWidth: true
                 anchors {
                     top: parent.top
@@ -181,14 +185,14 @@ Item {
                     border.color: "white"
                     border.width: 2
                     width: 40
-                    height: 30
+                    height: 32
                     anchors.centerIn: parent
                     Text {
                         anchors.centerIn: parent
                         text: tabs.count
                         color: "white"
                         font.family: "Sans"
-                        font.pixelSize: 20
+                        font.pointSize: 20
                     }
                 }
             }
@@ -198,12 +202,13 @@ Item {
                     top: parent.top
                     bottom: parent.bottom
                 }
-                color: uiBorderColor
+                color: uiSeparatorColor2
             }
             UIButton {
                 id:doneButton
+                color: uiSeparatorColor
                 source: "qrc:///done"
-                implicitWidth: 125
+                implicitWidth: 120
                 onClicked: {
                     tabs.viewState = "page"
                 }
@@ -262,6 +267,7 @@ Item {
     }
     PageView {
         id: tabs
+        interactive: !sslDialog.visible
 
         height: parent.height
 
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index 97b0cd6..5b41514 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -29,7 +29,12 @@ ToolBar {
     }
 
     RowLayout {
-        anchors.fill: parent
+        height: toolBarSize - 2
+        anchors {
+            top: parent.top
+            right: parent.right
+            left: parent.left
+        }
         spacing: 0
 
         UIButton {
@@ -44,7 +49,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: forwardButton
@@ -58,7 +63,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         Rectangle {
             Layout.fillWidth: true
@@ -77,20 +82,16 @@ ToolBar {
             placeholderText: qsTr("Search or type a URL")
             focus: !webView.focus
 
-            anchors {
-                leftMargin: 50
-            }
-
             UIButton {
                 id: reloadButton
                 source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
-                height: 34
+                height: 54
                 width: height
-                color: "white"
+                color: "transparent"
+                highlightColor: "#eeeeee"
                 radius: width / 2
-                highlightColor: "lightgrey"
                 anchors {
-                    rightMargin: 10
+                    rightMargin: 1
                     right: parent.right
                     verticalCenter: addressBar.verticalCenter;
                 }
@@ -98,8 +99,8 @@ ToolBar {
             }
             style: TextFieldStyle {
                 textColor: "black"
-                font.family: "Open Sans"
-                font.pixelSize: 28
+                font.family: defaultFontFamily
+                font.pointSize: 28
                 selectionColor: uiSelectionColor
                 selectedTextColor: "black"
                 placeholderTextColor: "#a0a1a2"
@@ -120,9 +121,10 @@ ToolBar {
             }
             onEditingFinished: selectAll()
             onFocusChanged: {
-                if (focus)
+                if (focus) {
+                    forceActiveFocus()
                     selectAll()
-                else {
+                } else {
                     urlBar.cursorPosition = 0
                     deselect()
                 }
@@ -143,7 +145,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: homeButton
@@ -158,7 +160,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: pageViewButton
@@ -171,6 +173,18 @@ ToolBar {
                     tabs.viewState = "list"
                 }
             }
+            Text {
+                anchors {
+                    centerIn: parent
+                    verticalCenterOffset: 4
+                }
+
+                text: tabs.count
+                font.family: defaultFontFamily
+                font.pointSize: 16
+                font.weight: Font.DemiBold
+                color: "white"
+            }
         }
         Rectangle {
             width: 1
@@ -178,7 +192,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: bookmarksButton
@@ -193,7 +207,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiBorderColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: settingsButton
@@ -208,20 +222,20 @@ ToolBar {
         height: 2
         anchors {
             left: parent.left
-            top: parent.bottom
+            bottom: parent.bottom
             right: parent.right
             leftMargin: -10
             rightMargin: -10
         }
         style: ProgressBarStyle {
             background: Rectangle {
-                color: uiBorderColor
+                height: 1
+                color: uiSeparatorColor
             }
             progress: Rectangle {
                 color: uiSelectionColor
             }
         }
-        z: 5
         minimumValue: 0
         maximumValue: 100
         value: (webView && webView.loadProgress < 100) ? webView.loadProgress : 0
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 0280747..fafb87b 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -48,15 +48,11 @@ import io.qt.browser 1.0
 Rectangle {
     id: root
 
-    property int itemWidth: root.width * 0.6
-    property int itemHeight: root.height * 0.6
-
-    property int viewWidth: root.width - toolBarSize
+    property int itemWidth: browserWindow.width / 2
+    property int itemHeight: browserWindow.height / 2
 
     property bool interactive: true
 
-    property string background: "#62b0e0"
-
     property alias currentIndex: pathView.currentIndex
     property alias count: pathView.count
 
@@ -299,6 +295,7 @@ Rectangle {
             listModel.get(idx).index -= 1
 
         listModel.remove(index)
+        pathView.decrementCurrentIndex()
         pathView.interactive = true
         if (listModel.count == 0)
             engine.rootWindow.close()
@@ -322,31 +319,66 @@ Rectangle {
             visible: visibility != 0.0
             state: isCurrentItem ? root.viewState : "list"
 
+            Behavior on scale {
+                NumberAnimation { duration: animationDuration }
+            }
+
             states: [
                 State {
                     name: "page"
                     PropertyChanges { target: wrapper; width: root.width; height: root.height; visibility: 0.0 }
                     PropertyChanges { target: pathView; interactive: false }
-                    PropertyChanges { target: item; opacity: 1.0;  }
+                    PropertyChanges { target: item; opacity: 1.0 }
                 },
                 State {
                     name: "list"
                     PropertyChanges { target: wrapper; width: itemWidth; height: itemHeight; visibility: 1.0 }
                     PropertyChanges { target: pathView; interactive: true }
-                    PropertyChanges { target: item; }
+                    PropertyChanges { target: item; opacity: 0.0 }
                 }
             ]
 
             transitions: Transition {
                 ParallelAnimation {
-                    PropertyAnimation { property: "visibility"; duration: animationDuration; easing.type : Easing.InQuad }
-                    PropertyAnimation { properties: "x,y"; duration: animationDuration; easing.type : Easing.OutQuad }
-                    PropertyAnimation { properties: "width,height"; duration: animationDuration; easing.type : Easing.OutQuad }
+                    PropertyAnimation { property: "visibility"; duration: animationDuration; easing.type : Easing.InSine }
+                    PropertyAnimation { properties: "x,y"; duration: animationDuration; easing.type: Easing.InSine }
+                    PropertyAnimation { properties: "width,height"; duration: animationDuration; easing.type: Easing.InSine }
                 }
             }
 
             width: itemWidth; height: itemHeight
-            scale: pathView.moving ? 0.65 : PathView.itemScale
+            scale: {
+                if (pathView.count == 1)
+                    return 1.0
+                if (pathView.count < 4)
+                    return isCurrentItem ? 1.0 : 0.5
+
+                if (isCurrentItem)
+                    return 1.0
+
+                var index1 = pathView.currentIndex - 2
+                var index2 = pathView.currentIndex - 1
+                var index4 = (pathView.currentIndex + 1) % pathView.count
+                var index5 = (pathView.currentIndex + 2) % pathView.count
+
+                if (index1 < 0)
+                    index1 = pathView.count + index1
+                if (index2 < 0)
+                    index2 = pathView.count + index2
+
+                switch (index) {
+                case index1 :
+                    return 0.25
+                case index2:
+                    return 0.5
+                case index4:
+                    return 0.5
+                case index5:
+                    return 0.25
+                }
+
+                return 0.0001
+            }
             z: PathView.itemZ
 
             MouseArea {
@@ -367,16 +399,17 @@ Rectangle {
             }
 
             Rectangle {
-                color: background
+                color: uiColor
 
                 DropShadow {
-                    visible: wrapper.visibility == 1.0
-                    anchors.fill: snapshot
-                    radius: 50
-                    verticalOffset: 5
+                    id: shadow
+                    visible: !pathView.moving && !pathView.flicking && wrapper.visibility == 1.0
+                    anchors.fill: parent
+                    radius: (30 - (1 / wrapper.scale * 6)) * 2
+                    verticalOffset: 12
                     horizontalOffset: 0
                     samples: radius * 2
-                    color: Qt.rgba(0, 0, 0, 0.5)
+                    color: Qt.rgba(0, 0, 0, 0.3)
                     source: snapshot
                 }
 
@@ -389,9 +422,9 @@ Rectangle {
                     }
                     anchors.fill: parent
                     Rectangle {
-                        enabled: wrapper.isCurrentItem && !pathView.moving && !pathView.flicking && wrapper.visibility == 1.0
+                        enabled: index == pathView.currentIndex && shadow.visible
                         opacity: enabled ? 1.0 : 0.0
-                        visible: opacity != 0.0
+                        visible: wrapper.visibility == 1.0
                         width: image.sourceSize.width
                         height: image.sourceSize.height - 2
                         radius: width / 2
@@ -422,36 +455,33 @@ Rectangle {
                             }
                         }
                         Behavior on opacity {
-                            NumberAnimation { duration: animationDuration }
+                            NumberAnimation { duration: animationDuration / 2 }
                         }
                     }
                 }
-
                 anchors.fill: wrapper
             }
 
             Text {
                 anchors {
-                    top: parent.bottom
+                    topMargin: -25
+                    top: parent.top
                     horizontalCenter: parent.horizontalCenter
                 }
                 horizontalAlignment: Text.AlignHCenter
-                width: parent.width
+                width: parent.width - image.width
                 elide: Text.ElideRight
                 text: item.title
-                font.pointSize: 10
-                font.family: "Monospace"
-                color: "#464749"
-                visible: wrapper.isCurrentItem
-            }
-            Behavior on scale {
-                NumberAnimation { duration: animationDuration }
+                font.pointSize: 16
+                font.family: defaultFontFamily
+                color: "#0B508C"
+                visible: wrapper.isCurrentItem && wrapper.visibility == 1.0
             }
         }
     }
 
     Rectangle {
-        color: background
+        color: uiColor
         anchors.fill: parent
     }
 
@@ -462,7 +492,7 @@ Rectangle {
         model: listModel
         delegate: delegate
         highlightMoveDuration: animationDuration
-        flickDeceleration: animationDuration / 2
+        flickDeceleration: animationDuration
         preferredHighlightBegin: 0.5
         preferredHighlightEnd: 0.5
 
@@ -470,34 +500,56 @@ Rectangle {
 
         snapMode: PathView.SnapToItem
 
-        property bool fewTabs: count < 3
-        property int offset: 10
-        property int margin: {
-            if (fewTabs)
-                return viewWidth / 4
+        focus: interactive
+
+        property real offset: 30
+
+        property real margin: {
+            if (count == 2)
+                return root.width / 4 - offset
+            if (count == 3)
+                return root.width / 8 + offset
             if (count == 4)
-                return toolBarSize
-            return toolBarSize / 2
+                return root.width / 8 - offset
+
+            return offset
         }
 
-        focus: interactive
+        property real middle: {
+            if (currentItem)
+                return (pathView.height / 2) - (currentItem.visibility * 50)
+            return (pathView.height / 2 - 50)
+        }
 
         path: Path {
-            id: path
-            startX: pathView.margin ; startY: pathView.height / 2 - 50
-            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.5 : 0.2 }
+            startX: pathView.margin
+            startY: pathView.middle
+
+            PathPercent { value: 0.0 }
             PathAttribute { name: "itemZ"; value: 0 }
-            PathLine { relativeX: viewWidth / 6 - 15; y: pathView.height / 2 - 50 }
-            PathAttribute { name: "itemScale"; value: 0.30 }
-            PathAttribute { name: "itemZ"; value: 3 }
-            PathLine { x: viewWidth / 2; y: pathView.height / 2 - 50}
-            PathAttribute { name: "itemScale"; value: 1.0 }
+            PathLine {
+                x: (pathView.width - itemWidth) / 2 + 106
+                y: pathView.middle
+            }
+            PathPercent { value: 0.49 }
             PathAttribute { name: "itemZ"; value: 6 }
-            PathLine { x: root.width - pathView.margin - viewWidth / 6 + 15; y: pathView.height / 2 - 50 }
-            PathAttribute { name: "itemScale"; value: 0.40 }
+
+            PathLine { relativeX: 0; relativeY: 0 }
+
+            PathLine {
+                x: (pathView.width - itemWidth) / 2 + itemWidth - 106
+                y: pathView.middle
+            }
+            PathPercent { value: 0.51 }
+
+            PathLine { relativeX: 0; relativeY: 0 }
+
             PathAttribute { name: "itemZ"; value: 4 }
-            PathLine { x: root.width - pathView.margin; y: pathView.height / 2 - 50 }
-            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.3 : 0.15 }
+            PathLine {
+                x: pathView.width - pathView.margin
+                y: pathView.middle
+            }
+            PathPercent { value: 1 }
             PathAttribute { name: "itemZ"; value: 2 }
         }
 
diff --git a/src/qml/assets/icons/Btn_Add.png b/src/qml/assets/icons/Btn_Add.png
new file mode 100644
index 0000000..3c45c42
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Add.png
diff --git a/src/qml/assets/icons/back.png b/src/qml/assets/icons/Btn_Back.png
index 562c9f6..562c9f6 100644
--- a/src/qml/assets/icons/back.png
+++ b/src/qml/assets/icons/Btn_Back.png
diff --git a/src/qml/assets/icons/bookmark.png b/src/qml/assets/icons/Btn_Bookmarks.png
index fc286cc..fc286cc 100644
--- a/src/qml/assets/icons/bookmark.png
+++ b/src/qml/assets/icons/Btn_Bookmarks.png
diff --git a/src/qml/assets/icons/Btn_Clear.png b/src/qml/assets/icons/Btn_Clear.png
new file mode 100644
index 0000000..1c9870a
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Clear.png
diff --git a/src/qml/assets/icons/delete.png b/src/qml/assets/icons/Btn_Delete.png
index 2010838..2010838 100644
--- a/src/qml/assets/icons/delete.png
+++ b/src/qml/assets/icons/Btn_Delete.png
diff --git a/src/qml/assets/icons/forward.png b/src/qml/assets/icons/Btn_Forward.png
index e4c96f8..e4c96f8 100644
--- a/src/qml/assets/icons/forward.png
+++ b/src/qml/assets/icons/Btn_Forward.png
diff --git a/src/qml/assets/icons/Btn_Home.png b/src/qml/assets/icons/Btn_Home.png
new file mode 100644
index 0000000..7358a59
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Home.png
diff --git a/src/qml/assets/icons/Btn_Reload.png b/src/qml/assets/icons/Btn_Reload.png
new file mode 100644
index 0000000..cff41cd
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Reload.png
diff --git a/src/qml/assets/icons/Btn_Search.png b/src/qml/assets/icons/Btn_Search.png
new file mode 100644
index 0000000..a6ef383
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Search.png
diff --git a/src/qml/assets/icons/settings.png b/src/qml/assets/icons/Btn_Settings.png
index 33d7400..33d7400 100644
--- a/src/qml/assets/icons/settings.png
+++ b/src/qml/assets/icons/Btn_Settings.png
diff --git a/src/qml/assets/icons/Btn_Tabs.png b/src/qml/assets/icons/Btn_Tabs.png
new file mode 100644
index 0000000..c007408
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Tabs.png
diff --git a/src/qml/assets/icons/Btn_Up.png b/src/qml/assets/icons/Btn_Up.png
new file mode 100644
index 0000000..f70a78d
--- /dev/null
+++ b/src/qml/assets/icons/Btn_Up.png
diff --git a/src/qml/assets/icons/Error_Icon.png b/src/qml/assets/icons/Error_Icon.png
new file mode 100644
index 0000000..cf40696
--- /dev/null
+++ b/src/qml/assets/icons/Error_Icon.png
diff --git a/src/qml/assets/icons/LightWebBrowser_Icons.svg b/src/qml/assets/icons/LightWebBrowser_Icons.svg
new file mode 100644
index 0000000..4a58ea8
--- /dev/null
+++ b/src/qml/assets/icons/LightWebBrowser_Icons.svg
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
+<g id="Layer_1_1_">
+	<rect x="512" width="512" height="768"/>
+</g>
+<g id="Layer_2">
+	<g>
+		<g>
+			<path fill="#FFFFFF" d="M567.6,75.1c-0.3,0-0.5-0.1-0.7-0.3L552,60l14.8-14.8c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L554.8,60
+				l13.4,13.4c0.4,0.4,0.4,1,0,1.4C568.1,75,567.8,75.1,567.6,75.1z"/>
+		</g>
+		<g>
+			<rect x="522" y="20" fill="none" width="80" height="80"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path fill="#FFFFFF" d="M638.4,75.1c0.3,0,0.5-0.1,0.7-0.3L654,60l-14.8-14.8c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L651.2,60
+				l-13.4,13.4c-0.4,0.4-0.4,1,0,1.4C637.9,75,638.2,75.1,638.4,75.1z"/>
+		</g>
+		<g>
+			<rect x="604" y="20" fill="none" width="80" height="80"/>
+		</g>
+	</g>
+	<g>
+		<path fill="#FFFFFF" d="M726,47.5l13,9.5v16h-26V57L726,47.5 M726,45l-15,11v19h30V56L726,45L726,45z"/>
+		<g>
+			<g>
+				<rect x="686" y="20" fill="none" width="80" height="80"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<rect x="768" y="20" fill="none" width="80" height="80"/>
+			</g>
+		</g>
+		<g>
+			<path fill="#FFFFFF" d="M822,74h-28V52h28V74z M796,72h24V54h-24V72z"/>
+			<polygon fill="#FFFFFF" points="810,46 810,52 812,52 812,48 826,48 826,62 822,62 822,64 828,64 828,46 			"/>
+			<polygon fill="#FFFFFF" points="794,62 790,62 790,48 804,48 804,52 806,52 806,46 788,46 788,64 794,64 			"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path fill="#FFFFFF" d="M899.9,76c-0.2,0-0.4,0-0.5-0.1l-9.4-5.8l-9.4,5.8c-0.3,0.2-0.8,0.2-1.1,0s-0.5-0.7-0.4-1.1l2.7-10.5
+				l-8.5-7c-0.3-0.3-0.4-0.7-0.3-1.1c0.1-0.4,0.5-0.7,0.9-0.7l11-0.8l4.1-10.1c0.2-0.4,0.5-0.6,0.9-0.6s0.8,0.2,0.9,0.6l4.1,10.1
+				l11,0.8c0.4,0,0.8,0.3,0.9,0.7c0.1,0.4,0,0.8-0.3,1.1l-8.5,7l2.7,10.5c0.1,0.4,0,0.8-0.4,1.1C900.3,75.9,900.1,76,899.9,76z
+				 M890,67.9c0.2,0,0.4,0,0.5,0.1l7.8,4.8l-2.2-8.8c-0.1-0.4,0-0.8,0.3-1l7-5.8l-9.1-0.6c-0.4,0-0.7-0.3-0.9-0.6l-3.4-8.4l-3.4,8.4
+				c-0.1,0.4-0.5,0.6-0.9,0.6l-9.1,0.6l7,5.8c0.3,0.2,0.4,0.6,0.3,1l-2.2,8.8l7.8-4.8C889.6,67.9,889.8,67.9,890,67.9z"/>
+		</g>
+		<g>
+			<rect x="850" y="20" fill="none" width="80" height="80"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<circle fill="#FFFFFF" cx="972" cy="48" r="3"/>
+			<circle fill="#FFFFFF" cx="972" cy="60" r="3"/>
+			<circle fill="#FFFFFF" cx="972" cy="72" r="3"/>
+		</g>
+		<g>
+			<rect x="932" y="20" fill="none" width="80" height="80"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="40" y="20" fill="none" width="80" height="80"/>
+		</g>
+		<g>
+			<path fill="#BDBEBF" d="M76.5,47.5c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S71.5,47.5,76.5,47.5 M76.5,45C70.1,45,65,50.1,65,56.5
+				S70.1,68,76.5,68S88,62.9,88,56.5S82.9,45,76.5,45L76.5,45z"/>
+			<path fill="#BDBEBF" d="M94.8,71.9c0.3,0.3,0.3,0.8,0,1.2L93,74.8c-0.3,0.3-0.8,0.3-1.2,0l-9.1-9.1c-0.3-0.3-0.3-0.8,0-1.2
+				l1.7-1.7c0.3-0.3,0.8-0.3,1.2,0L94.8,71.9z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path fill="#BDBEBF" d="M187,45c-8.3,0-15,6.7-15,15s6.7,15,15,15s15-6.7,15-15S195.3,45,187,45z M194.8,66.4l-1.4,1.4l-6.4-6.4
+					l-6.4,6.4l-1.4-1.4l6.4-6.4l-6.4-6.4l1.4-1.4l6.4,6.4l6.4-6.4l1.4,1.4l-6.4,6.4L194.8,66.4z"/>
+			</g>
+		</g>
+		<rect x="160" y="33" fill="none" width="54" height="54"/>
+	</g>
+	<g>
+		<rect x="254" y="33" fill="none" width="54" height="54"/>
+		<g>
+			<path fill="#BDBEBF" d="M291.9,65.1C290,69.2,285.8,72,281,72c-6.6,0-12-5.4-12-12s5.4-12,12-12c4,0,7.5,2,9.7,5h2.4
+				c-2.4-4.2-6.9-7-12.1-7c-7.7,0-14,6.3-14,14s6.3,14,14,14c5.6,0,10.4-3.3,12.7-8.1L291.9,65.1z"/>
+			<polygon fill="#BDBEBF" points="295.4,56 285.5,56 295.4,46.2 			"/>
+		</g>
+	</g>
+	<g>
+		<rect x="348" y="33" fill="none" width="54" height="54"/>
+		<g>
+			<g opacity="0.25">
+				<circle cx="375" cy="61" r="25"/>
+			</g>
+			<g>
+				<path fill="#FFFFFF" d="M375,83.5c-13.5,0-24.5-11-24.5-24.5s11-24.5,24.5-24.5s24.5,11,24.5,24.5S388.5,83.5,375,83.5z"/>
+				<path fill="#3882AE" d="M375,35c13.2,0,24,10.8,24,24s-10.8,24-24,24s-24-10.8-24-24S361.8,35,375,35 M375,34
+					c-13.8,0-25,11.2-25,25s11.2,25,25,25s25-11.2,25-25S388.8,34,375,34L375,34z"/>
+			</g>
+			<g>
+
+					<rect x="361" y="58" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 598.4443 365.8777)" fill="#3882AE" width="28" height="2"/>
+				<rect x="361" y="58" transform="matrix(0.7071 -0.7071 0.7071 0.7071 68.118 282.4472)" fill="#3882AE" width="28" height="2"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="561" y="166" fill="#FFFFFF" width="2" height="28"/>
+			<rect x="548" y="179" fill="#FFFFFF" width="28" height="2"/>
+		</g>
+		<g>
+			<rect x="522" y="140" fill="none" width="80" height="80"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path fill="#FFFFFF" d="M71,197c-2.8,0-5-2.2-5-5v-46c0-2.8,2.2-5,5-5h66c2.8,0,5,2.2,5,5v46c0,2.8-2.2,5-5,5H71z"/>
+				<path fill="#46A2DA" d="M137,142c2.2,0,4,1.8,4,4v46c0,2.2-1.8,4-4,4H71c-2.2,0-4-1.8-4-4v-46c0-2.2,1.8-4,4-4H137 M137,140H71
+					c-3.3,0-6,2.7-6,6v46c0,3.3,2.7,6,6,6h66c3.3,0,6-2.7,6-6v-46C143,142.7,140.3,140,137,140L137,140z"/>
+			</g>
+			<polygon fill="#FFFFFF" points="107,191 91,191 91,198 106,215 106,198 			"/>
+			<rect x="105" y="196" fill="#46A2DA" width="2" height="20"/>
+			<polygon fill="#46A2DA" points="105,213 105,216 89,196 91,196 			"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#46A2DA" d="M107.6,169.2c0-3.5,0.5-6.7,1.5-9.7s2.5-5.6,4.4-7.9h2.2c-1.9,2.4-3.4,5.1-4.4,8.1s-1.5,6.2-1.5,9.5
+					c0,6.3,2,12.1,5.9,17.3h-2.2c-1.9-2.2-3.4-4.8-4.4-7.8S107.6,172.6,107.6,169.2z"/>
+			</g>
+			<g>
+				<g>
+					<path fill="#46A2DA" d="M121.5,160c-1.1-1.8-3.2-2.8-5.7-2.8c-1.3,0-2.7,0.3-3.9,0.8c-0.2,0.6-0.5,1.1-0.7,1.7
+						c-0.1,0.4-0.2,0.7-0.3,1.1c0,0,0.1,0,0.1-0.1c1.5-1,3.2-1.5,4.8-1.5c1.8,0,3.3,0.7,4.1,1.9c1.5,2.4,0,6.1-3.4,8.2
+						c-1.5,1-3.2,1.5-4.8,1.5c-0.7,0-1.4-0.1-1.9-0.3c0,0.7,0.1,1.4,0.2,2c0.5,0.1,1.1,0.2,1.7,0.2c2,0,4.1-0.6,5.9-1.8
+						C121.8,168.2,123.6,163.3,121.5,160z"/>
+				</g>
+				<path fill="#46A2DA" d="M116.6,163.3c-0.2-0.5-0.8-0.7-1.3-0.4l-5.4,2.7c-0.1,0.7-0.1,1.5-0.2,2.2l6.4-3.3
+					C116.7,164.4,116.9,163.8,116.6,163.3z"/>
+			</g>
+			<g>
+
+					<rect x="86" y="180" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 30.777 374.7444)" fill="#46A2DA" width="14" height="2"/>
+
+					<rect x="86" y="180" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -100.7471 118.7761)" fill="#46A2DA" width="14" height="2"/>
+			</g>
+			<g>
+
+					<rect x="86" y="156" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 47.7471 333.7741)" fill="#46A2DA" width="14" height="2"/>
+
+					<rect x="86" y="156" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -83.7765 111.7465)" fill="#46A2DA" width="14" height="2"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g opacity="0.8">
+			<rect x="183" y="140" fill="#46A2DA" width="70" height="70"/>
+		</g>
+		<g>
+			<path fill="#FFFFFF" d="M202.9,181.6c0-0.3,0.1-0.5,0.3-0.7L218,166l14.8,14.8c0.4,0.4,0.4,1,0,1.4s-1,0.4-1.4,0L218,168.8
+				l-13.4,13.4c-0.4,0.4-1,0.4-1.4,0C203,182.1,202.9,181.8,202.9,181.6z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/qml/assets/icons/home.png b/src/qml/assets/icons/home.png
deleted file mode 100644
index 40f6e76..0000000
--- a/src/qml/assets/icons/home.png
+++ /dev/null
diff --git a/src/qml/assets/icons/newtab.png b/src/qml/assets/icons/newtab.png
deleted file mode 100644
index 51e85ba..0000000
--- a/src/qml/assets/icons/newtab.png
+++ /dev/null
diff --git a/src/qml/assets/icons/refresh.png b/src/qml/assets/icons/refresh.png
deleted file mode 100644
index fcdda91..0000000
--- a/src/qml/assets/icons/refresh.png
+++ /dev/null
diff --git a/src/qml/assets/icons/stop.png b/src/qml/assets/icons/stop.png
deleted file mode 100644
index 8e6538d..0000000
--- a/src/qml/assets/icons/stop.png
+++ /dev/null
diff --git a/src/qml/assets/icons/tabs.png b/src/qml/assets/icons/tabs.png
deleted file mode 100644
index 5ea0709..0000000
--- a/src/qml/assets/icons/tabs.png
+++ /dev/null
diff --git a/src/resources.qrc b/src/resources.qrc
index 5a80e84..e6bf71e 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -7,19 +7,22 @@
         <file>qml/PageView.qml</file>
         <file>qml/NavigationBar.qml</file>
         <file>qml/assets/UIButton.qml</file>
-        <file alias="home">qml/assets/icons/home.png</file>
-        <file alias="tabs">qml/assets/icons/tabs.png</file>
-        <file alias="forward">qml/assets/icons/forward.png</file>
-        <file alias="back">qml/assets/icons/back.png</file>
-        <file alias="refresh">qml/assets/icons/refresh.png</file>
-        <file alias="stop">qml/assets/icons/stop.png</file>
+        <file alias="home">qml/assets/icons/Btn_Home.png</file>
+        <file alias="tabs">qml/assets/icons/Btn_Tabs.png</file>
+        <file alias="forward">qml/assets/icons/Btn_Forward.png</file>
+        <file alias="back">qml/assets/icons/Btn_Back.png</file>
+        <file alias="refresh">qml/assets/icons/Btn_Reload.png</file>
+        <file alias="stop">qml/assets/icons/Btn_Clear.png</file>
         <file alias="touchpoint">qml/assets/icons/touchpoint.png</file>
         <file alias="icon">qml/assets/icons/icon.png</file>
-        <file alias="delete">qml/assets/icons/delete.png</file>
-        <file alias="star">qml/assets/icons/bookmark.png</file>
-        <file alias="settings">qml/assets/icons/settings.png</file>
+        <file alias="delete">qml/assets/icons/Btn_Delete.png</file>
+        <file alias="star">qml/assets/icons/Btn_Bookmarks.png</file>
+        <file alias="settings">qml/assets/icons/Btn_Settings.png</file>
         <file alias="about">qml/assets/icons/about_blank.png</file>
-        <file alias="newtab">qml/assets/icons/newtab.png</file>
+        <file alias="newtab">qml/assets/icons/Btn_Add.png</file>
+        <file alias="up">qml/assets/icons/Btn_Up.png</file>
+        <file alias="search">qml/assets/icons/Btn_Search.png</file>
+        <file alias="error">qml/assets/icons/Error_Icon.png</file>
         <file alias="done">qml/assets/icons/done.png</file>
     </qresource>
 </RCC>