add connection style

packages/web/src/buttons/LargeButton.svelte

@@ -4,6 +4,7 @@
 
   export let icon;
   export let disabled = false;
+  export let fillHorizontal = false;
 
   const dispatch = createEventDispatcher();
 
@@ -12,7 +13,7 @@
   }
 </script>
 
-<div class="button" on:click={handleClick} class:disabled>
+<div class="button" on:click={handleClick} class:disabled class:fillHorizontal>
   <div class="icon">
     <FontIcon {icon} />
   </div>
@@ -31,6 +32,11 @@
     background-color: var(--theme-bg-1);
   }
 
+  .button.fillHorizontal {
+    width: auto;
+    margin: 0px 10px;
+  }
+
   .button:not(.disabled):hover {
     background-color: var(--theme-bg-2);
   }

packages/web/src/buttons/ToolStripSplitDropDownButton.svelte

@@ -9,6 +9,7 @@
   export let label;
   export let icon;
   export let component = ToolStripButton;
+  export let disabled = false;
 
   function handleClick(e) {
     const rect = e.detail.target.getBoundingClientRect();
@@ -18,6 +19,6 @@
   }
 </script>
 
-<ToolStripSplitButton {title} {icon} on:splitclick={handleClick} on:click>
+<ToolStripSplitButton {title} {icon} {disabled} on:splitclick={handleClick} on:click>
   <slot />
 </ToolStripSplitButton>

packages/web/src/widgets/ConnectionList.svelte

@@ -16,6 +16,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { apiCall } from '../utility/api';
+  import LargeButton from '../buttons/LargeButton.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -59,8 +60,11 @@
     passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
   />
   {#if $connections && $connections.length == 0 && $commandsCustomized['new.connection']?.enabled}
-    <ToolbarButton icon="icon new-connection" on:click={() => runCommand('new.connection')}>
+    <LargeButton icon="icon new-connection" on:click={() => runCommand('new.connection')} fillHorizontal
+      >Add new connection</LargeButton
+    >
+    <!-- <ToolbarButton icon="icon new-connection" on:click={() => runCommand('new.connection')}>
       Add new connection
-    </ToolbarButton>
+    </ToolbarButton> -->
   {/if}
 </WidgetsInnerContainer>