refactor: improved console with light theme

src/renderer/components/WorkspaceQueryConsole.vue

@@ -24,7 +24,7 @@
                tabindex="0"
                @contextmenu.prevent="contextMenu($event, wLog)"
             >
-               <span class="type-datetime">{{ moment(wLog.date).format('YYYY-MM-DD HH:mm:ss') }}</span>: <span class="type-string">{{ wLog.sql }}</span>
+               <span class="type-datetime">{{ moment(wLog.date).format('HH:mm:ss') }}</span>: <code class="query-console-log-sql">{{ wLog.sql }}</code>
             </div>
          </div>
       </div>
@@ -156,15 +156,18 @@ onMounted(() => {
          display: flex;
          flex-direction: column;
          max-height: 100%;
-         padding: 0 6px;
+         padding: 0 6px 3px;
 
          .query-console-log {
             padding: 1px 3px;
-            user-select: text;
+            margin: 1px 0;
             border-radius: $border-radius;
-            &:hover,
+
-            &:focus {
+            .query-console-log-sql {
-               background: $bg-color-gray;
+               font-size: 95%;
+               opacity: .8;
+               font-weight: 700;
+               user-select: text;
             }
          }
       }

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

@@ -308,6 +308,13 @@
   .query-console {
     border-top: 1px solid #444;
     background-color: $bg-color-dark;
+    
+    .query-console-log {
+      &:hover,
+      &:focus {
+         background: $bg-color-gray;
+      }
+   }
   }
 
   .tile {

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

@@ -128,6 +128,18 @@
     }
   }
 
+  .query-console {
+    border-top: 1px solid darken($bg-color-light-gray, 15%);
+    background-color: $bg-color-light;
+    
+    .query-console-log {
+      &:hover,
+      &:focus {
+         background: $bg-color-light-gray;
+      }
+   }
+  }
+
   #titlebar {
     background: $bg-color-light;
     box-shadow: 0 0 1px 0 #000;

tests/app.spec.ts

@@ -23,8 +23,8 @@ test('main window elements visibility', async () => {
    const visibleSelectors = [
       // '#titlebar',
       '#window-content',
-      '#settingbar',
+      '#settingbar'
-      '#footer'
+      // '#footer'
    ];
 
    for (const selector of visibleSelectors)