From 3fe58d5bcc1bae199de1430fb17ef4e1ca457fb8 Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Tue, 26 Nov 2024 12:22:39 +0100
Subject: [PATCH] Fix: Clean up automate styling (#3550)

---
 .../components/automate/function/Card.vue     | 13 ++----
 .../automate/function/page/Header.vue         | 14 +++---
 .../automate/function/page/Info.vue           | 43 +++++--------------
 .../automate/function/page/InfoBlock.vue      |  8 +---
 .../function/page/ParametersDialog.vue        | 26 +++++++----
 .../automate/functions/page/Header.vue        |  5 ++-
 .../components/automate/runs/Table.vue        |  5 +--
 .../automate/runs/trigger-status/Dialog.vue   | 12 +++---
 .../components/automate/viewer/Panel.vue      |  8 ++--
 .../automate/viewer/panel/FunctionRunRow.vue  | 26 ++++++-----
 .../components/common/CodeOutput.vue          |  2 +-
 .../components/common/prose/GithubReadme.vue  | 10 ++---
 .../project/page/automation/Functions.vue     |  2 +-
 .../project/page/automation/Runs.vue          |  4 +-
 .../project/page/automations/Row.vue          |  4 +-
 .../project/page/automations/RunDialog.vue    | 14 ++----
 .../developer/AccessTokens/AccessTokens.vue   |  9 +---
 .../developer/Applications/Applications.vue   | 13 ++----
 .../user/developer/AuthorizedApps.vue         |  5 +--
 .../settings/user/developer/Developer.vue     |  6 +--
 .../lib/automate/composables/runStatus.ts     |  8 ++--
 .../src/components/form/TextArea.vue          |  2 +-
 22 files changed, 90 insertions(+), 149 deletions(-)

diff --git a/packages/frontend-2/components/automate/function/Card.vue b/packages/frontend-2/components/automate/function/Card.vue
index 3d0412d0f..7652e0043 100644
--- a/packages/frontend-2/components/automate/function/Card.vue
+++ b/packages/frontend-2/components/automate/function/Card.vue
@@ -39,13 +39,8 @@
       </div>
       <div v-if="!noButtons" class="flex flex-col sm:flex-row gap-x-1">
         <template v-if="showEdit">
-          <FormButton
-            :icon-left="PencilIcon"
-            full-width
-            color="outline"
-            @click="$emit('edit')"
-          >
-            Edit Details
+          <FormButton full-width color="outline" @click="$emit('edit')">
+            Edit details
           </FormButton>
         </template>
         <template v-else>
@@ -71,7 +66,7 @@
           class="rounded-bl-md rounded-tr-lg font-medium text-body-3xs px-2 py-1"
           :class="{
             'bg-info-lighter text-outline-4': fn.isFeatured,
-            'bg-warning text-foreground-on-primary': isOutdated
+            'bg-danger-lighter text-danger-darker': isOutdated
           }"
         >
           <template v-if="isOutdated">Outdated</template>
@@ -84,7 +79,7 @@
 <script setup lang="ts">
 import { graphql } from '~/lib/common/generated/gql'
 import type { AutomationsFunctionsCard_AutomateFunctionFragment } from '~/lib/common/generated/gql/graphql'
-import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline'
+import { CheckIcon } from '@heroicons/vue/24/outline'
 import { automationFunctionRoute } from '~/lib/common/helpers/route'
 import { useMarkdown } from '~/lib/common/composables/markdown'
 
diff --git a/packages/frontend-2/components/automate/function/page/Header.vue b/packages/frontend-2/components/automate/function/page/Header.vue
index 3e826a20e..f0336c0ca 100644
--- a/packages/frontend-2/components/automate/function/page/Header.vue
+++ b/packages/frontend-2/components/automate/function/page/Header.vue
@@ -3,12 +3,10 @@
     <Portal to="navigation">
       <HeaderNavLink
         :to="automationFunctionsRoute"
