spacing and style adjustments (#367)

* #361 spacing and style adjustments

* #360 hover out event

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/app.d.ts

@@ -7,3 +7,12 @@ declare namespace App {
 	// interface Error {}
 	// interface Platform {}
 }
+
+// Declare custom event handlers here to make typscript happy.
+declare namespace svelte.JSX {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface HTMLAttributes<T> {
+		onclick_outside: () => void;
+		leave_delay: () => void;
+	}
+}

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

@@ -91,7 +91,7 @@
 <style>
 	ul {
 		margin-top: 0px;
-		padding-top: 60px;
+		padding-top: 80px;
 		height: calc(100vh - 76px);
 		overflow-y: scroll;
 		overflow-x: hidden;

modules/desktop/src/components/side-bar/side-bar.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { authStore } from '$libs/stores';
+	import { authStore, navStore } from '$libs/stores';
 	import SelectLang from '$components/select-lang/select-lang.svelte';
 	import { baseUrl } from '$libs/v1-client';
 	import { shellOpenExternal, submitLogs } from '@native';
+  import mouseLeaveDelay from "@tea/ui/lib/mouse-leave-delay";
+
   const { user, deviceIdStore } = authStore;
 
   const openGithub = () => {
@@ -22,8 +24,13 @@
       submittedMessage = msg;
     }
   }
+
+  const hidePopup = () => {
+    console.log("hide poup")
+    navStore.sideNavOpen.set(false);
+  }
 </script>
-<nav class="w-full p-2 text-sm">
+<nav class="w-full p-2 text-sm" use:mouseLeaveDelay on:leave_delay={() => hidePopup()}>
   {#if $user}
     <section class="flex rounded-full mb-2 pl-1">
       <img width="40" height="40" src={$user?.avatar_url || '/images/bored-ape.png'} alt="profile" />

modules/desktop/src/components/side-menu/side-menu.svelte

@@ -21,36 +21,44 @@
 			active={activeOption === SideMenuOptions.installed}
 			on:click={() => selectToggle(SideMenuOptions.installed)}
 		/>
+		<hr/>
 		{#if needsUpdateCount}
     	<MenuButton label="Updates available" icon="update"
 				active={activeOption === SideMenuOptions.installed_updates_available}
 				on:click={() => selectToggle(SideMenuOptions.installed_updates_available)}
 			/>
+			<hr/>
 		{/if}
     <MenuButton label="Recently updated" icon="back-in-time"
 			active={activeOption === SideMenuOptions.recently_updated}
 			on:click={() => selectToggle(SideMenuOptions.recently_updated)}
 		/>
+		<hr/>
     <MenuButton label="New packages" icon="birthday-cake"
 			active={activeOption === SideMenuOptions.new_packages}
 			on:click={() => selectToggle(SideMenuOptions.new_packages)}
 		/>
+		<hr/>
     <MenuButton label="Popular" icon="bar-chart"
 			active={activeOption === SideMenuOptions.popular}
 			on:click={() => selectToggle(SideMenuOptions.popular)}
 		/>
+		<hr/>
     <MenuButton label="Featured" icon="lightbulb"
 			active={activeOption === SideMenuOptions.featured}
 			on:click={() => selectToggle(SideMenuOptions.featured)}
 		/>
+		<hr/>
     <MenuButton label="Essentials" icon="square"
 			active={activeOption === SideMenuOptions.essentials}
 			on:click={() => selectToggle(SideMenuOptions.essentials)}
 		/>
+		<hr/>
     <MenuButton label="Star-struct" icon="star-full"
 			active={activeOption === SideMenuOptions.star_struct}
 			on:click={() => selectToggle(SideMenuOptions.star_struct)}
 		/>
+		<hr/>
     <MenuButton label="Made by tea" icon="tea-logo-iconasset-1"
 			active={activeOption === SideMenuOptions.made_by_tea}
 			on:click={() => selectToggle(SideMenuOptions.made_by_tea)}
@@ -67,4 +75,8 @@
 		width: 190px;
 		box-sizing: border-box;
 	}
+
+	hr {
+		border-top: 1px solid #272626;
+	}
 </style>

modules/desktop/src/components/welcome-modal/welcome-modal.svelte

@@ -3,6 +3,7 @@
   import { PackageStates, type GUIPackage } from "$libs/types";
 	import { openTerminal, isPackageInstalled } from '@native';
   import { packagesStore } from "$libs/stores";
+	import clickOutside from "@tea/ui/lib/clickOutside";
 
   const log = window.require("electron-log");
 
@@ -55,10 +56,7 @@
 </script>
 
 <section class="fixed z-10 top-0 left-0 flex items-center justify-center">
-  <button id="btn-cover" class="opacity-0 absolute" on:click={() => {
-    close();
-  }}></button>
-  <aside class="relative">
+  <aside class="relative" use:clickOutside on:click_outside={() => close()}>
     <article class="flex margin-auto p-2 border border-gray rounded-md">
       <figure>
         <img  class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
@@ -84,7 +82,7 @@
 </section>
 
 <style>
-  section, #btn-cover {
+  section {
     width: 100%;
     height: 100vh;
     background: rgba(0,0,0, 0.5);

modules/desktop/src/routes/+layout.svelte

@@ -45,16 +45,18 @@
 <div id="main-layout" class="transition-all font-inter border border-gray rounded-xl">
 	<TopBar />
 	<section class="relative" bind:this={view}>
-		<div class="content px-2">
+		<div class="content">
 			<slot/>
 		</div>
 		<SearchPopupResults />
 	</section>
 	<Footer/>
 </div>
-<aside class={`fixed border border-gray rounded-md  bg-black transition-all  ${$sideNavOpen && "open"}`}>
-	<SideBar/>
-</aside>
+{#if $sideNavOpen}
+	<aside class="fixed border border-gray rounded-md  bg-black transition-all">
+		<SideBar/>
+	</aside>
+{/if}
 
 
 <style>
@@ -81,12 +83,12 @@
 		right: 5px;
 		width: 190px;
 		overflow: clip;
-		height: 0px;
-		opacity: 0;
-	}
-	
-	aside.open {
 		height: auto;
 		opacity: 1;
 	}
+
+	.content {
+		padding-left: 4px;
+		padding-right: 4px;
+	}
 </style>

modules/desktop/src/routes/+page.svelte

@@ -53,10 +53,10 @@
 <div id="package-container">
 	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
 </div>
-<header class={`transition-all pl-2 flex flex-col ${packagesScrollY > 100 && 'scrolling'}`}>
+<header class="transition-all px-2 flex flex-col" class:scrolling={packagesScrollY > 100}>
 	<NotificationBar />
-	<div class="flex justify-between items-center align-middle">
-		<h1 class="text-primary pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
+	<div class="flex justify-between items-center">
+		<h1 class="text-primary pl-3 pt-2 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
 		<!-- 
 		<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
 			
@@ -94,18 +94,14 @@
 		top: 0px;
 		left: 190px;
 		height: 72px;
-		width: calc(100% - 190px - 18px);
+		width: calc(100% - 190px - 10px);
 		background-image: linear-gradient(rgba(26,26,26,1), rgba(26,26,26,0));
 		padding-top: 15px;
 	}
 
-	header.lower {
-		top: 32px;
-	}
-
 	header.scrolling {
 		height: 60px;
-		background-color: rgba(26,26,26,1);
+		background-color: #222222;
 		padding-top: 5px;
 	}
 </style>

modules/ui/src/app.d.ts

@@ -15,5 +15,6 @@ declare namespace svelte.JSX {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	interface HTMLAttributes<T> {
 		onclick_outside: () => void;
+		leave_delay: () => void;
 	}
 }

modules/ui/src/lib/mouse-leave-delay.ts

@@ -0,0 +1,30 @@
+export default function mouseLeaveDelay(element: HTMLElement) {
+	let isOut = false;
+	const timeout = 600;
+
+	const handleEnter = () => {
+		isOut = false;
+	};
+
+	const onDestroy = () => {
+		element.removeEventListener("mouseenter", handleEnter, true);
+		element.removeEventListener("mouseleave", handleLeave, true);
+	};
+
+	const handleLeave = () => {
+		isOut = true;
+		setTimeout(() => {
+			if (isOut && element) {
+				element.dispatchEvent(new CustomEvent("leave_delay"));
+				onDestroy();
+			}
+		}, timeout);
+	};
+
+	element.addEventListener("mouseenter", handleEnter, true);
+	element.addEventListener("mouseleave", handleLeave, true);
+
+	return {
+		destroy: onDestroy
+	};
+}

modules/ui/src/package-card/package-card.svelte

@@ -78,7 +78,6 @@
 	}
 
 	.package-card :global(.pkg-image) {
-		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
 	}