Active Styles + small bug fixes (#447)

modules/desktop/src/components/install-button/install-button.svelte

@@ -52,7 +52,8 @@
 			<div class="version-list" class:visible={isOpened}>
 				{#if (pkg?.installed_versions || []).length > 0}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div class="version-item flex items-center justify-start gap-x-1 text-xs"
+					<div
+						class="version-item flex items-center justify-start gap-x-1 text-xs"
 						on:click={(evt) => handleClick(evt, "")}
 					>
 						<div>uninstall</div>
@@ -139,8 +140,8 @@
 		display: block;
 	}
 
-		/* width */
+	/* width */
-		::-webkit-scrollbar {
+	::-webkit-scrollbar {
 		width: 6px;
 	}
 

modules/desktop/src/components/install-button/package-state-button.svelte

@@ -20,6 +20,10 @@
 		return "primary";
 	};
 
+	const isActive = (state: PackageStates): boolean => {
+		return state === PackageStates.INSTALLING || state === PackageStates.UPDATING;
+	};
+
 	const badgeClass: Record<PackageStates, string> = {
 		[PackageStates.AVAILABLE]: "install-badge",
 		[PackageStates.INSTALLING]: "install-badge",
@@ -36,6 +40,7 @@
 	class="w-full border p-0 text-xs text-white {buttonSize === 'small' ? 'h-8' : 'h-10'}"
 	type="plain"
 	color={getColor(pkg.state)}
+	active={isActive(pkg.state)}
 	{onClick}
 >
 	<div class="version-button h-full">

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

@@ -1,26 +1,24 @@
 <script lang="ts">
 	import "$appcss";
 	import "@tea/ui/icons/icons.css";
-	import { t } from '$libs/translations'; 
+	import { t } from "$libs/translations";
 	import Button from "@tea/ui/button/button.svelte";
 	import semverCompare from "semver/functions/compare";
 
-	import { installPackage } from "@native";
 	import { PackageStates, type GUIPackage } from "$libs/types";
 	import { packagesStore } from "$libs/stores";
 	import { shellOpenExternal } from "@native";
 	import InstallButton from "$components/install-button/install-button.svelte";
 	import { findAvailableVersions } from "$libs/packages/pkg-utils";
 	import { trimGithubSlug } from "$libs/github";
-	
 
 	export let pkg: GUIPackage;
 	let installing = false;
-	let pruning = false
+	let pruning = false;
 
-	const install = async () => {
+	const install = async (version: string) => {
 		installing = true;
-		await installPackage(pkg);
+		await packagesStore.installPkg(pkg, version);
 		installing = false;
 		packagesStore.updatePackage(pkg.full_name, {
 			state: PackageStates.INSTALLED
@@ -30,13 +28,14 @@
 	const prune = async () => {
 		pruning = true;
 		const versions = (pkg?.installed_versions || []).sort((a, b) => semverCompare(b, a));
-		for(const [i,v] of versions.entries()) {
+		for (const [i, v] of versions.entries()) {
-			if (i) { // skip the latest version = 0
+			if (i) {
+				// skip the latest version = 0
 				await packagesStore.deletePkg(pkg, v);
 			}
 		}
 		pruning = false;
-	}
+	};
 </script>
 
 <section class="mt-4 bg-black">
@@ -48,7 +47,10 @@
 			<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
 			{#if pkg.homepage}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span class="cursor-pointer hover:text-primary" on:click={() => shellOpenExternal(pkg.homepage)} >{pkg.homepage}</span>
+				<span
+					class="hover:text-primary cursor-pointer"
+					on:click={() => shellOpenExternal(pkg.homepage)}>{pkg.homepage}</span
+				>
 			{/if}
 			<p class="mt-4 text-sm">{pkg.desc}</p>
 			<menu class="mt-4 grid h-10 grid-cols-3 gap-4 text-xs">
@@ -62,15 +64,9 @@
 					}}
 				/>
 				{#if (pkg?.installed_versions?.length || 0) > 1}
-					<Button
+					<Button class="h-10" type="plain" color="blue" onClick={prune} loading={pruning}>
-						class="h-10"
+						<div class="version-item flex w-full items-center justify-center gap-x-1 text-xs">
-						type="plain"
+							<div class="icon-scissors" />
-						color="blue"
-						onClick={prune}
-						loading={pruning}
-					>
-						<div class="w-full version-item flex items-center justify-center gap-x-1 text-xs" >
-							<div class="icon-scissors"/>
 							<div>{$t("package.cta-PRUNE")}</div>
 						</div>
 					</Button>

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

@@ -10,7 +10,7 @@
 	export let link: string;
 	export let progessLoading = 0;
 
-	const imgUrl = !pkg.thumb_image_url.includes("https://tea.xyz")
+	$: imgUrl = !pkg.thumb_image_url.includes("https://tea.xyz")
 		? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
 		: pkg.thumb_image_url;
 
@@ -20,17 +20,25 @@
 
 	export let onUninstall = async () => {
 		console.log("do nothing");
-	}
+	};
+
+	// Using this instead of css :active because there is a button inside of a button
+	let isActive = false;
+	const activate = () => (isActive = true);
+	const deactivate = () => (isActive = false);
+
+	const preventPropagation = (evt: MouseEvent) => evt.stopPropagation();
 </script>
 
 <section
-	class="package-card border-gray relative h-auto border"
+	class="package-card border-gray relative h-auto border bg-center"
+	class:active={isActive}
 	style="background-image: url({imgUrl})"
 >
 	<aside class="blur-sm">
-		<figure style="background-image: url({imgUrl})"></figure>
+		<figure class="bg-center" style="background-image: url({imgUrl})" />
 	</aside>
-	<a href={link}>
+	<a href={link} on:mousedown={activate} on:mouseup={deactivate} on:mouseleave={deactivate}>
 		<div class="package-card-content absolute flex h-full w-full flex-col justify-between">
 			<div class="hint-container">
 				<div class="hint">
@@ -43,14 +51,12 @@
 					<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">{pkg.name}</h3>
 					<p class="line-clamp-2 h-[32px] text-xs font-thin">{pkg.desc ?? ""}</p>
 				</article>
-				<div class="mt-3.5 flex w-full relative">
+				<div class="relative mt-3.5 flex w-full">
-					<div class="install-button">
+					<div class="install-button" on:mousedown={preventPropagation}>
-						<InstallButton {pkg} {availableVersions} onClick={onClickCTA}
+						<InstallButton {pkg} {availableVersions} onClick={onClickCTA} uninstall={onUninstall} />
-							uninstall={onUninstall}
-						/>
 					</div>
 				</div>
-				<div class="mt-1 h-[10px] leading-[10px] relative">
+				<div class="relative mt-1 h-[10px] leading-[10px]">
 					{#if pkg.state === "NEEDS_UPDATE"}
 						<span class="text-[0.5rem]">Updating from v{findRecentInstalledVersion(pkg)}</span>
 					{/if}
@@ -60,7 +66,7 @@
 	</a>
 
 	{#if progessLoading > 0 && progessLoading < 100}
-		<div class="absolute z-40 left-0 top-0 h-full w-full bg-black bg-opacity-50">
+		<div class="absolute left-0 top-0 z-40 h-full w-full bg-black bg-opacity-50">
 			<div class="absolute left-0 right-0 top-1/2 m-auto -mt-12 h-24 w-24">
 				<ProgressCircle value={progessLoading} />
 			</div>
@@ -77,6 +83,23 @@
 		box-sizing: border-box;
 	}
 
+	section.active::before {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(26, 26, 26, 0.7);
+		z-index: 2;
+		content: "";
+		pointer-events: none;
+	}
+
+	section.package-card:active {
+		border-color: #8000ff;
+		box-shadow: 0px 0px 0px 2px rgba(128, 0, 255, 0.5);
+	}
+
 	aside {
 		position: absolute;
 		bottom: 0px;
@@ -85,6 +108,7 @@
 		height: 50%;
 		overflow: hidden;
 	}
+
 	figure {
 		position: absolute;
 		bottom: 0px;
@@ -135,12 +159,6 @@
 		background-size: cover;
 	}
 
-	.package-card:active {
-		border-color: #8000ff;
-		box-shadow: 0px 0px 0px 2px rgba(128, 0, 255, 0.5);
-		mix-blend-mode: overlay;
-	}
-
 	.package-card:hover .hint {
 		visibility: visible;
 	}

modules/ui/src/button/button.svelte

@@ -71,6 +71,14 @@
 		background: #01997d;
 	}
 
+	button.plain.primary:active {
+		background: #01997d;
+	}
+
+	button.plain.primary:active::before {
+		background: #01997d;
+	}
+
 	button.primary::before {
 		background: #0ecaa7;
 	}
@@ -86,6 +94,14 @@
 		background: #410182;
 	}
 
+	button.plain.secondary:active {
+		background: #410182;
+	}
+
+	button.plain.secondary:active::before {
+		background: #410182;
+	}
+
 	button.secondary::before {
 		background: #6000bf;
 	}
@@ -111,19 +127,36 @@
 		background: white;
 	}
 
+	button.plain.black:active {
+		background: #e1e1e1;
+	}
+
+	button.plain.black:active::before {
+		background: #e1e1e1;
+	}
+
 	/* black button inverts colors on hover */
 	button.black:hover {
 		color: #1a1a1a;
 		background: white;
 	}
 
-	/* green */
+	/* blue */
 	button.plain.blue {
-		background: #013b99;
+		background: #2675f5;
+		border: 1px solid #2675f5;
 		color: white;
 	}
 
 	button.blue::before {
-		background: #2675f5;
+		background: #013b99;
+	}
+
+	button.plain.blue:active {
+		background: #012765;
+	}
+
+	button.plain.blue:active::before {
+		background: #012765;
 	}
 </style>