[DT-158] Core UI Scrub (#1044)

* Update bg color

* Update table border

Co-authored-by: Grace Gardner <[email protected]>;

* Update primary button color from blue to gradient with border

* Update border radius and width on panels, cards, etc.

* Update workflow status badge colors

* Add hover state for copy and filter buttons on workflow rows

* Move workflow details to summary and relationships cards

* Persist workflow summary view open setting in local storage

* Add relationships badges

* Fix relationship links layout

* Update retry button styling

* Update direction of gradient on buttons

* Update direction of gradient on rows

* Fix cypress test

* Fix snapshot tests

Co-authored-by: Ross Edfort <[email protected]>

* Fix empty state in tables

* Fix tab border

* Update api pagination arrows and increase gray contrast

* Fix simple table and namespace details page

* Fix hover state for disabled primary Button

* Fix spacing on ChipInput

* Update namespace list border and hover state

Co-authored-by: Ross Edfort <[email protected]>

Author: laurakwhit

cypress/integration/workflow-input-and-results.spec.js

@@ -54,7 +54,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsCompletedFixture.history.events[0];
     const input = Buffer.from(
@@ -102,7 +102,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsCompletedNullFixture.history.events[0];
     const input = Buffer.from(
@@ -153,7 +153,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsRunningFixture.history.events[0];
     const input = Buffer.from(
@@ -190,7 +190,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsFailedFixture.history.events[0];
     const input = Buffer.from(
@@ -235,7 +235,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsCanceledFixture.history.events[0];
     const input = Buffer.from(
@@ -272,7 +272,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsTimedOutFixture.history.events[0];
     const input = Buffer.from(
@@ -309,7 +309,7 @@ describe('Workflow Input and Results', () => {
     cy.wait('@event-history-end');
     cy.wait('@event-history-descending');
 
-    cy.get('.accordion-open').click();
+    cy.get('[data-cy="input-and-results"]').click();
 
     const firstEvent = eventsContinuedAsNewFixture.history.events[0];
     const input = Buffer.from(

src/lib/components/copyable.svelte

@@ -24,7 +24,7 @@
     <Icon
       name={$copied ? 'checkmark' : 'copy'}
       stroke={color}
-      class={`${visible ? 'visible' : 'invisible group-hover:visible'} h-4`}
+      class={`${visible ? 'visible' : 'invisible group-hover:visible'} h-fit`}
     />
   </button>
 </div>

src/lib/components/event/event-empty-row.svelte

@@ -2,17 +2,17 @@
   import EmptyState from '$lib/holocene/empty-state.svelte';
 </script>
 
-<article class="row">
-  <div class="cell">
+<tr class="row">
+  <td class="table-cell" colspan="6">
     <EmptyState
       title="No Events Match"
       content="There are no events that match your filters or selected view. Adjust your filters or view to see your events."
     />
-  </div>
-</article>
+  </td>
+</tr>
 
 <style lang="postcss">
   .row {
-    @apply absolute left-0 right-0 border-2 p-2 text-center text-sm;
+    @apply border-[3px] border-gray-900 p-2 text-center text-sm;
   }
 </style>

src/lib/components/event/event-group-details.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <div class="w-full border-gray-700 lg:w-1/3 lg:border-r-2">
-  <Table class="w-full table-fixed pb-2">
+  <Table class="w-full table-fixed pb-2" variant="simple">
     {#each [...eventGroup.events].reverse() as [id, eventInGroup] (id)}
       <tr
         class="row"
@@ -49,7 +49,7 @@
   }
 
   .row:hover {
-    @apply cursor-pointer bg-gradient-to-b from-blue-100 to-purple-100;
+    @apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100;
   }
 
   .active.row {

src/lib/components/event/event-history-timeline-container.svelte

@@ -79,7 +79,11 @@
 </script>
 
 <section class="flex w-full">
-  <Accordion title="Timeline" icon="chart" class="select-none border-gray-900">
+  <Accordion
+    title="Timeline"
+    icon="timeline"
+    class="select-none border-gray-900"
+  >
     <div
       class="mt-2 flex flex-col items-center justify-between gap-2 xl:flex-row"
     >

src/lib/components/event/event-summary-row.svelte

@@ -227,18 +227,18 @@
   }
 
   .active {
-    @apply z-50 cursor-pointer bg-gradient-to-b from-blue-100 to-purple-100;
+    @apply z-50 cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100;
   }
 
   .active.canceled {
-    @apply bg-gradient-to-b from-yellow-100 to-yellow-200;
+    @apply bg-gradient-to-br from-yellow-100 to-yellow-200;
   }
 
   .active.failure {
-    @apply bg-gradient-to-b from-red-100 to-red-200;
+    @apply bg-gradient-to-br from-red-100 to-red-200;
   }
 
   .active.terminated {
-    @apply bg-gradient-to-b from-pink-100 to-pink-200;
+    @apply bg-gradient-to-br from-pink-100 to-pink-200;
   }
 </style>

src/lib/components/namespace-list.svelte

@@ -47,7 +47,7 @@
   {/if}
 </div>
 
-<div class="mb-5 flex rounded-full border p-1 pr-4">
+<div class="mb-5 flex rounded-md border border-gray-900 p-1 pr-4">
   <div class="ml-4 mr-2">
     <Icon name="search" />
   </div>
@@ -67,7 +67,7 @@
     {#if namespacesResult}
       {#each namespacesResult.filter( ({ namespace }) => namespace.includes(searchValue), ) as namespace}
         <li
-          class="first:rounded-t-md first:border-t last:rounded-b-md border-b border-l border-r p-3 flex border-collapse gap-2 hover:bg-gray-50 cursor-pointer"
+          class="first:rounded-t-xl first:border-t-[3px] last:rounded-b-xl last:border-b-[3px] border-b border-l-[3px] border-r-[3px] border-gray-900 p-3 flex border-collapse gap-2 hover:bg-gradient-to-br from-blue-100 to-purple-100 cursor-pointer"
           on:click={() => namespace?.onClick(namespace.namespace)}
         >
           <div class="w-6 h-6 pl-3 active">

src/lib/components/panel.svelte

@@ -2,13 +2,13 @@
   export let error: boolean = false;
 </script>
 
-<div class="panel" class:error>
+<div class="panel bg-white {$$props.class}" class:error>
   <slot />
 </div>
 
 <style lang="postcss">
   .panel {
-    @apply rounded-lg border-2 border-gray-300 p-8;
+    @apply rounded-xl border-[3px] border-gray-900 p-8;
   }
 
   .error {

src/lib/components/schedule/schedules-table.svelte

@@ -3,7 +3,7 @@
   import Table from '$lib/holocene/table/table.svelte';
 </script>
 
-<Table variant="fancy" class="w-full md:table-fixed">
+<Table variant="fancy" class="w-full bg-white md:table-fixed">
   <TableHeaderRow slot="headers">
     <th class="w-28 md:table-cell">Status</th>
     <th class="md:table-cell md:w-80 xl:w-auto">Schedule Name</th>

src/lib/components/workers-list.svelte

@@ -15,7 +15,9 @@
   <h3 class="text-lg font-medium">
     Task Queue: <span class="select-all font-normal">{taskQueue}</span>
   </h3>
-  <section class="flex w-full flex-col rounded-lg border-2 border-gray-900">
+  <section
+    class="flex w-full flex-col rounded-lg border-[3px] border-gray-900 bg-white"
+  >
     <div class="flex flex-row bg-gray-900 p-2 text-white">
       <div class="w-6/12 text-left">ID</div>
       <div class="w-2/12 text-left">Last Accessed</div>

src/lib/components/workflow-status.svelte

@@ -17,12 +17,12 @@
 
   const colors = {
     Running: 'blue',
-    TimedOut: 'red',
+    TimedOut: 'orange',
     Completed: 'green',
     Failed: 'red',
-    ContinuedAsNew: 'indigo',
+    ContinuedAsNew: 'purple',
     Canceled: 'yellow',
-    Terminated: 'pink',
+    Terminated: 'gray',
     Paused: 'yellow',
   };
 
@@ -57,15 +57,15 @@
     @apply bg-red-100 text-red-700;
   }
 
-  .indigo {
-    @apply bg-indigo-100 text-indigo-700;
+  .purple {
+    @apply bg-purple-100 text-purple-900;
   }
 
-  .purple {
-    @apply bg-purple-100 text-purple-700;
+  .gray {
+    @apply bg-gray-100 text-gray-900;
   }
 
-  .pink {
-    @apply bg-pink-100 text-pink-700;
+  .orange {
+    @apply bg-orange-100 text-orange-900;
   }
 </style>

src/lib/components/workflow/advanced-filter/custom-button.svelte

@@ -20,14 +20,14 @@
 
 <button
   on:click
-  class="{$$props.class} button"
+  class="button rounded {$$props.class}"
   class:active
   class:primary
+  class:destructive
   data-cy={dataCy}
   {disabled}
   class:disabled
   class:add
-  class:destructive
   class:unround
   class:unroundRight
   class:unroundLeft
@@ -48,23 +48,23 @@
 
 <style lang="postcss">
   .button {
-    @apply relative flex w-fit items-center justify-center gap-2 px-2 py-1 font-secondary text-sm transition hover:bg-gradient-to-r hover:from-blue-100 hover:to-purple-200 hover:text-gray-900;
+    @apply relative flex w-fit items-center justify-center gap-2 border-[3px] border-primary bg-white px-2 py-1 font-secondary text-sm transition hover:bg-primary hover:text-white;
   }
 
   .disabled {
-    @apply cursor-not-allowed bg-gray-100 hover:bg-gradient-to-r hover:from-gray-100 hover:to-gray-200;
+    @apply cursor-not-allowed bg-gray-100  hover:bg-gray-100 hover:text-primary;
   }
 
   .destructive {
-    @apply hover:bg-gradient-to-r hover:from-red-100 hover:to-red-200;
+    @apply border-danger bg-danger text-white hover:border-red-900 hover:bg-red-900;
   }
 
   .active {
-    @apply bg-black text-white;
+    @apply bg-primary text-white;
   }
 
   .primary {
-    @apply bg-blue-700 text-white hover:from-gray-900 hover:to-gray-900 hover:text-white;
+    @apply bg-primary from-blue-100 to-purple-200 text-white hover:bg-gradient-to-r hover:text-primary;
   }
 
   .unround {

src/lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte

@@ -255,7 +255,7 @@
     </div>
   </Select>
   <SimpleSplitButton
-    class="rounded-tr rounded-br bg-offWhite"
+    class="rounded-tr rounded-br bg-white"
     buttonClass="border border-gray-900"
     id="datetime"
     label={capitalize($timeFormat)}

src/lib/components/workflow/pending-activities.svelte

@@ -30,7 +30,7 @@
 </script>
 
 {#if pendingActivities.length}
-  <section class="rounded-lg border-2 border-gray-300 p-4">
+  <section class="rounded-xl border-[3px] border-gray-900 bg-white p-4">
     <h3 class="mb-2 flex gap-2 text-lg font-medium">
       Pending Activities
       {#if canceled}

src/lib/components/workflow/workflow-advanced-filters.svelte

@@ -48,9 +48,7 @@
 </script>
 
 <div class="flex flex-col">
-  <div
-    class="rounded-tr-lg rounded-tl-lg border border-gray-900 bg-offWhite p-6"
-  >
+  <div class="rounded-tr-lg rounded-tl-lg border border-gray-900 bg-white p-6">
     <div class="mb-2 flex items-center justify-between">
       <div class="flex items-center gap-2">
         <Tooltip top text="Back">

src/lib/components/workflow/workflow-detail.svelte

@@ -2,21 +2,33 @@
   import Copyable from '$lib/components/copyable.svelte';
   import Link from '$lib/holocene/link.svelte';
 
-  export let title: string;
+  export let title = '';
   export let content: string;
+  export let copyable = false;
   export let href: string = null;
   export let textSize = 'md';
 </script>
 
-<article class="flex gap-2 text-{textSize}">
-  <div class="font-medium">{title}:</div>
-  <div>
+<p class="flex items-center gap-2 text-{textSize} whitespace-nowrap pt-2">
+  {#if copyable}
+    <Copyable {content} visible container-class="gap-1 w-full">
+      {#if title}
+        {title}:
+      {/if}
+      {#if href}
+        <Link {href} class="truncate">{content}</Link>
+      {:else}
+        <span class="select-all truncate">{content}</span>
+      {/if}
+    </Copyable>
+  {:else}
+    {#if title}
+      {title}:
+    {/if}
     {#if href}
-      <Copyable {content}>
-        <Link {href}>{content}</Link>
-      </Copyable>
+      <Link {href} class="truncate">{content}</Link>
     {:else}
-      <div class="select-all">{content}</div>
+      <span class="select-all truncate">{content}</span>
     {/if}
-  </div>
-</article>
+  {/if}
+</p>