From 9d30e5fa57363c4cf715f845f5268856c4aa0fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:38:28 +0100
Subject: [PATCH] feat(frontend): Update tooltip and home list dropdown (#1053)

* feat(frontend): Update tooltip

* feat(frontend): Update list dropdown
---
 frontend/src/lib/components/Dropdown.svelte        |  4 ++--
 frontend/src/lib/components/Popover.svelte         | 14 +++++++-------
 frontend/src/lib/components/Tooltip.svelte         |  2 +-
 .../src/lib/components/common/table/AppRow.svelte  |  7 +++++--
 .../src/lib/components/common/table/FlowRow.svelte |  9 +++++----
 .../lib/components/common/table/ScriptRow.svelte   |  7 +++++--
 6 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index ccbd680370..730c55bf08 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -2,7 +2,7 @@
 	import type { DropdownItem } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+	import { MoreHorizontal } from 'lucide-svelte'
 	import { Button, Menu } from './common'
 
 	type Alignment = 'start' | 'end'
@@ -20,7 +20,7 @@
 <Menu {placement} let:close>
 	<Button nonCaptureEvent color="light" size="xs" {btnClasses} slot="trigger">
 		{#if !$$slots.default}
-			<Icon data={faEllipsisH} scale={1.2} />
+			<MoreHorizontal size={20} />
 		{:else}
 			<slot />
 		{/if}
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index c61a8f8463..047887493e 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -49,15 +49,15 @@
 	<slot />
 </button>
 {#if showTooltip}
-	<div id="tooltip" use:popperContent={extraOpts} on:mouseenter={open} on:mouseleave={close}>
+	<div
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class="z-50 text-sm font-normal text-gray-300 bg-gray-800 py-2 px-3 rounded-md 
+		whitespace-normal text-left {$$props.class}"
+	>
 		<div class="max-w-sm">
 			<slot name="text" />
 		</div>
 	</div>
 {/if}
-
-<style>
-	#tooltip {
-		@apply z-50 text-sm font-normal text-gray-300 bg-gray-800 p-4 rounded-xl whitespace-normal text-left;
-	}
-</style>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index 6b53ca7be6..2fab326d76 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -4,7 +4,7 @@
 	import Popover from './Popover.svelte'
 </script>
 
-<Popover>
+<Popover notClickable>
 	<Icon
 		class="text-gray-500 font-thin inline-block align-middle w-4"
 		data={faInfoCircle}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index d105cece89..ec7e1676d4 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -4,6 +4,7 @@
 	import { AppService, type ListableApp } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { faEdit, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from '../button/Button.svelte'
 	import Row from './Row.svelte'
@@ -59,7 +60,7 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View app',
@@ -77,6 +78,8 @@
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index c2950494e3..2870f0c0c5 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -5,7 +5,6 @@
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import type ShareModal from '$lib/components/ShareModal.svelte'
-
 	import { FlowService, type Flow } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/utils'
@@ -20,8 +19,8 @@
 		faPlay,
 		faShare
 	} from '@fortawesome/free-solid-svg-icons'
+	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
-
 	import Button from '../button/Button.svelte'
 	import Row from './Row.svelte'
 
@@ -114,7 +113,7 @@
 
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
@@ -169,6 +168,8 @@
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index eb14e9eac3..08617eeedb 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -20,6 +20,7 @@
 		faPlay,
 		faShare
 	} from '@fortawesome/free-solid-svg-icons'
+	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Badge from '../badge/Badge.svelte'
 	import Button from '../button/Button.svelte'
@@ -130,7 +131,7 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View script',
@@ -192,6 +193,8 @@
 					disabled: !canWrite
 				}
 			]}
-		/>
+		>
+			<MoreVertical size={20} />
+		</Dropdown>
 	</svelte:fragment>
 </Row>