From ee67885deebe710b0d4dc19af2afe613a35e7201 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Tue, 30 Apr 2024 13:33:51 -0500
Subject: [PATCH] Padding, border-radius fixes (#2062)

* Small padding fixes

* Styling to unround search attributes

* Add padding-top to loading on labs mode to better center the logo

* Fix datetime rounded, fix max height on menu, add gap

* Unround boolean filter
---
 .../schedule/schedules-interval-view.svelte         |  4 +---
 .../workflow/filter-search/boolean-filter.svelte    |  1 -
 .../workflow/filter-search/conditional-menu.svelte  |  1 -
 .../workflow/filter-search/datetime-filter.svelte   |  7 ++-----
 .../components/workflow/filter-search/index.svelte  | 13 +++++++++++++
 .../filter-search/search-attribute-menu.svelte      |  3 +--
 src/lib/holocene/menu/menu-button.svelte            |  3 ---
 src/lib/holocene/menu/menu.svelte                   |  4 ++--
 src/lib/holocene/radio-input/radio-group.svelte     |  2 +-
 src/lib/holocene/select/select.stories.svelte       | 12 ------------
 src/lib/holocene/select/select.svelte               |  6 ------
 src/lib/holocene/split-button.svelte                |  2 +-
 src/lib/layouts/workflow-run-layout.svelte          |  2 +-
 13 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/schedule/schedules-interval-view.svelte b/src/lib/components/schedule/schedules-interval-view.svelte
index 8ec8b83fa..eb12802c7 100644
--- a/src/lib/components/schedule/schedules-interval-view.svelte
+++ b/src/lib/components/schedule/schedules-interval-view.svelte
@@ -100,7 +100,7 @@
   <p>
     {translate('schedules.offset-description')}
   </p>
-  <div class="flex w-48 gap-0">
+  <div class="flex w-48 gap-2">
     <Input
       id="phase"
       class="w-28"
@@ -111,12 +111,10 @@
       maxLength={3}
       hideCount
       error={error(phase)}
-      unroundRight
     />
     <Select
       label={translate('schedules.offset-unit')}
       labelHidden
-      unroundLeft
       id="phase-unit"
       bind:value={offsetUnit}
     >
diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
index a2dcdb83a..ee426d772 100644
--- a/src/lib/components/workflow/filter-search/boolean-filter.svelte
+++ b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -24,7 +24,6 @@
 
 <MenuContainer>
   <MenuButton
-    unroundLeft
     class="!border-l-0"
     id="boolean-filter"
     controls="boolean-filter-menu"
diff --git a/src/lib/components/workflow/filter-search/conditional-menu.svelte b/src/lib/components/workflow/filter-search/conditional-menu.svelte
index 1c52f7b67..e9db4e7af 100644
--- a/src/lib/components/workflow/filter-search/conditional-menu.svelte
+++ b/src/lib/components/workflow/filter-search/conditional-menu.svelte
@@ -43,7 +43,6 @@
 
 <MenuContainer>
   <MenuButton
-    unround
     class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
       ? '!border-l-0'
       : ''} whitespace-nowrap"
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 19f335c3b..a9d175c9f 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -138,7 +138,6 @@
   />
   <MenuContainer>
     <MenuButton
-      unroundLeft
       id="time-range-filter"
       controls="time-range-filter-menu"
       class="whitespace-nowrap"
@@ -148,7 +147,7 @@
     <Menu
       keepOpen
       id="time-range-filter-menu"
