Update color scheme for private browsing according to spec

4 files changed, 33 insertions, 36 deletions

diff --git a/mockups/LightWebBrowser_Specs.pdf b/mockups/LightWebBrowser_Specs.pdf
index 6e46fad..8f77fe5 100644
--- a/mockups/LightWebBrowser_Specs.pdf
+++ b/mockups/LightWebBrowser_Specs.pdf
diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 245c49d..233d2dc 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -56,10 +56,11 @@ Item {
     }
 
     property int toolBarSize: 80
-    property string uiColor: "#46a2da"
-    property string uiSeparatorColor: "#7ebee5"
-    property string toolBarSeparatorColor: "#a3d1ed"
-    property string buttonPressedColor: "#3f91c4"
+    property string uiColor: settingsView.privateBrowsingEnabled ? "#26282a" : "#46a2da"
+    property string uiSeparatorColor: settingsView.privateBrowsingEnabled ? "#717273" : "#7ebee5"
+    property string toolBarSeparatorColor: settingsView.privateBrowsingEnabled ? "#929495" : "#a3d1ed"
+    property string toolBarFillColor: settingsView.privateBrowsingEnabled ? "#46484a" : uiSeparatorColor
+    property string buttonPressedColor: settingsView.privateBrowsingEnabled ? "#3b3c3e" : "#3f91c4"
     property string uiHighlightColor: "#fddd5c"
     property string inactivePagerColor: "#bcbdbe"
     property string textFieldStrokeColor: "#3882ae"
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index 85d5de3..d926b67 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -9,9 +9,6 @@ ToolBar {
     id: root
 
     property alias addressBar: urlBar
-    property string color: settingsView.privateBrowsingEnabled ? "#26282a" : uiColor
-    property string separatorColor: settingsView.privateBrowsingEnabled ? "#68696a" : uiSeparatorColor
-    property string highlightColor: settingsView.privateBrowsingEnabled ? "#3c3e40" : buttonPressedColor
     property Item webView: null
 
     onWebViewChanged: {
@@ -37,7 +34,7 @@ ToolBar {
 
     style: ToolBarStyle {
         background: Rectangle {
-            color: root.color
+            color: uiColor
             implicitHeight: toolBarSize + 3
         }
         padding {
@@ -124,8 +121,8 @@ ToolBar {
         UIButton {
             id: backButton
             source: "qrc:///back"
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             onClicked: webView.goBack()
             enabled: webView && webView.canGoBack
         }
@@ -135,13 +132,13 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: forwardButton
             source: "qrc:///forward"
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             onClicked: webView.goForward()
             enabled: webView && webView.canGoForward
         }
@@ -151,7 +148,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         Rectangle {
             Layout.fillWidth: true
@@ -160,7 +157,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.color
+            color: uiColor
         }
         TextField {
             id: urlBar
@@ -168,7 +165,6 @@ ToolBar {
             text: webView ? webView.url : ""
             activeFocusOnPress: true
             placeholderText: qsTr("Search or type a URL")
-            focus: false
 
             onActiveFocusChanged: {
                 if (activeFocus)
@@ -235,7 +231,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.color
+            color: uiColor
         }
         Rectangle {
             width: 1
@@ -243,13 +239,13 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: homeButton
             source: "qrc:///home"
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             onClicked: {
                 if (homeScreen.state == "disabled" || homeScreen.state == "edit") {
                     homeScreen.messageBox.state = "disabled"
@@ -264,13 +260,13 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: pageViewButton
             source: "qrc:///tabs"
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             onClicked: {
                 if (tabView.viewState == "list") {
                     tabView.viewState = "page"
@@ -299,12 +295,12 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: bookmarksButton
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             enabled: urlBar.text != "" && !settingsView.privateBrowsingEnabled
             property bool bookmarked: false
             source: bookmarked ? "qrc:///star_checked" : "qrc:///star"
@@ -330,13 +326,13 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: root.separatorColor
+            color: uiSeparatorColor
         }
         UIButton {
             id: settingsButton
             source: "qrc:///settings"
-            color: root.color
-            highlightColor: root.highlightColor
+            color: uiColor
+            highlightColor: buttonPressedColor
             onClicked: {
                 tabView.interactive = false
                 settingsView.state = "enabled"
@@ -359,7 +355,7 @@ ToolBar {
                 color: "#e4e4e4"
             }
             progress: Rectangle {
-                color: settingsView.privateBrowsingEnabled ? uiColor : "#317198"
+                color: settingsView.privateBrowsingEnabled ? "#46a2da" : "#317198"
             }
         }
         minimumValue: 0
diff --git a/src/qml/assets/UIToolBar.qml b/src/qml/assets/UIToolBar.qml
index a645a5b..9fa893f 100644
--- a/src/qml/assets/UIToolBar.qml
+++ b/src/qml/assets/UIToolBar.qml
@@ -57,7 +57,7 @@ ToolBar {
 
     style: ToolBarStyle {
         background: Rectangle {
-            color: uiSeparatorColor
+            color: toolBarFillColor
         }
         padding {
             left: 0
@@ -78,7 +78,7 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiSeparatorColor
+            color: toolBarFillColor
             Text {
                 id: titleBox
                 visible: root.title !== ""
@@ -103,7 +103,7 @@ ToolBar {
             UIButton {
                 id: toolBarButton
                 visible: root.source !== ""
-                color: uiSeparatorColor
+                color: toolBarFillColor
                 Component.onCompleted: toolBarButton.clicked.connect(root.optionClicked)
                 anchors.left: titleBox.right
             }
@@ -123,10 +123,10 @@ ToolBar {
                 top: parent.top
                 bottom: parent.bottom
             }
-            color: uiSeparatorColor
+            color: toolBarFillColor
         }
         Rectangle {
-            color: uiSeparatorColor
+            color: toolBarFillColor
             Layout.fillWidth: true
             anchors {
                 top: parent.top
@@ -159,7 +159,7 @@ ToolBar {
         }
         UIButton {
             id: doneButton
-            color: uiSeparatorColor
+            color: toolBarFillColor
             Text {
                 color: "white"
                 anchors.centerIn: parent