styling fixes from spreadsheet (#470)

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -3,12 +3,13 @@
 	import "@tea/ui/icons/icons.css";
 	import { t } from "$libs/translations";
 	import Button from "@tea/ui/button/button.svelte";
+	import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
 	import semverCompare from "semver/functions/compare";
 
 	import type { GUIPackage } from "$libs/types";
 	import { packagesStore } from "$libs/stores";
 	import { shellOpenExternal } from "@native";
-	import { findAvailableVersions } from "$libs/packages/pkg-utils";
+	import { findAvailableVersions, findRecentInstalledVersion } from "$libs/packages/pkg-utils";
 	import { trimGithubSlug } from "$libs/github";
 	import PackageVersionSelector from "$components/package-install-button/package-version-selector.svelte";
 
@@ -61,12 +62,25 @@
 					}}
 				/>
 				{#if (pkg?.installed_versions?.length || 0) > 1}
-					<Button class="h-10" type="plain" color="blue" onClick={prune} loading={pruning}>
-						<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
-							<div class="icon-scissors" />
-							<div>{$t("package.cta-PRUNE")}</div>
+					<ToolTip>
+						<Button
+							slot="target"
+							class="h-10"
+							type="plain"
+							color="blue"
+							onClick={prune}
+							loading={pruning}
+						>
+							<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
+								<div class="icon-scissors" />
+								<div>{$t("package.cta-PRUNE")}</div>
+							</div>
+						</Button>
+						<div slot="tooltip-content" class="flex flex-col items-center">
+							<div>Removes {pkg.installed_versions?.length ?? 0 - 1} old versions</div>
+							<div>Keeps latest (v{findRecentInstalledVersion(pkg)})</div>
 						</div>
-					</Button>
+					</ToolTip>
 				{/if}
 				{#if pkg.github}
 					<Button

modules/desktop/src/components/package-card/package-card.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import "../../app.css";
 	import ProgressCircle from "@tea/ui/progress-circle/progress-circle.svelte";
-	import type { GUIPackage } from "$libs/types";
+	import { PackageStates, type GUIPackage } from "$libs/types";
 	import { findRecentInstalledVersion } from "$libs/packages/pkg-utils";
 	import PackageInstallButton from "$components/package-install-button/package-install-button.svelte";
+	import PackageInstalledBadge from "$components/package-install-button/package-installed-badge.svelte";
 
 	export let pkg: GUIPackage;
 	export let link: string;
@@ -17,6 +18,10 @@
 		console.log("do nothing");
 	};
 
+	const fixPackageName = (title: string) => {
+		return title.replace("-", "\u2011");
+	};
+
 	// Using this instead of css :active because there is a button inside of a button
 	let isActive = false;
 	const activate = () => (isActive = true);
@@ -43,19 +48,27 @@
 			</div>
 			<div class="content-container relative">
 				<article class="card-thumb-label relative">
-					<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">{pkg.name}</h3>
+					<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">
+						{fixPackageName(pkg.name)}
+					</h3>
 					<p class="line-clamp-2 h-[32px] text-xs font-thin">{pkg.desc ?? ""}</p>
 				</article>
 				<div class="relative mt-3.5 flex w-full">
 					<div class="install-button" on:mousedown={preventPropagation}>
-						<PackageInstallButton
-							{pkg}
-							onClick={(evt) => {
-								// prevent default to prevent the link that this button is inside of from being followed
-								evt?.preventDefault();
-								onClickCTA();
-							}}
-						/>
+						{#if pkg.state === PackageStates.INSTALLED}
+							<PackageInstalledBadge version={pkg.version} />
+						{:else}
+							<div on:mousedown={preventPropagation}>
+								<PackageInstallButton
+									{pkg}
+									onClick={(evt) => {
+										// prevent default to prevent the link that this button is inside of from being followed
+										evt?.preventDefault();
+										onClickCTA();
+									}}
+								/>
+							</div>
+						{/if}
 					</div>
 				</div>
 				<div class="relative mt-1.5 h-[10px] leading-[10px]">

modules/desktop/src/components/package-install-button/package-installed-badge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let version = "1.0.0";
+</script>
+
+<div class="container relative h-full">
+	<div class="content flex items-center justify-center gap-2 p-2">
+		<i class="icon-check-circle-o flex text-sm text-[#00ffd0]" />
+		<div class="text-xs">INSTALLED</div>
+		<div class="rounded-sm bg-white px-1 text-[10px] leading-[12px] text-black">
+			v{version}
+		</div>
+	</div>
+</div>
+
+<style>
+	.content {
+		position: relative;
+		z-index: 2;
+	}
+
+	.container::before {
+		content: "";
+		position: absolute;
+		mix-blend-mode: overlay;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		background: #dedede;
+		z-index: 0;
+	}
+</style>

modules/desktop/src/components/packages/packages.svelte

@@ -82,7 +82,7 @@
 </script>
 
 <div class="relative h-full w-full">
-	<ul class="flex flex-wrap bg-black" use:watchResize={onResize} on:scroll={onScroll}>
+	<ul class="flex flex-wrap content-start bg-black" use:watchResize={onResize} on:scroll={onScroll}>
 		{#if packages.length > 0}
 			{#each packages as pkg, index}
 				{#if index < limit}

modules/ui/src/icons/fonts/tea-icons.svg

@@ -57,4 +57,5 @@
 <glyph glyph-name="arrow-right" unicode="&#86;" d="M0 224l389 0-178-179 45-45 256 256-256 256-45-45 178-179-389 0z"/>
 <glyph glyph-name="scissors" unicode="&#88;" d="M274 256c5 0 10-2 13-5 4-4 6-8 6-13 0-5-2-10-6-13-3-4-8-6-13-6-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5z m86-18l145-114c5-4 8-9 7-16-1-7-4-12-10-15l-37-18c-2-1-5-2-8-2-3 0-6 1-9 2l-197 111-31-19c-2-1-3-1-4-1 3-10 4-19 3-28-1-15-7-29-16-42-9-14-22-25-38-35-25-16-51-24-79-24-26 0-47 7-63 22-17 16-25 36-23 59 2 14 7 28 16 42 10 14 22 25 38 35 25 16 51 24 79 24 16 0 30-3 43-8 2 2 4 4 7 6l34 21-34 21c-3 1-5 3-7 6-13-6-27-9-43-9-28 0-54 8-79 24-16 10-28 22-38 35-9 14-14 28-16 42-1 12 1 22 5 33 4 10 10 19 18 26 16 15 37 23 63 23 28 0 54-8 79-24 16-10 29-22 38-35 9-14 15-28 16-43 1-9 0-18-3-27 1 0 2-1 4-2l31-19 197 111c3 2 6 2 9 2 3 0 6 0 8-2l37-18c6-3 9-8 10-15 1-6-2-12-7-16z m-195 74c9 8 11 18 6 31-4 12-14 24-30 33-17 12-36 17-55 17-14 0-25-3-32-10-9-8-11-18-6-31 5-13 15-24 30-33 18-12 36-17 55-17 14 0 25 3 32 10z m-24-213c16 10 26 21 30 34 5 12 3 22-6 30-7 7-18 11-32 11-19 0-37-6-55-17-15-10-25-21-30-34-5-12-3-22 6-30 7-7 18-11 32-11 19 0 38 6 55 17z m51 175l27-16 0 3c0 7 4 12 10 16l4 2-23 14-7-8c-1 0-2-1-3-3-1-2-2-3-3-3-1-1-1-1-2-1 0-1 0-1 0-1z m64-64l27-9 211 165-37 18-219-123 0-32-46-28 3-2c0-1 1-1 2-2 0-1 1-2 3-3 1-2 2-3 3-4l7-7z m201-119l37 19-149 116-50-39c-1-1-2-1-4-2z"/>
 <glyph glyph-name="upward-arrow" unicode="&#87;" d="M331 469l181-170-43-41-108 102 0-317-361 0 0 57 301 0 0 260-108-102-42 41z"/>
+<glyph glyph-name="check-circle-o" unicode="&#89;" d="M371 280l-120-121c-4-3-8-5-13-5-5 0-10 2-13 5l-84 84c-4 4-6 8-6 13 0 5 2 9 6 13l29 29c4 4 8 5 13 5 5 0 9-1 13-5l42-42 78 79c4 3 8 5 13 5 5 0 9-2 13-5l29-30c4-3 6-7 6-12 0-5-2-10-6-13z m40-24c0 28-7 54-20 78-14 24-33 43-57 57-24 13-50 20-78 20-28 0-54-7-78-20-24-14-43-33-57-57-13-24-20-50-20-78 0-28 7-54 20-78 14-24 33-43 57-57 24-13 50-20 78-20 28 0 54 7 78 20 24 14 43 33 57 57 13 24 20 50 20 78z m64 0c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
 </font></defs></svg>

modules/ui/src/icons/icons.css

@@ -187,3 +187,6 @@
 .icon-upward-arrow:before {
 	content: "\57";
 }
+.icon-check-circle-o:before {
+	content: "\59";
+}

modules/ui/src/tool-tip/tool-tip.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	// TODO: this tool tip assumes it is below the target element, when multiple directions are needed, this will need to be updated
+</script>
+
+<div class="group relative">
+	<slot name="target" />
+	<div
+		class="tooltip invisible absolute top-full mt-4 w-full min-w-max border border-gray bg-black transition-all group-hover:visible"
+	>
+		<div class="px-6 py-2">
+			<slot name="tooltip-content" />
+		</div>
+	</div>
+</div>
+
+<style>
+	.tooltip::before {
+		content: "";
+		position: absolute;
+		top: -9px;
+		left: calc(50% - 8px);
+		height: 16px;
+		width: 16px;
+		background: #1a1a1a;
+		transform: rotate(45deg);
+		border-top: inherit;
+		border-left: inherit;
+		box-shadow: inherit;
+	}
+</style>