-      class="w-[27rem] !overflow-visible"
+      class="max-h-fit w-[27rem] !overflow-visible"
     >
       {#if isTimeRange}
         <MenuItem>
@@ -198,7 +197,7 @@
               name="time-filter-type"
               group={type}
             />
-            <div class="ml-6 flex gap-0 pt-2">
+            <div class="ml-6 flex gap-2 pt-2">
               <Input
                 label={translate('common.relative')}
                 labelHidden
@@ -206,12 +205,10 @@
                 bind:value={relativeTime}
                 placeholder="00"
                 error={error(relativeTime)}
-                unroundRight
                 class="h-10"
                 disabled={$type !== 'relative'}
               />
               <Select
-                unroundLeft
                 bind:value={timeUnit}
                 id="relative-datetime-unit-input"
                 label={translate('common.time-unit')}
diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index 3fa97cedf..8ca6fb645 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -288,4 +288,17 @@
   .filter {
     @apply grow;
   }
+
+  :global(.attribute-selected) {
+    @apply rounded-r-none;
+  }
+
+  :global(#conditional-menu-button) {
+    @apply rounded-none;
+  }
+
+  :global(#time-range-filter),
+  :global(#boolean-filter) {
+    @apply rounded-l-none;
+  }
 </style>
diff --git a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
index 50ed7c208..11cf5ac7c 100644
--- a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
+++ b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
@@ -55,11 +55,10 @@
 <MenuContainer>
   <MenuButton
     controls="search-attribute-menu"
-    unroundRight={Boolean($filter.attribute)}
     disabled={$activeQueryIndex !== null}
     count={$filter.attribute ? 0 : $workflowFilters.length}
     on:click={() => (searchAttributeValue = '')}
-    class="text-nowrap"
+    class="text-nowrap {!!$filter.attribute && 'attribute-selected'}"
   >
     <svelte:fragment slot="leading">
       {#if !$filter.attribute}
diff --git a/src/lib/holocene/menu/menu-button.svelte b/src/lib/holocene/menu/menu-button.svelte
index 8eb88db07..ba8a6e374 100644
--- a/src/lib/holocene/menu/menu-button.svelte
+++ b/src/lib/holocene/menu/menu-button.svelte
@@ -28,9 +28,6 @@
     hasIndicator?: boolean;
     id?: string;
     label?: string;
-    unround?: boolean;
-    unroundRight?: boolean;
-    unroundLeft?: boolean;
     variant?: MenuButtonVariant;
     class?: string;
     active?: boolean;
diff --git a/src/lib/holocene/menu/menu.svelte b/src/lib/holocene/menu/menu.svelte
index 5768c8443..cf53517fe 100644
--- a/src/lib/holocene/menu/menu.svelte
+++ b/src/lib/holocene/menu/menu.svelte
@@ -43,7 +43,7 @@
 <ul
   in:fly={{ duration: 100 }}
   role="menu"
-  class={merge('menu', position, className)}
+  class={merge(['menu', 'max-h-[320px]'], position, className)}
   class:hidden={!$open}
   aria-labelledby={id}
   tabindex={-1}
@@ -58,7 +58,7 @@
 
 <style lang="postcss">
   .menu {
-    @apply surface-primary absolute z-20 mt-1 max-h-[320px] min-w-full list-none overflow-auto rounded-lg border border-primary text-primary shadow;
+    @apply surface-primary absolute z-20 mt-1 min-w-full list-none overflow-auto rounded-lg border border-primary text-primary shadow;
 
     &.left {
       @apply left-0 origin-top-left;
diff --git a/src/lib/holocene/radio-input/radio-group.svelte b/src/lib/holocene/radio-input/radio-group.svelte
index 9bd0e8e7b..950b67125 100644
--- a/src/lib/holocene/radio-input/radio-group.svelte
+++ b/src/lib/holocene/radio-input/radio-group.svelte
@@ -26,7 +26,7 @@
   });
 </script>
 
-<div class={merge('flex flex-col gap-2', className)} {...$$restProps}>
+<div class={merge('flex flex-col gap-2 p-1', className)} {...$$restProps}>
   {#if description}
     <p class="font-secondary text-sm font-medium">{description}</p>
   {/if}
diff --git a/src/lib/holocene/select/select.stories.svelte b/src/lib/holocene/select/select.stories.svelte
index fff6f5249..82d5c88e0 100644
--- a/src/lib/holocene/select/select.stories.svelte
+++ b/src/lib/holocene/select/select.stories.svelte
@@ -16,8 +16,6 @@
       leadingIcon: undefined,
       labelHidden: false,
       disabled: false,
-      unroundLeft: false,
-      unroundRight: false,
     },
     argTypes: {
       label: { name: 'Label', control: 'text' },
@@ -29,16 +27,6 @@
       },
       disabled: { name: 'Disabled', control: 'boolean' },
       labelHidden: { name: 'Label Hidden', control: 'boolean' },
-      unroundLeft: {
-        name: 'Left',
-        control: 'boolean',
-        table: { category: 'Styling', subcategory: 'Unround' },
-      },
-      unroundRight: {
-        name: 'Right',
-        control: 'boolean',
-        table: { category: 'Styling', subcategory: 'Unround' },
-      },
       onChange: { table: { disable: true } },
       value: { table: { disable: true } },
     },
diff --git a/src/lib/holocene/select/select.svelte b/src/lib/holocene/select/select.svelte
index d37f1ee98..2761a4285 100644
--- a/src/lib/holocene/select/select.svelte
+++ b/src/lib/holocene/select/select.svelte
@@ -41,8 +41,6 @@
     placeholder?: string;
     disabled?: boolean;
     leadingIcon?: IconName;
-    unroundRight?: boolean;
-    unroundLeft?: boolean;
     onChange?: (value: T) => void;
     'data-testid'?: string;
     variant?: MenuButtonVariant;
@@ -55,8 +53,6 @@
   export let placeholder = '';
   export let disabled = false;
   export let leadingIcon: IconName = null;
-  export let unroundRight = false;
-  export let unroundLeft = false;
   export let onChange: (value: T) => void = noop;
   export let variant: MenuButtonVariant = 'secondary';
 
@@ -107,8 +103,6 @@
   <MenuButton
     hasIndicator={!disabled}
     {disabled}
-    {unroundLeft}
-    {unroundRight}
     controls="{id}-select"
     {variant}
   >
diff --git a/src/lib/holocene/split-button.svelte b/src/lib/holocene/split-button.svelte
index 5fc8571d1..d35bfc6ba 100644
--- a/src/lib/holocene/split-button.svelte
+++ b/src/lib/holocene/split-button.svelte
@@ -26,7 +26,7 @@
       {label}
     </Button>
     <MenuButton
-      class="max-w-fit grow-0 px-1"
+      class="max-w-fit grow-0 px-3"
       id="{id}-menu-button"
       label={menuLabel}
       controls="{id}-menu"
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index e70baaf36..691462742 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -160,7 +160,7 @@
     {#if workflowError}
       <WorkflowError error={workflowError} />
     {:else if !$workflowRun.workflow}
-      <Loading />
+      <Loading class="pt-24" />
     {:else}
       <div class="px-8 pt-24 md:pt-20">
         <WorkflowHeader namespace={$page.params.namespace} />