Small style updates based on feedback, better responsive padding

temporalio · Jan 8, 2025 · c1d55a2 · c1d55a2
1 parent 3185c6f
commit c1d55a2
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 51 deletions.
diff --git a/src/lib/components/workflow/relationships/continue-as-new-node.svelte b/src/lib/components/workflow/relationships/continue-as-new-node.svelte
@@ -1,23 +1,30 @@
 <script lang="ts">
+  import type { IconName } from '$lib/holocene/icon';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
 
   export let label: string;
   export let value: string;
   export let href: string | undefined = undefined;
+  export let icon: IconName | undefined = undefined;
   export let current = false;
 </script>
 
 <div
-  class="flex w-full flex-col items-center gap-2 px-1 py-4 text-center text-xs transition-all lg:text-base {current &&
-    'bg-slate-500/30'} max-w-md"
+  class="flex w-full flex-col items-center gap-2 border border-subtle px-1 py-4 text-center text-xs transition-all lg:text-base {current &&
+    'bg-subtle'} max-w-md"
 >
-  <p>{label}</p>
-  <div class="h-12 w-12 bg-indigo-200 dark:bg-indigo-600" />
-  {#if href}
-    <Link {href}>
-      {value}
-    </Link>
-  {:else}
-    <p>{value}</p>
+  {#if icon}
+    <Icon name={icon} />
   {/if}
+  <p class="font-mono">{label}</p>
+  <div class="px-1 lg:px-2">
+    {#if href}
+      <Link {href}>
+        {value}
+      </Link>
+    {:else}
+      <p>{value}</p>
+    {/if}
+  </div>
 </div>
diff --git a/src/lib/components/workflow/relationships/continue-as-new-tree.svelte b/src/lib/components/workflow/relationships/continue-as-new-tree.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div
-  class="-mt-4 flex w-full items-center justify-between bg-primary px-8 py-24 xl:px-32"
+  class="flex w-full items-center justify-between overflow-auto bg-primary px-8 py-16 lg:py-36 xl:px-32"
 >
   {#if first}
     <ContinueAsNewNode
@@ -26,8 +26,8 @@
       })}
     />
     <div
-      class="border-top border-1 w-full border border-dashed border-indigo-700 dark:border-indigo-300"
-    />
+      class="border-top border-1 w-full border border-dashed border-subtle"
+    ></div>
   {/if}
   {#if previous}
     <ContinueAsNewNode
@@ -39,9 +39,7 @@
         run: previous,
       })}
     />
-    <div
-      class="border-top border-1 w-full border border-indigo-700 dark:border-indigo-300"
-    />
+    <div class="border-top border-1 w-full border border-subtle"></div>
   {/if}
   <ContinueAsNewNode
     label={translate('workflows.current-execution')}
