Fix: Clean some UI styling in Automate (#3520)

2024-11-20 09:06:36 +01:00 · 2024-11-20 09:06:36 +01:00 · 6c2e900297
--- a/packages/frontend-2/components/automate/automation/CreateDialog.vue
+++ b/packages/frontend-2/components/automate/automation/CreateDialog.vue
@ -9,39 +9,34 @@
    prevent-close-on-click-outside
    @fully-closed="reset"
  >
-    <template v-if="isTestAutomation" #header>
-      Create
-      <span class="font-extrabold text-fancy-gradient">test</span>
-      automation
-    </template>
-    <div class="flex flex-col gap-6">
+    <template v-if="isTestAutomation" #header>Create test automation</template>
+    <div class="flex flex-col gap-4">
      <CommonStepsNumber
        v-if="shouldShowStepsWidget"
        v-model="stepsWidgetModel"
-        class="mb-2"
+        class="my-2"
        :steps="stepsWidgetSteps"
        :go-vertical-below="TailwindBreakpoints.sm"
        non-interactive
      />
-      <CommonAlert v-if="isTestAutomation" color="info">
-        <template #title>What is a "test automation"?</template>
-        <template #description>
-          <ul class="list-disc ml-4">
-            <li>
-              A test automation is a sandbox environment that allows you to connect your
-              local development environment for testing purposes. It enables you to run
-              your code against project data and submit results directly to the
-              connected test automation.
-            </li>
-            <li>
-              Unlike regular automations, test automations are not triggered by changes
-              to project data. They cannot be started by pushing a new version to a
-              model.
-            </li>
-            <li>Consequently, test automations do not execute published functions.</li>
-          </ul>
-        </template>
-      </CommonAlert>
+      <CommonCard v-if="isTestAutomation" class="bg-foundation py-3 px-4">
+        <p class="text-body-xs font-medium text-foreground">
+          What is a "test automation"?
+        </p>
+        <ul class="list-disc ml-4 text-body-xs text-foreground-2 mt-2">
+          <li>
+            A test automation is a sandbox environment that allows you to connect your
+            local development environment for testing purposes. It enables you to run
+            your code against project data and submit results directly to the connected
+            test automation.
+          </li>
+          <li>
+            Unlike regular automations, test automations are not triggered by changes to
+            project data. They cannot be started by pushing a new version to a model.
+          </li>
+          <li>Consequently, test automations do not execute published functions.</li>
+        </ul>
+      </CommonCard>
      <AutomateAutomationCreateDialogSelectFunctionStep
        v-if="enumStep === AutomationCreateSteps.SelectFunction"
        v-model:selected-function="selectedFunction"
@ -83,11 +78,6 @@ import {
  TailwindBreakpoints,
  type LayoutDialogButton
 } from '@speckle/ui-components'
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CodeBracketIcon
-} from '@heroicons/vue/24/outline'
 import { graphql } from '~/lib/common/generated/gql'
 import { Automate, type Optional } from '@speckle/shared'
 import type { CreateAutomationSelectableFunction } from '~/lib/automate/helpers/automations'
@ -215,8 +205,7 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'createTestAutomation',
          text: 'Create test automation',
          props: {
-            color: 'outline',
-            iconLeft: CodeBracketIcon
+            color: 'outline'
          },
          onClick: () => {
            isTestAutomation.value = true
@ -227,7 +216,6 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'selectFnNext',
          text: 'Next',
          props: {
-            iconRight: ChevronRightIcon,
            disabled: !selectedFunction.value
          },
          onClick: () => {
@ -241,9 +229,7 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'fnParamsPrev',
          text: 'Previous',
          props: {
-            color: 'outline',
-            iconLeft: ChevronLeftIcon,
-            class: '!text-primary'
+            color: 'outline'
          },
          onClick: () => step.value--
        },
@ -251,7 +237,6 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'fnParamsNext',
          text: 'Next',
          props: {
-            iconRight: ChevronRightIcon,
            disabled: hasParameterErrors.value
          },
          submit: true
@ -263,8 +248,7 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'detailsPrev',
          text: 'Previous',
          props: {
-            color: 'outline',
-            iconLeft: ChevronLeftIcon
+            color: 'outline'
          },
          onClick: () => step.value--
        },