-        :name="'Automate functions'"
-      ></HeaderNavLink>
-      <HeaderNavLink
-        :to="automationFunctionRoute(fn.id)"
-        :name="fn.name"
-      ></HeaderNavLink>
+        :separator="false"
+        name="Automate functions"
+      />
+      <HeaderNavLink :to="automationFunctionRoute(fn.id)" :name="fn.name" />
     </Portal>
     <div class="flex items-center gap-4">
       <AutomateFunctionLogo :logo="fn.logo" />
@@ -24,19 +22,17 @@
       class="flex gap-2 shrink-0"
     >
       <FormButton
-        :icon-left="BoltIcon"
         class="shrink-0"
         full-width
         :disabled="!hasReleases"
         @click="$emit('createAutomation')"
       >
-        Use in an automation
+        Use in automation
       </FormButton>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { BoltIcon } from '@heroicons/vue/24/outline'
 import { graphql } from '~/lib/common/generated/gql'
 import type { AutomateFunctionPageHeader_FunctionFragment } from '~/lib/common/generated/gql/graphql'
 import {
diff --git a/packages/frontend-2/components/automate/function/page/Info.vue b/packages/frontend-2/components/automate/function/page/Info.vue
index a04eac8e1..c2cfe5fcf 100644
--- a/packages/frontend-2/components/automate/function/page/Info.vue
+++ b/packages/frontend-2/components/automate/function/page/Info.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="flex flex-col gap-6">
     <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
-      <AutomateFunctionPageInfoBlock :icon="CodeBracketIcon" title="Source">
+      <AutomateFunctionPageInfoBlock title="Source">
         <div class="space-y-1">
           <CommonTextLink
             v-tippy="license"
             external
             :to="repoUrl"
             target="_blank"
-            :icon-right="ArrowTopRightOnSquareIcon"
             class="max-w-full"
           >
             <span class="truncate">{{ repo }}</span>
@@ -19,7 +18,6 @@
               external
               :to="githubDetails.owner.html_url"
               target="_blank"
-              :icon-right="ArrowTopRightOnSquareIcon"
               class="max-w-full"
             >
               <span class="truncate">
@@ -34,36 +32,26 @@
           </div>
         </div>
       </AutomateFunctionPageInfoBlock>
-      <AutomateFunctionPageInfoBlock :icon="InformationCircleIcon" title="Info">
-        <div class="gap-y-2 text-body-sm">
+      <AutomateFunctionPageInfoBlock title="Info">
+        <div class="gap-y-2 text-body-xs">
           <div v-if="latestRelease">
-            <span>Last published:&nbsp;</span>
-            <CommonText class="font-medium" :text="publishedAt" />
+            <span class="font-medium">Last published:&nbsp;</span>
+            <CommonText :text="publishedAt" />
           </div>
           <div>
-            <span>Used by:&nbsp;</span>
-            <CommonText
-              class="font-medium"
-              :text="`${fn.automationCount} automations`"
-            />
+            <span class="font-medium">Used by:&nbsp;</span>
+            <CommonText :text="`${fn.automationCount} automations`" />
           </div>
-          <CommonTextLink
-            v-if="latestRelease?.inputSchema"
-            :icon-right="ArrowTopRightOnSquareIcon"
-            @click="onViewParameters"
-          >
+          <CommonTextLink v-if="latestRelease?.inputSchema" @click="onViewParameters">
             View parameters
           </CommonTextLink>
         </div>
       </AutomateFunctionPageInfoBlock>
     </div>
-    <AutomateFunctionPageInfoBlock
-      title="Description"
-      :icon="ChatBubbleBottomCenterTextIcon"
-    >
+    <AutomateFunctionPageInfoBlock title="Description">
       <CommonProseMarkdownDescription :markdown="description" />
     </AutomateFunctionPageInfoBlock>
-    <AutomateFunctionPageInfoBlock title="Readme" :icon="BookOpenIcon">
+    <AutomateFunctionPageInfoBlock title="Readme">
       <CommonProseGithubReadme
         :readme-markdown="rawReadme || ''"
         :repo="repo || ''"
@@ -86,12 +74,11 @@
         class="shrink-0"
       >
         <FormButton
-          :icon-left="BoltIcon"
           class="shrink-0"
           :disabled="!hasReleases"
           @click="$emit('createAutomation')"
         >
-          Use in an automation
+          Use in automation
         </FormButton>
       </div>
     </div>
@@ -103,14 +90,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import {
-  CodeBracketIcon,
-  InformationCircleIcon,
-  ArrowTopRightOnSquareIcon,
-  BookOpenIcon,
-  BoltIcon,
-  ChatBubbleBottomCenterTextIcon
-} from '@heroicons/vue/24/outline'
 import dayjs from 'dayjs'
 import {
   useGetGithubRepo,
diff --git a/packages/frontend-2/components/automate/function/page/InfoBlock.vue b/packages/frontend-2/components/automate/function/page/InfoBlock.vue
index d3681f199..e22866efd 100644
--- a/packages/frontend-2/components/automate/function/page/InfoBlock.vue
+++ b/packages/frontend-2/components/automate/function/page/InfoBlock.vue
@@ -2,9 +2,8 @@
   <div
     class="bg-foundation basis-1/2 shrink-0 grow-0 border border-outline-3 rounded-lg"
   >
-    <div class="flex items-center gap-2 px-4 py-2 border-b border-outline-3 mb-4">
-      <Component :is="icon" class="w-5 h-5" />
-      <h3 class="text-heading">{{ title }}</h3>
+    <div class="px-4 py-2 border-b border-outline-3 mb-4">
+      <h3 class="text-heading-sm">{{ title }}</h3>
     </div>
     <div class="px-4 pb-4">
       <slot />
@@ -12,10 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import type { PropAnyComponent } from '@speckle/ui-components'
-
 defineProps<{
-  icon: PropAnyComponent
   title: string
 }>()
 </script>
diff --git a/packages/frontend-2/components/automate/function/page/ParametersDialog.vue b/packages/frontend-2/components/automate/function/page/ParametersDialog.vue
index 439ee486d..e70422424 100644
--- a/packages/frontend-2/components/automate/function/page/ParametersDialog.vue
+++ b/packages/frontend-2/components/automate/function/page/ParametersDialog.vue
@@ -1,19 +1,19 @@
 <template>
-  <LayoutDialog v-model:open="open" max-width="md" title="Function Parameters">
+  <LayoutDialog
+    v-model:open="open"
+    :buttons="dialogButtons"
+    max-width="md"
+    title="Function parameters"
+  >
     <div class="flex flex-col space-y-4">
       <template v-if="finalParams">
         <FormJsonForm :schema="finalParams" />
-        <LayoutDialogSection
-          title="Parameter schema"
-          :icon="BeakerIcon"
-          border-t
-          border-b
-        >
+        <LayoutDialogSection title="Parameter schema" border-t border-b>
           <FormTextArea
             name="actionYaml"
             readonly
             :model-value="JSON.stringify(finalParams, null, 2)"
-            class="text-sm text-primary"
+            textarea-classes="!bg-foundation !border border-outline-2 p-2 rounded-lg font-mono !font-body-2xs"
             rows="15"
           />
         </LayoutDialogSection>
@@ -27,11 +27,11 @@
   </LayoutDialog>
 </template>
 <script setup lang="ts">
-import { BeakerIcon } from '@heroicons/vue/24/outline'
 import { LayoutDialogSection } from '@speckle/ui-components'
 import { formatVersionParams } from '~/lib/automate/helpers/jsonSchema'
 import { graphql } from '~/lib/common/generated/gql'
 import type { AutomateFunctionPageParametersDialog_AutomateFunctionReleaseFragment } from '~/lib/common/generated/gql/graphql'
+import type { LayoutDialogButton } from '@speckle/ui-components'
 
 graphql(`
   fragment AutomateFunctionPageParametersDialog_AutomateFunctionRelease on AutomateFunctionRelease {
@@ -46,4 +46,12 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { required: true })
 const finalParams = computed(() => formatVersionParams(props.release.inputSchema))
+
+const dialogButtons = computed((): LayoutDialogButton[] => [
+  {
+    text: 'Close',
+    props: { color: 'outline' },
+    onClick: () => (open.value = false)
+  }
+])
 </script>
diff --git a/packages/frontend-2/components/automate/functions/page/Header.vue b/packages/frontend-2/components/automate/functions/page/Header.vue
index a018d1278..86d6e471a 100644
--- a/packages/frontend-2/components/automate/functions/page/Header.vue
+++ b/packages/frontend-2/components/automate/functions/page/Header.vue
@@ -4,11 +4,12 @@
       <HeaderNavLink
         :separator="false"
         :to="automationFunctionsRoute"
-        :name="'Automate functions'"
+        name="Automate functions"
+        :seperator="false"
       />
     </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>
+      <h1 class="text-heading-lg">Automate functions</h1>
       <div class="flex flex-row gap-2">
         <div class="flex-1">
           <FormTextInput
diff --git a/packages/frontend-2/components/automate/runs/Table.vue b/packages/frontend-2/components/automate/runs/Table.vue
index 0dad5376a..e906deb09 100644
--- a/packages/frontend-2/components/automate/runs/Table.vue
+++ b/packages/frontend-2/components/automate/runs/Table.vue
@@ -2,7 +2,7 @@
   <div>
     <LayoutTable
       :columns="[
-        { id: 'status', header: 'status', classes: 'col-span-2' },
+        { id: 'status', header: 'Status', classes: 'col-span-2' },
         { id: 'runId', header: 'Run ID', classes: 'col-span-3' },
         { id: 'modelVersion', header: 'Model version', classes: 'col-span-3' },
         { id: 'date', header: 'Date', classes: 'col-span-2' },
@@ -13,8 +13,7 @@
         {
           icon: EyeIcon,
           label: 'View',
-          action: onView,
-          class: '!text-primary'
+          action: onView
         }
       ]"
       empty-message="Automation does not have any runs"
diff --git a/packages/frontend-2/components/automate/runs/trigger-status/Dialog.vue b/packages/frontend-2/components/automate/runs/trigger-status/Dialog.vue
index 822e9616d..f80a854b1 100644
--- a/packages/frontend-2/components/automate/runs/trigger-status/Dialog.vue
+++ b/packages/frontend-2/components/automate/runs/trigger-status/Dialog.vue
@@ -3,13 +3,11 @@
     <template #header>
       <div class="flex flex-col">
         <div class="flex items-center space-x-2 max-w-full w-full">
-          <div class="mt-[6px] shrink-0">
-            <AutomateRunsTriggerStatusIcon
-              :summary="summary"
-              class="h-6 w-6 sm:h-10 sm:w-10"
-            />
-          </div>
-          <div class="flex min-w-0 flex-col gap-1">
+          <AutomateRunsTriggerStatusIcon
+            :summary="summary"
+            class="h-6 w-6 sm:h-10 sm:w-10"
+          />
+          <div class="flex min-w-0 flex-col gap-0.5">
             <h4 :class="[`h6 sm:h5 font-medium whitespace-normal`, summary.titleColor]">
               {{ summary.title }}
             </h4>
diff --git a/packages/frontend-2/components/automate/viewer/Panel.vue b/packages/frontend-2/components/automate/viewer/Panel.vue
index c60d75cfb..a479b8f09 100644
--- a/packages/frontend-2/components/automate/viewer/Panel.vue
+++ b/packages/frontend-2/components/automate/viewer/Panel.vue
@@ -3,11 +3,9 @@
     <ViewerLayoutPanel @close="$emit('close')">
       <template #title>Automate</template>
 
-      <div class="flex items-center space-x-2 w-full pl-3 mt-2">
-        <div class="mt-[6px] shrink-0">
-          <AutomateRunsTriggerStatusIcon :summary="summary" class="h-6 w-6" />
-        </div>
-        <div class="flex min-w-0 flex-col gap-1">
+      <div class="flex items-center space-x-2 w-full pl-3 mt-3 mb-1">
+        <AutomateRunsTriggerStatusIcon :summary="summary" class="h-6 w-6" />
+        <div class="flex min-w-0 flex-col gap-0.5">
           <h4 :class="[`label font-medium whitespace-normal`, summary.titleColor]">
             {{ summary.title }}
           </h4>
diff --git a/packages/frontend-2/components/automate/viewer/panel/FunctionRunRow.vue b/packages/frontend-2/components/automate/viewer/panel/FunctionRunRow.vue
index 2cb244b52..ace26f50f 100644
--- a/packages/frontend-2/components/automate/viewer/panel/FunctionRunRow.vue
+++ b/packages/frontend-2/components/automate/viewer/panel/FunctionRunRow.vue
@@ -1,11 +1,9 @@
 <template>
   <div
-    :class="`border border-blue-500/10 rounded-md space-y-2 overflow-hidden ${
-      expanded ? 'shadow' : ''
-    }`"
+    class="border border-outline-2 rounded-md space-y-2 overflow-hidden bg-foundation shadow-sm"
   >
     <button
-      class="flex space-x-1 items-center max-w-full w-full px-1 py-1 h-8 transition hover:bg-primary-muted"
+      class="flex space-x-1.5 items-center max-w-full w-full px-2 py-1 h-8 transition hover:bg-primary-muted bg-foundation"
       @click="expanded = !expanded"
     >
       <div>
@@ -16,7 +14,7 @@
         />
       </div>
       <AutomateFunctionLogo :logo="functionRun.function?.logo" size="xs" />
-      <div class="font-medium text-xs truncate">
+      <div class="font-medium text-body-2xs truncate">
         {{ automationName ? automationName + ' / ' : ''
         }}{{ functionRun.function?.name || 'Unknown function' }}
       </div>
@@ -31,11 +29,11 @@
         </button>
       </div>
     </button>
-    <div v-if="expanded" class="px-2 pb-2 space-y-4">
+    <div v-if="expanded" class="px-3 pb-2 space-y-4">
       <!-- Status message -->
       <div class="space-y-1">
-        <div class="text-xs font-medium text-foreground-2">Status</div>
-        <div class="text-xs text-foreground-2 italic whitespace-pre-wrap">
+        <div class="text-body-2xs font-medium text-foreground">Status</div>
+        <div class="text-body-2xs text-foreground-2 whitespace-pre-wrap">
           {{ statusMessage }}
         </div>
       </div>
@@ -43,9 +41,9 @@
       <!-- Attachments -->
       <div
         v-if="attachments.length !== 0"
-        class="border-t pt-2 border-foreground-2 space-y-1"
+        class="border-t pt-2 border-outline-2 space-y-1"
       >
-        <div class="text-xs font-medium text-foreground-2">Attachments</div>
+        <div class="text-body-2xs font-medium text-foreground-2">Attachments</div>
         <div class="ml-[2px] justify-start">
           <AutomateRunsAttachmentButton
             v-for="id in attachments"
@@ -59,11 +57,11 @@
         </div>
       </div>
       <!-- Context view -->
-      <div v-if="hasValidContextView" class="border-t pt-2 border-foreground-2">
+      <div v-if="hasValidContextView" class="border-t pt-2 border-outline-2">
         <div>
           <FormButton
             size="sm"
-            link
+            color="outline"
             class="truncate max-w-full"
             :to="functionRun.contextView || ''"
           >
@@ -74,9 +72,9 @@
       <!-- Results -->
       <div
         v-if="!!results?.values.objectResults.length"
-        class="border-t pt-2 border-foreground-2"
+        class="border-t pt-2 border-outline-2"
       >
-        <div class="text-xs font-medium text-foreground-2 mb-2">Results</div>
+        <div class="text-body-2xs font-medium text-foreground-2 mb-2">Results</div>
         <div class="space-y-1">
           <AutomateViewerPanelFunctionRunRowObjectResult
             v-for="(result, index) in results.values.objectResults.slice(
diff --git a/packages/frontend-2/components/common/CodeOutput.vue b/packages/frontend-2/components/common/CodeOutput.vue
index 2f7ad5312..3d5ffbbb9 100644
--- a/packages/frontend-2/components/common/CodeOutput.vue
+++ b/packages/frontend-2/components/common/CodeOutput.vue
@@ -14,7 +14,7 @@
       :icon-left="ClipboardDocumentIcon"
       hide-text
       @click="onCopy"
-    ></FormButton>
+    />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/frontend-2/components/common/prose/GithubReadme.vue b/packages/frontend-2/components/common/prose/GithubReadme.vue
index ad43f28b5..3615241b8 100644
--- a/packages/frontend-2/components/common/prose/GithubReadme.vue
+++ b/packages/frontend-2/components/common/prose/GithubReadme.vue
@@ -1,11 +1,9 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div
-    v-if="cleanReadmeHtml.length"
-    :class="proseClasses"
-    v-html="cleanReadmeHtml"
-  ></div>
-  <div v-else class="italic text-center">No readme found</div>
+  <div v-if="cleanReadmeHtml.length" :class="proseClasses" v-html="cleanReadmeHtml" />
+  <div v-else class="text-foreground-2 text-body-xs text-center italic">
+    No readme found
+  </div>
 </template>
 <script setup lang="ts">
 import type { Nullable } from '@speckle/shared'
diff --git a/packages/frontend-2/components/project/page/automation/Functions.vue b/packages/frontend-2/components/project/page/automation/Functions.vue
index 52e242a50..3a5a274c8 100644
--- a/packages/frontend-2/components/project/page/automation/Functions.vue
+++ b/packages/frontend-2/components/project/page/automation/Functions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-1">
+  <div>
     <h2 class="h6 font-medium mb-6">Function</h2>
     <AutomateFunctionCardView v-if="functions.length" vertical>
       <AutomateFunctionCard
diff --git a/packages/frontend-2/components/project/page/automation/Runs.vue b/packages/frontend-2/components/project/page/automation/Runs.vue
index 6e9c00558..5ea42de33 100644
--- a/packages/frontend-2/components/project/page/automation/Runs.vue
+++ b/packages/frontend-2/components/project/page/automation/Runs.vue
@@ -4,11 +4,10 @@
       <h2 class="h6 font-medium">Runs</h2>
       <FormButton
         v-if="!automation.isTestAutomation"
-        :icon-left="ArrowPathIcon"
         :disabled="!automation.enabled"
         @click="onTrigger"
       >
-        Trigger Automation
+        Trigger automation
       </FormButton>
     </div>
     <AutomateRunsTable
@@ -20,7 +19,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ArrowPathIcon } from '@heroicons/vue/24/outline'
 import { usePaginatedQuery } from '~/lib/common/composables/graphql'
 import { graphql } from '~/lib/common/generated/gql'
 import type { ProjectPageAutomationRuns_AutomationFragment } from '~/lib/common/generated/gql/graphql'
diff --git a/packages/frontend-2/components/project/page/automations/Row.vue b/packages/frontend-2/components/project/page/automations/Row.vue
index 3e418940b..a6782e866 100644
--- a/packages/frontend-2/components/project/page/automations/Row.vue
+++ b/packages/frontend-2/components/project/page/automations/Row.vue
@@ -33,7 +33,7 @@
     <div class="flex flex-col mb-6">
       <template v-if="triggerModels.length">
         <div class="flex gap-2">
-          <div class="mt-1">{{ triggerLabel }}</div>
+          <p class="mt-1 text-body-xs">{{ triggerLabel }}</p>
           <div v-for="model in triggerModels" :key="model.id" class="truncate">
             <CommonTextLink :icon-left="CubeIcon" :to="finalModelUrl(model.id)">
               {{ model.name }}
@@ -43,7 +43,7 @@
       </template>
       <div
         v-else
-        class="flex items-center gap-1.5 truncate text-foreground-2 text-body-xs"
+        class="flex items-center gap-1.5 truncate text-danger-darker text-body-xs"
       >
         <ExclamationTriangleIcon class="w-4 h-4" />
         <span>No valid models are attached to this automation</span>
diff --git a/packages/frontend-2/components/project/page/automations/RunDialog.vue b/packages/frontend-2/components/project/page/automations/RunDialog.vue
index 7756c62a5..c7a11fde4 100644
--- a/packages/frontend-2/components/project/page/automations/RunDialog.vue
+++ b/packages/frontend-2/components/project/page/automations/RunDialog.vue
@@ -7,14 +7,13 @@
         onClick: () => {
           open = false
         },
-        props: { color: 'outline', fullWidth: true }
+        props: { color: 'outline' }
       },
       ...(run && projectId && run.trigger.model && run.trigger.version
         ? [
             {
-              text: 'View Model Version',
+              text: 'View model version',
               props: {
-                fullWidth: true,
                 to: versionUrl({
                   projectId,
                   modelId: run.trigger.model.id,
@@ -29,13 +28,8 @@
     <template #header>
       <div class="flex flex-col">
         <div class="flex items-center space-x-2 max-w-full w-full">
-          <div class="mt-[6px] shrink-0">
-            <AutomateRunsTriggerStatusIcon
-              :summary="summary"
-              class="h-6 w-6 sm:h-10 sm:w-10"
-            />
-          </div>
-          <div>Run Details</div>
+          <AutomateRunsTriggerStatusIcon :summary="summary" class="h-5 w-5" />
+          <div>Run details</div>
         </div>
       </div>
     </template>
diff --git a/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue b/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
index 200754300..03b273938 100644
--- a/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
+++ b/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
@@ -8,7 +8,6 @@
           props: {
             color: 'outline',
             to: 'https://speckle.guide/dev/tokens.html',
-            iconLeft: BookOpenIcon,
             target: '_blank',
             external: true
           },
@@ -16,7 +15,6 @@
         },
         {
           props: {
-            iconLeft: PlusIcon,
             onClick: openCreateTokenDialog
           },
           label: 'New token'
@@ -93,12 +91,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import {
-  PlusIcon,
-  BookOpenIcon,
-  EllipsisHorizontalIcon,
-  XMarkIcon
-} from '@heroicons/vue/24/outline'
+import { EllipsisHorizontalIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { developerSettingsAccessTokensQuery } from '~~/lib/developer-settings/graphql/queries'
 import type { TokenItem } from '~~/lib/developer-settings/helpers/types'
 import { HorizontalDirection } from '~~/lib/common/composables/window'
diff --git a/packages/frontend-2/components/settings/user/developer/Applications/Applications.vue b/packages/frontend-2/components/settings/user/developer/Applications/Applications.vue
index 2c89bbe41..76ab1f821 100644
--- a/packages/frontend-2/components/settings/user/developer/Applications/Applications.vue
+++ b/packages/frontend-2/components/settings/user/developer/Applications/Applications.vue
@@ -9,15 +9,13 @@
             color: 'outline',
             to: 'https://speckle.guide/dev/apps.html',
             target: '_blank',
-            external: true,
-            iconLeft: BookOpenIcon
+            external: true
           },
           label: 'Open docs'
         },
         {
           props: {
-            onClick: openCreateApplicationDialog,
-            iconLeft: PlusIcon
+            onClick: openCreateApplicationDialog
           },
           label: 'New application'
         }
@@ -91,12 +89,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import {
-  PlusIcon,
-  BookOpenIcon,
-  EllipsisHorizontalIcon,
-  XMarkIcon
-} from '@heroicons/vue/24/outline'
+import { EllipsisHorizontalIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { developerSettingsApplicationsQuery } from '~~/lib/developer-settings/graphql/queries'
 import type { ApplicationItem } from '~~/lib/developer-settings/helpers/types'
 import { HorizontalDirection } from '~~/lib/common/composables/window'
diff --git a/packages/frontend-2/components/settings/user/developer/AuthorizedApps.vue b/packages/frontend-2/components/settings/user/developer/AuthorizedApps.vue
index 4665434dd..730df9429 100644
--- a/packages/frontend-2/components/settings/user/developer/AuthorizedApps.vue
+++ b/packages/frontend-2/components/settings/user/developer/AuthorizedApps.vue
@@ -9,8 +9,7 @@
             color: 'outline',
             to: 'https://speckle.guide/dev/apps.html',
             target: '_blank',
-            external: true,
-            iconLeft: BookOpenIcon
+            external: true
           },
           label: 'Open docs'
         }
@@ -67,7 +66,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import { BookOpenIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { developerSettingsAuthorizedAppsQuery } from '~~/lib/developer-settings/graphql/queries'
 import type { AuthorizedAppItem } from '~~/lib/developer-settings/helpers/types'
 
diff --git a/packages/frontend-2/components/settings/user/developer/Developer.vue b/packages/frontend-2/components/settings/user/developer/Developer.vue
index 96b7cd4dd..bf046a02f 100644
--- a/packages/frontend-2/components/settings/user/developer/Developer.vue
+++ b/packages/frontend-2/components/settings/user/developer/Developer.vue
@@ -17,11 +17,10 @@
                   props: {
                     color: 'outline',
                     target: '_blank',
-                    external: true,
-                    iconLeft: BookOpenIcon
+                    external: true
                   },
                   onClick: goToExplorer,
-                  label: 'Open docs'
+                  label: 'Open explorer'
                 }
               ]"
             />
@@ -44,7 +43,6 @@
 </template>
 
 <script setup lang="ts">
-import { BookOpenIcon } from '@heroicons/vue/24/outline'
 import type {
   TokenItem,
   ApplicationItem,
diff --git a/packages/frontend-2/lib/automate/composables/runStatus.ts b/packages/frontend-2/lib/automate/composables/runStatus.ts
index 6cfbbaa02..2c5e4efd3 100644
--- a/packages/frontend-2/lib/automate/composables/runStatus.ts
+++ b/packages/frontend-2/lib/automate/composables/runStatus.ts
@@ -58,7 +58,7 @@ export const useFunctionRunsStatusSummary = (params: {
       passed: 0,
       inProgress: 0,
       total: allFunctionRuns.length,
-      title: 'All runs passed.',
+      title: 'All runs passed',
       titleColor: 'text-success',
       longSummary: ''
     }
@@ -72,13 +72,13 @@ export const useFunctionRunsStatusSummary = (params: {
         case AutomateRunStatus.Exception:
         case AutomateRunStatus.Timeout:
         case AutomateRunStatus.Canceled:
-          result.title = 'Some runs failed.'
+          result.title = 'Some runs failed'
           result.titleColor = 'text-danger'
           result.failed++
           break
         default:
           if (result.failed === 0) {
-            result.title = 'Some runs are still in progress.'
+            result.title = 'Some runs are still in progress'
             result.titleColor = 'text-warning'
           }
           result.inProgress++
@@ -97,7 +97,7 @@ export const useFunctionRunsStatusSummary = (params: {
     if (result.failed > 0) longSummarySegments.push(`${result.failed} failed`)
 
     result.longSummary = (
-      longSummarySegments.join(', ') + ` run${result.total > 1 ? 's' : ''}.`
+      longSummarySegments.join(', ') + ` run${result.total > 1 ? 's' : ''}`
     ).replace(/,(?=[^,]+$)/, ', and')
 
     return result
diff --git a/packages/ui-components/src/components/form/TextArea.vue b/packages/ui-components/src/components/form/TextArea.vue
index 3ce0f5099..e7ec2fd1d 100644
--- a/packages/ui-components/src/components/form/TextArea.vue
+++ b/packages/ui-components/src/components/form/TextArea.vue
@@ -16,7 +16,7 @@
           coreClasses,
           iconClasses,
           textareaClasses || '',
-          'min-h-[6rem] sm:min-h-[3rem] simple-scrollbar text-sm'
+          'min-h-[6rem] sm:min-h-[3rem] simple-scrollbar text-body-xs'
         ]"
         :placeholder="placeholder"
         :disabled="disabled"