SideNavigation UI updates (#2101)

* Fix alignment for navigation button

* Add bg and hover for night mode in Cloud

* Make border go to edge of nav

* Update border in TableEmtpyState

src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte

@@ -31,7 +31,7 @@
   aria-live="polite"
 >
   <div
-    class="surface-primary flex w-auto min-w-[280px] flex-col gap-4 border-b-2 p-8 xl:min-w-[520px] xl:border-b-0 xl:border-r-2"
+    class="surface-primary flex w-auto min-w-[280px] flex-col gap-4 border-b-2 border-table p-8 xl:min-w-[520px] xl:border-b-0 xl:border-r-2"
   >
     {#if updating}
       <Loading />

src/lib/holocene/navigation/navigation-button.svelte

@@ -17,7 +17,7 @@
   on:keypress={onClick}
   tabindex="0"
   data-testid={$$props['data-testid']}
-  class="relative mb-1 flex items-center gap-2 whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium group-[.surface-inverse]:hover:bg-white group-[.surface-primary]:hover:bg-black group-[.surface-inverse]:hover:text-black group-[.surface-primary]:hover:text-white"
+  class="relative mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium group-[.surface-inverse]:hover:bg-white group-[.surface-primary]:hover:bg-black group-[.surface-inverse]:hover:text-black group-[.surface-primary]:hover:text-white group-[.surface-primary]:dark:hover:bg-white group-[.surface-primary]:dark:hover:text-black"
 >
   <div
     class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"

src/lib/holocene/navigation/navigation-container.svelte

@@ -18,8 +18,10 @@
 
 <nav
   class={merge(
-    'group grid h-screen w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)_minmax(3rem,4rem)_1fr_8rem] gap-2 border-r border-subtle px-4 py-5 transition-width dark:surface-primary data-[nav=open]:w-40 data-[nav=open]:grid-cols-[100%]',
-    isCloud ? 'surface-primary' : 'surface-inverse text-white',
+    'group grid h-screen w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)_minmax(3rem,4rem)_1fr_8rem] gap-2 border-r border-subtle px-4 py-5 transition-width data-[nav=open]:w-40 data-[nav=open]:grid-cols-[100%]',
+    isCloud
+      ? 'surface-primary from-indigo-600 to-indigo-950 dark:bg-gradient-to-b'
+      : 'surface-inverse',
   )}
   data-nav={$navOpen ? 'open' : 'closed'}
   data-testid="navigation-header"
@@ -37,7 +39,7 @@
   </button>
   <div role="list">
     <slot name="top" />
-    <hr class="my-8 border-subtle" />
+    <hr class="-mx-4 my-8 border-subtle" />
     <slot name="middle" />
   </div>
   <div class="self-end">

src/lib/holocene/navigation/navigation-item.svelte

@@ -20,7 +20,7 @@
     href={link}
     {rel}
     {target}
-    class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium group-[.surface-inverse]:hover:bg-white group-[.surface-primary]:hover:bg-black group-[.surface-inverse]:hover:text-black group-[.surface-primary]:hover:text-white"
+    class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium group-[.surface-inverse]:hover:bg-white group-[.surface-primary]:hover:bg-black group-[.surface-inverse]:hover:text-black group-[.surface-primary]:hover:text-white group-[.surface-primary]:dark:hover:bg-white group-[.surface-primary]:dark:hover:text-black"
   >
     <div
       class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"