feat(frontend): Landing rework (#630)

* feat(frontend): Use common components on the landing pae

* feat(frontend): Use shared icon

frontend/src/lib/components/common/actionRow/ActionRow.svelte

@@ -8,20 +8,20 @@
 		class={'w-full flex flex-wrap justify-between items-center gap-4 ' +
 			(applyPageWidth ? classes : '')}
 	>
-		{#if $$slots.left}
-			<div class="flex flex-wrap items-center gap-2">
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.left}
 				<slot name="left" />
-			</div>
-		{/if}
-		{#if $$slots.middle}
-			<div class="flex flex-wrap items-center gap-2">
+			{/if}
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.middle}
 				<slot name="middle" />
-			</div>
-		{/if}
-		{#if $$slots.right}
-			<div class="flex flex-wrap items-center gap-2">
+			{/if}
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.right}
 				<slot name="right" />
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
 </div>

frontend/src/lib/components/common/button/Button.svelte

@@ -48,8 +48,8 @@
 	}
 
 	const spacingClasses: Record<Button.Size, string> = {
-		xs: 'px-2.5 py-1',
-		sm: 'px-2.5 py-1',
+		xs: 'px-3 py-1.5',
+		sm: 'px-3 py-1.5',
 		md: 'px-4 py-2',
 		lg: 'px-4 py-2',
 		xl: 'px-4 py-2'

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -132,7 +132,7 @@ export async function createScriptFromInlineScript({
 
 	const path = `${flow.path}/${suffix}`
 	const forkedDescription = wasForked ? `as a fork of ${originalScriptPath}` : ''
-	const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}}.`
+	const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}.`
 
 	const availablePath = await findNextAvailablePath(path)
 
@@ -206,13 +206,12 @@ export function getStepPropPicker(
 	const flowInput = schemaToObject(flowInputSchema, args)
 	const results = getPreviousResults(flowState.modules, parentIndex)
 
-
 	const lastResult =
 		parentIndex == 0
 			? flowInput
 			: results.length > 0
-				? results[results.length - 1]
-				: NEVER_TESTED_THIS_FAR
+			? results[results.length - 1]
+			: NEVER_TESTED_THIS_FAR
 
 	if (isInsideLoop) {
 		let forLoopFlowInput = {
@@ -236,8 +235,8 @@ export function getStepPropPicker(
 			childIndex == 0
 				? forLoopFlowInput
 				: innerResults.length > 0
-					? innerResults[innerResults.length - 1]
-					: NEVER_TESTED_THIS_FAR
+				? innerResults[innerResults.length - 1]
+				: NEVER_TESTED_THIS_FAR
 
 		const extraLib = buildExtraLib(
 			objectToTsType(forLoopFlowInput),
@@ -294,32 +293,34 @@ function getResult(job: Job | undefined): Result | undefined {
 	}
 }
 
-export function mapJobResultsToFlowState(
-	jobs: JobResult,
-	upto: number
-): void {
-
+export function mapJobResultsToFlowState(jobs: JobResult, upto: number): void {
 	const results = jobs.innerJobs.map(({ job, loopJobs }) => {
 		if (loopJobs && loopJobs.length > 0) {
-			return [job?.args, loopJobs.map(({ job }) => {
-				return getResult(job)
-			})]
+			return [
+				job?.args,
+				loopJobs.map(({ job }) => {
+					return getResult(job)
+				})
+			]
 		} else {
 			return [job?.args, getResult(job)]
 		}
 	})
 
-
-
 	const old = get(flowStateStore)
 	const modules = old.modules.map((flowModuleState: FlowModuleState, index: number) => {
 		if (results[index] && index <= upto) {
-			if (results[index][1] != NEVER_TESTED_THIS_FAR || flowModuleState.previewResult == undefined) {
+			if (
+				results[index][1] != NEVER_TESTED_THIS_FAR ||
+				flowModuleState.previewResult == undefined
+			) {
 				flowModuleState.previewArgs = results[index][0]
 				flowModuleState.previewResult = results[index][1]
 				flowModuleState.childFlowModules?.map((innerMod, j) => {
 					const lastLoopJob = jobs.innerJobs[index].loopJobs?.length ?? 0
-					innerMod.previewResult = getResult(jobs.innerJobs[index].loopJobs?.[lastLoopJob - 1]?.innerJobs?.[j]?.job)
+					innerMod.previewResult = getResult(
+						jobs.innerJobs[index].loopJobs?.[lastLoopJob - 1]?.innerJobs?.[j]?.job
+					)
 				})
 			}
 		}
@@ -332,4 +333,3 @@ export function mapJobResultsToFlowState(
 		failureModule: old.failureModule
 	})
 }
-

frontend/src/lib/components/icons/HatIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	let clazz: string = ''
+	export { clazz as class }
+</script>
+
+<svg
+	class={clazz}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+		d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+	/><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+	/>
+</svg>

frontend/src/lib/components/landing/FlowGettingStarted.svelte

@@ -1,25 +1,14 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
@@ -29,67 +18,32 @@
 		the Hub!
 	</div>
 	<div class="inline-flex flex-wrap gap-y-2">
-		<button
-			type="button"
+		<Button
 			on:click={() => goto('flows/add')}
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create flow
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/flows')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Flow documentation
-		</button>
-		<button
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center "
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community flows on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

frontend/src/lib/components/landing/RessourceGettingStarted.svelte

@@ -1,51 +1,21 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faLink } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
 		Connect to apps like Slack, Google Drive or Airtable using OAuth.
 	</div>
-	<div class="flex">
-		<button
-			on:click={() => goto('resources')}
-			type="button"
-			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center  dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-				/>
-			</svg>
-			Connect an API
-		</button>
-	</div>
+	<Button on:click={() => goto('resources')} color="dark" startIcon={{ icon: faLink }} size="xs">
+		Connect an API
+	</Button>
 </div>

frontend/src/lib/components/landing/ScriptBox.svelte

@@ -3,6 +3,8 @@
 	import type { Script } from '$lib/gen'
 
 	import { truncateHash } from '$lib/utils'
+	import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons'
+	import { Button, Badge, ActionRow } from '$lib/components/common'
 
 	export let script: Script
 </script>
@@ -16,70 +18,41 @@
 	<div class="inline-flex justify-between w-full">
 		<div class="text-xs">{script.path}</div>
 
-		<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
+		<Badge color="gray">
 			{truncateHash(script.hash)}
-		</span>
+		</Badge>
 	</div>
 	<div class="inline-flex space-x-1 w-full">
-		<span class="bg-blue-100 text-blue-800 text-xs font-semibold  px-2.5 py-0.5 rounded ">
-			{String(script.language).toUpperCase()}
-		</span>
-		{#if script.kind != 'script'}
-			<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
+		<Badge color="blue" capitalize>
+			{script.language}
+		</Badge>
+		{#if script.kind !== 'script'}
+			<Badge color="green" capitalize>
 				{script.kind}
-			</span>
+			</Badge>
 		{/if}
 	</div>
-	<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/edit/${script.hash}?step=2`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-				/>
-			</svg>
-			Edit
-		</button>
+	<ActionRow>
+		<svelte:fragment slot="right">
+			<Button
+				on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPencil }}
+			>
+				Edit
+			</Button>
 
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/run/${script.hash}`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
-			Run
-		</button>
-	</div>
+			<Button
+				on:click={() => goto(`/scripts/run/${script.hash}`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPlay }}
+			>
+				Run
+			</Button>
+		</svelte:fragment>
+	</ActionRow>
 </div>

frontend/src/lib/components/landing/ScriptGettingStarted.svelte

@@ -1,93 +1,47 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 ">
 		Create a new script or find inspiration on the Hub!
 	</div>
-	<div class="inline-flex flex-wrap gap-y-2">
-		<button
+	<div class="inline-flex flex-wrap gap-y-2 ">
+		<Button
 			on:click={() => goto('scripts/add')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create script
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Script documentation
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community scripts on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

frontend/src/routes/flows/get/[...path].svelte

@@ -99,7 +99,7 @@
 				href="/flows/run/{path}"
 				variant="contained"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faPlay }}
 			>
 				Run
@@ -108,7 +108,7 @@
 				href="/flows/edit/{path}"
 				variant="contained"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faEdit }}
 				disabled={!can_write}
 			>
@@ -118,7 +118,7 @@
 				href="/flows/add?template={flow.path}"
 				variant="contained"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faCodeFork }}
 			>
 				Use as template/Fork
@@ -129,7 +129,7 @@
 				href="/runs/{flow.path}"
 				variant="border"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faList }}
 			>
 				View runs
@@ -139,7 +139,7 @@
 				href={flowToHubUrl(flow).toString()}
 				variant="border"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faGlobe }}
 			>
 				Publish to Hub

