connections UX

packages/web/src/buttons/FormStyledButton.svelte

@@ -8,6 +8,7 @@
   export let value;
   export let title = null;
   export let skipWidth = false;
+  export let outline = false;
 
   function handleClick() {
     if (!disabled) dispatch('click');
@@ -20,7 +21,17 @@
   }
 </script>
 
-<input {type} {value} {title} class:disabled {...$$restProps} on:click={handleClick} bind:this={domButton} class:skipWidth />
+<input
+  {type}
+  {value}
+  {title}
+  class:disabled
+  {...$$restProps}
+  on:click={handleClick}
+  bind:this={domButton}
+  class:skipWidth
+  class:outline
+/>
 
 <style>
   input {
@@ -36,14 +47,27 @@
     width: 100px;
   }
 
-  input:hover:not(.disabled) {
+  input:hover:not(.disabled):not(.outline) {
     background-color: var(--theme-bg-button-inv-2);
   }
-  input:active:not(.disabled) {
+  input:active:not(.disabled):not(.outline) {
     background-color: var(--theme-bg-button-inv-3);
   }
   input.disabled {
     background-color: var(--theme-bg-button-inv-3);
     color: var(--theme-font-inv-3);
   }
+
+  input.outline {
+    background-color: transparent;
+    color: var(--theme-font-2);
+    border: 1px solid var(--theme-bg-button-inv-2);
+  }
+
+  input.outline:hover:not(.disabled) {
+    color: var(--theme-bg-button-inv-3);
+    border: 2px solid var(--theme-bg-button-inv-3);
+    margin: 1px;
+  }
+
 </style>

packages/web/src/widgets/FocusedConnectionInfoWidget.svelte

@@ -32,6 +32,7 @@
       <FormStyledButton
         value={`Show ${database}`}
         skipWidth
+        outline 
         on:click={() => {
           $focusedConnectionOrDatabase = {
             conid,
@@ -59,6 +60,7 @@
       <FormStyledButton
         value={`Show ${getConnectionLabel(connection)}`}
         skipWidth
+        outline
         on:click={() => {
           $focusedConnectionOrDatabase = {
             conid,

packages/web/src/widgets/SqlObjectList.svelte

@@ -139,7 +139,11 @@
 </script>
 
 {#if $status && $status.name == 'error'}
-  <WidgetsInnerContainer>
+  {#if differentFocusedDb}
+    <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
+  {/if}
+
+  <WidgetsInnerContainer hideContent={differentFocusedDb}>
     <ErrorInfo message={$status.message} icon="img error" />
     <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
   </WidgetsInnerContainer>
@@ -152,7 +156,11 @@
     {database}
     {driver}
   />
-  <WidgetsInnerContainer>
+  {#if differentFocusedDb}
+    <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
+  {/if}
+
+  <WidgetsInnerContainer hideContent={differentFocusedDb}>
     <ErrorInfo
       message={`Database ${database} is empty or structure is not loaded, press Refresh button to reload structure`}
       icon="img alert"