style: UI improvements

src/renderer/components/BaseConfirmModal.vue

@@ -2,7 +2,7 @@
    <div class="modal active" :class="modalSizeClass">
       <a class="modal-overlay" @click="hideModal" />
       <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header">
+         <div v-if="hasHeader" class="modal-header pl-2">
             <div class="modal-title h6">
                <slot name="header" />
             </div>

src/renderer/components/BaseContextMenu.vue

@@ -31,7 +31,7 @@ export default {
    },
    methods: {
       close () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
       }
    }
 };
@@ -57,7 +57,7 @@ export default {
     .context-container {
       min-width: 100px;
       max-width: 150px;
-      z-index: 1;
+      z-index: 10;
       box-shadow: 0 0 1px 0 #000;
       padding: 0;
       background: #1d1d1d;

src/renderer/components/ModalAskCredentials.vue

@@ -2,9 +2,11 @@
    <div class="modal active modal-sm">
       <a class="modal-overlay" />
       <div class="modal-container p-0">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('word.credentials') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
          </div>

src/renderer/components/ModalEditConnection.vue

@@ -2,9 +2,11 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.editConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server mr-1" /> {{ $t('message.editConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>

src/renderer/components/ModalNewConnection.vue

@@ -2,9 +2,11 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.createNewConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>

src/renderer/components/ModalSettings.vue

@@ -2,9 +2,12 @@
    <div id="settings" class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
-            <div class="modal-title h5">
+            <div class="modal-title h6">
-               {{ $t('word.settings') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-cog mr-1" />
+                  {{ $t('word.settings') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>

src/renderer/components/SettingBarContext.vue

@@ -1,7 +1,7 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="$emit('closeContext')"
+      @close-context="$emit('close-context')"
    >
       <div class="context-element" @click="showEditModal(contextConnection)">
          <i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
@@ -16,7 +16,9 @@
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $t('message.deleteConnection') }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">

src/renderer/components/TheNotificationsBoard.vue

@@ -77,7 +77,7 @@ export default {
 <style lang="scss">
   #notifications-board {
     position: absolute;
-    z-index: 9;
+    z-index: 999;
     right: 1rem;
     bottom: 1rem;
   }

src/renderer/components/TheSettingBar.vue

@@ -5,7 +5,7 @@
             v-if="isContext"
             :context-event="contextEvent"
             :context-connection="contextConnection"
-            @closeContext="isContext = false"
+            @close-context="isContext = false"
          />
          <ul class="settingbar-elements">
             <draggable v-model="connections">

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -6,7 +6,7 @@
          @click="changeBreadcrumbs({schema: database.name, table:null})"
       >
          <i class="icon mdi mdi-18px mdi-chevron-right" />
-         <i class="mdi mdi-18px mdi-database mr-1" />
+         <i class="database-icon mdi mdi-18px mdi-database mr-1" />
          <span>{{ database.name }}</span>
       </summary>
       <div class="accordion-body">
@@ -20,7 +20,7 @@
                   @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
                >
                   <a class="table-name">
-                     <i class="mdi mdi-18px mdi-table mr-1" />
+                     <i class="table-icon mdi mdi-18px mdi-table mr-1" />
                      <span>{{ table.TABLE_NAME }}</span>
                   </a>
                </li>
@@ -77,6 +77,11 @@ export default {
         background: rgba($color: #fff, $alpha: 0.05);
         border-radius: 2px;
       }
+
+      .database-icon,
+      .table-icon {
+        opacity: 0.7;
+      }
     }
 
     .menu-item {

src/renderer/components/WorkspaceQueryTable.vue

@@ -9,7 +9,7 @@
          :context-event="contextEvent"
          :selected-rows="selectedRows"
          @deleteSelected="deleteSelected"
-         @closeContext="isContext = false"
+         @close-context="isContext = false"
       />
       <div ref="table" class="table table-hover">
          <div class="thead">

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -1,7 +1,7 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="closeContext"
+      @close-context="closeContext"
    >
       <div class="context-element" @click="showConfirmModal">
          <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
@@ -13,7 +13,9 @@
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $tc('message.deleteRows', selectedRows.length) }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
@@ -58,7 +60,7 @@ export default {
          this.isConfirmModal = false;
       },
       closeContext () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
       },
       deleteRows () {
          this.$emit('deleteSelected');