From 46f3388632e6da8841c82ce0164fa12c034e1fbf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 11 Dec 2022 21:32:07 +0100
Subject: [PATCH] UX nits

---
 frontend/src/lib/components/apps/CreateApp.svelte         | 5 +++--
 frontend/src/lib/components/common/table/RowIcon.svelte   | 8 ++++----
 .../src/lib/components/flows/CreateActionsFlow.svelte     | 7 +++++--
 .../src/lib/components/scripts/CreateActionsScript.svelte | 3 ++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/CreateApp.svelte b/frontend/src/lib/components/apps/CreateApp.svelte
index 0fa8551286..6653de9d91 100644
--- a/frontend/src/lib/components/apps/CreateApp.svelte
+++ b/frontend/src/lib/components/apps/CreateApp.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faDashboard, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { AppService, Policy } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/utils'
@@ -12,6 +12,7 @@
 	import type { App } from '$lib/components/apps/types'
 	import { goto } from '$app/navigation'
 	import Path from '$lib/components/Path.svelte'
+	import { LayoutDashboard } from 'lucide-svelte'
 
 	let drawerOpen = false
 
@@ -69,5 +70,5 @@
 	startIcon={{ icon: faPlus }}
 	on:click={() => (drawerOpen = true)}
 >
-	New app
+	New App (alpha) <LayoutDashboard class="ml-1.5" size={18} />
 </Button>
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index 2fc4dc3c75..1e565a9c71 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -21,12 +21,12 @@
 
 <div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
 	{#if kind === 'flow'}
-		<span class="ml-1.5 mb-0.5 -mt-0.5">
-			<Icon data={faBarsStaggered} scale={1.2} class="mr-1 text-[#14b8a6]" />
+		<span class="ml-1 mb-0.5 -mt-0.5">
+			<Icon data={faBarsStaggered} scale={1.1} class="mr-0.5 text-[#14b8a6]" />
 		</span>
 	{:else if kind === 'app'}
-		<LayoutDashboard size={26} color={iconColor} />
+		<LayoutDashboard size={24} color={iconColor} />
 	{:else if kind === 'script'}
-		<Code2 size={26} color={iconColor} />
+		<Code2 size={24} color={iconColor} />
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index 335de8dd04..58a6ec53b5 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons'
 
 	import { Button, ButtonPopup, ButtonPopupItem } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { flowStore, initFlow } from '$lib/components/flows/flowStore'
+	import { Icon } from 'svelte-awesome'
 
 	let drawer: Drawer | undefined = undefined
 	let pendingJson: string
@@ -23,7 +24,9 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/flows/add">
-		<svelte:fragment slot="main">New Flow</svelte:fragment>
+		<svelte:fragment slot="main"
+			>New Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
+		</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from raw JSON
 		</ButtonPopupItem>
diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
index 0c262e2325..98eecbc568 100644
--- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte
+++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
@@ -5,6 +5,7 @@
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import WorkspaceScriptPicker from '../flows/pickers/WorkspaceScriptPicker.svelte'
 	import { goto } from '$app/navigation'
+	import { Code2 } from 'lucide-svelte'
 
 	let drawer: Drawer | undefined = undefined
 </script>
@@ -12,7 +13,7 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/scripts/add">
-		<svelte:fragment slot="main">New Script</svelte:fragment>
+		<svelte:fragment slot="main">New Script <Code2 class="ml-1.5" size={18} /></svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from template
 		</ButtonPopupItem>