@ -281,8 +265,7 @@ const buttons = computed((): LayoutDialogButton[] => {
          id: 'detailsPrev',
          text: 'Back',
          props: {
-            color: 'outline',
-            iconLeft: ChevronLeftIcon
+            color: 'outline'
          },
          onClick: reset
        },
--- a/packages/frontend-2/components/automate/automation/create-dialog/SelectFunctionStep.vue
+++ b/packages/frontend-2/components/automate/automation/create-dialog/SelectFunctionStep.vue
@ -6,7 +6,7 @@
      :show-required="showRequired"
      name="search"
      color="foundation"
-      placeholder="Search Functions..."
+      placeholder="Search functions..."
      show-clear
      full-width
      v-bind="bind"
--- a/packages/frontend-2/components/automate/function/Card.vue
+++ b/packages/frontend-2/components/automate/function/Card.vue
@ -5,16 +5,15 @@
    :to="noButtons ? automationFunctionRoute(fn.id) : undefined"
    :external="externalMoreInfo"
    :target="externalMoreInfo ? '_blank' : undefined"
+    class="rounded-lg border border-outline-3 bg-foundation overflow-hidden"
  >
-    <div
-      class="px-4 py-4 flex flex-col gap-3 rounded-lg border border-outline-3 bg-foundation relative h-full"
-    >
+    <div class="px-4 py-4 flex flex-col gap-3 relative h-full">
      <div class="flex gap-3 items-center" :class="{ 'w-4/5': hasLabel }">
        <AutomateFunctionLogo :logo="fn.logo" />
        <div class="flex flex-col truncate">
          <div
            :class="[
-              'text-heading text-foreground truncate',
+              'text-heading-sm text-foreground truncate',
              noButtons ? '' : 'hover:underline'
            ]"
          >
@ -22,26 +21,23 @@
              :is="noButtons ? 'div' : NuxtLink"
              :to="automationFunctionRoute(fn.id)"
              :target="externalMoreInfo ? '_blank' : undefined"
+              class="truncate"
            >
              {{ fn.name }}
            </Component>
          </div>
-          <div class="text-body-xs flex items-center space-x-1 -mt-1">
+          <div class="text-body-2xs flex items-center text-foreground-2 space-x-0.5">
            <span>by</span>
-            <Component
-              :is="noButtons ? 'div' : CommonTextLink"
-              external
-              :to="fn.repo.url"
-            >
+            <Component :is="noButtons ? 'div' : NuxtLink" :to="fn.repo.url" external>
              {{ fn.repo.owner }}
            </Component>
          </div>
        </div>
      </div>
-      <div class="text-body-xs text-foreground-2 line-clamp-3 h-18 whitespace-normal">
+      <div class="text-body-xs text-foreground-2 line-clamp-3 h-18">
        {{ plaintextDescription }}
      </div>
-      <div v-if="!noButtons" class="flex flex-col sm:flex-row sm:self-end gap-2">
+      <div v-if="!noButtons" class="flex flex-col sm:flex-row gap-x-1">
        <template v-if="showEdit">
          <FormButton
            :icon-left="PencilIcon"
@ -53,28 +49,28 @@
          </FormButton>
        </template>
        <template v-else>
-          <FormButton
-            text
-            :to="automationFunctionRoute(fn.id)"
-            :external="externalMoreInfo"
-            :target="externalMoreInfo ? '_blank' : undefined"
-          >
-            Learn More
-          </FormButton>
          <FormButton
            :icon-left="selected ? CheckIcon : undefined"
            @click="$emit('use')"
          >
            {{ selected ? 'Selected' : 'Select' }}
          </FormButton>
+          <FormButton
+            color="subtle"
+            :to="automationFunctionRoute(fn.id)"
+            :external="externalMoreInfo"
+            :target="externalMoreInfo ? '_blank' : undefined"
+          >
+            Learn more
+          </FormButton>
        </template>
      </div>
      <div class="absolute top-0 right-0">
        <div
          v-if="hasLabel"
