gui: use background image to inform vpn connection status

this changes the StatusBox component of the app to use the
background images from the new design to inform about conn
states

gui/components/StatusBox.qml

@@ -12,30 +12,18 @@ Item {
     id: statusbox
     anchors.fill: parent
 
-    VPNState {
-        id: vpn
-    }
-
     Rectangle {
-        color: customTheme.bgColor
+        id: statusBoxBackground
         anchors.fill: parent
+        Image {
+            id: backgroundImage
+            anchors.fill: parent
+            source: customTheme.bgDisconnected
+        }
     }
 
-    Rectangle {
-        id: statusBoxBackground
-        color: customTheme.fgColor
-        height: 300
-        radius: 10
-        antialiasing: true
-        anchors {
-            fill: parent
-            margins: 20
-            bottomMargin: 30
-        }
-        border {
-            color: Theme.accentOff
-            width: 4
-        }
+    VPNState {
+        id: vpn
     }
 
     ToolButton {
@@ -131,10 +119,10 @@ Item {
             source: customTheme.iconOff
             anchors.horizontalCenter: parent.horizontalCenter
             fillMode: Image.PreserveAspectFit
-            OpacityAnimator on opacity{
+            OpacityAnimator on opacity {
                 id: fadeIn
-                from: 0.5;
-                to: 1;
+                from: 0.5
+                to: 1
                 duration: 1000
             }
             onStatusChanged: {

gui/components/VPNState.qml

@@ -35,8 +35,8 @@ StateGroup {
                 text: getSnowflakeTag()
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -52,8 +52,8 @@ StateGroup {
                 font.pixelSize: Theme.fontSize * 1.5
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -86,8 +86,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentOff
+                target: backgroundImage
+                source: customTheme.bgDisconnected
             }
             PropertyChanges {
                 target: connectionImage
@@ -121,8 +121,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentOn
+                target: backgroundImage
+                source: customTheme.bgConnected
             }
             PropertyChanges {
                 target: connectionImage
@@ -157,8 +157,8 @@ StateGroup {
                 visible: true
             }
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: connectionImage
@@ -201,8 +201,8 @@ StateGroup {
             }
             */
             PropertyChanges {
-                target: statusBoxBackground
-                border.color: Theme.accentConnecting
+                target: backgroundImage
+                source: customTheme.bgConnecting
             }
             PropertyChanges {
                 target: systray
@@ -221,30 +221,38 @@ StateGroup {
     transitions: [
         Transition {
             to: on
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: off
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: starting
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         },
         Transition {
             to: stopping
-            ColorAnimation {
-                target: statusBoxBackground
-                duration: 500
+            OpacityAnimator {
+                target: backgroundImage
+                from: 0.8;
+                to: 1;
+                duration: 500;
             }
         }
     ]