gui: add new buttons for vpn connection start/stop

this implements the buttons from the new design mockup

gui/components/StatusBox.qml

@@ -134,26 +134,27 @@ Item {
         VerticalSpacer {
             id: spacerPostImg
             visible: true
-            height: 20
+            height: 50
             Layout.alignment: Qt.AlignBottom
         }
 
-        MaterialButton {
+        RoundButton {
             id: toggleVPN
-            // FIXME - this is a workaround. It will BREAK with i18n
-            width: 100
-            spacing: 8
+            width: 48
+            height: 48
             anchors.horizontalCenter: parent.horizontalCenter
             Layout.alignment: Qt.AlignBottom
-            font {
-                pixelSize: Theme.buttonFontSize
-                capitalization: Font.Capitalize
-                family: lightFont.name
-                bold: false
-            }
+            padding: 0
+            display: AbstractButton.IconOnly
             HoverHandler {
                 cursorShape: Qt.PointingHandCursor
             }
+            icon {
+                source: Theme.buttonDisconnected
+                height: 48
+                width: 48
+                color: "transparent"
+            }
 
             onClicked: {
                 if (vpn.state === "on" | vpn.state === "starting") {

gui/components/VPNState.qml

@@ -63,9 +63,7 @@ StateGroup {
             PropertyChanges {
                 target: toggleVPN
                 enabled: false
-                // XXX this is a fake cancel, won't do anything at this point. We need
-                // to queue this action for when the openvpn process becomes available.
-                text: ("Cancel")
+                icon.source: Theme.buttonConnecting
             }
             PropertyChanges {
                 target: systray
@@ -96,7 +94,7 @@ StateGroup {
             PropertyChanges {
                 target: toggleVPN
                 enabled: true
-                text: qsTr("Turn on")
+                icon.source: Theme.buttonDisconnected
             }
             PropertyChanges {
                 target: systray
@@ -131,7 +129,7 @@ StateGroup {
             PropertyChanges {
                 target: toggleVPN
                 enabled: true
-                text: qsTr("Turn off")
+                icon.source: Theme.buttonConnected
             }
             PropertyChanges {
                 target: systray
@@ -168,7 +166,7 @@ StateGroup {
             PropertyChanges {
                 target: toggleVPN
                 enabled: true
-                text: qsTr("Cancel")
+                icon.source: Theme.buttonConnecting
             }
             PropertyChanges {
                 target: systray
@@ -204,6 +202,10 @@ StateGroup {
                 target: backgroundImage
                 source: customTheme.bgConnecting
             }
+            PropertyChanges {
+                target: toggleVPN
+                icon.source: Theme.buttonConnecting
+            }
             PropertyChanges {
                 target: systray
                 tooltip: toHuman("stopping")

gui/gui.qrc

@@ -69,6 +69,9 @@
         <file>resources/alert.svg</file>
         <file>resources/angle-right.svg</file>
         <file>resources/snowflake.svg</file>
+        <file>resources/button_green.png</file>
+        <file>resources/button_yellow.png</file>
+        <file>resources/button_red.png</file>
 
         <!-- riseup assets -->
         <file>resources/ravens.svg</file>

gui/themes/themes.js

@@ -64,5 +64,9 @@ const blueButton = {
 const buttonFontSize = 18;
 const buttonColor = "#eeeeee";
 
+const buttonDisconnected = "../resources/button_red.png";
+const buttonConnecting = "../resources/button_yellow.png";
+const buttonConnected = "../resources/button_green.png";
+
 const bgColor = "#f3f3f3";
 const fgColor = "#ffffff";