-          class="rounded-bl-lg rounded-tr-[7px] text-body-2xs px-2 py-1"
+          class="rounded-bl-md rounded-tr-lg font-medium text-body-3xs px-2 py-1"
          :class="{
-            'bg-foundation-focus text-foreground': fn.isFeatured,
+            'bg-info-lighter text-outline-4': fn.isFeatured,
            'bg-warning text-foreground-on-primary': isOutdated
          }"
        >
@ -91,7 +87,6 @@ import type { AutomationsFunctionsCard_AutomateFunctionFragment } from '~/lib/co
 import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline'
 import { automationFunctionRoute } from '~/lib/common/helpers/route'
 import { useMarkdown } from '~/lib/common/composables/markdown'
-import { CommonTextLink } from '@speckle/ui-components'

 graphql(`
  fragment AutomationsFunctionsCard_AutomateFunction on AutomateFunction {
@ -134,9 +129,9 @@ const classes = computed(() => {
  const classParts = ['rounded-lg']

  if (props.selected) {
-    classParts.push('ring-2 ring-primary')
+    classParts.push('border-primary')
  } else if (props.noButtons) {
-    classParts.push('ring-outline-2 hover:ring-2 cursor-pointer')
+    classParts.push('hover:border-outline-5 cursor-pointer')
  }

  return classParts.join(' ')
--- a/packages/frontend-2/components/automate/functions/page/Header.vue
+++ b/packages/frontend-2/components/automate/functions/page/Header.vue
@ -1,32 +1,28 @@
 <template>
  <div>
-    <div
-      class="pt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <Portal to="navigation">
-        <HeaderNavLink
-          :separator="false"
-          :to="automationFunctionsRoute"
-          :name="'Automate functions'"
-        />
-      </Portal>
-
+    <Portal to="navigation">
+      <HeaderNavLink
+        :separator="false"
+        :to="automationFunctionsRoute"
+        :name="'Automate functions'"
+      />
+    </Portal>
+    <div class="pt-4 flex flex-col md:flex-row gap-y-2 md:gap-x-4 md:justify-between">
      <h1 class="text-heading-xl">Automate functions</h1>
-      <div class="flex flex-col sm:flex-row gap-2">
-        <FormTextInput
-          name="search"
-          placeholder="Search functions..."
-          show-clear
-          color="foundation"
-          v-bind="bind"
-          v-on="on"
-        />
-        <FormButton
-          v-if="canCreateFunction"
-          :icon-left="PlusIcon"
-          @click="() => (createDialogOpen = true)"
-        >
-          New Function
+      <div class="flex flex-row gap-2">
+        <div class="flex-1">
+          <FormTextInput
+            name="search"
+            placeholder="Search functions..."
+            show-clear
+            color="foundation"
+            class="grow"
+            v-bind="bind"
+            v-on="on"
+          />
+        </div>
+        <FormButton :disabled="!canCreateFunction" @click="createDialogOpen = true">
+          New function
        </FormButton>
      </div>
    </div>
@ -39,7 +35,6 @@
  </div>
 </template>
 <script setup lang="ts">
-import { PlusIcon } from '@heroicons/vue/24/outline'
 import type { Nullable, Optional } from '@speckle/shared'
 import { useDebouncedTextInput } from '@speckle/ui-components'
 import { graphql } from '~/lib/common/generated/gql'
--- a/packages/frontend-2/components/project/page/automation/Header.vue
+++ b/packages/frontend-2/components/project/page/automation/Header.vue
@ -1,8 +1,8 @@
 <template>
  <div class="flex flex-col items-start w-full">
    <div class="flex gap-2 flex-col sm:flex-row sm:justify-between w-full">
-      <div class="flex flex-col items-start gap-1">
-        <CommonTextLink :icon-left="ArrowLeftIcon" size="sm" :to="automationsLink">
+      <div class="flex flex-col items-start gap-2">
+        <CommonTextLink :icon-left="ChevronLeftIcon" size="sm" :to="automationsLink">
          Back to Automations
        </CommonTextLink>
        <div class="flex flow-row justify-start items-center z-20">
@ -19,7 +19,7 @@
            v-if="automation.isTestAutomation"
            class="pointer-events-none -translate-x-4 z-10"
          >
-            <CommonBadge>Test Automation</CommonBadge>
+            <CommonBadge rounded>Test Automation</CommonBadge>
          </div>
        </div>
      </div>
@ -35,7 +35,7 @@
  </div>
 </template>
 <script setup lang="ts">
-import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
 import { FormSwitch } from '@speckle/ui-components'
 import { useMutationLoading } from '@vue/apollo-composable'
 import { graphql } from '~/lib/common/generated/gql'
--- a/packages/frontend-2/components/project/page/automations/EmptyState.vue
+++ b/packages/frontend-2/components/project/page/automations/EmptyState.vue
@ -1,55 +1,46 @@
 <template>
-  <div class="flex flex-col gap-12">
-    <div class="p-4 flex flex-col gap-6 rounded-lg max-w-2xl mx-auto items-center">
-      <ProjectPageAutomationsScaleImpactImage />
-      <div class="gap-2 flex flex-col text-center">
-        <div class="text-heading-2xl text-fancy-gradient">
-          Scale your digital impact
-        </div>
-        <div class="text-foreground text-body-sm">
+  <div class="flex flex-col gap-y-6 md:gap-y-8">
+    <div class="p-4 flex flex-col gap-y-4 rounded-lg max-w-2xl mx-auto items-center">
+      <div class="gap-y-4 flex flex-col items-center">
+        <div class="text-heading-lg text-foreground">Scale your digital impact</div>
+        <div class="text-body-xs text-foreground-2">
          Speckle Automate empowers you to continuously monitor your published models,
          automatically ensuring project data standards, identifying potential design
          faults, and effortlessly creating delivery artifacts.
+        </div>
+        <div class="flex gap-x-4">
+          <div v-if="isAutomateEnabled" v-tippy="creationDisabledReason">
+            <FormButton
+              :disabled="!!creationDisabledReason"
+              @click="$emit('new-automation')"
+            >
+              New automation
+            </FormButton>
+          </div>
+          <FormButton
+            v-else
+            external
+            target="_blank"
+            to="https://docs.google.com/forms/d/e/1FAIpQLSc5e4q0gyG8VkGqA3gRzN71c4TDu0P9W0PXeVarFu_8po3qRA/viewform"
+          >
+            Sign up for beta
+          </FormButton>
          <FormButton
-            :icon-right="ArrowTopRightOnSquareIcon"
            target="_blank"
            external
            color="outline"
-            class="mx-auto my-2"
            to="https://speckle.systems/blog/automate-with-speckle/"
          >
            Learn more
          </FormButton>
        </div>
      </div>
-      <div>
-        <div v-if="isAutomateEnabled" v-tippy="disabledCreateBecauseOf">
-          <FormButton
-            :icon-left="PlusIcon"
-            size="lg"
-            :disabled="!!disabledCreateBecauseOf"
-            @click="$emit('new-automation')"
-          >
-            New automation
-          </FormButton>
-        </div>
-        <FormButton
-          v-else
-          :icon-left="PlusIcon"
-          size="lg"
-          external
-          target="_blank"
-          to="https://docs.google.com/forms/d/e/1FAIpQLSc5e4q0gyG8VkGqA3gRzN71c4TDu0P9W0PXeVarFu_8po3qRA/viewform"
-        >
-          Sign up for beta
-        </FormButton>
-      </div>
    </div>
-    <div v-if="isAutomateEnabled" class="flex flex-col gap-9">
-      <div class="flex gap-2 flex-col sm:flex-row sm:justify-between sm:items-center">
-        <h2 class="text-heading-xl">Featured functions</h2>
+    <div v-if="isAutomateEnabled" class="flex flex-col gap-6">
+      <div class="flex gap-2 flex-row justify-between items-center">
+        <h2 class="text-heading-lg text-foreground">Featured functions</h2>
        <FormButton color="outline" class="shrink-0" :to="automationFunctionsRoute">
-          Explore all functions
+          Explore all
        </FormButton>
      </div>
      <AutomateFunctionCardView v-if="functions.length">
@ -65,7 +56,6 @@
  </div>
 </template>
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon, PlusIcon } from '@heroicons/vue/24/outline'
 import { graphql } from '~/lib/common/generated/gql'
 import type { ProjectPageAutomationsEmptyState_QueryFragment } from '~/lib/common/generated/gql/graphql'
 import { automationFunctionsRoute } from '~/lib/common/helpers/route'
@ -89,7 +79,7 @@ defineEmits<{
 const props = defineProps<{
  functions?: ProjectPageAutomationsEmptyState_QueryFragment
  isAutomateEnabled: boolean
-  disabledCreateBecauseOf?: string
+  creationDisabledReason?: string
 }>()

 const functions = computed(() => props.functions?.automateFunctions.items || [])
--- a/packages/frontend-2/components/project/page/automations/Header.vue
+++ b/packages/frontend-2/components/project/page/automations/Header.vue
@ -13,29 +13,22 @@
        v-bind="bind"
        v-on="on"
      />
-      <FormButton
-        :icon-left="ArrowTopRightOnSquareIcon"
-        color="outline"
-        class="shrink-0"
-        :to="automationFunctionsRoute"
-      >
-        Explore Functions
-      </FormButton>
-      <div v-tippy="disabledCreateBecauseOf" class="shrink-0">
+      <div v-tippy="creationDisabledReason" class="shrink-0">
        <FormButton
-          :icon-left="PlusIcon"
          class="shrink-0"
-          :disabled="!!disabledCreateBecauseOf"
+          :disabled="!!creationDisabledReason"
          @click="$emit('new-automation')"
        >
-          New
+          New automation
        </FormButton>
      </div>
+      <FormButton color="outline" class="shrink-0" :to="automationFunctionsRoute">
+        Explore functions
+      </FormButton>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon, PlusIcon } from '@heroicons/vue/20/solid'
 import { useDebouncedTextInput } from '@speckle/ui-components'
 import { automationFunctionsRoute } from '~/lib/common/helpers/route'

@ -45,7 +38,7 @@ defineEmits<{

 defineProps<{
  showEmptyState?: boolean
-  disabledCreateBecauseOf?: string
+  creationDisabledReason?: string
 }>()

 const search = defineModel<string>('search')
--- a/packages/frontend-2/components/project/page/automations/Row.vue
+++ b/packages/frontend-2/components/project/page/automations/Row.vue
@ -2,7 +2,7 @@
  <div class="bg-foundation border border-outline-3 rounded-lg pt-5 px-6 pb-6">
    <div class="flex w-full justify-between items-center mb-2">
      <div class="flex flex-col md:flex-row gap-4">
-        <div class="flex flex-row justify-start items-cetner gap-4">
+        <div class="flex flex-row justify-start items-center gap-2">
          <RouterLink
            class="h5 font-medium text-foreground hover:underline"
            :to="projectAutomationRoute(projectId, automation.id)"
@ -10,27 +10,25 @@
            {{ automation.name }}
          </RouterLink>
          <div>
-            <CommonBadge v-if="isTestAutomation" size="base">
-              Test Automation
-            </CommonBadge>
+            <CommonBadge v-if="isTestAutomation" rounded>Test Automation</CommonBadge>
          </div>
        </div>
        <template v-if="!isEnabled">
          <div>
-            <CommonBadge size="lg" color-classes="bg-danger-lighter text-danger-darker">
+            <CommonBadge rounded color-classes="bg-danger-lighter text-danger-darker">
              Disabled
            </CommonBadge>
          </div>
        </template>
      </div>

-      <CommonTextLink
-        class="font-medium"
+      <FormButton
+        color="outline"
+        size="sm"
        :to="projectAutomationRoute(projectId, automation.id)"
      >
-        View Details
-        <ChevronRightIcon class="ml-2 w-4 h-4" />
-      </CommonTextLink>
+        View details
+      </FormButton>
    </div>
    <div class="flex flex-col mb-6">
      <template v-if="triggerModels.length">
@ -45,10 +43,10 @@
      </template>
      <div
        v-else
-        class="flex items-center gap-1 truncate text-foreground-2 label-light"
+        class="flex items-center gap-1.5 truncate text-foreground-2 text-body-xs"
      >
-        <ExclamationTriangleIcon class="w-5 h-5" />
-        <span>No valid models attached to this automation</span>
+        <ExclamationTriangleIcon class="w-4 h-4" />
+        <span>No valid models are attached to this automation</span>
      </div>
    </div>
    <AutomateRunsTable
@ -59,11 +57,7 @@
  </div>
 </template>
 <script setup lang="ts">
-import {
-  ChevronRightIcon,
-  CubeIcon,
-  ExclamationTriangleIcon
-} from '@heroicons/vue/24/outline'
+import { CubeIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
 import { isNonNullable } from '@speckle/shared'
 import { graphql } from '~/lib/common/generated/gql'
 import { type ProjectPageAutomationsRow_AutomationFragment } from '~/lib/common/generated/gql/graphql'
--- a/packages/frontend-2/components/project/page/automations/ScaleImpactImage.vue
+++ b/packages/frontend-2/components/project/page/automations/ScaleImpactImage.vue
--- a/packages/frontend-2/components/project/page/automations/Tab.vue
+++ b/packages/frontend-2/components/project/page/automations/Tab.vue
@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col gap-8">
+  <div class="flex flex-col gap-y-4 md:gap-y-6">
    <ProjectPageAutomationsHeader
      v-model:search="search"
      :show-empty-state="shouldShowEmptyState"
-      :disabled-create-because-of="
+      :creation-disabled-reason="
        allowNewCreation !== true ? allowNewCreation : undefined
      "
      @new-automation="onNewAutomation"
@ -16,7 +16,7 @@
        v-if="shouldShowEmptyState"
        :functions="result"
        :is-automate-enabled="isAutomateEnabled"
-        :disabled-create-because-of="
+        :creation-disabled-reason="
          allowNewCreation !== true ? allowNewCreation : undefined
        "
        @new-automation="onNewAutomation"
--- a/packages/frontend-2/components/viewer/anchored-point/Thread.vue
+++ b/packages/frontend-2/components/viewer/anchored-point/Thread.vue
@ -15,13 +15,13 @@
            ? 'grayscale opacity-80 hover:grayscale-0 hover:opacity-100'
            : ''
        }
-        ${isExpanded ? 'outline outline-2 outline-primary' : ''}  
+        ${isExpanded ? 'outline outline-2 outline-primary' : ''}
        transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full`"
          @click="onThreadClick"
        >
-          <!-- 
-            Note: Unsure wether to display just a checkmark for "resolved" threads, or the author list and the checkmark. 
-            Both optinos are viable, see below. Uncomment to test. 
+          <!--
+            Note: Unsure wether to display just a checkmark for "resolved" threads, or the author list and the checkmark.
+            Both optinos are viable, see below. Uncomment to test.
          -->
          <!-- <UserAvatarGroup :users="threadAuthors" /> -->
          <UserAvatarGroup v-if="!modelValue.archived" :users="threadAuthors" />
--- a/packages/ui-components/src/components/common/steps/Number.vue
+++ b/packages/ui-components/src/components/common/steps/Number.vue
@ -9,10 +9,10 @@
          @click="(e) => switchStep(i, e)"
        >
          <div
-            class="flex space-x-3 items-center text-primary-focus normal font-medium leading-5"
+            class="flex space-x-3 items-center text-primary normal font-medium leading-5"
          >
            <div
-              class="shrink-0 h-8 w-8 rounded-full bg-primary-focus text-foreground-on-primary inline-flex items-center justify-center select-none"
+              class="shrink-0 h-8 w-8 rounded-full bg-primary text-foreground-on-primary inline-flex items-center justify-center select-none"
            >
              <CheckIcon class="w-5 h-5" />
            </div>
@ -32,10 +32,10 @@
          @click="(e) => switchStep(i, e)"
        >
          <div
-            class="flex space-x-3 items-center text-primary-focus normal font-medium leading-5"
+            class="flex space-x-3 items-center text-primary normal font-medium leading-5"
          >
            <div
-              class="shrink-0 h-8 w-8 rounded-full border-2 border-primary-focus inline-flex items-center justify-center select-none"
+              class="shrink-0 h-8 w-8 rounded-full border-2 border-primary inline-flex items-center justify-center select-none"
            >
              {{ getStepDisplayValue(i) }}
            </div>