[ui] more dialogs

icons, new font

9 files changed, 177 insertions, 32 deletions

diff --git a/gui/components/About.qml b/gui/components/About.qml
new file mode 100644
index 0000000..8642578
--- /dev/null
+++ b/gui/components/About.qml
@@ -0,0 +1,95 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.1
+
+import "../themes/themes.js" as Theme
+
+ThemedPage {
+
+    title: qsTr("About")
+
+    Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: root.appWidth * 0.9
+        height: root.appHeight - 100
+        radius: 10
+        color: "white"
+
+        anchors {
+            fill: parent
+            margins: 10
+        }
+
+        Column {
+            id: aboutCol
+            padding: 20
+            width: parent.width 
+
+            Text {
+                width: parent.width - 40
+                font.pixelSize: 11
+                wrapMode: Label.Wrap
+                text: getText()
+                anchors.horizontalCenter: parent.horizontalCenter
+                onLinkActivated: Qt.openUrlExternally(link)
+            }
+
+            VerticalSpacer {
+                visible: true
+                height: 20
+            }
+
+            Image {
+                height: 80
+                source: "../resources/icon-noshield.svg"
+                fillMode: Image.PreserveAspectFit
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            TextEdit {
+                width: parent.width - 40
+                font.pixelSize: 10
+                readOnly: true
+                selectByMouse: true
+                text: getVersion()
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+
+            VerticalSpacer {
+                visible: true
+                height: 50
+            }
+        } // end column
+    } // end rectangle
+
+    function getText() {
+        var _name = ctx ? ctx.appName : "vpn"
+        var _provider = ctx ? ctx.provider : "unknown"
+        var _donateURL = ctx ? ctx.donateURL : ""
+        var _tosURL = ctx ? ctx.tosURL : "…"
+        var _donateTXT = ""
+        if (_donateURL) {
+            //: donation text of the about dialog
+            _donateTXT = qsTr(
+                        "<p>This service is paid for entirely by donations from users like you. <a href=\"%1\">Please donate</a>.</p>").arg(
+                        _donateURL)
+        }
+        //: about dialog
+        //: %1 -> application name
+        //: %2 -> provider name
+        //: %3 -> donation text if activated
+        var _txt = qsTr(
+                    "<p>%1 is an easy, fast, and secure VPN service from %2. %1 does not require a user account, keep logs, or track you in any way.</p> %3 <p>By using this application, you agree to the <a href=\"%4\">Terms of Service</a>. This service is provided as-is, without any warranty, and is intended for people who work to make the world a better place.</p>").arg(
+                    _name).arg(_provider).arg(_donateTXT).arg(_tosURL)
+        return _txt
+    }
+
+    function getVersion() {
+        var _name = ctx ? ctx.appName : "vpn"
+        var _ver = ctx ? ctx.version : "unknown"
+        //: %1 -> application name
+        //: %2 -> version string
+        var _txt = qsTr("%1 version: %2").arg(_name).arg(_ver)
+        return _txt
+    }
+}
diff --git a/gui/components/BoldLabel.qml b/gui/components/BoldLabel.qml
index d4a6ba3..3c46998 100644
--- a/gui/components/BoldLabel.qml
+++ b/gui/components/BoldLabel.qml
@@ -8,7 +8,7 @@ Label {
 
     font {
         pixelSize: Theme.fontSize * 1.5
-        family: boldFont.name
+        family: boldFontMonserrat.name
         bold: true
     }
 
diff --git a/gui/components/Footer.qml b/gui/components/Footer.qml
index 893f4cf..1b0d8fa 100644
--- a/gui/components/Footer.qml
+++ b/gui/components/Footer.qml
@@ -21,9 +21,12 @@ ToolBar {
         ToolButton {
             id: gwButton
             visible: hasMultipleGateways()
+
             anchors {
                 verticalCenter: parent.verticalCenter
-                leftMargin: 20
+                leftMargin: 10
+                // TODO discuss where this should be aligned
+                //leftMargin: 22
                 left: parent.left
                 verticalCenterOffset: 5
             }
@@ -40,6 +43,7 @@ ToolBar {
         Label {
             id: locationLabel
             anchors.left: gwButton.right
+            anchors.leftMargin: -7
             anchors.verticalCenter: parent.verticalCenter
             anchors.verticalCenterOffset: 7
             text: locationStr()
diff --git a/gui/components/Help.qml b/gui/components/Help.qml
index aced273..460dde4 100644
--- a/gui/components/Help.qml
+++ b/gui/components/Help.qml
@@ -1,32 +1,33 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
 
-Page {
+ThemedPage {
     title: qsTr("Help")
+    property var issueTracker: "https://0xacab.org/leap/bitmask-vpn/issues"
 
     Column {
         anchors.centerIn: parent
         spacing: 10
 
-        Button {
+        Text {
+            font.pixelSize: 14
             anchors.horizontalCenter: parent.horizontalCenter
-            text: qsTr("Donate")
-            onClicked: stackView.push("Donate.qml")
+            text: getDummyLink(qsTr("Troubleshooting and support"))
+            onLinkActivated: Qt.openUrlExternally(ctx.helpURL)
         }
-        Button {
+        Text {
+            font.pixelSize: 14
             anchors.horizontalCenter: parent.horizontalCenter
-            text: qsTr("Terms of Service")
-            onClicked: stackView.push("Donate.qml")
+            text: getDummyLink(qsTr("Report a bug"))
+            onLinkActivated: Qt.openUrlExternally(issueTracker)
         }
         Button {
             anchors.horizontalCenter: parent.horizontalCenter
-            text: qsTr("Contact Support")
-            onClicked: stackView.push("Donate.qml")
-        }
-        Button {
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: qsTr("Report bug")
-            onClicked: stackView.push("Donate.qml")
+            text: qsTr("Open logs")
         }
     }
+
+    function getDummyLink(text) {
+        return "<a href='#'>" + text + "</a>"
+    }
 }
diff --git a/gui/components/InitErrors.qml b/gui/components/InitErrors.qml
index 2859168..1f1f439 100644
--- a/gui/components/InitErrors.qml
+++ b/gui/components/InitErrors.qml
@@ -11,7 +11,7 @@ ErrorBox {
             name: "noerror"
             when: root.error == ""
             PropertyChanges {
-                target: splashSpinner
+                target: splashProgress
                 visible: true
             }
             PropertyChanges {
@@ -23,7 +23,7 @@ ErrorBox {
             name: "nohelpers"
             when: root.error == "nohelpers"
             PropertyChanges {
-                target: splashSpinner
+                target: splashProgress
                 visible: false
             }
             PropertyChanges {
diff --git a/gui/components/Locations.qml b/gui/components/Locations.qml
index 955da26..a0e7a30 100644
--- a/gui/components/Locations.qml
+++ b/gui/components/Locations.qml
@@ -47,11 +47,13 @@ ThemedPage {
         height: 100
         radius: 10
         color: "white"
+
         anchors {
             horizontalCenter: parent.horizontalCenter
             top: parent.top
             margins: 10
         }
+
         Rectangle {
             anchors {
                 fill: parent
diff --git a/gui/components/MainView.qml b/gui/components/MainView.qml
index 5407178..bae34fb 100644
--- a/gui/components/MainView.qml
+++ b/gui/components/MainView.qml
@@ -51,7 +51,7 @@ Page {
                     text: qsTr("Donate")
                     icon: "../resources/donate.svg"
                     triggered: function () {
-                        aboutDialog.open()
+                        donateDialog.open()
                     }
                 }
                 ListElement {
@@ -66,7 +66,8 @@ Page {
                     text: qsTr("About")
                     icon: "../resources/about.svg"
                     triggered: function () {
-                        aboutDialog.open()
+                        stackView.push("About.qml")
+                        settingsDrawer.close()
                     }
                 }
                 ListElement {
@@ -90,14 +91,53 @@ Page {
     }
 
     Dialog {
-        id: aboutDialog
-        title: qsTr("About")
-        Label {
-            anchors.fill: parent
-            text: qsTr("RiseupVPN\nhttps://riseupvpn.net/vpn")
+        id: donateDialog 
+        width: 350
+        title: qsTr("Please donate!")
+        standardButtons: Dialog.Ok
+
+        Text {
+            id: donateText
+            width: 300
+            wrapMode: Text.Wrap
             horizontalAlignment: Text.AlignHCenter
+            anchors {
+                topMargin: 20
+                bottomMargin: 40
+                horizontalCenter: parent.horizontalCenter
+            }
+            font.pixelSize: 12
+            text: qsTr("This service is paid for entirely by donations from users like you. The cost of running the VPN is approximately 5 USD per person every month, but every little bit counts.")
         }
 
-        standardButtons: StandardButton.Ok
+        Label {
+            id: donateURL
+            anchors {
+                top: donateText.bottom
+                topMargin: 20
+                horizontalCenter: parent.horizontalCenter
+            }
+            font.pixelSize: 14
+            text: getLink(ctx.donateURL)
+            onLinkActivated: Qt.openUrlExternally(ctx.donateURL)
+        }
+
+
+        Image {
+            height: 50
+            source: "../resources/donate.svg"
+            fillMode: Image.PreserveAspectFit
+            anchors {
+                topMargin: 20
+                top: donateURL.bottom
+                horizontalCenter: parent.horizontalCenter
+            }
+        }
+
+        onAccepted: Qt.openUrlExternally(ctx.donateURL)
+    }
+
+    function getLink(url) {
+        return "<a href='#'>" + url + "</a>"
     }
 }
diff --git a/gui/components/Splash.qml b/gui/components/Splash.qml
index 8cc9bd9..16f1b9d 100644
--- a/gui/components/Splash.qml
+++ b/gui/components/Splash.qml
@@ -14,7 +14,7 @@ Page {
 
         VerticalSpacer {
             visible: true
-            height: root.height * 0.10
+            height: root.height * 0.25
         }
 
         Image {
@@ -27,10 +27,11 @@ Page {
 
         VerticalSpacer {
             visible: true
-            height: root.height * 0.22
+            height: root.height * 0.05
         }
 
         ProgressBar {
+            id: splashProgress
             anchors.horizontalCenter: parent.horizontalCenter
             indeterminate: true
         }
diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index 2f56faf..c4a4a08 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -29,6 +29,7 @@ Item {
         height: 300
         radius: 10
         antialiasing: true
+
         anchors {
             fill: parent
             margins: 20
@@ -76,7 +77,7 @@ Item {
         height: 45
         anchors {
             top: statusBoxBackground.top
-            topMargin: 40
+            topMargin: 25
             horizontalCenter: parent.horizontalCenter
         }
         BoldLabel {
@@ -96,7 +97,7 @@ Item {
         VerticalSpacer {
             id: spacerPreImg
             visible: true
-            height: 150
+            height: 120
         }
 
         Image {
@@ -110,7 +111,8 @@ Item {
         VerticalSpacer {
             id: spacerPostImg
             visible: true
-            height: 30
+            height: 20
+            Layout.alignment: Qt.AlignBottom
         }
 
         MaterialButton {
@@ -128,7 +130,7 @@ Item {
             }
 
             onClicked: {
-                if (vpn.state === "on") {
+                if (vpn.state === "on" | vpn.state === "starting") {
                     backend.switchOff()
                 } else if (vpn.state === "off") {
                     vpn.startingUI = true