diff --git a/web/src/app.css b/web/src/app.css index d46ca41ce..3802a4b25 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -15,7 +15,6 @@ :root { font-family: 'Work Sans', sans-serif; - /* --immich-icon-button-hover-color: #d3d3d3; */ } html { @@ -64,22 +63,6 @@ input:focus-visible { @apply font-medium text-gray-500 dark:text-gray-300; } - .immich-btn-primary { - @apply bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-gray-100 border dark:border-immich-dark-gray rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary dark:hover:bg-immich-dark-primary/90 hover:shadow-lg text-sm font-medium; - } - - .immich-btn-primary-big { - @apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold; - } - - .immich-btn-secondary-big { - @apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold; - } - - .immich-text-button { - @apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium; - } - /* width */ .immich-scrollbar::-webkit-scrollbar { width: 8px; diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte index c9d7555ec..4838a6d9c 100644 --- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte +++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte @@ -1,6 +1,7 @@ + + + + diff --git a/web/src/lib/components/shared-components/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte similarity index 73% rename from web/src/lib/components/shared-components/circle-icon-button.svelte rename to web/src/lib/components/elements/buttons/circle-icon-button.svelte index 6e85890e1..17d1a297e 100644 --- a/web/src/lib/components/shared-components/circle-icon-button.svelte +++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte @@ -1,7 +1,4 @@ + + + + diff --git a/web/src/lib/components/elements/buttons/link-button.svelte b/web/src/lib/components/elements/buttons/link-button.svelte new file mode 100644 index 000000000..fa45f384e --- /dev/null +++ b/web/src/lib/components/elements/buttons/link-button.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte index 526958b59..0f64c2a1a 100644 --- a/web/src/lib/components/forms/admin-registration-form.svelte +++ b/web/src/lib/components/forms/admin-registration-form.svelte @@ -2,6 +2,7 @@ import { goto } from '$app/navigation'; import { AppRoute } from '$lib/constants'; import { api } from '@api'; + import Button from '../elements/buttons/button.svelte'; let error: string; let password = ''; @@ -115,6 +116,6 @@ {/if}
- +
diff --git a/web/src/lib/components/forms/api-key-form.svelte b/web/src/lib/components/forms/api-key-form.svelte index 068e7bcfe..a11317bed 100644 --- a/web/src/lib/components/forms/api-key-form.svelte +++ b/web/src/lib/components/forms/api-key-form.svelte @@ -3,6 +3,7 @@ import { createEventDispatcher } from 'svelte'; import KeyVariant from 'svelte-material-icons/KeyVariant.svelte'; import FullScreenModal from '../shared-components/full-screen-modal.svelte'; + import Button from '../elements/buttons/button.svelte'; export let apiKey: Partial; export let title = 'API Key'; @@ -40,17 +41,8 @@
- - + +
diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte index 5c22eaf46..1a801db35 100644 --- a/web/src/lib/components/forms/api-key-secret.svelte +++ b/web/src/lib/components/forms/api-key-secret.svelte @@ -7,6 +7,7 @@ notificationController, NotificationType } from '../shared-components/notification/notification'; + import Button from '../elements/buttons/button.svelte'; export let secret = ''; @@ -54,16 +55,8 @@
- - + +
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte index fe8a82443..d28f7be4f 100644 --- a/web/src/lib/components/forms/change-password-form.svelte +++ b/web/src/lib/components/forms/change-password-form.svelte @@ -1,6 +1,7 @@ - + diff --git a/web/src/lib/components/shared-components/version-announcement-box.svelte b/web/src/lib/components/shared-components/version-announcement-box.svelte index fde48ba3e..b35fdda12 100644 --- a/web/src/lib/components/shared-components/version-announcement-box.svelte +++ b/web/src/lib/components/shared-components/version-announcement-box.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import FullScreenModal from './full-screen-modal.svelte'; import type { ServerVersionReponseDto } from '@api'; + import Button from '../elements/buttons/button.svelte'; export let serverVersion: ServerVersionReponseDto; @@ -72,10 +73,7 @@
- +
diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte index e07d4616d..0d61a3597 100644 --- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte +++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte @@ -6,7 +6,7 @@ import ContentCopy from 'svelte-material-icons/ContentCopy.svelte'; import CircleEditOutline from 'svelte-material-icons/CircleEditOutline.svelte'; import * as luxon from 'luxon'; - import CircleIconButton from '../shared-components/circle-icon-button.svelte'; + import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import { createEventDispatcher } from 'svelte'; import { goto } from '$app/navigation'; diff --git a/web/src/lib/components/user-settings-page/change-password-settings.svelte b/web/src/lib/components/user-settings-page/change-password-settings.svelte index 09fe5db4b..7f6f30530 100644 --- a/web/src/lib/components/user-settings-page/change-password-settings.svelte +++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte @@ -8,6 +8,7 @@ import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte'; + import Button from '../elements/buttons/button.svelte'; let password = ''; let newPassword = ''; @@ -64,13 +65,12 @@ />
- + on:click={() => handleChangePassword()}>Save
diff --git a/web/src/lib/components/user-settings-page/oauth-settings.svelte b/web/src/lib/components/user-settings-page/oauth-settings.svelte index fdaa7dfff..384db14e8 100644 --- a/web/src/lib/components/user-settings-page/oauth-settings.svelte +++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte @@ -9,6 +9,7 @@ notificationController, NotificationType } from '../shared-components/notification/notification'; + import Button from '../elements/buttons/button.svelte'; export let user: UserResponseDto; @@ -67,17 +68,10 @@ {:else if config.enabled} {#if user.oauthId} - + {:else} - + {/if} {/if} diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte index c87c05977..011a867b2 100644 --- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte +++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte @@ -13,6 +13,7 @@ NotificationType } from '../shared-components/notification/notification'; import { locale } from '$lib/stores/preferences.store'; + import Button from '../elements/buttons/button.svelte'; let keys: APIKeyResponseDto[] = []; @@ -124,11 +125,7 @@
- +
{#if keys.length > 0} diff --git a/web/src/lib/components/user-settings-page/user-profile-settings.svelte b/web/src/lib/components/user-settings-page/user-profile-settings.svelte index bf002cbee..a3bc3b850 100644 --- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte +++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte @@ -9,6 +9,7 @@ import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte'; + import Button from '../elements/buttons/button.svelte'; export let user: UserResponseDto; @@ -65,12 +66,7 @@ />
- +
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte index cf4385aa6..404a78683 100644 --- a/web/src/routes/(user)/albums/+page.svelte +++ b/web/src/routes/(user)/albums/+page.svelte @@ -9,6 +9,7 @@ import { useAlbums } from './albums.bloc'; import empty1Url from '$lib/assets/empty-1.svg'; import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; + import LinkButton from '$lib/components/elements/buttons/link-button.svelte'; export let data: PageData; @@ -32,15 +33,12 @@
- + Create album +
+ diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte index ae110ca27..a8d169f0a 100644 --- a/web/src/routes/(user)/favorites/+page.svelte +++ b/web/src/routes/(user)/favorites/+page.svelte @@ -1,5 +1,5 @@ @@ -13,10 +14,8 @@ > Welcome to IMMICH Web - +
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte index 81053bae6..f64f85464 100644 --- a/web/src/routes/admin/user-management/+page.svelte +++ b/web/src/routes/admin/user-management/+page.svelte @@ -12,6 +12,7 @@ import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte'; import { page } from '$app/stores'; import { locale } from '$lib/stores/preferences.store'; + import Button from '$lib/components/elements/buttons/button.svelte'; let allUsers: UserResponseDto[] = []; let shouldShowEditUserForm = false; @@ -151,12 +152,8 @@ Please inform the user, and they will need to change the password at the next log-on.

-
- +
+
@@ -221,7 +218,5 @@ - +