refactor(UI): improved new connection panels appearence

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -495,14 +495,13 @@ export default {
 
 <style lang="scss" scoped>
 .connection-panel {
-  display: flex;
   margin-top: 15vh;
-  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
 
   .panel {
     width: 450px;
+    border-radius: $border-radius;
 
     .panel-body {
       flex: initial;

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -311,7 +311,7 @@
             </button>
             <button
                class="btn btn-primary mr-2"
-               :disabled="isBusy"
+               :disabled="isBusy || !hasChanges"
                @click="saveConnection"
             >
                {{ $t('word.save') }}
@@ -365,15 +365,14 @@ export default {
       },
       isBusy () {
          return this.isConnecting || this.isTesting;
+      },
+      hasChanges () {
+         return JSON.stringify(this.connection) !== JSON.stringify(this.localConnection);
       }
    },
    created () {
       this.localConnection = JSON.parse(JSON.stringify(this.connection));
       window.addEventListener('keydown', this.onKey);
-
-      // setTimeout(() => {
-      //    this.$refs.firstInput.focus();
-      // }, 20);
    },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
@@ -469,14 +468,13 @@ export default {
 
 <style lang="scss" scoped>
 .connection-panel {
-  display: flex;
   margin-top: 15vh;
-  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
 
   .panel {
     width: 450px;
+    border-radius: $border-radius;
 
     .panel-body {
       flex: initial;

src/renderer/scss/themes/dark-theme.scss

@@ -214,6 +214,12 @@
     }
   }
 
+  .connection-panel {
+    .panel {
+      background: rgba($bg-color-light-dark, 50%);
+    }
+  }
+
   .bg-checkered {
     background-image:
       linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),

src/renderer/scss/themes/light-theme.scss

@@ -205,6 +205,12 @@
     }
   }
 
+  .connection-panel {
+    .panel {
+      background: rgba($bg-color-light-gray, 100%);
+    }
+  }
+
   .context {
     color: $body-font-color-dark;