Skip to content

Commit

Permalink
feat: use immich/ui card, text, and heading components (#58)
Browse files Browse the repository at this point in the history 
* feat: use immich/ui card, text, and heading components

* chore: remove unused tailwind variables
  • Loading branch information
@jrasm91
jrasm91 authored Nov 18, 2024
1 parent 6c8dcd6 commit 3e2ec13
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 142 deletions.
175 changes: 88 additions & 87 deletions apps/buy.immich.app/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,112 @@
<script lang="ts">
import '$lib/app.css';
import { Button, Logo } from '@immich/ui';
import Icon from '$lib/components/icon.svelte';
import { mdiCheckCircleOutline, mdiServer, mdiAccount } from '@mdi/js';
import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
import { Button, Logo, Text, VStack } from '@immich/ui';
import { mdiAccount, mdiCheckCircleOutline, mdiServer } from '@mdi/js';
</script>

<div class="w-full h-full md:max-w-[900px] px-4 py-10 sm:px-20 lg:p-10 m-auto">
<div class="w-full h-full md:max-w-[900px] p-4 sm:p-8 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 rounded-lg overflow-hidden supporter-effect transition-all"
>
<Logo />
<p class="dark:text-gray-100 text-2xl font-medium text-immich-primary">Purchase Immich</p>
</div>
<section class="mt-6">
<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-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" />
<p class="font-semibold text-lg mt-1">Server</p>
</div>

<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$100</p>
<p>per server</p>
</div>
<VStack gap={4}>
<div
class="flex gap-4 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"
>
<Logo />
<p class="dark:text-gray-100 text-2xl font-medium text-immich-primary">Purchase Immich</p>
</div>
<section>
<div class="flex gap-6 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-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" />
<p class="font-semibold text-lg mt-1">Server</p>
</div>

<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">For the whole server</p>
</div>
<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$100</p>
<p>per server</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Lifetime purchase</p>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">For the whole server</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Lifetime purchase</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Supporter status</p>
</div>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Supporter status</p>
</div>
<Button href={getCallbackUrl(ImmichLicense.Server)} fullWidth size="large">Select</Button>
</div>

<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-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" />
<p class="font-semibold text-lg mt-1">Individual</p>
</div>

<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$25</p>
<p>per user</p>
</div>
<!-- INDIVIDUAL -->
<div
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" />
<p class="font-semibold text-lg mt-1">Individual</p>
</div>

<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">For an individual</p>
</div>
<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$25</p>
<p>per user</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Lifetime purchase</p>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">For an individual</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Lifetime purchase</p>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Supporter status</p>
</div>
</div>

<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">Supporter status</p>
</div>
<Button href={getCallbackUrl(ImmichLicense.Individual)} fullWidth size="large">Select</Button>
</div>

<Button href={getCallbackUrl(ImmichLicense.Individual)} fullWidth size="large">Select</Button>
</div>
</div>
</div>
</section>

<div class="text-gray-800 dark:text-white my-10">
<p>
Building Immich takes a lot of time and effort, and we have full-time engineers working on it to make it as good
as we possibly can.
</p>
<br />
<p>
Our mission is for open-source software and ethical business practices to become a sustainable income source for
developers and to create a privacy-respecting ecosystem with real alternatives to exploitative cloud services.
</p>
<br />
<p>
As we’re committed not to add paywalls, this purchase will not grant you any additional features in Immich. We
rely on users like you to support Immich’s ongoing development.
</p>
</div>
</section>

<VStack gap={4}>
<Text>
Building Immich takes a lot of time and effort, and we have full-time engineers working on it to make it as
good as we possibly can.
</Text>
<Text>
Our mission is for open-source software and ethical business practices to become a sustainable income source
for developers and to create a privacy-respecting ecosystem with real alternatives to exploitative cloud
services.
</Text>
<Text>
As we’re committed not to add paywalls, this purchase will not grant you any additional features in Immich. We
rely on users like you to support Immich’s ongoing development.
</Text>
</VStack>
</VStack>
</div>
</div>

Expand Down
83 changes: 45 additions & 38 deletions apps/my.immich.app/[...rest]/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script lang="ts">
import { preventDefault } from 'svelte/legacy';
import { StorageKey } from '$lib';
import '$lib/app.css';
import { Button, Logo } from '@immich/ui';
import { Button, Card, CardBody, Heading, Logo, Text, VStack } from '@immich/ui';
import { preventDefault } from 'svelte/legacy';
import type { PageData } from './$types';
interface Props {
Expand All @@ -27,41 +27,48 @@
};
</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-lg bg-immich-dark-gray text-immich-dark-fg">
<section class="flex justify-center">
<Logo variant="stacked" theme="dark" size="landing" />
</section>
<section>
<h1 class="md:text-3xl mb-2 text-immich-dark-primary">My Immich</h1>
<p class="mb-4">My Immich allows public links to link you to specific areas of your personal Immich instance.</p>
<form onsubmit={preventDefault(handleSubmit)}>
<div class="mb-4 flex flex-col">
<label id="instance-url-label" for="instance-url-input" class="font-medium immich-dark-fg mb-2">
Instance URL
</label>
<input
id="instance-url-input"
aria-labelledby="instance-url-label"
class="rounded-xl px-3 py-3 text-sm bg-gray-600 text-immich-dark-fg border-none outline-none"
type="text"
placeholder="https://demo.immich.app/"
bind:value={instanceUrl}
oninput={() => handleChange()}
aria-label="Instance URL"
/>
<p class="mt-2 text-sm">Note: This URL is only stored in your browser.</p>
</div>
<div class="flex justify-end">
{#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 type="submit" class="w-full sm:w-auto">
{targetUrl ? 'Save & Redirect' : 'Save'}
</Button>
{/if}
</div>
</form>
</section>
<div class="dark w-screen h-screen bg-light overflow-auto p-4 md:p-12 lg:p-24">
<div class="mx-auto max-w-screen-sm">
<Card color="secondary" variant="subtle">
<CardBody class="p-4 lg:p-8">
<section>
<div class="flex justify-center">
<Logo variant="stacked" theme="dark" size="landing" />
</div>
<VStack gap={4}>
<Heading size="large" color="primary">My Immich</Heading>
<Text>My Immich allows public links to link you to specific areas of your personal Immich instance.</Text>

<form onsubmit={preventDefault(handleSubmit)}>
<VStack>
<label id="instance-url-label" for="instance-url-input" class="font-medium immich-dark-fg">
Instance URL
</label>
<input
id="instance-url-input"
aria-labelledby="instance-url-label"
class="rounded-xl px-3 py-3 text-sm bg-gray-600 text-immich-dark-fg border-none outline-none"
type="text"
placeholder="https://demo.immich.app/"
bind:value={instanceUrl}
oninput={() => handleChange()}
aria-label="Instance URL"
/>
<Text size="small">Note: This URL is only stored in your browser.</Text>
</VStack>
<div class="flex justify-end">
{#if saved}
<Text size="small" color="primary">Saved!</Text>
{:else}
<Button type="submit" class="w-full sm:w-auto">
{targetUrl ? 'Save & Redirect' : 'Save'}
</Button>
{/if}
</div>
</form>
</VStack>
</section>
</CardBody>
</Card>
</div>
</div>
9 changes: 5 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"format:fix": "prettier --write ."
},
"devDependencies": {
"@immich/ui": "^0.3.0",
"@immich/ui": "^0.4.0",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.8.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
Expand Down
6 changes: 0 additions & 6 deletions src/lib/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,11 @@
--immich-fg: 0 0 0;
--immich-gray: 246 246 244;
--immich-error: 229 115 115;
--immich-success: 129 199 132;
--immich-warning: 255 183 77;

/* dark */
--immich-dark-primary: 172 203 250;
--immich-dark-bg: 0 0 0;
--immich-dark-fg: 229 231 235;
--immich-dark-gray: 33 33 33;
--immich-dark-error: 211 47 47;
--immich-dark-success: 56 142 60;
--immich-dark-warning: 245 124 0;
}

:root {
Expand Down
6 changes: 0 additions & 6 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,11 @@ module.exports = {
'immich-fg': 'rgb(var(--immich-fg) / <alpha-value>)',
'immich-gray': 'rgb(var(--immich-gray) / <alpha-value>)',
'immich-error': 'rgb(var(--immich-error) / <alpha-value>)',
'immich-success': 'rgb(var(--immich-success) / <alpha-value>)',
'immich-warning': 'rgb(var(--immich-warning) / <alpha-value>)',

// Dark Theme
'immich-dark-primary': 'rgb(var(--immich-dark-primary) / <alpha-value>)',
'immich-dark-bg': 'rgb(var(--immich-dark-bg) / <alpha-value>)',
'immich-dark-fg': 'rgb(var(--immich-dark-fg) / <alpha-value>)',
'immich-dark-gray': 'rgb(var(--immich-dark-gray) / <alpha-value>)',
'immich-dark-error': 'rgb(var(--immich-dark-error) / <alpha-value>)',
'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
},
fontFamily: {
'immich-title': ['Snowburst One', 'cursive'],
Expand Down

0 comments on commit 3e2ec13

Please sign in to comment.