Rearranged connect panel

src/App.vue

@@ -95,6 +95,17 @@ export default {
             placement: "bottom"
           }
         },
+        ...(!this.liteMode
+          ? [
+              {
+                target: "#new-connection-card",
+                header: {
+                  title: "New connection"
+                },
+                content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
+              }
+            ]
+          : []),
         ...(this.isElectron && !this.liteMode
           ? [
               {
@@ -117,17 +128,6 @@ export default {
               }
             ]
           : []),
-        ...(!this.liteMode
-          ? [
-              {
-                target: "#new-connection-card",
-                header: {
-                  title: "New connection"
-                },
-                content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
-              }
-            ]
-          : []),
         {
           target: "#gallery-tab-icon",
           header: {
@@ -367,7 +367,7 @@ html {
 
 // Style tour
 .v-tour__target--highlighted {
-  box-shadow: 0px 40px 160px 20px rgba(0, 0, 0, 0.5),
+  box-shadow: 0px 40px 200px 30px rgba(0, 0, 0, 0.5),
     0px 0px 0px 4px rgba(128, 128, 128, 0.5) !important;
   border-radius: 5px;
   opacity: 100% !important;

src/components/viewComponents/connectDisplay.vue

@@ -2,7 +2,7 @@
   <div class="connectDisplay uk-padding uk-padding-remove-left">
     <div
       uk-grid
-      class="uk-height-1-1 uk-margin-remove uk-padding-remove"
+      class="uk-height-1-1 uk-margin-remove uk-padding-remove uk-flex-column"
       margin="0"
     >
       <div class="uk-width-auto">
@@ -409,8 +409,4 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
+<style scoped lang="less"></style>
-.connect-card-align-top {
-  margin-top: 52px;
-}
-</style>