immich-app/static-pages
1
0
Fork 0
mirror of https://github.com/immich-app/static-pages.git synced 2026-09-30 13:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use immich/ui components (#55)

Browse Source
This commit is contained in:
Jason Rasmussen
2024-11-12 14:58:14 -05:00
committed by GitHub
parent c9d9537274
commit 05df3264df
11 changed files with 242 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/buy.immich.app/+page.svelte
+6 -12
View File
@@ -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';
@@ -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" />
@@ -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" />
@@ -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" />
@@ -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>
@@ -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;
@@ -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;
apps/buy.immich.app/claim/[[id]]/+page.svelte
+5 -9
View File
@@ -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';
@@ -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>
apps/buy.immich.app/success/+page.svelte
+5 -8
View File
@@ -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';
@@ -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">
@@ -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>
apps/my.immich.app/[...rest]/+page.svelte
+5 -7
View File
@@ -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;
@@ -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>
@@ -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>
package-lock.json
Generated
+185 -4
View File
@@ -11,6 +11,7 @@
"@mdi/js": "^7.4.47"
},
"devDependencies": {
"@immich/ui": "^0.2.2",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.8.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
@@ -556,6 +557,34 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.8"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.12",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
"integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.8"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.8",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
"dev": true,
"license": "MIT"
},
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -607,6 +636,31 @@
"url": "https://github.com/sponsors/nzakas"
}
},
"node_modules/@immich/ui": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.2.2.tgz",
"integrity": "sha512-FGseCMBMP0yuOV7nF/RuZ/QDwacLCDbCWw+ip564qW5zS7foVY3oKqjRD0apEROO1/SQwOE5+cZLWjI88t7Hvw==",
"dev": true,
"license": "GNU Affero General Public License version 3",
"dependencies": {
"@mdi/js": "^7.4.47",
"bits-ui": "^1.0.0-next.46",
"tailwind-variants": "^0.3.0"
},
"peerDependencies": {
"svelte": "^5.0.0"
}
},
"node_modules/@internationalized/date": {
"version": "3.5.6",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz",
"integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1063,6 +1117,16 @@
"vite": "^5.0.0"
}
},
"node_modules/@swc/helpers": {
"version": "0.5.15",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
"integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -1623,6 +1687,31 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/bits-ui": {
"version": "1.0.0-next.51",
"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.51.tgz",
"integrity": "sha512-6YlLpb5NtKawm/mtDGXQHtD0gp7Yvd8STvWVLfVpSQaqEV7Pb+TeMhp5Lv83NbU9H3gRFjfNToB7hGxBhM2tng==",
"dev": true,
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.6.4",
"@floating-ui/dom": "^1.6.7",
"@internationalized/date": "^3.5.6",
"esm-env": "^1.1.2",
"runed": "^0.15.2",
"svelte-toolbelt": "^0.4.4"
},
"engines": {
"node": ">=18",
"pnpm": ">=8.7.0"
},
"funding": {
"url": "https://github.com/sponsors/huntabyte"
},
"peerDependencies": {
"svelte": "^5.0.0-next.1"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1805,6 +1894,16 @@
"node": ">= 6"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2201,10 +2300,11 @@
"license": "MIT"
},
"node_modules/esm-env": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
"dev": true
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
"integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
"dev": true,
"license": "MIT"
},
"node_modules/espree": {
"version": "10.3.0",
@@ -2570,6 +2670,13 @@
"node": ">=0.8.19"
}
},
"node_modules/inline-style-parser": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
"dev": true,
"license": "MIT"
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3474,6 +3581,22 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/runed": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/runed/-/runed-0.15.3.tgz",
"integrity": "sha512-HtayB+loDcGdqJDHW8JFdsZzGQMyVzim6+s3052MkjZnwmwDstmF+cusMeTssBe6TCdt5i9D/Tb+KYXN3L0kXA==",
"dev": true,
"funding": [
"https://github.com/sponsors/huntabyte",
"https://github.com/sponsors/tglide"
],
"dependencies": {
"esm-env": "^1.0.0"
},
"peerDependencies": {
"svelte": "^5.0.0-next.1"
}
},
"node_modules/sade": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -3682,6 +3805,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/style-to-object": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
"integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
"dev": true,
"license": "MIT",
"dependencies": {
"inline-style-parser": "0.2.4"
}
},
"node_modules/sucrase": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -3957,6 +4090,54 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/svelte-toolbelt": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.4.6.tgz",
"integrity": "sha512-k8OUvXBUifHZcAlWeY/HLg/4J0v5m2iOfOhn8fDmjt4AP8ZluaDh9eBFus9lFiLX6O5l6vKqI1dKL5wy7090NQ==",
"dev": true,
"funding": [
"https://github.com/sponsors/huntabyte"
],
"dependencies": {
"clsx": "^2.1.1",
"style-to-object": "^1.0.8"
},
"engines": {
"node": ">=18",
"pnpm": ">=8.7.0"
},
"peerDependencies": {
"svelte": "^5.0.0-next.126"
}
},
"node_modules/tailwind-merge": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
"integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
"dev": true,
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwind-variants": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.0.tgz",
"integrity": "sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==",
"dev": true,
"license": "MIT",
"dependencies": {
"tailwind-merge": "^2.5.4"
},
"engines": {
"node": ">=16.x",
"pnpm": ">=7.x"
},
"peerDependencies": {
"tailwindcss": "*"
}
},
"node_modules/tailwindcss": {
"version": "3.4.14",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
package.json
+1
View File
@@ -15,6 +15,7 @@
"format:fix": "prettier --write ."
},
"devDependencies": {
"@immich/ui": "^0.2.2",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.8.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
src/lib/app.css
+22
View File
@@ -22,6 +22,28 @@
--immich-dark-success: 56 142 60;
--immich-dark-warning: 245 124 0;
}
:root {
/* light */
--immich-ui-primary: 66 80 175;
--immich-ui-dark: 0 0 0;
--immich-ui-light: 255 255 255;
--immich-ui-success: 34 197 94;
--immich-ui-danger: 180 0 0;
--immich-ui-warning: 255 170 0;
--immich-ui-info: 14 165 233;
}
.dark {
/* dark */
--immich-ui-primary: 172 203 250;
--immich-ui-light: 0 0 0;
--immich-ui-dark: 229 231 235;
/* --immich-success: 56 142 60; */
--immich-ui-danger: 239 68 68;
--immich-ui-warning: 255 170 0;
--immich-ui-info: 14 165 233;
}
}
@font-face {
src/lib/components/button.svelte
-105
View File
@@ -1,105 +0,0 @@
<script lang="ts" module>
export type Type = 'button' | 'submit' | 'reset';
export type Color =
| 'primary'
| 'secondary'
| 'transparent-primary'
| 'text-primary'
| 'light-red'
| 'red'
| 'green'
| 'gray'
| 'transparent-gray'
| 'dark-gray'
| 'overlay-primary';
export type Size = 'tiny' | 'icon' | 'link' | 'sm' | 'base' | 'lg';
export type Rounded = 'lg' | '3xl' | 'full' | false;
export type Shadow = 'md' | false;
</script>
<script lang="ts">
import type { Snippet } from 'svelte';
import { createBubbler } from 'svelte/legacy';
const bubble = createBubbler();
interface Props {
type?: Type;
color?: Color;
size?: Size;
rounded?: Rounded;
shadow?: Shadow;
disabled?: boolean;
fullwidth?: boolean;
border?: boolean;
title?: string | undefined;
form?: string | undefined;
class?: string;
children?: Snippet;
}
let {
type = 'button',
color = 'primary',
size = 'base',
rounded = '3xl',
shadow = 'md',
disabled = false,
fullwidth = false,
border = false,
title = '',
form = undefined,
class: className = '',
children,
}: Props = $props();
const colorClasses: Record<Color, string> = {
primary:
'bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/90',
secondary:
'bg-gray-500 dark:bg-gray-200 text-white dark:text-immich-dark-gray enabled:hover:bg-gray-500/90 enabled:dark:hover:bg-gray-200/90',
'transparent-primary':
'text-gray-500 dark:text-immich-dark-primary enabled:hover:bg-gray-100 enabled:dark:hover:bg-gray-700',
'text-primary':
'text-immich-primary dark:text-immich-dark-primary enabled:dark:hover:bg-immich-dark-primary/10 enabled:hover:bg-immich-primary/10',
'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
red: 'bg-red-500 text-white enabled:hover:bg-red-400',
green: 'bg-green-400 text-gray-800 enabled:hover:bg-green-400/90',
gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
'transparent-gray':
'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',
'dark-gray':
'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white',
'overlay-primary': 'text-gray-500 enabled:hover:bg-gray-100',
};
const sizeClasses: Record<Size, string> = {
tiny: 'p-0 ml-2 mr-0 align-top',
icon: 'p-2.5',
link: 'p-2 font-medium',
sm: 'px-4 py-2 text-sm font-medium',
base: 'px-6 py-3 font-medium',
lg: 'px-6 py-4 font-semibold',
};
</script>
<button
{type}
{disabled}
{title}
{form}
onclick={bubble('click')}
onfocus={bubble('focus')}
onblur={bubble('blur')}
class="{className} inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
color
]} {sizeClasses[size]}"
class:rounded-lg={rounded === 'lg'}
class:rounded-3xl={rounded === '3xl'}
class:rounded-full={rounded === 'full'}
class:shadow-md={shadow === 'md'}
class:w-full={fullwidth}
class:border
>
{@render children?.()}
</button>
src/lib/components/card.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
</script>
<div
class="flex gap-4 flex-col place-content-center place-items-center text-center mt-4 justify-between relative border p-10 rounded-3xl bg-gray-100"
class="flex gap-4 flex-col place-content-center place-items-center text-center mt-4 justify-between relative border p-10 rounded-lg bg-gray-100"
>
<div class="absolute -top-[24px] left-[calc(50%-24px)]">
{#if status === 'loading'}
src/lib/components/license-key.svelte
+3 -10
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { getRedirectUrl } from '$lib/utils/license';
import { Button } from '@immich/ui';
interface Props {
productKey: string;
@@ -29,16 +30,8 @@
<div class="bg-immich-primary/10 text-immich-primary py-3 px-6 rounded-lg">{productKey}</div>
</div>
<div class="flex w-full gap-2 mt-2">
<a href={getRedirectUrl(productKey, 'https://my.immich.app')} class="w-full">
<button
type="button"
class="px-4 py-3 text-white bg-immich-primary rounded-xl dark:text-black dark:bg-immich-dark-primary hover:shadow-xl w-full"
>Activate</button
>
</a>
<button onclick={handleCopy} type="button" class="px-4 py-3 text-dark bg-gray-300 rounded-xl hover:shadow-xl w-full"
>Copy</button
>
<Button href={getRedirectUrl(productKey, 'https://my.immich.app')} fullWidth size="large">Activate</Button>
<Button onclick={handleCopy} fullWidth color="secondary" size="large">Copy</Button>
</div>
</div>
{#if clipboardStatus === 'success'}
tailwind.config.js
+9 -1
View File
@@ -1,10 +1,18 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./{apps,src}/**/*.{html,js,svelte,ts}'],
content: ['./{apps,src}/**/*.{html,js,svelte,ts}', './node_modules/@immich/ui/dist/**/*.{svelte,js}'],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: 'rgb(var(--immich-ui-primary) / <alpha-value>)',
light: 'rgb(var(--immich-ui-light) / <alpha-value>)',
dark: 'rgb(var(--immich-ui-dark) / <alpha-value>)',
success: 'rgb(var(--immich-ui-success) / <alpha-value>)',
danger: 'rgb(var(--immich-ui-danger) / <alpha-value>)',
warning: 'rgb(var(--immich-ui-warning) / <alpha-value>)',
info: 'rgb(var(--immich-ui-info) / <alpha-value>)',
// Light Theme
'immich-primary': 'rgb(var(--immich-primary) / <alpha-value>)',
'immich-bg': 'rgb(var(--immich-bg) / <alpha-value>)',