fix(frontend): Fix buttons spacings (#627)

frontend/src/lib/components/EditorBar.svelte

@@ -179,33 +179,58 @@
 			btnClasses="mr-1"
 			on:click={variablePicker.openModal}
 			size="xs"
+			spacingSize="md"
 			startIcon={{ icon: faFile }}
 		>
 			Insert variable
 		</Button>
 	</div>
 	<div>
-		<Button btnClasses="mx-1" size="xs" color="light" on:click={resourcePicker.openModal}>
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={resourcePicker.openModal}
+		>
 			<Icon data={faCube} class="mr-2" />
 			Insert resource
 		</Button>
 	</div>
 
 	<div>
-		<Button btnClasses="mx-1" size="xs" color="light" on:click={scriptPicker.openModal}>
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={scriptPicker.openModal}
+		>
 			<Icon data={faCode} class="mr-2" />
 			Search script
 		</Button>
 	</div>
 
 	<div>
-		<Button btnClasses="mx-1" size="xs" color="light" on:click={editor.clearContent}>
+		<Button
+			btnClasses="mx-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={editor.clearContent}
+		>
 			<Icon data={faRotateLeft} class="mr-2" />
 			Reset content
 		</Button>
 	</div>
 	<div>
-		<Button btnClasses="ml-1" size="xs" color="light" on:click={editor.reloadWebsocket}>
+		<Button
+			btnClasses="ml-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={editor.reloadWebsocket}
+		>
 			<Icon data={faRotate} class="h-4 w-4 mr-2" />
 
 			Reload assistants

frontend/src/lib/components/FlowBuilder.svelte

@@ -189,29 +189,16 @@
 		</Breadcrumb>
 		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
 			{#if step == 1}
-				<Button
-					disabled={pathError != ''}
-					btnClasses="h-8"
-					color="blue"
-					size="xs"
-					on:click={() => changeStep(2)}
-				>
+				<Button disabled={pathError != ''} color="blue" size="sm" on:click={() => changeStep(2)}>
 					Next
 				</Button>
-				<Button
-					disabled={pathError != ''}
-					btnClasses="h-8"
-					color="blue"
-					size="xs"
-					on:click={saveFlow}>Save</Button
-				>
+				<Button disabled={pathError != ''} color="blue" size="sm" on:click={saveFlow}>Save</Button>
 				<FlowImportExportMenu />
 
 				<Button
 					color="light"
-					size="xs"
+					size="sm"
 					variant="border"
-					btnClasses="h-8"
 					on:click={() => {
 						const url = new URL('https://hub.windmill.dev/flows/add')
 						const openFlow = {

frontend/src/lib/components/ModulePreview.svelte

@@ -66,7 +66,7 @@
 					on:click={testJobLoader?.cancelJob}
 					btnClasses="w-full"
 					color="red"
-					size="xs"
+					size="sm"
 					startIcon={{
 						icon: faRotateRight,
 						classes: 'animate-spin'

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

@@ -4,6 +4,7 @@
 	import type { Button } from './model'
 
 	export let size: Button.Size = 'md'
+	export let spacingSize: Button.Size = size
 	export let color: Button.Color = 'blue'
 	export let variant: Button.Variant = 'contained'
 	export let btnClasses: string = ''
@@ -33,19 +34,26 @@
 		},
 		light: {
 			border:
-				'border-gray-700 hover:border-gray-800 bg-white hover:bg-gray-100 text-gray-700 hover:text-gray-800 focus:ring-gray-300',
+				'border bg-white hover:bg-gray-100 text-gray-700 hover:text-gray-800 focus:ring-gray-300',
 			contained: 'bg-white hover:bg-gray-100 text-gray-700 focus:ring-gray-300'
 		}
 	}
 
-	const sizeClass: Record<Button.Size, string> = {
-		xs: 'text-xs px-2.5 py-1',
-		sm: 'text-sm px-2.5 py-1',
-		md: 'text-md px-3 py-1',
-		lg: 'text-lg px-4 py-2',
-		xl: 'text-xl px-5 py-2'
+	const fontSizeClasses: Record<Button.Size, string> = {
+		xs: 'text-xs',
+		sm: 'text-sm',
+		md: 'text-md',
+		lg: 'text-lg',
+		xl: 'text-xl'
 	}
 
+	const spacingClasses: Record<Button.Size, string> = {
+		xs: 'px-2.5 py-1',
+		sm: 'px-2.5 py-1',
+		md: 'px-4 py-2',
+		lg: 'px-4 py-2',
+		xl: 'px-4 py-2'
+	}
 	const iconScale: Record<Button.Size, number> = {
 		xs: 0.7,
 		sm: 0.8,
@@ -54,11 +62,12 @@
 		xl: 1.2
 	}
 
-	const buttonProps = {
+	$: buttonProps = {
 		class: classNames(
 			colorVariants[color][variant],
 			variant === 'border' ? 'border' : '',
-			sizeClass[size],
+			fontSizeClasses[size],
+			spacingClasses[spacingSize],
 			'focus:ring-4 font-medium',
 			'rounded-md',
 			'flex justify-center items-center text-center',

frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte

@@ -28,7 +28,7 @@
 <Menu placement="bottom-end">
 	<button
 		slot="trigger"
-		class="flex items-center h-8 text-xs  border  focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
+		class="flex items-center h-8 text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
 	>
 		Import/Export flow
 	</button>

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

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

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

@@ -137,7 +137,7 @@
 				href={`/scripts/run/${script.hash}`}
 				variant="contained"
 				color="blue"
-				size="md"
+				size="sm"
 				startIcon={{ icon: faPlay }}
 			>
 				Run
@@ -146,7 +146,7 @@
 				href={`/scripts/edit/${script.hash}?step=2`}
 				variant="contained"
 				color="blue"
-				size="md"
+				size="sm"
 				startIcon={{ icon: faEdit }}
 				disabled={!can_write}
 			>
@@ -157,7 +157,7 @@
 					href={`/scripts/add?template=${script.path}`}
 					variant="contained"
 					color="blue"
-					size="md"
+					size="sm"
 					startIcon={{ icon: faCodeFork }}
 				>
 					Use as template/Fork
@@ -169,7 +169,7 @@
 				href={`/runs/${script.path}`}
 				variant="border"
 				color="blue"
-				size="md"
+				size="sm"
 				startIcon={{ icon: faList }}
 			>
 				View runs
@@ -184,7 +184,7 @@
 				).toString()}
 				variant="border"
 				color="blue"
-				size="md"
+				size="sm"
 				startIcon={{ icon: faGlobe }}
 			>
 				Publish to Hub