frontend/src/routes/scripts/get/[...hash].svelte

@@ -135,18 +135,16 @@
 		<svelte:fragment slot="left">
 			<Button
 				href={`/scripts/run/${script.hash}`}
-				variant="contained"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faPlay }}
 			>
 				Run
 			</Button>
 			<Button
 				href={`/scripts/edit/${script.hash}?step=2`}
-				variant="contained"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faEdit }}
 				disabled={!can_write}
 			>
@@ -155,9 +153,8 @@
 			{#if !topHash}
 				<Button
 					href={`/scripts/add?template=${script.path}`}
-					variant="contained"
 					color="blue"
-					size="sm"
+					size="xs"
 					startIcon={{ icon: faCodeFork }}
 				>
 					Use as template/Fork
@@ -169,7 +166,7 @@
 				href={`/runs/${script.path}`}
 				variant="border"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faList }}
 			>
 				View runs
@@ -184,7 +181,7 @@
 				).toString()}
 				variant="border"
 				color="blue"
-				size="sm"
+				size="xs"
 				startIcon={{ icon: faGlobe }}
 			>
 				Publish to Hub
@@ -349,7 +346,7 @@
 														<Button
 															on:click={() => copyToClipboard(url)}
 															color="blue"
-															size="sm"
+															size="xs"
 															startIcon={{ icon: faClipboard }}
 															btnClasses="ml-2"
 														>