[ui] ui fixes after field test recommendations

gui/components/About.qml

@@ -26,6 +26,7 @@ ThemedPage {
             width: parent.width 
 
             Text {
+                textFormat: Text.RichText
                 width: parent.width - 40
                 color: Theme.fontColor
                 font.pixelSize: 12
@@ -58,8 +59,6 @@ ThemedPage {
                     readOnly: true
                     selectByMouse: true
                     text: getVersion()
-                    //horizontalAlignment: Text.AlignCenter
-                    //anchors.horizontalCenter: parent.horizontalCenter
                 }
             }
 
@@ -79,16 +78,19 @@ ThemedPage {
         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)
+                        "<p>This service is paid for entirely by donations from users like you. <a href=\"%1\">Please donate</a>.</p>").arg(_donateURL)
+        }
+        if (_provider == "Riseup") {
+            // XXX this is a quick workaround. About-us should be parametrized too.
+            _provider = "<a href=\"https://riseup.net/about-us\">" + ctx.provider + "</a>"
         }
         //: 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)
+        //: %4 -> terms of service
+        let _txt = qsTr(
+                    "<style>a:link {color: '" + Theme.green + "';}</style><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
     }
 

gui/components/Locations.qml

@@ -56,12 +56,37 @@ ThemedPage {
                 fill: parent
                 margins: 10
             }
-            Label {
-                id: recommendedLabel
-                //: Location Selection: label for radio button that selects automatically
-                text: qsTr("Recommended")
-                font.weight: Font.Bold
-                font.bold: true
+            Rectangle {
+                id: recommendedHeader
+                height: 20
+                Label {
+                    id: recommendedLabel
+                    //: Location Selection: label for radio button that selects automatically
+                    text: qsTr("Recommended")
+                    font.weight: Font.Bold
+                    font.bold: true
+                }
+                Image {
+                    id: lightning 
+                    smooth: true
+                    width: 16
+                    source: "../resources/lightning.svg"
+                    fillMode: Image.PreserveAspectFit
+                    verticalAlignment: Image.AlignVCenter
+                    anchors {
+                        left: recommendedLabel.right
+                        top: parent.top
+                        leftMargin: 5
+                        topMargin: 2
+                        //verticalCenterOffset: 3
+                    }
+                    ColorOverlay{
+                        anchors.fill: lightning
+                        source: lightning
+                        color: "black"
+                        antialiasing: true
+                    }
+                }
             }
             WrappedRadioButton {
                 id: autoRadioButton
@@ -69,7 +94,7 @@ ThemedPage {
                 ButtonGroup.group: locsel
                 checked: false
                 anchors {
-                    top: recommendedLabel.bottom
+                    top: recommendedHeader.bottom
                     leftMargin: -5
                 }
                 HoverHandler {
@@ -226,11 +251,20 @@ ThemedPage {
 
     function getAutoLabel() {
         let l = autoSelectionLabel
+        /* There's been some discussion about whether to include this.
+         An argument is that it is not 100% sure that we're going to connect
+         to this "recommended" gateway. However, it's fair to tell the user what's likely
+         to be the recomended location, to make a better choice. ALso, we can
+         implement a warning if finally connecting to a different location.
+         That said, all is made worse by the fact that menshen will not return
+         the "right" location if we're connecting  from the vpn, a proxy etc... For that we need to modify menshen to accept a location parameter.
+         Disabling the hint for now, but some agreement needs to be done on android + desktop about this behavior.
         if (ctx && ctx.locations && ctx.bestLocation) {
             let best = ctx.locationLabels[ctx.bestLocation]
             let label = best[0] + ", " + best[1]
             l += " (" + label + ")"
         }
+        */
         return l
     }
 
@@ -267,6 +301,15 @@ ThemedPage {
         }
     }
 
+    function getLocationColor() {
+        if (ctx && ctx.status == "on") {
+            return "black"
+        } else {
+            // TODO darker gray
+            return "gray"
+        }
+    }
+
     function isBridgeSelected() {
         if (ctx && ctx.transport == "obfs4") {
             return true

gui/components/MainView.qml

@@ -53,7 +53,7 @@ Page {
                     text: qsTr("Donate")
                     icon: "../resources/donate.svg"
                     triggered: function () {
-                        donateDialog.open()
+                        Qt.openUrlExternally(ctx.donateURL)
                     }
                 }
                 ListElement {

gui/components/MaterialButton.qml

@@ -40,8 +40,7 @@ T.Button {
         text: control.text
         font: control.font
 
-        color: !control.enabled ? control.Material.hintTextColor : control.flat
-                                  && control.highlighted ? control.Material.accentColor : control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
+        color: !control.enabled ? control.Material.hintTextColor : control.flat && control.highlighted ? control.Material.accentColor : control.highlighted ? control.Material.primaryHighlightedTextColor : "black"
     }
 
     background: Rectangle {

gui/components/Preferences.qml

@@ -53,7 +53,7 @@ ThemedPage {
             }
 
             Label {
-                text: qsTr("These techniques can bypass censorship, but are slower. Use them only when needed")
+                text: qsTr("These techniques can bypass censorship, but are slower. Use them only when needed.")
                 color: "gray"
                 visible: true
                 wrapMode: Text.Wrap
@@ -154,7 +154,7 @@ ThemedPage {
 
             MaterialCheckBox {
                 id: useUDP
-                text: qsTr("UDP")
+                text: qsTr("Use UDP if available")
                 enabled: false
                 checked: false
                 Layout.leftMargin: 10

gui/components/StatusBox.qml

@@ -36,7 +36,7 @@ Item {
         }
         border {
             color: Theme.accentOff
-            width: 2
+            width: 4
         }
     }