Dark mode audit style updates (#2152)

* Update Menu component border * Add border and make cancel a ghost button by default in Modal component * Update border in DayOfMonthPicker component * Audit and update Badge types and colors * Add interactive-table-hover background color and update table row hover styles * Revert green status color * Keep text and background color in dark mode for timeline * Add light prop to Link component to set text to off white * Remove shadow and fix border width on TopNav * Fix various border colors and radius * Fix interactive ghost hover color
temporalio · Jun 12, 2024 · 729a5d5 · 729a5d5
1 parent 46f456a
commit 729a5d5
Show file tree

Hide file tree

Showing 37 changed files with 103 additions and 121 deletions.
diff --git a/src/lib/components/batch-operations/header.svelte b/src/lib/components/batch-operations/header.svelte
@@ -24,9 +24,9 @@
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
-    Running: 'running',
-    Failed: 'error',
-    Unspecified: 'unspecified',
+    Running: 'primary',
+    Failed: 'danger',
+    Unspecified: undefined,
   };
 </script>
 

diff --git a/src/lib/components/batch-operations/table.svelte b/src/lib/components/batch-operations/table.svelte
@@ -19,9 +19,9 @@
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
-    Running: 'running',
-    Failed: 'error',
-    Unspecified: 'unspecified',
+    Running: 'primary',
+    Failed: 'danger',
+    Unspecified: undefined,
   };
 </script>
 

diff --git a/src/lib/components/event/event-group-details.svelte b/src/lib/components/event/event-group-details.svelte
@@ -61,11 +61,11 @@
 
 <style lang="postcss">
   .row:hover {
-    @apply surface-subtle cursor-pointer bg-fixed;
+    @apply cursor-pointer bg-interactive-table-hover bg-fixed;
   }
 
   .active {
-    @apply surface-subtle;
+    @apply bg-interactive-table-hover;
   }
 
   .failure {

diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
@@ -70,7 +70,7 @@
     const link = renderComponentToHTML(Link, {
       href,
       text: sanitizeHtml(groupName),
-      class: 'flex gap-2 items-center',
+      class: 'flex gap-2 items-center !text-space-black',
     });
     return link;
   }
@@ -337,7 +337,7 @@
     display: flex;
     align-items: center;
 
