statusbar styling

packages/web/public/dimensions.css

@@ -1,6 +1,6 @@
 :root {
   --dim-widget-icon-size: 60px;
-  --dim-statusbar-height: 20px;
+  --dim-statusbar-height: 22px;
   --dim-left-panel-width: 300px;
   --dim-tabs-panel-height: 53px;
   --dim-tabs-height: 33px;

packages/web/src/icons/FontIcon.svelte

@@ -1,6 +1,8 @@
 <script>
   export let icon;
   export let title = null;
+  export let padLeft = false;
+  export let padRight = false;
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -140,7 +142,16 @@
     'img filter': 'mdi mdi-filter',
     'img group': 'mdi mdi-group',
   };
-
 </script>
 
-<span class={iconNames[icon] || icon} {title} on:click />
+<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight on:click />
+
+<style>
+  .padLeft {
+    margin-right: 0.25rem;
+  }
+
+  .padRight {
+    margin-right: 0.25rem;
+  }
+</style>

packages/web/src/plugins/ThemeDark.svelte

@@ -37,6 +37,7 @@
     --theme-bg-magenta: #551c3b; /* magenta-3 */
 
     --theme-font-inv-1: #ffffff;
+    --theme-font-inv-15: #dedede;
     --theme-font-inv-2: #b3b3b3;
     --theme-font-inv-3: #808080;
     --theme-font-inv-4: #4d4d4d;
@@ -52,8 +53,8 @@
     --theme-bg-selected: #15395b; /* blue-3 */
     --theme-bg-selected-point: #1765ad; /* blue-5 */
 
-    --theme-bg-statusbar-inv: blue;
+    --theme-bg-statusbar-inv: #0050b3;
-    --theme-bg-statusbar-inv-hover: #4040FF;
+    --theme-bg-statusbar-inv-hover: #096dd9;
     --theme-bg-modalheader: rgb(43, 60, 61);
 
     --theme-bg-button-inv: #004488;

packages/web/src/plugins/ThemeLight.svelte

@@ -30,6 +30,7 @@
     --theme-bg-magenta: #ffadd2; /* magenta-3 */
 
     --theme-font-inv-1: #ffffff;
+    --theme-font-inv-15: #dedede;
     --theme-font-inv-2: #b3b3b3;
     --theme-font-inv-3: #808080;
     --theme-font-inv-4: #4d4d4d;
@@ -46,8 +47,8 @@
     --theme-bg-selected-point: #40a9ff; /* blue-5 */
     
 
-    --theme-bg-statusbar-inv: blue;
+    --theme-bg-statusbar-inv: #0050b3;
-    --theme-bg-statusbar-inv-hover: #4040FF;
+    --theme-bg-statusbar-inv-hover: #096dd9;
     --theme-bg-modalheader: #eff;
 
     --theme-bg-button-inv: #337ab7;

packages/web/src/widgets/StatusBar.svelte

@@ -65,46 +65,46 @@
   <div class="container">
     {#if databaseName}
       <div class="item">
-        <FontIcon icon="icon database" />
+        <FontIcon icon="icon database" padRight />
         {databaseName}
       </div>
     {/if}
     {#if connectionLabel}
       <div class="item">
-        <FontIcon icon="icon server" />
+        <FontIcon icon="icon server" padRight />
         {connectionLabel}
       </div>
     {/if}
     {#if connection && connection.user}
       <div class="item">
-        <FontIcon icon="icon account" />
+        <FontIcon icon="icon account" padRight />
         {connection.user}
       </div>
     {/if}
     {#if connection && $status}
       <div class="item clickable" on:click={() => visibleCommandPalette.set(findCommand('database.changeState'))}>
         {#if $status.name == 'pending'}
-          <FontIcon icon="icon loading" /> Loading
+          <FontIcon icon="icon loading" padRight /> Loading
         {:else if $status.name == 'checkStructure'}
-          <FontIcon icon="icon loading" /> Checking model
+          <FontIcon icon="icon loading" padRight /> Checking model
         {:else if $status.name == 'loadStructure'}
-          <FontIcon icon="icon loading" /> Loading model
+          <FontIcon icon="icon loading" padRight /> Loading model
         {:else if $status.name == 'ok'}
-          <FontIcon icon="img ok-inv" /> Connected
+          <FontIcon icon="img ok-inv" padRight /> Connected
         {:else if $status.name == 'error'}
-          <FontIcon icon="img error-inv" /> Error
+          <FontIcon icon="img error-inv" padRight /> Error
         {/if}
       </div>
     {/if}
     {#if !connection}
       <div class="item">
-        <FontIcon icon="icon disconnected" /> Not connected
+        <FontIcon icon="icon disconnected" padRight /> Not connected
       </div>
     {/if}
     {#if $serverVersion}
       <div class="item flex" title={$serverVersion.version}>
-        <FontIcon icon="icon version" />
+        <FontIcon icon="icon version" padRight />
-        <div class="version ml-1">
+        <div class="version">
           {$serverVersion.versionText || $serverVersion.version}
         </div>
       </div>
@@ -117,7 +117,7 @@
         )}\nClick for refresh DB model`}
         on:click={handleSyncModel}
       >
-        <FontIcon icon="icon history" />
+        <FontIcon icon="icon history" padRight />
         <div class="version ml-1">
           {moment($status?.analysedTime).fromNow() + (timerValue ? '' : '')}
         </div>
@@ -128,7 +128,7 @@
     {#each contextItems || [] as item}
       <div class="item" class:clickable={item.clickable} on:click={item.onClick}>
         {#if item.icon}
-          <FontIcon icon={item.icon} />
+          <FontIcon icon={item.icon} padRight />
         {/if}
         {item.text}
       </div>
@@ -139,7 +139,7 @@
 <style>
   .main {
     display: flex;
-    color: var(--theme-font-inv-1);
+    color: var(--theme-font-inv-15);
     align-items: stretch;
     justify-content: space-between;
     cursor: default;
@@ -147,10 +147,12 @@
   }
   .container {
     display: flex;
-    align-items: center;
+    align-items: stretch;
   }
   .item {
     padding: 0px 10px;
+    display: flex;
+    align-items: center;
   }
 
   .version {