Skip to content

Commit

Permalink
feat: use immich/ui components (#55)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrasm91
jrasm91 authored Nov 12, 2024
1 parent c9d9537 commit 05df326
Show file tree
Hide file tree
Showing 11 changed files with 242 additions and 157 deletions.
18 changes: 6 additions & 12 deletions apps/buy.immich.app/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import '$lib/app.css';
import Button from '$lib/components/button.svelte';
import { Button } from '@immich/ui';
import Icon from '$lib/components/icon.svelte';
import { mdiCheckCircleOutline, mdiServer, mdiAccount } from '@mdi/js';
import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
Expand All @@ -9,7 +9,7 @@
<div class="w-full h-full md:max-w-[900px] px-4 py-10 sm:px-20 lg:p-10 m-auto">
<div class="m-auto">
<div
class="flex gap-4 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 py-4 px-6 border supporter-effect transition-all"
class="flex gap-4 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 py-4 px-6 border rounded-lg overflow-hidden supporter-effect transition-all"
>
<div class="h-12 w-12">
<img src={'/img/immich-logo.svg'} alt={'immich-logo'} class="shadow-lg rounded-full bg-white" />
Expand All @@ -20,7 +20,7 @@
<div class="flex gap-6 mt-4 justify-between flex-wrap lg:flex-nowrap">
<!-- SERVER -->
<div
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-3xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20 transition-all"
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20 transition-all"
>
<div class="hidden md:block text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiServer} size="56" />
Expand Down Expand Up @@ -50,15 +50,13 @@
</div>
</div>

<a href={getCallbackUrl(ImmichLicense.Server)}>
<Button fullwidth>Select</Button>
</a>
<Button href={getCallbackUrl(ImmichLicense.Server)} fullWidth size="large">Select</Button>
</div>
</div>

<!-- INDIVIDUAL -->
<div
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-3xl bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20"
class="border border-gray-300 dark:border-gray-800 w-full p-4 md:p-8 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-immich-primary/10 dark:hover:bg-immich-primary/20"
>
<div class="hidden md:block text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiAccount} size="56" />
Expand Down Expand Up @@ -88,9 +86,7 @@
</div>
</div>

<a href={getCallbackUrl(ImmichLicense.Individual)}>
<Button fullwidth>Select</Button>
</a>
<Button href={getCallbackUrl(ImmichLicense.Individual)} fullWidth size="large">Select</Button>
</div>
</div>
</div>
Expand Down Expand Up @@ -123,7 +119,6 @@
background-clip: padding-box;
animation: gradient 10s ease infinite;
z-index: 1;
border-radius: 24px;
box-shadow:
rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
Expand All @@ -144,7 +139,6 @@
rgba(22, 193, 68, 0.15)
);
content: '';
border-radius: 24px;
animation: gradient 10s ease infinite;
background-size: 400% 400%;
z-index: -1;
Expand Down
14 changes: 5 additions & 9 deletions apps/buy.immich.app/claim/[[id]]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import Icon from '$lib/components/icon.svelte';
import LicenseKey from '$lib/components/license-key.svelte';
import { getAuthorizeUrl } from '$lib/utils/oauth';
import { Button } from '@immich/ui';
import { mdiGithub } from '@mdi/js';
import type { PageData } from './$types';
Expand Down Expand Up @@ -81,15 +82,10 @@
{:else}
<Card status={errorMessage ? 'error' : undefined}>
<div class="flex flex-col gap-2">
<a href={''}>
<button
onclick={handleLogin}
class="flex mt-2 items-center gap-2 text-lg p-2 w-full rounded-full text-white bg-black hover:shadow-xl"
>
<Icon path={mdiGithub} size="3em" />
<span class="pr-3"> Login with GitHub </span>
</button>
</a>
<Button onclick={handleLogin} color="secondary">
<Icon path={mdiGithub} size="2em" />
<span>Login with GitHub</span>
</Button>
{#if errorMessage}
<div class=" text-lg w-full p-4 rounded-lg">
<p>{errorMessage}</p>
Expand Down
13 changes: 5 additions & 8 deletions apps/buy.immich.app/success/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import LicenseKey from '$lib/components/license-key.svelte';
import LoadingSpinner from '$lib/components/loading-spinner.svelte';
import { getPaymentStatus, getRedirectUrl, PurchaseStatus, type PaymentStatusResponseDto } from '$lib/utils/license';
import { Button } from '@immich/ui';
import { onMount } from 'svelte';
import type { PageData } from './$types';
Expand Down Expand Up @@ -70,7 +71,7 @@
</div>

<section class="flex justify-center mt-6">
<img src="/img/social-preview.webp" alt="Sociel Preview" class="rounded-3xl" />
<img src="/img/social-preview.webp" alt="Sociel Preview" class="rounded-lg" />
</section>

<section class="mt-10">
Expand All @@ -96,13 +97,9 @@
<LoadingSpinner />
<p>Redirecting back to your instance, click on the button below if you aren't navigated back</p>
</div>

<a href={getRedirectUrl(response.purchaseId, data.instanceUrl)}>
<button
class="mt-2 p-4 bg-immich-primary text-white rounded-full dark:text-black dark:bg-immich-dark-primary hover:shadow-xl"
>Activate your instance</button
>
</a>
<Button href={getRedirectUrl(response.purchaseId, data.instanceUrl)} size="large"
>Activate your instance</Button
>
{:else}
<LicenseKey productKey={response.purchaseId} />
<p class="text-sm mt-4">The product key is also sent to the email you provided</p>
Expand Down
12 changes: 5 additions & 7 deletions apps/my.immich.app/[...rest]/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<script lang="ts">
import { preventDefault } from 'svelte/legacy';
import { StorageKey } from '$lib';
import type { PageData } from './$types';
import '$lib/app.css';
import { Button } from '@immich/ui';
import type { PageData } from './$types';
interface Props {
data: PageData;
Expand All @@ -27,7 +28,7 @@
</script>

<div class="w-screen h-screen bg-immich-dark-bg overflow-auto p-4">
<div class="mx-auto max-w-screen-sm m-6 p-12 rounded-[50px] bg-immich-dark-gray text-immich-dark-fg">
<div class="mx-auto max-w-screen-sm m-6 p-12 rounded-lg bg-immich-dark-gray text-immich-dark-fg">
<section class="flex justify-center">
<img src="/img/immich-logo-stacked-dark.svg" class="h-64" alt="Immich logo" />
</section>
Expand Down Expand Up @@ -55,12 +56,9 @@
{#if saved}
<p class="text-center sm:text-right m-0 px-5 py-3 text-sm text-immich-dark-primary">Saved!</p>
{:else}
<button
class="w-full sm:w-auto border-0 text-white rounded-xl px-5 py-3 items-center justify-center bg-immich-primary hover:bg-immich-primary/80"
type="submit"
>
<Button type="submit" class="w-full sm:w-auto">
{targetUrl ? 'Save & Redirect' : 'Save'}
</button>
</Button>
{/if}
</div>
</form>
Expand Down
Loading

0 comments on commit 05df326

Please sign in to comment.