This commit is contained in:
neil 2023-02-02 11:36:02 +08:00
parent bc5226b5b0
commit 57bdd5f036
22 changed files with 70 additions and 70 deletions

View file

@ -4,7 +4,7 @@
"private": true,
"description": "tea gui app",
"author": "tea.xyz",
"main": "src/electron.cjs",
"main": "src/electron.cjs",
"scripts": {
"package": "pnpm build && electron-builder --config electron-builder.config.json",
"dev:package": "pnpm build && electron-builder --config electron-builder.config.json --dir",

View file

@ -2,4 +2,4 @@
import '$appcss';
</script>
<section class="h-56 border border-gray bg-black" />
<section class="border-gray h-56 border bg-black" />

View file

@ -14,9 +14,9 @@
{#each categories as category}
<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
{#each category.packages as pkg}
<div class="border border-t-0 border-l-0 border-gray p-4">
<div class="border-gray border border-t-0 border-l-0 p-4">
<MiniPackageCard {pkg} ctaLabel="DETAILS" link={`/packages/${pkg.slug}`} />
</div>
{/each}

View file

@ -10,14 +10,14 @@
};
</script>
<section class="mt-4 border border-gray bg-black">
<section class="border-gray mt-4 border bg-black">
<header class="flex flex-col items-center py-8">
<figure>
<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
</figure>
<p class="text-primary">tea.cli ver. 0.6.0</p>
</header>
<footer class="flex h-20 border-t border-gray text-white">
<footer class="border-gray flex h-20 border-t text-white">
<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}

View file

@ -18,7 +18,7 @@
{#if courses.length}
<Posts posts={courses} linkTarget="_blank" />
{:else}
<section class="h-64 border border-gray bg-black p-4">
<section class="border-gray h-64 border bg-black p-4">
<Preloader />
</section>
{/if}

View file

@ -2,34 +2,34 @@
import Button from '@tea/ui/Button/Button.svelte';
</script>
<footer class="relative h-auto w-full bg-black font-machina">
<footer class="font-machina relative h-auto w-full bg-black">
<section class="p-4 px-16 py-16">
<h3 class="mb-5 text-2xl text-primary">QUICK LINKS</h3>
<h3 class="text-primary mb-5 text-2xl">QUICK LINKS</h3>
<menu class="flex gap-4">
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<div class="border-gray flex-grow border border-l-0 border-r-0">
<a href="/">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="text-primary flex justify-between hover:text-black">
<div class="uppercase">About the tea store</div>
<div>&#8594</div>
</div>
</Button>
</a>
</div>
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<div class="border-gray flex-grow border border-l-0 border-r-0">
<a href="/">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="text-primary flex justify-between hover:text-black">
<div class="uppercase">REPORT A PROBLEM</div>
<div>&#8594</div>
</div>
</Button>
</a>
</div>
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<div class="border-gray flex-grow border border-l-0 border-r-0">
<a href="https://tea.xyz" target="_blank" rel="noreferrer">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="text-primary flex justify-between hover:text-black">
<div class="uppercase">VISIT TEA.XYZ</div>
<div>&#8594</div>
</div>
@ -39,8 +39,8 @@
</menu>
</section>
<section class="h-16 border border-r-0 border-gray p-4 px-16">
<div class="flex gap-4 text-xs text-gray">
<section class="border-gray h-16 border border-r-0 p-4 px-16">
<div class="text-gray flex gap-4 text-xs">
<a
href="https://tea.xyz/terms-of-use/"
target="_blank"

View file

@ -7,9 +7,9 @@
};
</script>
<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
<header class="border-gray text-primary border bg-black p-4">GETTING STARTED WITH TEA</header>
<section class="grid grid-cols-3 bg-black">
<div class="border border-gray p-4">
<div class="border-gray border p-4">
<ArticleCard
content={{
title: 'installing tea',
@ -20,7 +20,7 @@
}}
/>
</div>
<div class="border border-gray p-4">
<div class="border-gray border p-4">
<ArticleCard
content={{
title: 'authenticating',
@ -32,7 +32,7 @@
onClick={doStuff}
/>
</div>
<div class="border border-gray p-4">
<div class="border-gray border p-4">
<ArticleCard
content={{
title: 'give us a star',

View file

@ -15,10 +15,10 @@
<PanelHeader title="My installs" ctaLabel="Check for updates >" ctaLink="#" />
<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
{#if packages.length > 0}
{#each packages as pkg}
<div class="border border-t-0 border-l-0 border-gray p-4">
<div class="border-gray border border-t-0 border-l-0 p-4">
<MiniPackageCard
{pkg}
ctaLabel="DETAILS"
@ -30,7 +30,7 @@
{/each}
{:else}
{#each Array(12) as _}
<section class="h-50 border border-gray p-4">
<section class="h-50 border-gray border p-4">
<Preloader />
</section>
{/each}

View file

@ -15,7 +15,7 @@
{#if news.length}
<Posts posts={news} linkTarget="_blank" />
{:else}
<section class="h-64 border border-gray bg-black p-4">
<section class="border-gray h-64 border bg-black p-4">
<Preloader />
</section>
{/if}

View file

@ -27,22 +27,22 @@
});
</script>
<section class="mt-4 border border-gray bg-black">
<section class="border-gray mt-4 border bg-black">
<header class="flex p-2">
<figure class="grow-1 w-1/3">
<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
</figure>
<article class="w-2/3 p-4 pt-8">
<h3 class="text-3xl text-primary">{pkg.full_name}</h3>
<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
<h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
<div class="mt-4">
<StarRating maxRating={5} rating={packageRating} />
</div>
<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
</article>
</header>
<footer class="flex h-20 border-t border-gray text-white">
<footer class="border-gray flex h-20 border-t text-white">
<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}

View file

@ -28,21 +28,21 @@
// ideally they should work like metro-ui to not have extreme height diff between columns
</script>
<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
<section class="flex flex-row flex-wrap bg-black font-machina">
<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
<header class="border-gray text-primary border bg-black p-4">REVIEWS ({reviews.length})</header>
<section class="font-machina flex flex-row flex-wrap bg-black">
<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
{#each col1 as review}
<ReviewCard {review} />
<div class="mt-4" />
{/each}
</div>
<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
{#each col2 as review}
<ReviewCard {review} />
<div class="mt-4" />
{/each}
</div>
<div class="w-1/3 border-0 border-x-2 border-b-2 border-gray p-4">
<div class="border-gray w-1/3 border-0 border-x-2 border-b-2 p-4">
{#each col3 as review}
<ReviewCard {review} />
<div class="mt-4" />
@ -50,7 +50,7 @@
</div>
</section>
{#if showLimit <= reviews.length && showMore === false}
<footer class="border border-gray bg-black p-4">
<footer class="border-gray border bg-black p-4">
<button on:click={() => (showMore = true)}>SHOW MORE</button>
</footer>
{/if}

View file

@ -30,7 +30,7 @@
});
</script>
<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
<span>{title}</span>
<a href="/packages" class="font-sono text-sm underline">View all packages</a>
</header>
@ -56,7 +56,7 @@
{/each}
{:else}
{#each Array(9) as _}
<section class="h-50 border border-gray p-4">
<section class="h-50 border-gray border p-4">
<Preloader />
</section>
{/each}

View file

@ -4,11 +4,11 @@
export { clazz as class };
</script>
<figure class={`relative mb-8 h-32 w-full font-machina uppercase ${clazz}`}>
<figure class={`font-machina relative mb-8 h-32 w-full uppercase ${clazz}`}>
{#if coverUrl}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if}
<div class="absolute bottom-0 z-10 text-6xl leading-[32px] text-primary">
<div class="text-primary absolute bottom-0 z-10 text-6xl leading-[32px]">
<slot />
</div>
</figure>

View file

@ -7,13 +7,13 @@
</script>
<div class="card social-box" style="width: 100%; float:right;">
<header class="border-b border-gray pt-7 pb-7 pl-5 text-primary">PRE-FLIGHT</header>
<div class="listbox-item border-b border-gray p-6">
<header class="border-gray text-primary border-b pt-7 pb-7 pl-5">PRE-FLIGHT</header>
<div class="listbox-item border-gray border-b p-6">
<a href="/cli">
<p>Install Tea</p>
</a>
</div>
<div class="listbox-item border-b border-gray p-6">
<div class="listbox-item border-gray border-b p-6">
<div>
<p>Authenticate</p>
</div>

View file

@ -10,18 +10,18 @@
</script>
{#if user}
<section class="border-2 border-gray bg-black p-2">
<div class="profile_banner container flex border border-gray bg-black">
<section class="border-gray border-2 bg-black p-2">
<div class="profile_banner border-gray container flex border bg-black">
<img class="w-1/5" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
<div class="flex w-4/5 items-center p-5">
<div class="w-1/2 pl-5">
<p class="uppercase text-gray">Authenticated with GitHub</p>
<p class="text-gray uppercase">Authenticated with GitHub</p>
<p />
<p class="text-4xl text-primary">@{user.login}</p>
<p class="text-primary text-4xl">@{user.login}</p>
</div>
<div class="h-full border-l border-gray" />
<div class="border-gray h-full border-l" />
<div class="w-1/2 pl-10">
<p class="uppercase leading-loose text-gray">
<p class="text-gray uppercase leading-loose">
Country: <span>{user?.country}</span><br />Wallet:
{#if user.wallet}
<span>{user.wallet}</span>

View file

@ -61,13 +61,13 @@
packagesStore.subscribe(setPackages);
</script>
<div class="border border-gray bg-black">
<div class="border-gray border bg-black">
<section class="flex items-center justify-between">
<div>
<SearchInput size="medium" {onSearch} />
</div>
<div class="pr-4">
<section class="h-12 w-48 border border-gray">
<section class="border-gray h-12 w-48 border">
<SortingButtons {onSort} />
</section>
</div>
@ -94,7 +94,7 @@
{/each}
{:else}
{#each Array(12) as _}
<section class="h-50 border border-gray p-4">
<section class="h-50 border-gray border p-4">
<Preloader />
</section>
{/each}

View file

@ -20,7 +20,7 @@
};
</script>
<section class="sorting-container bg-black font-machina text-white">
<section class="sorting-container font-machina bg-black text-white">
<div class="dropdown">
<div class="dropdown-title">SORT ORDER</div>
<ul class="dropdown-content column flex">

View file

@ -55,18 +55,18 @@
<section class={term ? 'show' : ''}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<figure on:click={onClose} />
<div class="z-20 border border-gray bg-black">
<div class="border-gray z-20 border bg-black">
<header class="flex justify-between p-4">
<div class="text-2xl text-primary">Showing search results for `{term}`</div>
<div class="text-primary text-2xl">Showing search results for `{term}`</div>
<button on:click={onClose}>&#x2715</button>
</header>
<menu class="flex h-8 w-full gap-4 bg-accent px-4 text-xs">
<menu class="bg-accent flex h-8 w-full gap-4 px-4 text-xs">
<button>packages ({packages.length})</button>
<button>articles ({articles.length})</button>
<button>workshops ({workshops.length})</button>
</menu>
<header class="p-4 text-lg text-primary">
<header class="text-primary p-4 text-lg">
Top Package Results ({packages.length})
</header>
<ul class="grid grid-cols-3">
@ -91,29 +91,29 @@
{/each}
{:else if loading}
{#each Array(12) as _}
<section class="h-50 border border-gray p-4">
<section class="h-50 border-gray border p-4">
<Preloader />
</section>
{/each}
{/if}
</ul>
<header class="p-4 text-lg text-primary">
<header class="text-primary p-4 text-lg">
Top Article Results ({articles.length})
</header>
{#if articles.length}
<Posts posts={articles} linkTarget="_blank" />
{:else if loading}
<section class="h-64 border border-gray bg-black p-4">
<section class="border-gray h-64 border bg-black p-4">
<Preloader />
</section>
{/if}
<header class="p-4 text-lg text-primary">
<header class="text-primary p-4 text-lg">
Top Workshop Results ({workshops.length})
</header>
{#if workshops.length}
<Posts posts={workshops} linkTarget="_blank" />
{:else if loading}
<section class="h-64 border border-gray bg-black p-4">
<section class="border-gray h-64 border bg-black p-4">
<Preloader />
</section>
{/if}

View file

@ -30,7 +30,7 @@
});
</script>
<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
<header class="border-gray text-primary flex items-center justify-between border bg-black p-4">
<span>MORE LIKE THIS</span>
</header>
<ul class="grid grid-cols-3 bg-black">
@ -55,7 +55,7 @@
{/each}
{:else}
{#each Array(9) as _}
<section class="h-50 border border-gray p-4">
<section class="h-50 border-gray border p-4">
<Preloader />
</section>
{/each}

View file

@ -23,7 +23,7 @@
<a href="/profile">
<section class="flex">
<img width="40" height="40" src={user.avatar_url || '/images/bored-ape.png'} alt="profile" />
<div class="p-2 text-gray">@{user.login}</div>
<div class="text-gray p-2">@{user.login}</div>
</section>
</a>
{:else}
@ -32,6 +32,6 @@
<figure class="p-2">
<img width="28" height="28" src="/images/github.png" alt="profile" />
</figure>
<div class="p-2 text-gray">Login</div>
<div class="text-gray p-2">Login</div>
</section>
{/if}

View file

@ -19,11 +19,11 @@
});
</script>
<header class="flex w-full border border-l-0 border-r-0 border-gray">
<header class="border-gray flex w-full border border-l-0 border-r-0">
<a href="/">
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
</a>
<ul class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
<ul class="text-gray flex h-10 gap-4 pl-4 align-middle leading-10">
<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
</ul>
@ -33,7 +33,7 @@
placeholder="search the tea store"
{onSearch}
/>
<ul class="flex gap-4 pr-4 pt-2 align-middle text-gray">
<ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
<button class="icon-filter hover:text-white" />
<button class="icon-share hover:text-white" />
<button class="icon-star-empty hover:text-white" />
@ -41,7 +41,7 @@
<ProfileNavButton />
</header>
<menu
class="flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 border-gray pl-4 align-middle leading-10 text-gray"
class="border-gray text-gray flex h-10 gap-4 border border-l-0 border-r-0 border-t-0 pl-4 align-middle leading-10"
>
<a href="/cli" class={currentPath === '/cli' ? 'active' : ''}>install teaCli</a>
<a href="/documentation" class={currentPath === '/documentation' ? 'active' : ''}>documentation</a

View file

@ -30,7 +30,7 @@
<!-- all pages get inserted in this slot -->
<slot />
</div>
<footer class="mt-8 w-full border border-r-0 border-gray bg-black">
<footer class="border-gray mt-8 w-full border border-r-0 bg-black">
<FooterLinks />
</footer>
<SearchPopupResults />