-    @apply !text-primary;
+    @apply !text-space-black;
   }
 
   :global(.vis-timeline) {
@@ -358,7 +358,7 @@
   }
 
   :global(.vis-content, .vis-group) {
-    @apply surface-secondary;
+    @apply bg-off-white;
   }
 
   :global(.vis-timeline .vis-item) {
@@ -394,7 +394,7 @@
     border-color: theme(colors.off-black);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.workflow) {
@@ -408,7 +408,7 @@
     border-color: theme(colors.red.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Failed) {
@@ -420,7 +420,7 @@
     border-color: theme(colors.yellow.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Terminated, .vis-item.vis-point.CancelRequested) {
@@ -432,7 +432,7 @@
     border-color: theme(colors.orange.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.TimedOut) {
@@ -444,7 +444,7 @@
     border-color: theme(colors.slate.100);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Canceled, .vis-item.vis-point.Unspecified) {
@@ -456,7 +456,7 @@
     border-color: theme(colors.pink.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Fired) {
@@ -468,7 +468,7 @@
     border-color: theme(colors.indigo.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Scheduled) {
@@ -485,7 +485,7 @@
     border-color: theme(colors.blue.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(
@@ -508,31 +508,31 @@
     border-color: theme(colors.purple.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.ContinuedAsNew) {
     color: theme(colors.purple.300);
   }
 
   :global(.vis-item.vis-range.Completed, .vis-item.vis-range.Open) {
-    background-color: #71d375;
-    border-color: #71d375;
+    background-color: theme(colors.green.300);
+    border-color: theme(colors.green.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Completed, .vis-item.vis-point.Open) {
-    color: #71d375;
+    color: theme(colors.green.300);
   }
 
   :global(.vis-item.vis-range.Signaled) {
     background-color: theme(colors.pink.200);
     border-color: theme(colors.pink.200);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Signaled) {
@@ -544,7 +544,7 @@
     border-color: theme(colors.yellow.200);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Paused) {

diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -189,11 +189,11 @@
   }
 
   .row:hover {
-    @apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
+    @apply cursor-pointer bg-interactive-table-hover dark:bg-none;
   }
 
   .expanded.row {
-    @apply bg-blue-50 dark:surface-subtle;
+    @apply bg-interactive-table-hover;
   }
 
   .failure {
@@ -237,21 +237,21 @@
   }
 
   .active {
-    @apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
+    @apply cursor-pointer bg-interactive-table-hover bg-fixed dark:bg-none;
   }
 
   .canceled:hover,
   .active.canceled {
-    @apply bg-gradient-to-br from-yellow-100 to-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
+    @apply bg-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
   }
 
   .failure:hover,
   .active.failure {
-    @apply bg-gradient-to-br from-red-100 to-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
+    @apply bg-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
   }
 
   .terminated:hover,
   .active.terminated {
-    @apply bg-gradient-to-br from-pink-100 to-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
+    @apply bg-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
   }
 </style>
diff --git a/src/lib/components/lines-and-dots/svg/group-details-text.svelte b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
@@ -102,7 +102,7 @@
   {/if} -->
 {:else if shouldDisplayAsExecutionLink(key)}
   <Link
-    inverse
+    light
     href={routeForEventHistory({
       namespace,
       workflow,
@@ -111,15 +111,15 @@
   >
 {:else if shouldDisplayChildWorkflowLink(key, attributes)}
   <Link
-    inverse
+    light
     href={routeForEventHistory({
       namespace: attributes?.namespace || namespace,
       workflow: attributes.workflowExecutionWorkflowId,
       run: attributes.workflowExecutionRunId,
     })}>{value}</Link
   >
 {:else if shouldDisplayAsTaskQueueLink(key)}
-  <Link inverse href={routeForTaskQueue({ namespace, queue: value })}
+  <Link light href={routeForTaskQueue({ namespace, queue: value })}
     >{value}</Link
   >
 {:else}

diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
@@ -145,7 +145,7 @@
       <h1 class="font-base text-2xl">{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <Alert intent="error" title="" hidden={!$error} bold>
+      <Alert intent="error" title="" hidden={!$error}>
         {$error}
       </Alert>
       <div class="w-full">

diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
@@ -54,7 +54,7 @@
 <svelte:window bind:innerWidth={screenWidth} />
 
 <nav
-  class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b-2 border-subtle p-1 px-4 shadow-md md:flex-row md:px-8"
+  class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b border-subtle p-1 px-4 md:flex-row md:px-8"
   data-testid="top-nav"
   class:bg-red-50={$dataEncoder.hasError && showNamespaceSpecificNav}
   aria-label={translate('common.main')}

diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
@@ -50,7 +50,7 @@
         status: {
           Running: 'bg-blue-300',
           TimedOut: 'bg-orange-300',
-          Completed: 'bg-[#71D375]',
+          Completed: 'bg-green-300',
           Failed: 'bg-red-300',
           ContinuedAsNew: 'bg-purple-300',
           Canceled: 'bg-slate-100',
@@ -59,7 +59,7 @@
           Unspecified: 'bg-slate-100',
           Scheduled: 'bg-indigo-300',
           Started: 'bg-blue-300',
-          Open: 'bg-[#71D375]',
+          Open: 'bg-green-300',
           New: 'bg-blue-300',
           Initiated: 'bg-blue-300',
           Fired: 'bg-pink-300',

diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
@@ -65,7 +65,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.activity-type')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {pendingActivity.activityType}
                     </Badge>
                   </div>
@@ -85,7 +85,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.attempt')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {#if failed}
                         <Icon name="retry" />
                       {/if}
@@ -96,7 +96,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.attempts-left')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {formatAttemptsLeft(
                         pendingActivity.maximumAttempts,
                         pendingActivity.attempt,
@@ -108,7 +108,7 @@
                       <h4 class="pending-activity-detail-header">
                         {translate('workflows.next-retry')}
                       </h4>
-                      <Badge type={failed ? 'error' : undefined}>
+                      <Badge type={failed ? 'danger' : undefined}>
                         {toTimeDifference({
                           date: pendingActivity.scheduledTime,
                           negativeDefault: 'None',

diff --git a/src/lib/components/workflow/workflow-call-stack-error.svelte b/src/lib/components/workflow/workflow-call-stack-error.svelte
@@ -12,7 +12,6 @@
 {#if runningWithNoWorkers}
   <div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
     <Alert
-      bold
       icon="warning"
       intent="warning"
       title={translate('workflows.workflow-error-no-workers-title')}

diff --git a/src/lib/components/workflow/workflow-compatibility-error.svelte b/src/lib/components/workflow/workflow-compatibility-error.svelte
@@ -19,7 +19,6 @@
 {#if !runningWithNoWorkers && runningWithNoCompatibleWorkers}
   <div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
     <Alert
-      bold
       icon="warning"
       intent="warning"
       title={translate('workflows.workflow-error-no-compatible-workers-title')}

diff --git a/src/lib/components/workflow/workflow-typed-error.svelte b/src/lib/components/workflow/workflow-typed-error.svelte
@@ -39,7 +39,6 @@
 
 {#if cause}
   <Alert
-    bold
     icon="warning"
     intent="warning"
     title={translate(`typed-errors.${cause}.title`)}

diff --git a/src/lib/components/workflow/workflows-summary-row.svelte b/src/lib/components/workflow/workflows-summary-row.svelte
@@ -44,7 +44,7 @@
   };
 </script>
 
-<TableRow class="hover:surface-subtle">
+<TableRow class="hover:bg-interactive-table-hover">
   <td>
     <WorkflowStatus
       status={workflow.status}