Remove rounded borders (#2449)

* Change borders from 2px to 1px * Change ring from 4px to 2px * Remove rounded border in layout and components * Remove rounded border for input components * Remove rounded border for button component * Remove rounded border for other Holocene components * Remove more rounded borders * Remove unnecessary table data cells * Remove rounding on signin and login pages
temporalio · Dec 17, 2024 · 79d8e79 · 79d8e79
1 parent 36de886
commit 79d8e79
Show file tree

Hide file tree

Showing 83 changed files with 107 additions and 328 deletions.
diff --git a/src/lib/components/batch-operations/table.svelte b/src/lib/components/batch-operations/table.svelte
@@ -62,9 +62,6 @@
       <td class="max-sm:hidden" colspan="4">
         <EmptyState title={translate('batch.empty-state-title')}></EmptyState>
       </td>
-      <td class="sm:hidden" colspan="2">
-        <EmptyState title={translate('batch.empty-state-title')}></EmptyState>
-      </td>
     </TableRow>
   {/each}
 </Table>
diff --git a/src/lib/components/bottom-nav-namespaces.svelte b/src/lib/components/bottom-nav-namespaces.svelte
@@ -45,7 +45,7 @@
 
 <style lang="postcss">
   .namespace {
-    @apply w-full cursor-pointer rounded border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+    @apply w-full cursor-pointer border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
 
     &.selected {
       @apply text-brand;

diff --git a/src/lib/components/bottom-nav.svelte b/src/lib/components/bottom-nav.svelte
@@ -159,10 +159,10 @@
 
 <style lang="postcss">
   .namespace-wrapper {
-    @apply surface-black flex h-10 w-full grow flex-row items-center rounded-lg border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
+    @apply surface-black flex h-10 w-full grow flex-row items-center border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
   }
 
   .nav-button {
-    @apply relative select-none rounded-lg p-1 text-center align-middle text-xs font-medium uppercase transition-all;
+    @apply relative select-none p-1 text-center align-middle text-xs font-medium uppercase transition-all;
   }
 </style>
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
@@ -20,7 +20,7 @@
 {#if showEventGroup}
   <div class="w-full p-2">
     <div
-      class="flex flex-col gap-0 overflow-hidden rounded-xl border border-subtle xl:flex-row"
+      class="flex flex-col gap-0 overflow-hidden border border-subtle xl:flex-row"
     >
       {#each group.eventList as groupEvent}
         {@const attributes = formatAttributes(groupEvent)}
@@ -76,7 +76,7 @@
   {@const attributes = formatAttributes(event)}
   {@const details = Object.entries(attributes)}
   <div class="w-full p-2">
-    <div class="w-full overflow-hidden rounded-xl border border-subtle">
+    <div class="w-full overflow-hidden border border-subtle">
       <EventLinksExpanded links={event?.links} />
       {#each details as [key, value] (key)}
         <EventDetailsRowExpanded {key} {value} {attributes} />

diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
@@ -61,6 +61,6 @@
 
 <style lang="postcss">
   .payload {
-    @apply overflow-hidden rounded border border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
+    @apply overflow-hidden border border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
   }
 </style>
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -181,7 +181,7 @@
     {#if pendingAttempt}
       <div
         class="flex items-center gap-1 {pendingAttempt > 1 &&
-          'surface-retry rounded px-1 py-0.5'}"
+          'surface-retry px-1 py-0.5'}"
       >
         <Icon class="mr-1.5 inline" name="retry" />
         {translate('workflows.attempt')}
@@ -227,7 +227,7 @@
     class:typedError
     class="row expanded"
   >
-    <td class="expanded-cell w-full" colspan="4">
+    <td class="expanded-cell w-full">
       <EventDetailsFull {group} event={currentEvent} />
     </td>
   </tr>
@@ -269,12 +269,4 @@
   .typedError .expanded-cell {
     @apply border-b-0;
   }
-
-  .row.typedError {
-    @apply rounded-lg;
-
-    &.expanded {
-      @apply rounded-b-none;
-    }
-  }
 </style>
diff --git a/src/lib/components/event/pending-activity-summary-row.svelte b/src/lib/components/event/pending-activity-summary-row.svelte
@@ -57,7 +57,7 @@
       </p>
       <div
         class="flex items-center gap-1 {event.attempt > 1 &&
-          'surface-retry rounded px-1 py-0.5'}"
+          'surface-retry px-1 py-0.5'}"
       >
         <Icon class="mr-1.5 inline" name="retry" />
         {translate('workflows.attempt')}
@@ -82,7 +82,7 @@
 </tr>
 {#if expanded}
   <tr class="row expanded">
-    <td class="expanded-cell w-full" colspan="3">
+    <td class="expanded-cell w-full">
       <EventDetailsFull {group} />
     </td>
   </tr>

diff --git a/src/lib/components/event/pending-nexus-summary-row.svelte b/src/lib/components/event/pending-nexus-summary-row.svelte
@@ -58,7 +58,7 @@
         {#if event.attempt}
           <div
             class="flex items-center gap-1 {event.attempt > 1 &&
-              'surface-retry rounded px-1 py-0.5'}"
+              'surface-retry px-1 py-0.5'}"
           >
             <Icon class="mr-1.5 inline" name="retry" />
             {translate('workflows.attempt')}
@@ -79,7 +79,7 @@
 </tr>
 {#if expanded}
   <tr class="row expanded">
-    <td class="expanded-cell w-full" colspan="3">
+    <td class="expanded-cell w-full">
       <EventDetailsFull {group} />
     </td>
   </tr>

diff --git a/src/lib/components/feedback-button.svelte b/src/lib/components/feedback-button.svelte
@@ -10,23 +10,17 @@
 
 <a {href} target="_blank" data-testid="give-feedback" rel="noreferrer">
   <div class="feedback-button">
-    <div class="feedback-icon">
-      <Icon class="text-purple-200" name="feedback" height={12} width={12} />
-    </div>
+    <Icon class="mr-2 text-purple-200" name="feedback" height={12} width={12} />
     Give Feedback
   </div>
 </a>
 
 <style lang="postcss">
   .feedback-button {
-    @apply flex cursor-pointer items-center justify-between rounded-full px-4 py-2 text-sm text-purple-200 shadow-md;
+    @apply flex cursor-pointer items-center justify-between px-4 py-2 text-sm text-purple-200 shadow-md;
   }
 
   .feedback-button:hover {
     @apply bg-slate-700;
   }
-
-  .feedback-icon {
-    @apply mr-2 rounded-full border-purple-200;
-  }
 </style>
diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
@@ -67,7 +67,7 @@
   />
   <input
     id="import-event-history-file-upload"
-    class="import-input block rounded-md border border-slate-200 p-2"
+    class="import-input block border border-slate-200 p-2"
     type="file"
     accept=".json"
     on:change={onFileSelect}

diff --git a/src/lib/components/lines-and-dots/workflow-error.svelte b/src/lib/components/lines-and-dots/workflow-error.svelte
@@ -46,7 +46,7 @@
       </p>
     {/if}
     <div
-      class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border border-danger"
+      class="mt-2 flex w-full flex-col gap-0 overflow-hidden border border-danger"
     >
       <div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
         <div class="flex items-center gap-2">

diff --git a/src/lib/components/login-button.svelte b/src/lib/components/login-button.svelte
@@ -13,7 +13,7 @@
 
 <style lang="postcss">
   .login-button {
-    @apply flex items-center justify-center rounded-full px-4 py-2 text-sm text-white;
+    @apply flex items-center justify-center px-4 py-2 text-sm text-white;
   }
 
   .login-button:hover {

diff --git a/src/lib/components/panel.svelte b/src/lib/components/panel.svelte
@@ -8,7 +8,7 @@
 
 <style lang="postcss">
   .panel {
-    @apply rounded-xl border p-8 dark:border-subtle;
+    @apply border p-8 dark:border-subtle;
 
     &.error {
       @apply border-danger bg-danger;

diff --git a/src/lib/components/schedule/schedule-basic-frequency.svelte b/src/lib/components/schedule/schedule-basic-frequency.svelte
@@ -22,6 +22,6 @@
 
 <style lang="postcss">
   .frequency {
-    @apply flex h-auto max-h-32 flex-col overflow-auto rounded-lg border border-subtle bg-primary px-2 py-2 font-mono text-sm;
+    @apply flex h-auto max-h-32 flex-col overflow-auto border border-subtle bg-primary px-2 py-2 font-mono text-sm;
   }
 </style>
diff --git a/src/lib/components/search-attribute-filter/conditional-menu.svelte b/src/lib/components/search-attribute-filter/conditional-menu.svelte
@@ -59,9 +59,7 @@
   <MenuButton
     class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
       ? '!border-l-0'
-      : ''} whitespace-nowrap {isNullFilter
-      ? 'rounded-l-none'
-      : 'rounded-none'}"
+      : ''} whitespace-nowrap"
     id="conditional-menu-button"
     controls="conditional-menu"
     {disabled}

diff --git a/src/lib/components/search-attribute-filter/duration-filter.svelte b/src/lib/components/search-attribute-filter/duration-filter.svelte
@@ -43,8 +43,7 @@
       $filter.attribute
     } (${translate('workflows.duration-filter-placeholder')})`}
     icon="search"
-    class="w-full"
-    unroundLeft
+    class="w-full [&_*]:border-l-0"
     bind:value={_value}
     on:keydown={handleKeydown}
     on:input={validateDuration}

diff --git a/src/lib/components/search-attribute-filter/index.svelte b/src/lib/components/search-attribute-filter/index.svelte
@@ -228,13 +228,4 @@
   .filter {
     @apply grow;
   }
-
-  :global(.attribute-selected) {
-    @apply rounded-r-none;
-  }
-
-  :global(#time-range-filter),
-  :global(#boolean-filter) {
-    @apply rounded-l-none;
-  }
 </style>
diff --git a/src/lib/components/search-attribute-filter/list-filter.svelte b/src/lib/components/search-attribute-filter/list-filter.svelte
@@ -44,20 +44,14 @@
         labelHidden
         id="list-filter"
         bind:chips
-        class="w-full"
+        class="w-full [&_*]:border-l-0 [&_*]:border-r-0"
         removeChipButtonLabel={(chip) =>
           translate('workflows.remove-keyword-label', { keyword: chip })}
         placeholder="{translate('common.enter')} {$filter.attribute}"
-        unroundLeft
-        unroundRight
         external
       />
       <div class="flex h-fit items-center">
-        <Button
-          borderRadiusModifier="square-left"
-          disabled={!chips.length}
-          type="submit"
-        >
+        <Button disabled={!chips.length} type="submit">
           {translate('common.search')}
         </Button>
         <slot />
@@ -70,8 +64,7 @@
         type="search"
         placeholder={`${translate('common.enter')} ${$filter.attribute}`}
         icon="search"
-        class="w-full"
-        unroundLeft
+        class="w-full [&_*]:border-l-0"
         bind:value={_value}
         on:keydown={handleKeydown}
       />

diff --git a/src/lib/components/search-attribute-filter/number-filter.svelte b/src/lib/components/search-attribute-filter/number-filter.svelte
@@ -34,8 +34,7 @@
     bind:value={_value}
     {min}
     on:keydown={handleKeydown}
-    unroundLeft
     search
-    class="-mr-2"
+    class="-mr-2 [&_*]:border-l-0"
   />
 </ConditionalMenu>
diff --git a/src/lib/components/search-attribute-filter/search-attribute-menu.svelte b/src/lib/components/search-attribute-filter/search-attribute-menu.svelte
@@ -57,7 +57,7 @@
     disabled={$activeQueryIndex !== null}
     count={$filter.attribute ? 0 : filters.length}
     on:click={() => (searchAttributeValue = '')}
-    class="text-nowrap {!!$filter.attribute && 'attribute-selected'}"
+    class="text-nowrap"
   >
     <svelte:fragment slot="leading">
       {#if !$filter.attribute}

diff --git a/src/lib/components/search-attribute-filter/text-filter.svelte b/src/lib/components/search-attribute-filter/text-filter.svelte
@@ -39,8 +39,7 @@
     type="search"
     placeholder={`${translate('common.enter')} ${$filter.attribute}`}
     icon="search"
-    class="w-full"
-    unroundLeft
+    class="w-full [&_*]:border-l-0"
     bind:value={_value}
     on:keydown={handleKeydown}
   />

diff --git a/src/lib/components/worker-compatibility.svelte b/src/lib/components/worker-compatibility.svelte
@@ -71,15 +71,15 @@
     </TableRow>
   {:else}
     <tr class="w-full">
-      <td colspan="6">
+      <td colspan="2">
         <EmptyState title={translate('workers.no-version-sets-found')} />
       </td>
     </tr>
   {/each}
 </Table>
 <h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
-  <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
+  <Badge type="count">{workers?.pollers?.length || 0}</Badge>
 </h2>
 <Table class="mb-6 w-full min-w-[600px] table-fixed">
   <caption class="sr-only" slot="caption"
@@ -161,7 +161,7 @@
     </TableRow>
   {:else}
     <tr class="w-full">
-      <td colspan={reachability?.buildIdReachability?.length ? 8 : 6}>
+      <td colspan={reachability?.buildIdReachability?.length ? 6 : 4}>
         <EmptyState title={translate('workflows.workers-empty-state')} />
       </td>
     </tr>

diff --git a/src/lib/components/worker-rules.svelte b/src/lib/components/worker-rules.svelte
@@ -60,7 +60,7 @@
     </TableRow>
   {:else}
     <tr class="w-full">
-      <td colspan="6">
+      <td colspan="4">
         <EmptyState title={translate('workers.no-assignment-rules-found')} />
       </td>
     </tr>
@@ -104,7 +104,7 @@
     </TableRow>
   {:else}
     <tr class="w-full">
-      <td colspan="6">
+      <td colspan="3">
         <EmptyState title={translate('workers.no-redirect-rules-found')} />
       </td>
     </tr>

diff --git a/src/lib/components/worker-table.svelte b/src/lib/components/worker-table.svelte
@@ -16,7 +16,7 @@
 
 <h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
-  <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
+  <Badge type="count">{workers?.pollers?.length || 0}</Badge>
 </h2>
 <Table class="mb-6 w-full min-w-[600px] table-fixed">
   <caption class="sr-only" slot="caption"
@@ -65,7 +65,7 @@
     </TableRow>
   {:else}
     <tr class="w-full">
-      <td colspan={6}>
+      <td colspan="5">
         <EmptyState title={translate('workflows.workers-empty-state')} />
       </td>
     </tr>

diff --git a/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte b/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte
@@ -71,7 +71,7 @@
       />
     </p>
     <div
-      class="surface-subtle mb-2 overflow-scroll whitespace-nowrap rounded border border-subtle p-2"
+      class="surface-subtle mb-2 overflow-scroll whitespace-nowrap border border-subtle p-2"
     >
       <code data-testid="batch-action-workflows-query">
         {$workflowsQuery}

diff --git a/src/lib/components/workflow/dropdown-filter/conditional.svelte b/src/lib/components/workflow/dropdown-filter/conditional.svelte
@@ -4,18 +4,12 @@
 
 <div class="mt-2 transition-all hover:cursor-pointer">
   <button class="flex items-center" on:click={() => (conditional = '=')}>
-    <div
-      class="ml-4 mr-2 rounded-sm p-1 text-primary"
-      class:active={conditional === '='}
-    >
+    <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '='}>
       Is
     </div>
   </button>
   <button class="flex items-center" on:click={() => (conditional = '!=')}>
-    <div
-      class="ml-4 mr-2 rounded-sm p-1 text-primary"
-      class:active={conditional === '!='}
-    >
+    <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '!='}>
       Is Not
     </div>
   </button>

diff --git a/src/lib/components/workflow/input-and-results.svelte b/src/lib/components/workflow/input-and-results.svelte
@@ -51,7 +51,7 @@
   <h3 class="mb-2 flex items-center gap-2">
     {title}
     {#if showParsedContentCount}
-      <Badge type="count" class="rounded-sm">{payloads.length}</Badge>
+      <Badge type="count">{payloads.length}</Badge>
     {/if}
   </h3>
   {#if content}