helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore(web): sort tailwindcss class automatically (#3330)

Browse source
This commit is contained in:
Alex 2023-07-18 13:19:39 -05:00 • committed by GitHub
parent f28fc8fa5c
commit 7316ad5a72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
117 changed files with 638 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/components/shared-components/album-selection-modal.svelte
View file

@ -49,23 +49,23 @@
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<span class="flex place-items-center gap-2">
<p class="font-medium">
Add to {#if shared}Shared {/if} Album
</p>
</span>
</svelte:fragment>
<div class="max-h-[400px] flex flex-col mb-2">
<div class="mb-2 flex max-h-[400px] flex-col">
{#if loading}
{#each { length: 3 } as _}
<div class="animate-pulse flex gap-4 px-6 py-2">
<div class="h-12 w-12 bg-slate-200 rounded-xl" />
<div class="flex animate-pulse gap-4 px-6 py-2">
<div class="h-12 w-12 rounded-xl bg-slate-200" />
<div class="flex flex-col items-start justify-center gap-2">
<span class="animate-pulse w-36 h-4 bg-slate-200" />
<span class="h-4 w-36 animate-pulse bg-slate-200" />
<div class="flex animate-pulse gap-1">
<span class="w-8 h-3 bg-slate-200" />
<span class="w-20 h-3 bg-slate-200" />
<span class="h-3 w-8 bg-slate-200" />
<span class="h-3 w-20 bg-slate-200" />
</div>
</div>
</div>
@ -73,17 +73,17 @@
{:else}
<!-- svelte-ignore a11y-autofocus -->
<input
class="px-6 py-2 text-2xl border-b-4 bg-immich-bg border-immich-bg focus:border-immich-primary dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
class="border-b-4 border-immich-bg bg-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:focus:border-immich-dark-primary"
placeholder="Search"
autofocus
bind:value={search}
/>
<div class="overflow-y-auto immich-scrollbar">
<div class="immich-scrollbar overflow-y-auto">
<button
on:click={handleNew}
class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
>
<div class="h-12 w-12 flex justify-center items-center">
<div class="flex h-12 w-12 items-center justify-center">
<Plus size="30" />
</div>
<p class="">
@ -92,14 +92,14 @@
</button>
{#if filteredAlbums.length > 0}
{#if !shared && search.length === 0}
<p class="text-xs px-5 py-3">RECENT</p>
<p class="px-5 py-3 text-xs">RECENT</p>
{#each recentAlbums as album (album.id)}
<AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
{/each}
{/if}
{#if !shared}
<p class="text-xs px-5 py-3">
<p class="px-5 py-3 text-xs">
{#if search.length === 0}ALL {/if}ALBUMS
</p>
{/if}
@ -107,9 +107,9 @@
<AlbumListItem {album} searchQuery={search} on:album={() => handleSelect(album)} />
{/each}
{:else if albums.length > 0}
<p class="text-sm px-5 py-1">It looks like you do not have any albums with this name yet.</p>
<p class="px-5 py-1 text-sm">It looks like you do not have any albums with this name yet.</p>
{:else}
<p class="text-sm px-5 py-1">It looks like you do not have any albums yet.</p>
<p class="px-5 py-1 text-sm">It looks like you do not have any albums yet.</p>
{/if}
</div>
{/if}

6
web/src/lib/components/shared-components/base-modal.svelte
View file

@ -31,14 +31,14 @@
id="immich-modal"
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed top-0 left-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden"
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
>
<div
use:clickOutside
on:outclick={() => dispatch('close')}
class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[600px] rounded-lg shadow-md"
class="max-h-[600px] min-h-[200px] w-[450px] rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div class="flex justify-between place-items-center px-5 py-3">
<div class="flex place-items-center justify-between px-5 py-3">
<div>
<slot name="title">
<p>Modal Title</p>

10
web/src/lib/components/shared-components/confirm-dialogue.svelte
View file

@ -26,23 +26,23 @@
<FullScreenModal on:clickOutside={handleCancel}>
<div
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div
class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium pb-2">
<h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>
</div>
<div>
<div class="px-4 py-5 text-md text-center">
<div class="text-md px-4 py-5 text-center">
<slot name="prompt">
<p>{prompt}</p>
</slot>
</div>
<div class="flex w-full px-4 gap-4 mt-4">
<div class="mt-4 flex w-full gap-4 px-4">
{#if !hideCancelButton}
<Button color={cancelColor} fullwidth on:click={handleCancel}>
{cancelText}

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View file

@ -23,7 +23,7 @@
<div
transition:slide={{ duration: 200, easing: quintOut }}
bind:this={menuElement}
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
class="absolute z-[99999] w-[200px] overflow-hidden rounded-lg shadow-lg"
style="left: {left}px; top: {top}px;"
role="menu"
use:clickOutside

2
web/src/lib/components/shared-components/context-menu/menu-option.svelte
View file

@ -4,7 +4,7 @@
<button
on:click
class="bg-slate-100 hover:bg-gray-200 text-immich-fg dark:text-immich-dark-bg p-4 w-full text-left text-sm font-medium focus:outline-none focus:ring-inset focus:ring-2"
class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg"
role="menuitem"
>
{#if text}

8
web/src/lib/components/shared-components/control-app-bar.svelte
View file

@ -40,14 +40,14 @@
});
</script>
<div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 w-full bg-transparent z-[100]">
<div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 z-[100] w-full bg-transparent">
<div
id="asset-selection-app-bar"
class={`grid grid-cols-3 justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray ${
class={`grid grid-cols-3 justify-between ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
forceDark && 'bg-immich-dark-gray text-white'
}`}
>
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg justify-self-start">
<div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
{#if showBackButton}
<CircleIconButton
on:click={() => dispatch('close-button-click')}
@ -65,7 +65,7 @@
<slot />
</div>
<div class="flex place-items-center gap-1 mr-4 justify-self-end">
<div class="mr-4 flex place-items-center gap-1 justify-self-end">
<slot name="trailing" />
</div>
</div>

10
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -140,7 +140,7 @@
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<span class="flex place-items-center gap-2">
<Link size={24} />
{#if editingLink}
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Edit link</p>
@ -175,10 +175,10 @@
{/if}
{/if}
<div class="mt-4 mb-2">
<div class="mb-2 mt-4">
<p class="text-xs">LINK OPTIONS</p>
</div>
<div class="p-4 bg-gray-100 dark:bg-black/40 rounded-lg">
<div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40">
<div class="flex flex-col">
<div class="mb-2">
<SettingInputField inputType={SettingInputFieldType.TEXT} label="Description" bind:value={description} />
@ -198,11 +198,11 @@
<div class="text-sm">
{#if editingLink}
<p class="my-2 immich-form-label">
<p class="immich-form-label my-2">
<SettingSwitch bind:checked={shouldChangeExpirationTime} title={'Change expiration time'} />
</p>
{:else}
<p class="my-2 immich-form-label">Expire after</p>
<p class="immich-form-label my-2">Expire after</p>
{/if}
<DropdownButton

4
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View file

@ -26,7 +26,7 @@
{#if dragStartTarget}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
class="fixed inset-0 z-[1000] flex h-full w-full flex-col items-center justify-center bg-gray-100/90 text-immich-dark-gray dark:bg-immich-dark-bg/90 dark:text-immich-gray"
transition:fade={{ duration: 250 }}
on:dragover={(e) => {
// Prevent browser from opening the dropped file.
@ -34,7 +34,7 @@
e.preventDefault();
}}
>
<ImmichLogo class="animate-bounce w-48 m-16" />
<ImmichLogo class="m-16 w-48 animate-bounce" />
<div class="text-2xl">Drop files anywhere to upload</div>
</div>
{/if}

6
web/src/lib/components/shared-components/dropdown-button.svelte
View file

@ -25,7 +25,7 @@
{disabled}
on:click={toggle}
aria-expanded={isOpen}
class="bg-gray-200 w-full flex p-2 rounded-lg dark:bg-gray-600 place-items-center justify-between disabled:cursor-not-allowed dark:disabled:bg-gray-300 disabled:bg-gray-600"
class="flex w-full place-items-center justify-between rounded-lg bg-gray-200 p-2 disabled:cursor-not-allowed disabled:bg-gray-600 dark:bg-gray-600 dark:disabled:bg-gray-300"
>
<div>
{selected}
@ -49,14 +49,14 @@
</button>
{#if isOpen}
<div class="flex flex-col mt-2 absolute w-full">
<div class="absolute mt-2 flex w-full flex-col">
{#each options.options as option}
<button
on:click={() => {
selected = option;
isOpen = false;
}}
class="bg-gray-200 dark:bg-gray-500 dark:hover:bg-gray-700 w-full flex p-2 hover:bg-gray-300 transition-all"
class="flex w-full bg-gray-200 p-2 transition-all hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-700"
>
{option}
</button>

8
web/src/lib/components/shared-components/empty-placeholder.svelte
View file

@ -13,16 +13,16 @@
<div
on:click={actionHandler}
on:keydown={actionHandler}
class="border dark:border-immich-dark-gray {hoverClasses} p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
>
<img src={empty1Url} {alt} width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{:else}
<div
class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<img src={empty1Url} {alt} width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{/if}

2
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -9,7 +9,7 @@
<section
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
class="fixed left-0 top-0 w-screen h-screen bg-black/40 z-[990] flex place-items-center place-content-center"
class="fixed left-0 top-0 z-[990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
>
<div class="z-[9999]" use:clickOutside on:outclick={() => dispatch('clickOutside')}>
<slot />

10
web/src/lib/components/shared-components/fullscreen-container.svelte
View file

@ -5,20 +5,20 @@
export let showMessage = $$slots.message;
</script>
<section class="min-h-screen w-screen flex place-items-center place-content-center p-4">
<section class="flex min-h-screen w-screen place-content-center place-items-center p-4">
<div
class="flex flex-col gap-4 border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
class="flex w-full max-w-lg flex-col gap-4 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
<div class="flex flex-col place-content-center place-items-center gap-4 py-4">
<ImmichLogo class="h-24 w-24" />
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>
</div>
{#if showMessage}
<div
class="text-sm rounded-xl p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg w-full border-immich-primary border-2"
class="w-full rounded-xl border-2 border-immich-primary bg-immich-primary/5 p-4 text-sm font-medium text-immich-primary dark:border-immich-dark-bg dark:text-immich-dark-primary"
>
<slot name="message" />
</div>

2
web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
View file

@ -28,7 +28,7 @@
</script>
{#if assets.length > 0}
<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
<div class="flex w-full flex-wrap gap-1 pb-20" bind:clientWidth={viewWidth}>
{#each assets as asset (asset.id)}
<div animate:flip={{ duration: 500 }}>
<Thumbnail

2
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View file

@ -98,7 +98,7 @@
</script>
{#if assets.length > 0}
<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
<div class="flex w-full flex-wrap gap-1 pb-20" bind:clientWidth={viewWidth}>
{#each assets as asset (asset.id)}
<div animate:flip={{ duration: 500 }}>
<Thumbnail

2
web/src/lib/components/shared-components/leaflet/map.svelte
View file

@ -37,7 +37,7 @@
$: if (map) map.setView(center, zoom);
</script>
<div bind:this={container} class="w-full h-full" class:map-dark={allowDarkMode}>
<div bind:this={container} class="h-full w-full" class:map-dark={allowDarkMode}>
{#if map}
<slot />
{/if}

2
web/src/lib/components/shared-components/loading-spinner.svelte
View file

@ -1,7 +1,7 @@
<div>
<svg
role="status"
class={`w-[24px] h-[24px] text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary`}
class={`h-[24px] w-[24px] animate-spin fill-immich-primary text-gray-400 dark:text-gray-600`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"

10
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -17,15 +17,15 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] z-[100]"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<div
class="flex flex-col items-center justify-center gap-4 bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 p-4"
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<UserAvatar size="lg" {user} />
<div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium text-center">
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
{user.firstName}
{user.lastName}
</p>
@ -34,7 +34,7 @@
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex gap-2 place-items-center place-content-center px-2">
<div class="flex place-content-center place-items-center gap-2 px-2">
<Cog size="18" />
Account Settings
</div>
@ -44,7 +44,7 @@
<div class="mb-4 flex flex-col">
<button
class="py-3 w-full font-medium flex place-items-center gap-2 hover:bg-immich-primary/10 text-gray-500 dark:text-gray-300 place-content-center"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Logout size={24} />

26
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -33,23 +33,23 @@
};
</script>
<section id="dashboard-navbar" class="fixed h-[var(--navbar-height)] w-screen z-[900] text-sm">
<section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
<div
class="grid h-full md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>
<a data-sveltekit-preload-data="hover" class="flex gap-2 md:mx-6 mx-4 place-items-center" href={AppRoute.PHOTOS}>
<a data-sveltekit-preload-data="hover" class="mx-4 flex place-items-center gap-2 md:mx-6" href={AppRoute.PHOTOS}>
<ImmichLogo height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block hidden">
<h1 class="hidden font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block">
IMMICH
</h1>
</a>
<div class="flex justify-between gap-16 pr-6">
<div class="w-full max-w-5xl flex-1 pl-4 sm:block hidden">
<div class="hidden w-full max-w-5xl flex-1 pl-4 sm:block">
<SearchBar grayTheme={true} />
</div>
<section class="flex gap-4 place-items-center justify-end max-sm:w-full">
<a href={AppRoute.SEARCH} id="search-button" class="sm:hidden pl-4">
<section class="flex place-items-center justify-end gap-4 max-sm:w-full">
<a href={AppRoute.SEARCH} id="search-button" class="pl-4 sm:hidden">
<IconButton title="Search">
<div class="flex gap-2">
<Magnify size="1.5em" />
@ -64,7 +64,7 @@
<LinkButton on:click={() => dispatch('uploadClicked')}>
<div class="flex gap-2">
<TrayArrowUp size="1.5em" />
<span class="md:block hidden">Upload</span>
<span class="hidden md:block">Upload</span>
</div>
</LinkButton>
</div>
@ -72,18 +72,18 @@
{#if user.isAdmin}
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
<div class="sm:block hidden">
<div class="hidden sm:block">
<LinkButton>
<span
class={$page.url.pathname.includes('/admin')
? 'text-immich-primary dark:text-immich-dark-primary underline item'
? 'item text-immich-primary underline dark:text-immich-dark-primary'
: ''}
>
Administration
</span>
</LinkButton>
</div>
<div class="sm:hidden block">
<div class="block sm:hidden">
<IconButton title="Administration">
<Cog
size="1.5em"
@ -94,7 +94,7 @@
</IconButton>
<hr
class={$page.url.pathname.includes('/admin')
? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary'
? 'border-1 mx-auto block w-2/3 border-immich-primary dark:border-immich-dark-primary'
: 'hidden'}
/>
</div>
@ -117,7 +117,7 @@
<div
in:fade={{ delay: 500, duration: 150 }}
out:fade={{ delay: 200, duration: 150 }}
class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
class="absolute -bottom-12 right-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<p>{user.firstName} {user.lastName}</p>
<p>{user.email}</p>

4
web/src/lib/components/shared-components/navigation-loading-bar.svelte
View file

@ -13,6 +13,6 @@
});
</script>
<div class="absolute top-0 left-0 w-screen h-[3px] bg-white z-[999999999]">
<span class="absolute bg-immich-primary h-[3px]" style:width={`${$progress}%`} />
<div class="absolute left-0 top-0 z-[999999999] h-[3px] w-screen bg-white">
<span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`} />
</div>

6
web/src/lib/components/shared-components/notification/notification-card.svelte
View file

@ -74,12 +74,12 @@
transition:fade={{ duration: 250 }}
style:background-color={backgroundColor()}
style:border={borderStyle()}
class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
class="z-[999999] mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md hover:cursor-pointer"
on:click={handleClick}
on:keydown={handleClick}
>
<div class="flex justify-between">
<div class="flex gap-2 place-items-center">
<div class="flex place-items-center gap-2">
<svelte:component this={icon} color={primaryColor()} size="20" />
<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
{notificationInfo.type.toString()}
@ -90,7 +90,7 @@
</button>
</div>
<p class="whitespace-pre-wrap text-sm pl-[28px] pr-[16px]" data-testid="message">
<p class="whitespace-pre-wrap pl-[28px] pr-[16px] text-sm" data-testid="message">
{notificationInfo.message}
</p>
</div>

10
web/src/lib/components/shared-components/profile-image-cropper.svelte
View file

@ -65,21 +65,21 @@
<BaseModal on:close>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<span class="flex place-items-center gap-2">
<p class="font-medium">Set profile picture</p>
</span>
</svelte:fragment>
<div class="flex justify-center place-items-center items-center">
<div class="flex place-items-center items-center justify-center">
<div
class="w-1/2 aspect-square rounded-full overflow-hidden relative flex border-immich-primary dark:border-immich-dark-primary border-4 bg-immich-dark-primary dark:bg-immich-primary"
class="relative flex aspect-square w-1/2 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
>
<PhotoViewer bind:element={imgElement} {asset} />
</div>
</div>
<span class="p-4 flex justify-end">
<span class="flex justify-end p-4">
<Button on:click={handleSetProfilePicture}>
<p>Set as profile picture</p>
</Button>
</span>
<div class="max-h-[400px] flex flex-col mb-2" />
<div class="mb-2 flex max-h-[400px] flex-col" />
</BaseModal>

10
web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
View file

@ -94,7 +94,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
id="immich-scrubbable-scrollbar"
class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none"
class="fixed right-0 z-[100] select-none bg-immich-bg hover:cursor-row-resize"
style:width={isDragging ? '100vw' : '60px'}
style:background-color={isDragging ? 'transparent' : 'transparent'}
on:mouseenter={() => (isHover = true)}
@ -109,7 +109,7 @@
>
{#if isHover}
<div
class="border-b-2 border-immich-primary dark:border-immich-dark-primary w-[100px] right-0 pr-6 py-1 text-sm pl-1 font-medium absolute bg-immich-bg dark:bg-immich-dark-gray z-[100] pointer-events-none rounded-tl-md shadow-lg dark:text-immich-dark-fg"
class="pointer-events-none absolute right-0 z-[100] w-[100px] rounded-tl-md border-b-2 border-immich-primary bg-immich-bg py-1 pl-1 pr-6 text-sm font-medium shadow-lg dark:border-immich-dark-primary dark:bg-immich-dark-gray dark:text-immich-dark-fg"
style:top={currentMouseYLocation + 'px'}
>
{hoveredDate?.toLocaleString('default', { month: 'short' })}
@ -120,7 +120,7 @@
<!-- Scroll Position Indicator Line -->
{#if !isDragging}
<div
class="absolute right-0 w-10 h-[2px] bg-immich-primary dark:bg-immich-dark-primary"
class="absolute right-0 h-[2px] w-10 bg-immich-primary dark:bg-immich-dark-primary"
style:top={scrollbarPosition + 'px'}
/>
{/if}
@ -139,7 +139,7 @@
{#if segment.height > 8}
<div
aria-label={segment.timeGroup + ' ' + segment.count}
class="absolute right-0 pr-5 z-10 text-xs font-medium dark:text-immich-dark-fg"
class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg"
>
{groupDate.getFullYear()}
</div>
@ -147,7 +147,7 @@
{:else if segment.height > 5}
<div
aria-label={segment.timeGroup + ' ' + segment.count}
class="absolute right-0 rounded-full h-[4px] w-[4px] mr-3 bg-gray-300 block"
class="absolute right-0 mr-3 block h-[4px] w-[4px] rounded-full bg-gray-300"
/>
{/if}
</div>

18
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -66,9 +66,9 @@
name="q"
class="w-full transition-all {grayTheme
? 'dark:bg-immich-dark-gray'
: 'dark:bg-immich-dark-bg'} text-immich-fg/75 dark:text-immich-dark-fg px-14 py-4 {showBigSearchBar
? 'rounded-t-3xl bg-white border border-gray-200 dark:border-gray-800'
: 'rounded-3xl bg-gray-200 border border-transparent'}"
: 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar
? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800'
: 'rounded-3xl border border-transparent bg-gray-200'}"
placeholder="Search your photos"
required
pattern="^(?!m:$).*$"
@ -79,7 +79,7 @@
<div class="absolute inset-y-0 right-0 flex items-center pr-4">
<button
type="reset"
class="dark:text-immich-dark-fg/75 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 rounded-full p-2 active:bg-immich-primary/10 dark:active:bg-immich-dark-primary/[.35]"
class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
>
<Close size="1.5em" />
</button>
@ -89,23 +89,23 @@
{#if showBigSearchBar}
<div
transition:fly={{ y: 25, duration: 250 }}
class="w-full pb-5 absolute bg-white transition-all rounded-b-3xl shadow-2xl border border-gray-200 dark:bg-immich-dark-gray dark:border-gray-800 dark:text-gray-300"
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
>
<div class="px-5 pt-5 text-xs">
<p>
Smart search is enabled by default, to search for metadata use the syntax <span
class="font-mono p-2 font-semibold text-immich-primary dark:text-immich-dark-primary bg-gray-100 rounded-lg dark:bg-gray-900 leading-7"
class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
>m:your-search-term</span
>
</p>
</div>
{#if $savedSearchTerms.length > 0}
<div class="px-5 pt-5 text-xs flex justify-between">
<div class="flex justify-between px-5 pt-5 text-xs">
<p>RECENT SEARCHES</p>
<button
type="button"
class="text-immich-primary dark:text-immich-dark-primary font-semibold p-2 hover:bg-immich-primary/25 rounded-lg"
class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
on:click={clearSearchTerm}>Clear all</button
>
</div>
@ -114,7 +114,7 @@
{#each $savedSearchTerms as savedSearchTerm, i (i)}
<button
type="button"
class="w-full hover:bg-gray-100 dark:hover:bg-gray-500/10 px-5 py-3 cursor-pointer flex gap-3 text-black dark:text-gray-300"
class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
on:click={() => {
value = savedSearchTerm;
onSearch(false);

16
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View file

@ -19,35 +19,35 @@
<div
on:click={onButtonClicked}
on:keydown={onButtonClicked}
class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
{isSelected
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-immich-dark-primary hover:bg-immich-primary/25'
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
: ''}
pl-5 group-hover:sm:px-5 md:px-5
"
>
<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
<svelte:component this={logo} size="1.5em" class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}" />
<p class="font-medium text-sm">{title}</p>
<p class="text-sm font-medium">{title}</p>
</div>
<div
class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
class="h-0 overflow-hidden transition-[height] delay-1000 duration-100 sm:group-hover:h-auto group-hover:sm:overflow-visible md:h-auto md:overflow-visible"
>
{#if $$slots.moreInformation}
<div
class="relative flex justify-center select-none cursor-default"
class="relative flex cursor-default select-none justify-center"
on:mouseenter={() => (showMoreInformation = true)}
on:mouseleave={() => (showMoreInformation = false)}
>
<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
<div class="p-1 text-gray-600 hover:cursor-help dark:text-gray-400">
<InformationOutline />
</div>
{#if showMoreInformation}
<div class="absolute right-6 top-0">
<div
class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
class="flex place-content-center place-items-center whitespace-nowrap rounded-3xl border bg-immich-bg px-6 py-3 text-xs text-immich-fg shadow-lg dark:border-immich-dark-gray dark:bg-gray-600 dark:text-immich-dark-fg"
class:hidden={!showMoreInformation}
transition:fade={{ duration: 200 }}
>

2
web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
View file

@ -3,7 +3,7 @@
<section
id="sidebar"
class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-18 md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray relative overflow-y-auto immich-scrollbar"
class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
>
<slot />
</section>

6
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View file

@ -80,9 +80,9 @@
</SideBarButton>
</a>
<div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
<p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
<hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
<div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
<p class="hidden p-6 group-hover:sm:block md:block">LIBRARY</p>
<hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
</div>
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
<SideBarButton

18
web/src/lib/components/shared-components/status-box.svelte
View file

@ -51,16 +51,16 @@
<div class="dark:text-immich-dark-fg">
<div class="storage-status grid grid-cols-[64px_auto]">
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0">
<div class="pb-[2.15rem] pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
<Cloud size={'24'} />
</div>
<div class="hidden md:block group-hover:sm:block">
<div class="hidden group-hover:sm:block md:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<div class="my-2 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
class="h-[7px] rounded-full bg-immich-primary dark:bg-immich-dark-primary"
style="width: {getStorageUsagePercentage()}%"
/>
</div>
@ -76,16 +76,16 @@
</div>
</div>
<div>
<hr class="ml-5 my-4 dark:border-immich-dark-gray" />
<hr class="my-4 ml-5 dark:border-immich-dark-gray" />
</div>
<div class="server-status grid grid-cols-[64px_auto]">
<div class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0">
<div class="pb-11 pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
<Dns size={'24'} />
</div>
<div class="text-xs hidden md:block group-hover:sm:block">
<div class="hidden text-xs group-hover:sm:block md:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="flex justify-items-center justify-between mt-2">
<div class="mt-2 flex justify-between justify-items-center">
<p>Status</p>
{#if isServerOk}
@ -95,7 +95,7 @@
{/if}
</div>
<div class="flex justify-items-center justify-between mt-2">
<div class="mt-2 flex justify-between justify-items-center">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}

4
web/src/lib/components/shared-components/theme-button.svelte
View file

@ -20,11 +20,11 @@
<IconButton on:click={toggleTheme} title="Toggle theme">
{#if $colorTheme === 'light'}
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
>
{:else}
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
><path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"

20
web/src/lib/components/shared-components/upload-asset-preview.svelte
View file

@ -15,12 +15,12 @@
<div
in:fade={{ duration: 250 }}
out:fade={{ duration: 100 }}
class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
class="mt-3 grid h-[70px] grid-cols-[70px_auto] gap-2 rounded-lg bg-immich-bg text-xs"
>
<div class="relative">
{#if showFallbackImage}
<div in:fade={{ duration: 250 }}>
<ImmichLogo class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg" />
<ImmichLogo class="h-[70px] w-[70px] rounded-bl-lg rounded-tl-lg object-cover" />
</div>
{:else}
<img
@ -34,30 +34,30 @@
}}
src={previewURL}
alt="Preview of asset"
class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
class="h-[70px] w-[70px] rounded-bl-lg rounded-tl-lg object-cover"
draggable="false"
/>
{/if}
<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
<div class="absolute bottom-0 left-0 h-[25px] w-full bg-immich-primary/30">
<p
class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
class="absolute bottom-1 right-1 stroke-immich-primary object-right-bottom font-semibold uppercase text-gray-50/95"
>
.{getFilenameExtension(uploadAsset.file.name)}
</p>
</div>
</div>
<div class="p-2 pr-4 flex flex-col justify-between">
<div class="flex flex-col justify-between p-2 pr-4">
<input
disabled
class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px]"
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
/>
<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
<div class="bg-immich-primary h-[15px] rounded-md transition-all" style={`width: ${uploadAsset.progress}%`} />
<p class="absolute h-full w-full text-center top-0 text-[10px]">
<div class="relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 text-white">
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
<p class="absolute top-0 h-full w-full text-center text-[10px]">
{uploadAsset.progress}/100
</p>
</div>

14
web/src/lib/components/shared-components/upload-panel.svelte
View file

@ -33,24 +33,24 @@
type: NotificationType.Info,
});
}}
class="absolute right-6 bottom-6 z-[10000]"
class="absolute bottom-6 right-6 z-[10000]"
>
{#if showDetail}
<div
in:scale={{ duration: 250, easing: quartInOut }}
class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border"
class="w-[300px] rounded-lg border bg-gray-200 p-4 text-sm shadow-sm"
>
<div class="flex justify-between place-item-center mb-4">
<div class="place-item-center mb-4 flex justify-between">
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
<button
on:click={() => (showDetail = false)}
class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
class="flex h-[20px] w-[20px] place-content-center place-items-center rounded-full bg-gray-50 transition-colors hover:bg-gray-100"
>
<WindowMinimize />
</button>
</div>
<div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
<div class="immich-scrollbar max-h-[400px] overflow-y-auto rounded-lg pr-2">
{#each $uploadAssetsStore as uploadAsset}
{#key uploadAsset.id}
<UploadAssetPreview {uploadAsset} />
@ -63,14 +63,14 @@
<button
in:scale={{ duration: 250, easing: quartInOut }}
on:click={() => (showDetail = true)}
class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
>
{$uploadAssetsStore.length}
</button>
<button
in:scale={{ duration: 250, easing: quartInOut }}
on:click={() => (showDetail = true)}
class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg"
class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-300 p-5 text-sm shadow-lg"
>
<div class="animate-pulse">
<CloudUploadOutline size="30" color="#4250af" />

6
web/src/lib/components/shared-components/user-avatar.svelte
View file

@ -49,7 +49,7 @@
</script>
<figure
class="{sizeClass} {colorClass} {interactiveClass} shadow-md overflow-hidden"
class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md"
class:rounded-full={rounded}
title={showTitle ? title : undefined}
>
@ -57,7 +57,7 @@
<img
src={api.getProfileImageUrl(user.id)}
alt="Profile image of {title}"
class="object-cover w-full h-full"
class="h-full w-full object-cover"
class:hidden={showFallback}
draggable="false"
use:imageLoad
@ -66,7 +66,7 @@
{/if}
{#if showFallback}
<span
class="flex justify-center items-center w-full h-full select-none"
class="flex h-full w-full select-none items-center justify-center"
class:text-xs={size === 'sm'}
class:text-lg={size === 'lg'}
class:font-medium={!autoColor}

12
web/src/lib/components/shared-components/version-announcement-box.svelte
View file

@ -43,15 +43,15 @@
{#if showModal}
<FullScreenModal on:clickOutside={() => (showModal = false)}>
<div
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray shadow-sm max-w-lg rounded-3xl py-10 px-8 dark:text-immich-dark-fg"
class="max-w-lg rounded-3xl border bg-immich-bg px-8 py-10 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<p class="text-2xl mb-4">🎉 NEW VERSION AVAILABLE 🎉</p>
<p class="mb-4 text-2xl">🎉 NEW VERSION AVAILABLE 🎉</p>
<div>
Hi friend, there is a new release of
<span class="font-immich-title text-immich-primary dark:text-immich-dark-primary font-bold">IMMICH</span>,
<span class="font-immich-title font-bold text-immich-primary dark:text-immich-dark-primary">IMMICH</span>,
please take your time to visit the
<span class="underline font-medium"
<span class="font-medium underline"
><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
>release notes</a
></span
@ -60,7 +60,7 @@
especially if you use WatchTower or any mechanism that handles updating your application automatically.
</div>
<div class="font-medium mt-4">Your friend, Alex</div>
<div class="mt-4 font-medium">Your friend, Alex</div>
<div class="font-sm mt-8">
<code>Server Version: {serverVersionName}</code>
@ -68,7 +68,7 @@
<code>Latest Version: {githubVersion}</code>
</div>
<div class="text-right mt-8">
<div class="mt-8 text-right">
<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
</div>
</div>