feat(frontend): Update tooltip and home list dropdown (#1053)

* feat(frontend): Update tooltip

* feat(frontend): Update list dropdown

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}

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>

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}

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>

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>

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>