From d2e516822277948005fb5fd6596c7b9b9119ec7a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 26 Sep 2022 19:23:39 +0200
Subject: [PATCH] fix(frontend): Fix buttons spacings (#627)

---
 frontend/src/lib/components/EditorBar.svelte  | 33 ++++++++++++++++---
 .../src/lib/components/FlowBuilder.svelte     | 19 ++---------
 .../src/lib/components/ModulePreview.svelte   |  2 +-
 .../components/common/button/Button.svelte    | 27 ++++++++++-----
 .../flows/header/FlowImportExportMenu.svelte  |  2 +-
 .../src/routes/flows/get/[...path].svelte     | 10 +++---
 .../src/routes/scripts/get/[...hash].svelte   | 10 +++---
 7 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 5a72a355c2..a7cabfeadc 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/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
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index f9ed830906..b3f1105a19 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/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 = {
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index a107de472d..7ab472c826 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/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'
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index c44de641ae..d1190263e4 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/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',
diff --git a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
index 7b6c1a7c3d..8dec468171 100644
--- a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
+++ b/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>
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index 2a5326fb44..0c1b2463fd 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/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
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index a7628c6acf..e0321639f9 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/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