better UX in model refresh

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;

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;

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>