From 482a823f4f309262949fa8576105f44b2f39d4cd Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 17 May 2021 17:50:04 +0200
Subject: [PATCH] better UX in model refresh

---
 packages/web/src/plugins/ThemeDark.svelte  |  1 +
 packages/web/src/plugins/ThemeLight.svelte |  1 +
 packages/web/src/widgets/StatusBar.svelte  | 11 +++++++++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index 083ab7536..d1ade8e4c 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/packages/web/src/plugins/ThemeDark.svelte
@@ -53,6 +53,7 @@
     --theme-bg-selected-point: #1765ad; /* blue-5 */
 
     --theme-bg-statusbar-inv: blue;
+    --theme-bg-statusbar-inv-hover: #4040FF;
     --theme-bg-modalheader: rgb(43, 60, 61);
 
     --theme-bg-button-inv: #004488;
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index b3668b6a4..2ded7ab5a 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/packages/web/src/plugins/ThemeLight.svelte
@@ -47,6 +47,7 @@
     
 
     --theme-bg-statusbar-inv: blue;
+    --theme-bg-statusbar-inv-hover: #4040FF;
     --theme-bg-modalheader: #eff;
 
     --theme-bg-button-inv: #337ab7;
diff --git a/packages/web/src/widgets/StatusBar.svelte b/packages/web/src/widgets/StatusBar.svelte
index e6c0bde7a..c5021f700 100644
--- a/packages/web/src/widgets/StatusBar.svelte
+++ b/packages/web/src/widgets/StatusBar.svelte
@@ -93,8 +93,8 @@
     {/if}
     {#if $status?.analysedTime}
       <div
-        class="item flex"
-        title={`DB model for current DB was analysed at ${new Date($status?.analysedTime)}`}
+        class="item flex clickable"
+        title={`Last ${databaseName} model refresh: ${moment($status?.analysedTime).format('HH:mm:ss')}\nClick for refresh DB model`}
         on:click={handleSyncModel}
       >
         <FontIcon icon="icon history" />
@@ -138,4 +138,11 @@
     white-space: nowrap;
   }
 
+  .clickable {
+    cursor: pointer;
+  }
+  .clickable:hover {
+    background-color: var(--theme-bg-statusbar-inv-hover);
+  }
+
 </style>