refactor(render): improved buttons style

src/renderer/components/TheFooter.vue

@@ -2,7 +2,7 @@
    <div id="footer" class="text-light">
       <div class="footer-left-elements">
          <ul class="footer-elements">
-            <li class="footer-element">
+            <li class="footer-element" :title="$t('word.version')">
                <i class="mdi mdi-18px mdi-memory mr-1" />
                <small>{{ appVersion }}</small>
             </li>

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -1,7 +1,7 @@
 <template>
    <details class="accordion workspace-explorebar-database">
       <summary
-         class="accordion-header database-name pb-0"
+         class="accordion-header database-name"
          :class="{'text-bold': breadcrumbs.schema === database.name}"
          @click="changeBreadcrumbs({schema: database.name, table: null})"
          @contextmenu.prevent="showDatabaseContext($event, database.name)"
@@ -57,6 +57,9 @@ export default {
             if (curr.size > acc) acc = curr.size;
             return acc;
          }, 0);
+      },
+      totalSize () {
+         return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
       }
    },
    methods: {
@@ -139,7 +142,7 @@ export default {
     display: flex;
     align-items: center;
     height: 100%;
-    opacity: 0.15;
+    opacity: 0.2;
     transition: opacity 0.2s;
 
     &:hover {

src/renderer/components/WorkspaceQueryTab.vue

@@ -5,14 +5,14 @@
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-primary btn-sm"
                   :class="{'loading':isQuering}"
                   :disabled="!query"
                   title="F9"
                   @click="runQuery(query)"
                >
                   <span>{{ $t('word.run') }}</span>
-                  <i class="mdi mdi-24px mdi-play text-success" />
+                  <i class="mdi mdi-24px mdi-play" />
                </button>
             </div>
             <div class="workspace-query-info">

src/renderer/components/WorkspaceQueryTable.vue

@@ -29,7 +29,7 @@
                   v-for="(field, index) in fields"
                   :key="index"
                   class="th c-hand"
-                  :title="field.comment ? field.comment : false"
+                  :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`"
                >
                   <div ref="columnResize" class="column-resizable">
                      <div class="table-column-title" @click="sort(field.name)">
@@ -39,7 +39,7 @@
                            :class="`key-${field.key}`"
                            :title="keyName(field.key)"
                         />
-                        <span :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`">{{ field.alias || field.name }}</span>
+                        <span>{{ field.alias || field.name }}</span>
                         <i
                            v-if="currentSort === field.name || currentSort === `${field.table}.${field.name}`"
                            class="mdi sort-icon"
@@ -93,12 +93,6 @@ export default {
       WorkspaceQueryTableRow,
       TableContext
    },
-   filters: {
-      wrapNumber (num) {
-         if (!num) return '';
-         return `(${num})`;
-      }
-   },
    props: {
       results: Array,
       tabUid: [String, Number],

src/renderer/components/WorkspaceTableTab.vue

@@ -6,7 +6,7 @@
                <div class="dropdown">
                   <div class="btn-group">
                      <button
-                        class="btn btn-link btn-sm mr-0 pr-1"
+                        class="btn btn-dark btn-sm mr-0 pr-1"
                         :class="{'loading':isQuering}"
                         title="F5"
                         @click="reloadTable"
@@ -15,7 +15,7 @@
                         <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh ml-1" />
                         <i v-else class="mdi mdi-24px mdi-history mdi-flip-h ml-1" />
                      </button>
-                     <div class="btn btn-link btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                     <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
                         <i class="mdi mdi-24px mdi-menu-down" />
                      </div>
                      <div class="menu px-3">
@@ -33,7 +33,7 @@
                   </div>
                </div>
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-dark btn-sm"
                   @click="showAddModal"
                >
                   <span>{{ $t('word.add') }}</span>

src/renderer/scss/main.scss

@@ -19,13 +19,25 @@ body {
 @include padding-variant(3, $unit-3);
 @include padding-variant(4, $unit-4);
 
-.btn.btn-gray {
+.btn {
+  &.btn-gray {
     color: #fff;
     background: $bg-color-gray;
 
     &:hover {
       background: $bg-color;
     }
+  }
+
+  &.btn-dark {
+    color: #fff;
+    background: $bg-color-light;
+    border-color: $bg-color-light;
+
+    &:hover {
+      background: $bg-color-gray;
+    }
+  }
 }
 
 .p-vcentered {