DT-1248 - consistent link styles

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "*.{ts,js}": ["pnpm lint:fix", "prettier --write"],
-  "*.{css,postcss,svelte}": "stylelint --fix",
+  "*.{css,postcss,svelte}": ["stylelint --fix", "pnpm lint:fix"],
   "*.{json,md}": "prettier --write"
 }

.vscode/settings.json

@@ -6,5 +6,9 @@
   },
   "editor.formatOnSave": true,
   "css.customData": [".vscode/css-custom-data.json"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

colors.cjs

@@ -24,7 +24,7 @@ const colors = {
   },
   indigo: {
     50: '#eef2ff',
-    100: '#e0e7ff',
+    100: '#E0EAFF',
     200: '#c7d2fe',
     300: '#a5b4fc',
     400: '#818cf8',
@@ -41,7 +41,7 @@ const colors = {
     300: '#d4d4d8',
     400: '#a1a1aa',
     500: '#71717a',
-    600: '#52525b',
+    600: '#4B5563',
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
@@ -97,7 +97,7 @@ const colors = {
   red: {
     50: '#fef2f2',
     100: '#fee2e2',
-    200: '#fecaca',
+    200: '#FFCFCF',
     300: '#fca5a5',
     400: '#f87171',
     500: '#ef4444',

cypress/integration/schedules.spec.js

@@ -40,7 +40,7 @@ describe('Schedules View', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 
@@ -67,7 +67,7 @@ describe('Schedules Edit', () => {
     cy.get('.schedule-row').first().contains(scheduleId);
     cy.get('.schedule-row').first().contains(name);
 
-    cy.get('.schedule-row').first().click();
+    cy.get('.schedule-row a').first().click();
 
     cy.wait('@schedule-api');
 

cypress/integration/workflow-executions.spec.js

@@ -106,7 +106,7 @@ describe('Workflow Executions List', () => {
           encodeURIComponent(`ExecutionStatus="Running"`),
         );
 
-        cy.get('.workflow-summary-row > .time-cell').first().click();
+        cy.get('.workflow-summary-row a').first().click();
 
         cy.wait('@workflow-api');
         cy.wait('@event-history-api');

package.json

@@ -81,6 +81,7 @@
     "@lezer/highlight": "^1.1.3",
     "@sveltejs/package": "^2.0.2",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
+    "class-variance-authority": "^0.7.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "esm-env": "^1.0.0",

src/lib/components/banner/banner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import IconButton from '$lib/holocene/icon-button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { BannersState } from '$lib/models/banner-state';
   import { close, closedBanners } from '$lib/stores/banner';
@@ -24,9 +25,9 @@
     class={`relative block text-center leading-10 ${severity}`}
     {...$$restProps}
   >
-    <a href={link} target="_blank" rel="noreferrer">
+    <Link href={link} newTab>
       {message}
-    </a>
+    </Link>
 
     <IconButton
       on:click={() => close(key)}

src/lib/components/data-encoder-settings.svelte

@@ -6,6 +6,7 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { clickOutside } from '$lib/holocene/outside-click';
   import { translate } from '$lib/i18n/translate';
   import { dataConverterPort } from '$lib/stores/data-converter-config';
@@ -17,10 +18,9 @@
   } from '$lib/stores/data-encoder-config';
   import { refresh } from '$lib/stores/workflow-run';
   import { validateHttpOrHttps, validateHttps } from '$lib/utilities/is-http';
-  
+
   import CodecEndpointSettings from './codec-endpoint-settings.svelte';
   import DataConverterPortSettings from './data-converter-port-settings.svelte';
-
 
   export const viewDataEncoderSettings = writable<boolean>(false);
 </script>
@@ -89,12 +89,9 @@
         </h3>
       </div>
       <p class="text-sm">
-        {translate('data-encoder', 'codec-server-description-prefix')}<a
-          rel="noreferrer"
-          target="_blank"
+        {translate('data-encoder', 'codec-server-description-prefix')}<Link
           href="https://docs.temporal.io/dataconversion#codec-server"
-          class="text-blue-700 underline decoration-blue-700"
-          >{translate('codec-server')}</a
+          newTab>{translate('codec-server')}</Link
         >
         {translate('data-encoder', 'codec-server-description-suffix', {
           level: namespaceOrCluster,
@@ -156,14 +153,12 @@
       <DataConverterPortSettings bind:port />
       <div class="flex items-center gap-4">
         <Button
-          thin
           disabled={Boolean(error) || (override && !endpoint)}
           data-testid="confirm-data-encoder-button"
           on:click={onConfirm}
           type="submit">{translate('apply')}</Button
         >
         <Button
-          thin
           variant="ghost"
           data-testid="cancel-data-encoder-button"
           on:click={onCancel}>{translate('cancel')}</Button

src/lib/components/event/event-shortcut-keys.svelte

@@ -10,11 +10,7 @@
 </script>
 
 <div class="shortcut-key-button">
-  <Button class="!py-1.5 !px-1" variant="secondary" on:click={onOpen}
-    ><span class="flex h-[24px] w-[24px] items-center justify-center text-xl"
-      >?</span
-    ></Button
-  >
+  <Button variant="secondary" on:click={onOpen}>?</Button>
 </div>
 <Drawer
   {open}

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

@@ -3,6 +3,7 @@
   import { fade } from 'svelte/transition';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import { isEventGroup } from '$lib/models/event-groups';
   import {
     eventOrGroupIsCanceled,
@@ -82,9 +83,7 @@
 >
   <td />
   <td class="w-24 text-left">
-    <a class="text-sm text-gray-500 md:text-base" href="#{event.id}"
-      ><p class="truncate">{event.id}</p></a
-    >
+    <Link class="truncate" href="#{event.id}">{event.id}</Link>
   </td>
   <td class="text-left">
     <div class="flex flex-col gap-0">

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

@@ -3,7 +3,7 @@
 
   import EventCategoryFilter from '$lib/components/event/event-category-filter.svelte';
   import EventDateFilter from '$lib/components/event/event-date-filter.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -36,15 +36,15 @@
     <th class="w-44"><EventCategoryFilter {compact} /></th>
     <th class="w-auto xl:w-80">
       <div class="flex w-full justify-end">
-        <button
-          class="relative flex w-28 items-center justify-end rounded sm:justify-between"
+        <Button
+          size="sm"
+          trailingIcon={expandAll ? 'chevron-up' : 'chevron-down'}
           on:click={handleChange}
         >
           <span class="hidden sm:block">
             {expandAll ? translate('collapse-all') : translate('expand-all')}
           </span>
-          <Icon name={expandAll ? 'chevron-up' : 'chevron-down'} />
-        </button>
+        </Button>
       </div>
     </th>
   </TableHeaderRow>

src/lib/components/import/event-history-file-import.svelte

@@ -74,6 +74,6 @@
   accept=".json"
   on:change={onFileSelect}
 />
-<Button icon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
+<Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
   >{translate('import')}</Button
 >

src/lib/components/schedule/schedule-advanced-settings.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Accordion from '$lib/holocene/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import type { SchedulePolicies, ScheduleSpec, ScheduleState } from '$types';
 
   export let spec: ScheduleSpec;
   export let state: ScheduleState;
   export let policies: SchedulePolicies;
-
-  let show = false;
 </script>
 
-<button on:click={() => (show = !show)} class="settings">
-  {translate('schedules', 'advanced-settings')}
-  <Icon class="inline" name={show ? 'chevron-up' : 'chevron-down'} />
-</button>
-{#if show}
+
+<Accordion title={translate('schedules', 'advanced-settings')}>
   <p>
     {translate('schedules', 'start-time')}
     {spec?.startTime ?? translate('none')}
@@ -38,10 +33,5 @@
     {translate('schedules', 'overlap-policy')}{policies?.overlapPolicy ??
       translate('none')}
   </p>
-{/if}
+</Accordion>
 
-<style lang="postcss">
-  .settings {
-    @apply mb-4 underline decoration-gray-900;
-  }
-</style>

src/lib/components/schedule/schedule-form-view.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  
+
   import { page } from '$app/stores';
-  
+
   import SchedulesCalendarView from '$lib/components/schedule/schedules-calendar-view.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
   import { error, loading } from '$lib/stores/schedules';
@@ -20,9 +20,8 @@
     routeForSchedule,
     routeForSchedules,
   } from '$lib/utilities/route-for';
-  
+
   import type { Schedule } from '$types';
-
 
   export let schedule: FullSchedule | null = null;
   export let onConfirm: (
@@ -116,11 +115,11 @@
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
-    <header class="relative mb-12 flex gap-1">
-      <a href={backHref} class="back absolute top-0" style="left: 0;">
-        <Icon name="chevron-left" class="inline" />{backTitle}
-      </a>
-      <h1 class="font-base mt-8 ml-0 text-2xl">{title}</h1>
+    <header class="mb-12 flex flex-col gap-1">
+      <Link href={backHref} icon="chevron-left">
+        {backTitle}
+      </Link>
+      <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">
       {#if $error}
@@ -183,27 +182,15 @@
         bind:phase
         bind:cronString
       >
-        <div class="mt-8 flex items-center gap-8">
+        <div class="mt-8 flex items-center gap-2">
           <Button
             disabled={isDisabled(preset)}
             on:click={() => handleConfirm(preset, schedule)}
             >{confirmText}</Button
           >
-          <a href={backHref} class="back" style="left: 0;"
-            >{translate('cancel')}</a
-          >
+          <Button variant="ghost" href={backHref}>{translate('cancel')}</Button>
         </div>
       </SchedulesCalendarView>
     </form>
   {/if}
 </div>
-
-<style lang="postcss">
-  .back {
-    @apply text-sm;
-  }
-
-  .back:hover {
-    @apply text-blue-700 underline;
-  }
-</style>