From 51db2795bbece528019ba5ef6da362e901ae3195 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Tue, 29 Jun 2021 23:31:18 +0200
Subject: [PATCH] refactor(UI): minor UI improvements

---
 src/renderer/components/BaseContextMenu.vue   |  4 ++--
 src/renderer/components/WorkspaceQueryTab.vue |  8 +------
 src/renderer/components/WorkspaceTableTab.vue |  9 +-------
 src/renderer/scss/main.scss                   | 21 +++++++++++++++++++
 src/renderer/scss/themes/dark-theme.scss      |  2 +-
 src/renderer/scss/themes/light-theme.scss     |  2 +-
 6 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/BaseContextMenu.vue b/src/renderer/components/BaseContextMenu.vue
index 536a14fd..fbdcad44 100644
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@@ -99,7 +99,7 @@ export default {
       display: flex;
       align-items: center;
       margin: 0.2rem;
-      padding: 0.1rem;
+      padding: 0.1rem 0.3rem;
       border-radius: $border-radius;
       cursor: pointer;
       justify-content: space-between;
@@ -113,7 +113,7 @@ export default {
         transition: opacity 0.2s;
         position: absolute;
         left: 100%;
-        top: 0;
+        top: -0.2rem;
         min-width: 100px;
       }
 
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
index 1008a47f..1541d079 100644
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -52,7 +52,7 @@
 
                <div class="divider-vert py-3" />
 
-               <div class="dropdown export-dropdown pr-2">
+               <div class="dropdown table-dropdown pr-2">
                   <button
                      :disabled="!results.length || isQuering"
                      class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
@@ -322,10 +322,4 @@ export default {
     min-height: 200px;
   }
 }
-
-.export-dropdown {
-  .menu {
-    min-width: 100%;
-  }
-}
 </style>
diff --git a/src/renderer/components/WorkspaceTableTab.vue b/src/renderer/components/WorkspaceTableTab.vue
index 16d3d634..0b281405 100644
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@@ -81,7 +81,7 @@
                   <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
 
-               <div class="dropdown export-dropdown pr-2">
+               <div class="dropdown table-dropdown pr-2">
                   <button
                      :disabled="isQuering"
                      class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
@@ -383,10 +383,3 @@ export default {
    }
 };
 </script>
-<style lang="scss" scoped>
-.export-dropdown {
-  .menu {
-    min-width: 100%;
-  }
-}
-</style>
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index e7079ff8..cc7b8f02 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -138,6 +138,7 @@ body {
 
     .tab-link {
       min-width: 0;
+      transition: color 0.2s;
     }
 
     &.active {
@@ -237,3 +238,23 @@ body {
     visibility: hidden;
   }
 }
+
+.table-dropdown {
+  .menu {
+    min-width: 100%;
+    padding: 0;
+
+    .menu-item {
+      padding: 0;
+
+      > a {
+        margin: 0.2rem;
+        padding: 0.1rem 0.3rem;
+
+        &:hover {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss
index f3aa3534..d4ff5023 100644
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -266,7 +266,7 @@
   }
 
   .editor-col {
-    border-left: 2px solid $bg-color-light-dark;
+    border-left: 0.05rem solid rgba($bg-color-light-dark, 60%);
   }
 
   .table {
diff --git a/src/renderer/scss/themes/light-theme.scss b/src/renderer/scss/themes/light-theme.scss
index c36c947e..855e1537 100644
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -98,7 +98,7 @@
   }
 
   .editor-col {
-    border-left: 2px solid darken($bg-color-light-gray, 15%);
+    border-left: 0.05rem solid darken($bg-color-light-gray, 15%);
   }
 
   .file-uploader {