@@ -54,9 +52,7 @@
     current
   />
   {#if next}
-    <div
-      class="border-top border-1 w-full border border-indigo-700 dark:border-indigo-300"
-    />
+    <div class="border-top border-1 w-full border border-subtle"></div>
     <ContinueAsNewNode
       label={translate('workflows.next-execution')}
       value={next}
@@ -68,9 +64,3 @@
     />
   {/if}
 </div>
-
-<style lang="postcss">
-  .ContinuedAsNew {
-    @apply fill-green-200;
-  }
-</style>
diff --git a/src/lib/components/workflow/relationships/schedule-tree.svelte b/src/lib/components/workflow/relationships/schedule-tree.svelte
@@ -14,17 +14,18 @@
 </script>
 
 <div
-  class="-mt-4 flex w-full flex-col items-center justify-between gap-4 bg-primary px-8 py-12 xl:px-32"
+  class="flex w-full flex-col items-center justify-between gap-4 bg-primary px-8 py-12 xl:px-32"
 >
   <ContinueAsNewNode
     label="Schedule"
     value={scheduleId}
+    icon="schedules"
     href={routeForSchedule({
       namespace: namespace,
       scheduleId,
     })}
   />
-  <div class="border-top border-1 h-24 w-1 bg-indigo-700 dark:bg-indigo-300" />
+  <div class="border-top border-1 h-24 w-0.5 bg-subtle" />
   <ContinueAsNewNode
     label={translate('workflows.current-execution')}
     value={current}

diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
@@ -8,6 +8,7 @@
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
 
   export let workflow: WorkflowExecution;
+  export let isRootWorkflow = false;
 
   $: elapsedTime = formatDistanceAbbreviated({
     start: workflow?.startTime,
@@ -24,35 +25,45 @@
       <WorkflowStatus status={workflow.status} />
     </div>
     <div class="w-full leading-3">
-      <p class="font-mono text-xs">{translate('common.type')}</p>
+      {#if isRootWorkflow}
+        <p class="font-mono text-xs">{translate('common.type')}</p>
+      {/if}
       <p>{workflow.name}</p>
     </div>
   </div>
   <div class="leading-3 lg:basis-[800px]">
-    <p class="font-mono text-xs">{translate('common.id')}</p>
+    {#if isRootWorkflow}
+      <p class="font-mono text-xs">{translate('common.id')}</p>
+    {/if}
     <p>{workflow.id}</p>
   </div>
   <div class="hidden items-center gap-4 lg:flex lg:basis-5/12">
     <div class="leading-3">
-      <p class="font-mono text-xs">
-        {translate('common.start')}
-      </p>
+      {#if isRootWorkflow}
+        <p class="font-mono text-xs">
+          {translate('common.start')}
+        </p>
+      {/if}
       <p>
         {formatDate(workflow?.startTime, $timeFormat, {
           relative: $relativeTime,
         })}
       </p>
     </div>
     <div class="leading-3">
-      <p class="min-w-12 font-mono text-xs">{translate('common.end')}</p>
+      {#if isRootWorkflow}
+        <p class="min-w-12 font-mono text-xs">{translate('common.end')}</p>
+      {/if}
       <p>
         {formatDate(workflow?.endTime, $timeFormat, {
           relative: $relativeTime,
         }) || '-'}
       </p>
     </div>
     <div class="leading-3">
-      <Icon name="clock" class="h-4 w-3" />
+      {#if isRootWorkflow}
+        <Icon name="clock" class="h-4 w-3" />
+      {/if}
       <p>{elapsedTime}</p>
     </div>
   </div>

diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
@@ -41,7 +41,10 @@
     on:click|stopPropagation={onClick}
   >
     <div class="flex w-full items-center gap-3 pr-2 text-sm">
-      <WorkflowFamilyNodeDescriptionDetails workflow={root.workflow} />
+      <WorkflowFamilyNodeDescriptionDetails
+        workflow={root.workflow}
+        {isRootWorkflow}
+      />
       <div class="flex basis-16 items-center justify-end gap-1">
         {#if !isCurrent}
           <Link

diff --git a/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
@@ -110,7 +110,7 @@
     y2={getPosition(0).childY - 1.5 * radius}
     class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
       ? 'stroke-indigo-700'
-      : 'stroke-black dark:stroke-white'}"
+      : 'stroke-slate-100 dark:stroke-slate-800'}"
   />
 {/if}
 {#each root?.children as child, index}
@@ -137,7 +137,7 @@
     y2={childY}
     class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
       ? 'stroke-indigo-700'
-      : 'stroke-black dark:stroke-white'}"
+      : 'stroke-slate-100 dark:stroke-slate-800'}"
   />
   />
   <g
@@ -155,7 +155,7 @@
         y2={childY + 2.5 * radius}
         class="stroke-2 transition-all duration-300 ease-in-out {isActive(child)
           ? 'stroke-indigo-700'
-          : 'stroke-black dark:stroke-white'}"
+          : 'stroke-slate-100 dark:stroke-slate-800'}"
       />
     {/if}
     {#if isActive(child)}
@@ -215,7 +215,7 @@
         y2={y + 2.5 * radius}
         class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
           ? 'stroke-indigo-700'
-          : 'stroke-black dark:stroke-white'}"
+          : 'stroke-slate-100 dark:stroke-slate-800'}"
       />
     {/if}
     {#if isCurrent(root)}

diff --git a/src/lib/components/workflow/relationships/workflow-family-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
@@ -40,9 +40,9 @@
   };
 </script>
 
-<div class="-mt-4 flex flex-col bg-primary">
+<div class="flex flex-col bg-primary">
   <div
-    class="relative z-50 w-full overflow-hidden border-b border-subtle bg-primary lg:sticky lg:top-12"
+    class="relative z-30 w-full overflow-hidden border-b border-subtle bg-primary lg:sticky lg:top-12"
   >
     <ZoomSvg
       initialZoom={2}

diff --git a/src/lib/components/workflow/workflow-relationships-old.svelte b/src/lib/components/workflow/workflow-relationships-old.svelte
@@ -34,7 +34,7 @@
   } = workflowRelationships);
 </script>
 
-<div class="flex flex-col gap-4 px-8">
+<div class="flex flex-col gap-4 px-2 py-4 md:px-4 lg:px-8">
   <div class="flex w-full flex-wrap gap-4">
     {#if scheduleId}
       <SchedulerTable {scheduleId} {namespace} />

diff --git a/src/lib/components/workflow/workflow-relationships.svelte b/src/lib/components/workflow/workflow-relationships.svelte
@@ -29,7 +29,7 @@
     workflowRelationships);
 </script>
 
-<div class="flex flex-col gap-4 pb-16">
+<div class="flex flex-col gap-4 pb-12">
   {#if hasRelationships}
     <div class="flex w-full flex-col justify-center gap-4">
       {#await fetchAllRootWorkflows(namespace, rootWorkflowId, rootRunId)}
@@ -56,6 +56,6 @@
       {/await}
     </div>
   {:else}
-    <h4 class="px-8">{translate('workflows.no-relationships')}</h4>
+    <h4 class="px-8 py-4">{translate('workflows.no-relationships')}</h4>
   {/if}
 </div>
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
@@ -206,9 +206,7 @@
           $page.url.pathname,
           routeForRelationships(routeParameters),
         )}
-      >
-        <Badge type="primary" class="px-1 py-0">New</Badge>
-      </Tab>
+      ></Tab>
       <Tab
         label={translate('workflows.workers-tab')}
         id="workers-tab"

diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
@@ -58,7 +58,7 @@
   }
 </script>
 
-<div class="flex flex-col gap-0 px-8">
+<div class="flex flex-col gap-0 px-2 pt-4 md:px-4 lg:px-8">
   <WorkflowCallStackError />
   <div class="flex flex-col gap-2">
     <InputAndResults />
@@ -80,7 +80,7 @@
     </div>
   </div>
 </div>
-<div class="px-8 pb-24">
+<div class="px-2 pb-24 md:px-4 lg:px-8">
   <div class="flex w-full flex-col border border-subtle">
     <TimelineGraph
       {workflow}

diff --git a/src/lib/layouts/workflow-padded-layout.svelte b/src/lib/layouts/workflow-padded-layout.svelte
@@ -1,3 +1,3 @@
-<div class="h-full px-8 pb-16">
+<div class="h-full px-2 pb-16 pt-4 md:px-4 lg:px-8">
   <slot />
 </div>
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
@@ -219,7 +219,7 @@
     class="absolute bottom-0 left-0 right-0 {$viewDataEncoderSettings
       ? 'top-[540px]'
       : 'top-0'}
-    } flex h-full flex-col gap-4"
+   flex h-full flex-col"
   >
     {#if workflowError}
       <WorkflowError error={workflowError} />