ui adjustments (#358)

* #354 window border should be all around

* #354 Package Page Banner: open github button should open in default browser

* #354 search placeholder 14px and adjust position

* #354 remove markdown component background color

* #354 remove mini space between scrollbar and footer

* #354 side-menu label text size to 14px

---------

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

modules/desktop/src/components/footer/footer.svelte

@@ -1,7 +1,7 @@
 <script>
   import * as pub from '$env/static/public';
 </script>
-<footer class="w-full border-gray flex items-center justify-between border pr-2 rounded-b-xl overflow-clip"> 
+<footer class="w-full border-gray flex items-center justify-between border pr-2 border-x-0 border-b-0 overflow-clip"> 
   <figure class="text-center">
     <i class="icon-tea-logo-iconasset-1 text-black"/>
   </figure>

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

@@ -5,7 +5,7 @@
 	import Notification from "@tea/ui/notification/notification.svelte";
 </script>
 
-<div class="w-full flex flex-col gap-1 py-2 pl-2 pr-4">
+<div class="w-full flex flex-col gap-1 py-2 px-2">
   {#each $notificationStore as notification}
     <Notification
       notification={{

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

@@ -1,26 +1,15 @@
 <script lang="ts">
 	import '$appcss';
 	import '@tea/ui/icons/icons.css';
-	import type { Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/button/button.svelte';
-	import { onMount } from 'svelte';
-	import { getPackageBottles } from '@native';
 
 	import { installPackage } from '@native';
   import { PackageStates, type GUIPackage } from '$libs/types';
 	import { packagesStore  } from '$libs/stores';
+	import { shellOpenExternal } from '@native';
 
 	export let pkg: GUIPackage;
-	let bottles: Bottle[] = [];
-
 	let installing = false;
-	onMount(async () => {
-		try {
-			bottles = await getPackageBottles(pkg.full_name);
-		} catch (err) {
-			console.error(err);
-		}
-	});
 
 	const install = async () => {
 		installing = true;
@@ -30,6 +19,7 @@
 			state: PackageStates.INSTALLED,
 		});
 	}
+
 </script>
 
 <section class="mt-4 bg-black">
@@ -60,9 +50,9 @@
 					</Button>
 				{/if}
 				{#if pkg.github}
-					<a href={`https://github.com/${pkg.github}`} target="_blank" rel="noreferrer">
-						<Button class="border border-gray h-10">View on github</Button>
-					</a>
+					<Button class="border border-gray h-10" onClick={() => {
+						shellOpenExternal(`https://github.com/${pkg.github}`)
+					}}>View on github</Button>
 				{/if}
 			</menu>
 		</article>

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

@@ -92,7 +92,7 @@
 	ul {
 		margin-top: 0px;
 		padding-top: 60px;
-		height: calc(100vh - 95px);
+		height: calc(100vh - 76px);
 		overflow-y: scroll;
 		overflow-x: hidden;
 		padding-right: 4px;

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

@@ -8,7 +8,7 @@
 
 <button on:click class={`text-xs w-full flex transition-all rounded-sm hover:bg-opacity-25 border-gray hover:border p-2 gap-2 items-center align-middle text-left hover:bg-gray box-border ${active && 'active'}`}>
   <i class={`icon-${icon} mt-1`}/>
-  <div class="font-thin">{label}</div>
+  <div class="font-thin text-sm">{label}</div>
 </button>
 
 <style>

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

@@ -15,7 +15,7 @@
 	}
 </script>
 
-<aside class="border border-t-0 border-b-0 border-gray p-2">
+<aside class="border border-t-0 border-b-0 border-l-0 border-gray p-2">
   <ul class="flex flex-col pt-4 gap-1 pl-1">
     <MenuButton label="Installed" icon="tea-checkmark"
 			active={activeOption === SideMenuOptions.installed}

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

@@ -20,7 +20,7 @@
 	});
 </script>
 
-<header class="border-gray flex items-center justify-between border w-full h-12 pr-2 rounded-t-xl" style="-webkit-app-region: drag">
+<header class="border-gray flex items-center justify-between border w-full h-12 pr-2 border-t-0 border-x-0" style="-webkit-app-region: drag">
 	<ul class="text-gray flex h-10 gap-2 align-middle leading-10 pl-20">
 		<a href="/">
 			<div class="home-btn transition-all text-xl w-12 rounded-md text-center"><i class="icon-tea-logo-iconasset-1"/></div>

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

@@ -42,10 +42,10 @@
 	});
 </script>
 
-<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all font-inter`}>
+<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all font-inter border border-gray rounded-xl`}>
 	<TopBar />
 	<section class="relative" bind:this={view}>
-		<div class="content p-2">
+		<div class="content px-2">
 			<slot/>
 		</div>
 		<SearchPopupResults />

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

@@ -54,7 +54,7 @@
 <div id="package-container">
 	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
 </div>
-<header class={`transition-all px-2 flex flex-col ${$sideNavOpen ? "min": ""} ${packagesScrollY > 100 && 'scrolling'}`}>
+<header class={`transition-all pl-2 flex flex-col ${$sideNavOpen ? "min": ""} ${packagesScrollY > 100 && 'scrolling'}`}>
 	<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>
@@ -70,7 +70,7 @@
 		 -->
 		{#if needsUpdateCount}
 			<Button
-				class={`w-48 h-8 text-xs mr-4 ${updating && "animate-pulse"}`}
+				class={`w-48 h-8 text-xs ${updating && "animate-pulse"}`}
 				type="plain"
 				color="secondary"
 				onClick={updateAll}

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -74,14 +74,14 @@
 	<span class="text-white">{pkg.full_name}</span>
 </header>
 {#if pkg}
-	<div class="bg-black px-16">
+	<div class="px-16">
 		<section>
 			<PackageBanner {pkg} />
 		</section>
 
 		<section class="mt-8 flex gap-8">
 			<div class="w-2/3">
-				<Tabs class="bg-black" {tabs} />
+				<Tabs {tabs} />
 			</div>
 			<div class="w-1/3">
 				{#if pkg}

modules/ui/src/markdown/styles.css

@@ -4,7 +4,6 @@
 	-webkit-text-size-adjust: 100%;
 	margin: 0;
 	color: #c9d1d9;
-	background-color: #0d1117;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
 		"Apple Color Emoji", "Segoe UI Emoji";
 	font-size: 16px;

modules/ui/src/search-input/search-input.svelte

@@ -21,7 +21,7 @@
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
-	<input type="search" class="flex-grow pb-2" {placeholder} on:keyup={onChange} />
+	<input type="search" class="flex-grow pb-2 text-sm" {placeholder} on:keyup={onChange} />
 </section>
 
 <!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
@@ -49,7 +49,7 @@
 
 	section input {
 		color: #00ffd0;
-		margin-bottom: -5px;
+		margin-bottom: -2px;
 		min-width: 60%;
 		padding: 0px;
 		background-color: #1a1a1a !important;
@@ -57,6 +57,7 @@
 		color: #00ffd0;
 		outline: none;
 		border-radius: 0px;
+		line-height: 34px;
 	}
 
 	section.medium input {
@@ -65,6 +66,7 @@
 	section.large input {
 		font-size: 32px;
 	}
+
 	section input::placeholder {
 		/* Chrome, Firefox, Opera, Safari 10.1+ */
 		color: #949494;