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

refactor: text-primary (#22141)

Browse source
This commit is contained in:
Jason Rasmussen 2025-09-17 12:12:51 -04:00 • committed by GitHub
parent 53a6724039
commit 11e72a0f35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
63 changed files with 138 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
View file

@ -163,7 +163,7 @@
{#if config.storageTemplate.enabled} {#if config.storageTemplate.enabled}
<hr /> <hr />
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('variables')}</h3> <h3 class="text-base font-medium text-primary">{$t('variables')}</h3>
<section class="support-date"> <section class="support-date">
{#await getSupportDateTimeFormat()} {#await getSupportDateTimeFormat()}
@ -180,7 +180,7 @@
</section> </section>
<div class="flex flex-col mt-4"> <div class="flex flex-col mt-4">
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('template')}</h3> <h3 class="text-base font-medium text-primary">{$t('template')}</h3>
<div class="my-2 text-sm"> <div class="my-2 text-sm">
<h4 class="uppercase">{$t('preview')}</h4> <h4 class="uppercase">{$t('preview')}</h4>
@ -192,7 +192,7 @@
values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }} values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }}
> >
{#snippet children({ message })} {#snippet children({ message })}
<span class="font-semibold text-immich-primary dark:text-immich-dark-primary">{message}</span> <span class="font-semibold text-primary">{message}</span>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>
@ -200,7 +200,7 @@
<p class="text-sm"> <p class="text-sm">
<FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}> <FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}>
{#snippet children({ message })} {#snippet children({ message })}
<code class="text-immich-primary dark:text-immich-dark-primary">{message}</code> <code class="text-primary">{message}</code>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p> </p>
@ -214,10 +214,7 @@
<form autocomplete="off" class="flex flex-col" onsubmit={preventDefault(bubble('submit'))}> <form autocomplete="off" class="flex flex-col" onsubmit={preventDefault(bubble('submit'))}>
<div class="flex flex-col my-2"> <div class="flex flex-col my-2">
{#if templateOptions} {#if templateOptions}
<label <label class="font-medium text-primary text-sm" for="preset-select">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
for="preset-select"
>
{$t('preset')} {$t('preset')}
</label> </label>
<select <select
@ -257,7 +254,7 @@
{#if !minified} {#if !minified}
<div id="migration-info" class="mt-2 text-sm"> <div id="migration-info" class="mt-2 text-sm">
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('notes')}</h3> <h3 class="text-base font-medium text-primary">{$t('notes')}</h3>
<section class="flex flex-col gap-2"> <section class="flex flex-col gap-2">
<p> <p>
<FormatMessage <FormatMessage
@ -265,7 +262,7 @@
values={{ job: $t('admin.storage_template_migration_job') }} values={{ job: $t('admin.storage_template_migration_job') }}
> >
{#snippet children({ message })} {#snippet children({ message })}
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"> <a href={AppRoute.ADMIN_JOBS} class="text-primary">
{message} {message}
</a> </a>
{/snippet} {/snippet}

14
web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
View file

@ -27,7 +27,7 @@
</div> </div>
<div class="flex gap-[40px]"> <div class="flex gap-[40px]">
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('year')}</p> <p class="uppercase font-medium text-primary">{$t('year')}</p>
<ul> <ul>
{#each options.yearOptions as yearFormat, index (index)} {#each options.yearOptions as yearFormat, index (index)}
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li> <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
@ -36,7 +36,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('month')}</p> <p class="uppercase font-medium text-primary">{$t('month')}</p>
<ul> <ul>
{#each options.monthOptions as monthFormat, index (index)} {#each options.monthOptions as monthFormat, index (index)}
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li> <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
@ -45,7 +45,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('week')}</p> <p class="uppercase font-medium text-primary">{$t('week')}</p>
<ul> <ul>
{#each options.weekOptions as weekFormat, index (index)} {#each options.weekOptions as weekFormat, index (index)}
<li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li> <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
@ -54,7 +54,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('day')}</p> <p class="uppercase font-medium text-primary">{$t('day')}</p>
<ul> <ul>
{#each options.dayOptions as dayFormat, index (index)} {#each options.dayOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li> <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -63,7 +63,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('hour')}</p> <p class="uppercase font-medium text-primary">{$t('hour')}</p>
<ul> <ul>
{#each options.hourOptions as dayFormat, index (index)} {#each options.hourOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li> <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -72,7 +72,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('minute')}</p> <p class="uppercase font-medium text-primary">{$t('minute')}</p>
<ul> <ul>
{#each options.minuteOptions as dayFormat, index (index)} {#each options.minuteOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li> <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -81,7 +81,7 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('second')}</p> <p class="uppercase font-medium text-primary">{$t('second')}</p>
<ul> <ul>
{#each options.secondOptions as dayFormat, index (index)} {#each options.secondOptions as dayFormat, index (index)}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li> <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>

6
web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
View file

@ -9,7 +9,7 @@
<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg"> <div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
<div class="flex gap-[50px]"> <div class="flex gap-[50px]">
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filename')}</p> <p class="uppercase font-medium text-primary">{$t('filename')}</p>
<ul> <ul>
<li>{`{{filename}}`} - IMG_123</li> <li>{`{{filename}}`} - IMG_123</li>
<li>{`{{ext}}`} - jpg</li> <li>{`{{ext}}`} - jpg</li>
@ -17,14 +17,14 @@
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filetype')}</p> <p class="uppercase font-medium text-primary">{$t('filetype')}</p>
<ul> <ul>
<li>{`{{filetype}}`} - VID or IMG</li> <li>{`{{filetype}}`} - VID or IMG</li>
<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li> <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
</ul> </ul>
</div> </div>
<div> <div>
<p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('other')}</p> <p class="uppercase font-medium text-primary">{$t('other')}</p>
<ul> <ul>
<li>{`{{assetId}}`} - Asset ID</li> <li>{`{{assetId}}`} - Asset ID</li>
<li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li> <li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>

2
web/src/lib/components/album-page/album-card-group.svelte
View file

@ -48,7 +48,7 @@
<button <button
type="button" type="button"
onclick={() => toggleAlbumGroupCollapsing(group.id)} onclick={() => toggleAlbumGroupCollapsing(group.id)}
class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-immich-primary dark:hover:text-immich-dark-primary hover:bg-subtle dark:hover:bg-immich-dark-gray" class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
aria-expanded={!isCollapsed} aria-expanded={!isCollapsed}
> >
<Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" /> <Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />

2
web/src/lib/components/album-page/album-card.svelte
View file

@ -60,7 +60,7 @@
<div class="mt-4"> <div class="mt-4">
<p <p
class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary" class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
data-testid="album-name" data-testid="album-name"
title={album.albumName} title={album.albumName}
> >

2
web/src/lib/components/album-page/album-title.svelte
View file

@ -38,7 +38,7 @@
<input <input
use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }} use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
onblur={handleUpdateName} onblur={handleUpdateName}
class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all {isOwned
? 'hover:border-gray-400' ? 'hover:border-gray-400'
: 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90" : 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
type="text" type="text"

4
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -64,9 +64,7 @@
<Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}> <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
<section class="pt-8 md:pt-24 px-2 md:px-0"> <section class="pt-8 md:pt-24 px-2 md:px-0">
<!-- ALBUM TITLE --> <!-- ALBUM TITLE -->
<h1 <h1 class="text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all">
class="text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary"
>
{album.albumName} {album.albumName}
</h1> </h1>

2
web/src/lib/components/album-page/albums-table.svelte
View file

@ -26,7 +26,7 @@
<table class="mt-2 w-full text-start"> <table class="mt-2 w-full text-start">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="flex w-full place-items-center p-2 md:p-5"> <tr class="flex w-full place-items-center p-2 md:p-5">
{#each sortOptionsMetadata as option, index (index)} {#each sortOptionsMetadata as option, index (index)}

5
web/src/lib/components/asset-viewer/detail-panel-location.svelte
View file

@ -40,8 +40,7 @@
class="flex w-full text-start justify-between place-items-start gap-4 py-4" class="flex w-full text-start justify-between place-items-start gap-4 py-4"
onclick={() => (isOwner ? (isShowChangeLocation = true) : null)} onclick={() => (isOwner ? (isShowChangeLocation = true) : null)}
title={isOwner ? $t('edit_location') : ''} title={isOwner ? $t('edit_location') : ''}
class:hover:dark:text-immich-dark-primary={isOwner} class:hover:text-primary={isOwner}
class:hover:text-immich-primary={isOwner}
> >
<div class="flex gap-4"> <div class="flex gap-4">
<div><Icon icon={mdiMapMarkerOutline} size="24" /></div> <div><Icon icon={mdiMapMarkerOutline} size="24" /></div>
@ -72,7 +71,7 @@
{:else if !asset.exifInfo?.city && isOwner} {:else if !asset.exifInfo?.city && isOwner}
<button <button
type="button" type="button"
class="flex w-full text-start justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary" class="flex w-full text-start justify-between place-items-start gap-4 py-4 rounded-lg hover:text-primary"
onclick={() => (isShowChangeLocation = true)} onclick={() => (isShowChangeLocation = true)}
title={$t('add_location')} title={$t('add_location')}
> >

12
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -279,8 +279,7 @@
class="flex w-full text-start justify-between place-items-start gap-4 py-4" class="flex w-full text-start justify-between place-items-start gap-4 py-4"
onclick={() => (isOwner ? (isShowChangeDate = true) : null)} onclick={() => (isOwner ? (isShowChangeDate = true) : null)}
title={isOwner ? $t('edit_date') : ''} title={isOwner ? $t('edit_date') : ''}
class:hover:dark:text-immich-dark-primary={isOwner} class:hover:text-primary={isOwner}
class:hover:text-immich-primary={isOwner}
> >
<div class="flex gap-4"> <div class="flex gap-4">
<div> <div>
@ -362,10 +361,7 @@
{/if} {/if}
</p> </p>
{#if showAssetPath} {#if showAssetPath}
<p <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
class="text-xs opacity-50 break-all pb-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
transition:slide={{ duration: 250 }}
>
<a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap"> <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
{asset.originalPath} {asset.originalPath}
</a> </a>
@ -403,7 +399,7 @@
...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}), ...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}),
})}" })}"
title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}" title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
class="hover:dark:text-immich-dark-primary hover:text-immich-primary" class="hover:text-primary"
> >
{asset.exifInfo.make || ''} {asset.exifInfo.make || ''}
{asset.exifInfo.model || ''} {asset.exifInfo.model || ''}
@ -417,7 +413,7 @@
<a <a
href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}"
title="{$t('search_for')} {asset.exifInfo.lensModel}" title="{$t('search_for')} {asset.exifInfo.lensModel}"
class="hover:dark:text-immich-dark-primary hover:text-immich-primary line-clamp-1" class="hover:text-primary line-clamp-1"
> >
{asset.exifInfo.lensModel} {asset.exifInfo.lensModel}
</a> </a>

2
web/src/lib/components/jobs/JobTile.svelte
View file

@ -63,7 +63,7 @@
<JobTileStatus color="success">{$t('active')}</JobTileStatus> <JobTileStatus color="success">{$t('active')}</JobTileStatus>
{/if} {/if}
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9"> <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
<div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"> <div class="flex items-center gap-4 text-xl font-semibold text-primary">
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" /> <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
<span class="uppercase">{title}</span> <span class="uppercase">{title}</span>

2
web/src/lib/components/jobs/StorageMigrationDescription.svelte
View file

@ -11,7 +11,7 @@
{#snippet children({ message })} {#snippet children({ message })}
<a <a
href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}" href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}"
class="text-immich-primary dark:text-immich-dark-primary" class="text-primary"
> >
{message} {message}
</a> </a>

2
web/src/lib/components/layouts/ErrorLayout.svelte
View file

@ -36,7 +36,7 @@
> >
<div> <div>
<div class="flex items-center justify-between gap-4 px-4 py-4"> <div class="flex items-center justify-between gap-4 px-4 py-4">
<h1 class="font-medium text-immich-primary dark:text-immich-dark-primary"> <h1 class="font-medium text-primary">
🚨 {$t('error_title')} 🚨 {$t('error_title')}
</h1> </h1>
<div class="flex justify-end"> <div class="flex justify-end">

4
web/src/lib/components/onboarding-page/onboarding-card.svelte
View file

@ -36,10 +36,10 @@
{#if title || icon} {#if title || icon}
<div class="flex gap-2 items-center justify-center w-fit"> <div class="flex gap-2 items-center justify-center w-fit">
{#if icon} {#if icon}
<Icon {icon} size="30" class="text-immich-primary dark:text-immich-dark-primary" /> <Icon {icon} size="30" class="text-primary" />
{/if} {/if}
{#if title} {#if title}
<p class="uppercase text-xl text-immich-primary dark:text-immich-dark-primary"> <p class="uppercase text-xl text-primary">
{title} {title}
</p> </p>
{/if} {/if}

6
web/src/lib/components/onboarding-page/onboarding-hello.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte'; import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { user } from '$lib/stores/user.store';
import { t } from 'svelte-i18n';
import { OnboardingRole } from '$lib/models/onboarding-role'; import { OnboardingRole } from '$lib/models/onboarding-role';
import { serverConfig } from '$lib/stores/server-config.store'; import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { t } from 'svelte-i18n';
let userRole = $derived($user.isAdmin && !$serverConfig.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER); let userRole = $derived($user.isAdmin && !$serverConfig.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER);
</script> </script>
<div class="gap-4"> <div class="gap-4">
<ImmichLogo noText class="h-[100px] mb-2" /> <ImmichLogo noText class="h-[100px] mb-2" />
<p class="font-medium mb-6 text-6xl text-immich-primary dark:text-immich-dark-primary"> <p class="font-medium mb-6 text-6xl text-primary">
{$t('onboarding_welcome_user', { values: { user: $user.name } })} {$t('onboarding_welcome_user', { values: { user: $user.name } })}
</p> </p>
<p class="text-3xl pb-6 font-light"> <p class="text-3xl pb-6 font-light">

2
web/src/lib/components/pages/SharedLinkErrorPage.svelte
View file

@ -7,7 +7,7 @@
</svelte:head> </svelte:head>
<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center"> <section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
<h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1> <h1 class="py-10 text-4xl text-primary">Page not found :/</h1>
{#if page.error?.message} {#if page.error?.message}
<h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2> <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
{/if} {/if}

4
web/src/lib/components/pages/SharedLinkPage.svelte
View file

@ -72,8 +72,8 @@
class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40" class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
> >
<div class="flex flex-col items-center justify-center mt-20"> <div class="flex flex-col items-center justify-center mt-20">
<div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div> <div class="text-2xl font-bold text-primary">{$t('password_required')}</div>
<div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary"> <div class="mt-4 text-lg text-primary">
{$t('sharing_enter_password')} {$t('sharing_enter_password')}
</div> </div>
<div class="mt-4"> <div class="mt-4">

22
web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
View file

@ -46,38 +46,38 @@
<div class="mt-5 flex lg:hidden"> <div class="mt-5 flex lg:hidden">
<div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray"> <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
<div class="flex flex-wrap gap-x-12"> <div class="flex flex-wrap gap-x-12">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"> <div class="flex place-items-center gap-4 text-primary">
<Icon icon={mdiCameraIris} size="25" /> <Icon icon={mdiCameraIris} size="25" />
<p class="uppercase">{$t('photos')}</p> <p class="uppercase">{$t('photos')}</p>
</div> </div>
<div class="relative text-center font-mono text-2xl font-semibold"> <div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span class="text-primary"
class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span >{stats.photos}</span
> >
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-x-12"> <div class="flex flex-wrap gap-x-12">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"> <div class="flex place-items-center gap-4 text-primary">
<Icon icon={mdiPlayCircle} size="25" /> <Icon icon={mdiPlayCircle} size="25" />
<p class="uppercase">{$t('videos')}</p> <p class="uppercase">{$t('videos')}</p>
</div> </div>
<div class="relative text-center font-mono text-2xl font-semibold"> <div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span class="text-primary"
class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span >{stats.videos}</span
> >
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-x-7"> <div class="flex flex-wrap gap-x-7">
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"> <div class="flex place-items-center gap-4 text-primary">
<Icon icon={mdiChartPie} size="25" /> <Icon icon={mdiChartPie} size="25" />
<p class="uppercase">{$t('storage')}</p> <p class="uppercase">{$t('storage')}</p>
</div> </div>
<div class="relative flex text-center font-mono text-2xl font-semibold"> <div class="relative flex text-center font-mono text-2xl font-semibold">
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span class="text-primary"
class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span >{statsUsage}</span
> >
<span class="my-auto ms-2 text-center text-base font-light text-gray-400">{statsUsageUnit}</span> <span class="my-auto ms-2 text-center text-base font-light text-gray-400">{statsUsageUnit}</span>
</div> </div>
@ -90,7 +90,7 @@
<p class="text-sm dark:text-immich-dark-fg uppercase">{$t('user_usage_detail')}</p> <p class="text-sm dark:text-immich-dark-fg uppercase">{$t('user_usage_detail')}</p>
<table class="mt-5 w-full text-start"> <table class="mt-5 w-full text-start">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="flex w-full place-items-center"> <tr class="flex w-full place-items-center">
<th class="w-1/4 text-center text-sm font-medium">{$t('user')}</th> <th class="w-1/4 text-center text-sm font-medium">{$t('user')}</th>
@ -116,7 +116,7 @@
{#if user.quotaSizeInBytes !== null} {#if user.quotaSizeInBytes !== null}
/ {getByteUnitString(user.quotaSizeInBytes, $locale, 0)} / {getByteUnitString(user.quotaSizeInBytes, $locale, 0)}
{/if} {/if}
<span class="text-immich-primary dark:text-immich-dark-primary"> <span class="text-primary">
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0} {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, { ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
style: 'percent', style: 'percent',

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

@ -367,11 +367,7 @@
> >
{#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })} {#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
{#if useLocationPin} {#if useLocationPin}
<Icon <Icon icon={mdiMapMarker} size="50px" class="text-primary -translate-y-[50%]" />
icon={mdiMapMarker}
size="50px"
class="dark:text-immich-dark-primary text-immich-primary -translate-y-[50%]"
/>
{:else} {:else}
<img <img
src={getAssetThumbnailUrl(feature.properties?.id)} src={getAssetThumbnailUrl(feature.properties?.id)}

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

@ -55,7 +55,7 @@
</div> </div>
</div> </div>
<div> <div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary"> <p class="text-center text-lg font-medium text-primary">
{$user.name} {$user.name}
</p> </p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p> <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
@ -107,7 +107,7 @@
<button <button
type="button" type="button"
class="text-center mt-4 underline text-xs text-immich-primary dark:text-immich-dark-primary" class="text-center mt-4 underline text-xs text-primary"
onclick={async () => { onclick={async () => {
onClose(); onClose();
if (info) { if (info) {

2
web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
View file

@ -10,7 +10,7 @@
<div <div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900" class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
> >
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<Icon icon={mdiAccount} size="56" /> <Icon icon={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p> <p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
</div> </div>

2
web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
View file

@ -14,7 +14,7 @@
</script> </script>
<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6"> <div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
<Icon icon={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" /> <Icon icon={mdiPartyPopper} class="text-primary" size="96" />
<p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p> <p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
<p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p> <p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>

2
web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
View file

@ -10,7 +10,7 @@
<div <div
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900" class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
> >
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<Icon icon={mdiServer} size="56" /> <Icon icon={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p> <p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
</div> </div>

2
web/src/lib/components/shared-components/search-bar/search-history-box.svelte
View file

@ -102,7 +102,7 @@
<button <button
id={getId(0)} id={getId(0)}
type="button" type="button"
class="rounded-lg p-2 font-semibold text-immich-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25 dark:text-immich-dark-primary" class="rounded-lg p-2 font-semibold text-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25"
role="option" role="option"
onclick={() => handleClearAll()} onclick={() => handleClearAll()}
tabindex="-1" tabindex="-1"

4
web/src/lib/components/shared-components/settings/setting-accordion.svelte
View file

@ -78,9 +78,9 @@
<div> <div>
<div class="flex gap-2 place-items-center"> <div class="flex gap-2 place-items-center">
{#if icon} {#if icon}
<Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" aria-hidden /> <Icon {icon} class="text-primary" size="24" aria-hidden />
{/if} {/if}
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary"> <h2 class="font-medium text-primary">
{title} {title}
</h2> </h2>
</div> </div>

8
web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
View file

@ -16,13 +16,9 @@
<div class="mt-8 flex justify-between gap-2"> <div class="mt-8 flex justify-between gap-2">
<div class="left"> <div class="left">
{#if showResetToDefault} {#if showResetToDefault}
<button <Button variant="ghost" shape="round" size="small" onclick={() => onReset({ default: true })}
type="button" >{$t('reset_to_default')}</Button
onclick={() => onReset({ default: true })}
class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
> >
{$t('reset_to_default')}
</button>
{/if} {/if}
</div> </div>

2
web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
View file

@ -31,7 +31,7 @@
<div class="mb-4 w-full"> <div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select"> <label class="font-medium text-primary text-sm" for="{name}-select">
{label} {label}
</label> </label>

8
web/src/lib/components/shared-components/settings/setting-combobox.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte';
interface Props { interface Props {
title: string; title: string;
@ -31,7 +31,7 @@
<div class="grid grid-cols-2"> <div class="grid grid-cols-2">
<div> <div>
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}> <label class="font-medium text-primary text-sm" for={title}>
{title} {title}
</label> </label>
{#if isEdited} {#if isEdited}

2
web/src/lib/components/shared-components/settings/setting-dropdown.svelte
View file

@ -29,7 +29,7 @@
<div class="flex place-items-center justify-between"> <div class="flex place-items-center justify-between">
<div> <div>
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}> <label class="font-medium text-primary text-sm" for={title}>
{title} {title}
</label> </label>
{#if isEdited} {#if isEdited}

4
web/src/lib/components/shared-components/settings/setting-input-field.svelte
View file

@ -81,9 +81,7 @@
<div class="mb-4 w-full"> <div class="mb-4 w-full">
<div class="flex place-items-center gap-1"> <div class="flex place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm min-h-6 uppercase" for={label} <label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
>{label}</label
>
{#if required} {#if required}
<div class="text-red-400">*</div> <div class="text-red-400">*</div>
{/if} {/if}

4
web/src/lib/components/shared-components/settings/setting-select.svelte
View file

@ -40,9 +40,7 @@
<div class="mb-4 w-full"> <div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select" <label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
>{label}</label
>
{#if isEdited} {#if isEdited}
<div <div

2
web/src/lib/components/shared-components/settings/setting-switch.svelte
View file

@ -35,7 +35,7 @@
<div class="flex place-items-center justify-between"> <div class="flex place-items-center justify-between">
<div class="me-2"> <div class="me-2">
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}> <label class="font-medium text-primary text-sm" for={sliderId}>
{title} {title}
</label> </label>
{#if isEdited} {#if isEdited}

6
web/src/lib/components/shared-components/settings/setting-textarea.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte';
interface Props { interface Props {
value: string; value: string;
@ -31,7 +31,7 @@
<div class="mb-4 w-full"> <div class="mb-4 w-full">
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={label}>{label}</label> <label class="font-medium text-primary text-sm" for={label}>{label}</label>
{#if required} {#if required}
<div class="text-red-400">*</div> <div class="text-red-400">*</div>
{/if} {/if}

2
web/src/lib/components/shared-components/settings/settings-language-selector.svelte
View file

@ -38,7 +38,7 @@
{#if showSettingDescription} {#if showSettingDescription}
<div> <div>
<div class="flex h-[26px] place-items-center gap-1"> <div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={$t('language')}> <label class="font-medium text-primary text-sm" for={$t('language')}>
{$t('language')} {$t('language')}
</label> </label>
</div> </div>

10
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View file

@ -96,17 +96,13 @@
<div class="h-6 w-6"> <div class="h-6 w-6">
<ImmichLogo noText class="h-[24px]" /> <ImmichLogo noText class="h-[24px]" />
</div> </div>
<p class="flex text-immich-primary dark:text-immich-dark-primary font-medium"> <p class="flex text-primary font-medium">
{$t('purchase_button_buy_immich')} {$t('purchase_button_buy_immich')}
</p> </p>
</div> </div>
<div> <div>
<Icon <Icon icon={mdiInformationOutline} class="hidden sidebar:flex text-primary font-medium" size="18" />
icon={mdiInformationOutline}
class="hidden sidebar:flex text-immich-primary dark:text-immich-dark-primary font-medium"
size="18"
/>
</div> </div>
</div> </div>
</button> </button>
@ -142,7 +138,7 @@
/> />
</div> </div>
<h1 class="text-lg font-medium my-3 dark:text-immich-dark-primary text-immich-primary"> <h1 class="text-lg font-medium my-3 text-primary">
{$t('purchase_panel_title')} {$t('purchase_panel_title')}
</h1> </h1>

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

@ -57,9 +57,7 @@
draggable="false" draggable="false"
aria-current={isSelected ? 'page' : undefined} aria-current={isSelected ? 'page' : undefined}
class="flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary class="flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
{isSelected {isSelected ? 'bg-immich-primary/10 text-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10' : ''}"
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
: ''}"
> >
<div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate"> <div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate">
<Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden /> <Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden />

8
web/src/lib/components/shared-components/tree/breadcrumbs.svelte
View file

@ -51,9 +51,7 @@
/> />
</li> </li>
{#each parents as parent (parent)} {#each parents as parent (parent)}
<li <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden /> <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}> <a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
{parent.value} {parent.value}
@ -61,9 +59,7 @@
</li> </li>
{/each} {/each}
<li <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden /> <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
<p class="cursor-default whitespace-pre-wrap">{node.value}</p> <p class="cursor-default whitespace-pre-wrap">{node.value}</p>
</li> </li>

2
web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
View file

@ -23,7 +23,7 @@
title={item.value} title={item.value}
type="button" type="button"
> >
<Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="64" /> <Icon {icon} class="text-primary" size="64" />
<p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap"> <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
{item.value} {item.value}
</p> </p>

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

@ -26,7 +26,7 @@
<a <a
href={getLink(node.path)} href={getLink(node.path)}
title={node.value} title={node.value}
class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`} class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-primary' : 'dark:text-gray-200'}`}
data-sveltekit-keepfocus data-sveltekit-keepfocus
> >
{#if node.size > 0} {#if node.size > 0}
@ -37,7 +37,7 @@
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}> <div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
<Icon <Icon
icon={isActive ? icons.active : icons.default} icon={isActive ? icons.active : icons.default}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'} class={isActive ? 'text-primary' : 'text-gray-400'}
color={node.color} color={node.color}
size="20" size="20"
/> />

4
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View file

@ -61,9 +61,7 @@
</div> </div>
<div class="text-sm pb-2"> <div class="text-sm pb-2">
<p <p class="flex place-items-center gap-2 text-primary break-all uppercase">
class="flex place-items-center gap-2 text-immich-primary dark:text-immich-dark-primary break-all uppercase"
>
{#if link.type === SharedLinkType.Album} {#if link.type === SharedLinkType.Album}
{link.album?.albumName} {link.album?.albumName}
{:else if link.type === SharedLinkType.Individual} {:else if link.type === SharedLinkType.Individual}

4
web/src/lib/components/timeline/AssetSelectControlBar.svelte
View file

@ -38,9 +38,7 @@
<ControlAppBar onClose={clearSelect} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md"> <ControlAppBar onClose={clearSelect} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
{#snippet leading()} {#snippet leading()}
<div <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-immich-primary dark:text-immich-dark-primary'}"
>
<p class="block sm:hidden">{assets.length}</p> <p class="block sm:hidden">{assets.length}</p>
<p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p> <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
</div> </div>

2
web/src/lib/components/user-settings-page/device-card.svelte
View file

@ -31,7 +31,7 @@
</script> </script>
<div class="flex w-full flex-row"> <div class="flex w-full flex-row">
<div class="hidden items-center justify-center pe-2 text-immich-primary dark:text-immich-dark-primary sm:flex"> <div class="hidden items-center justify-center pe-2 text-primary sm:flex">
{#if device.deviceOS === 'Android'} {#if device.deviceOS === 'Android'}
<Icon icon={mdiAndroid} size="40" /> <Icon icon={mdiAndroid} size="40" />
{:else if device.deviceOS === 'iOS' || device.deviceOS === 'macOS'} {:else if device.deviceOS === 'iOS' || device.deviceOS === 'macOS'}

6
web/src/lib/components/user-settings-page/device-list.svelte
View file

@ -56,7 +56,7 @@
<section class="my-4"> <section class="my-4">
{#if currentDevice} {#if currentDevice}
<div class="mb-6"> <div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary"> <h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('current_device')} {$t('current_device')}
</h3> </h3>
<DeviceCard device={currentDevice} /> <DeviceCard device={currentDevice} />
@ -64,7 +64,7 @@
{/if} {/if}
{#if otherDevices.length > 0} {#if otherDevices.length > 0}
<div class="mb-6"> <div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary"> <h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('other_devices')} {$t('other_devices')}
</h3> </h3>
{#each otherDevices as device, index (device.id)} {#each otherDevices as device, index (device.id)}
@ -74,7 +74,7 @@
{/if} {/if}
{/each} {/each}
</div> </div>
<h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary"> <h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('log_out_all_devices')} {$t('log_out_all_devices')}
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">

2
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View file

@ -101,7 +101,7 @@
{#if keys.length > 0} {#if keys.length > 0}
<table class="w-full text-start"> <table class="w-full text-start">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="flex w-full place-items-center"> <tr class="flex w-full place-items-center">
<th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th> <th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th>

8
web/src/lib/components/user-settings-page/user-purchase-settings.svelte
View file

@ -122,10 +122,10 @@
<div <div
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4" class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
> >
<Icon icon={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" /> <Icon icon={mdiKey} size="56" class="text-primary" />
<div> <div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg"> <p class="text-primary font-semibold text-lg">
{$t('purchase_server_title')} {$t('purchase_server_title')}
</p> </p>
@ -154,10 +154,10 @@
<div <div
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4" class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
> >
<Icon icon={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" /> <Icon icon={mdiKey} size="56" class="text-primary" />
<div> <div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg"> <p class="text-primary font-semibold text-lg">
{$t('purchase_individual_title')} {$t('purchase_individual_title')}
</p> </p>
{#if $user.license?.activatedAt} {#if $user.license?.activatedAt}

6
web/src/lib/components/user-settings-page/user-usage-statistic.svelte
View file

@ -71,7 +71,7 @@
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-start mt-4"> <table class="w-full text-start mt-4">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="flex w-full place-items-center text-sm font-medium text-center"> <tr class="flex w-full place-items-center text-sm font-medium text-center">
<th class="w-1/4">{$t('view_name')}</th> <th class="w-1/4">{$t('view_name')}</th>
@ -94,9 +94,7 @@
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-start mt-4"> <table class="w-full text-start mt-4">
<thead <thead class="mb-4 flex h-12 w-full rounded-md border text-primary dark:border-immich-dark-gray bg-subtle">
class="mb-4 flex h-12 w-full rounded-md border text-immich-primary dark:border-immich-dark-gray bg-subtle dark:text-immich-dark-primary"
>
<tr class="flex w-full place-items-center text-sm font-medium text-center"> <tr class="flex w-full place-items-center text-sm font-medium text-center">
<th class="w-1/2">{$t('owned')}</th> <th class="w-1/2">{$t('owned')}</th>
<th class="w-1/2">{$t('shared')}</th> <th class="w-1/2">{$t('shared')}</th>

2
web/src/lib/components/utilities-page/utilities-menu.svelte
View file

@ -16,7 +16,7 @@
{#each links as link (link.href)} {#each links as link (link.href)}
<a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"> <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
<span><Icon icon={link.icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span> <span><Icon icon={link.icon} class="text-primary" size="24" /> </span>
{link.label} {link.label}
</a> </a>
{/each} {/each}

4
web/src/lib/elements/Dropdown.svelte
View file

@ -121,10 +121,10 @@
onclick={() => !renderedOption.disabled && handleSelectOption(option)} onclick={() => !renderedOption.disabled && handleSelectOption(option)}
> >
{#if isEqual(selectedOption, option)} {#if isEqual(selectedOption, option)}
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<Icon icon={mdiCheck} /> <Icon icon={mdiCheck} />
</div> </div>
<p class="justify-self-start text-immich-primary dark:text-immich-dark-primary"> <p class="justify-self-start text-primary">
{renderedOption.title} {renderedOption.title}
</p> </p>
{:else} {:else}

4
web/src/lib/elements/StarRating.svelte
View file

@ -57,7 +57,7 @@
<!-- svelte-ignore a11y_mouse_events_have_key_events --> <!-- svelte-ignore a11y_mouse_events_have_key_events -->
<fieldset <fieldset
class="text-immich-primary dark:text-immich-dark-primary w-fit cursor-default" class="text-primary w-fit cursor-default"
onmouseleave={() => setHoverRating(0)} onmouseleave={() => setHoverRating(0)}
use:focusOutside={{ onFocusOut: reset }} use:focusOutside={{ onFocusOut: reset }}
use:shortcuts={[ use:shortcuts={[
@ -114,7 +114,7 @@
ratingSelection = 0; ratingSelection = 0;
handleSelect(ratingSelection); handleSelect(ratingSelection);
}} }}
class="cursor-pointer text-xs text-immich-primary dark:text-immich-dark-primary" class="cursor-pointer text-xs text-primary"
> >
{$t('rating_clear')} {$t('rating_clear')}
</button> </button>

2
web/src/lib/modals/AlbumUsersModal.svelte
View file

@ -140,7 +140,7 @@
<button <button
type="button" type="button"
onclick={() => handleRemoveUser(user)} onclick={() => handleRemoveUser(user)}
class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary" class="text-sm font-medium text-primary transition-colors hover:text-immich-primary/75"
>{$t('leave')}</button >{$t('leave')}</button
> >
{/if} {/if}

2
web/src/lib/modals/ApiKeySecretModal.svelte
View file

@ -14,7 +14,7 @@
<Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small"> <Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
<ModalBody> <ModalBody>
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
{$t('api_key_description')} {$t('api_key_description')}
</p> </p>

40
web/src/lib/modals/HelpAndFeedbackModal.svelte
View file

@ -20,10 +20,7 @@
<div> <div>
<a href="https://{info.version}.archive.immich.app/docs/overview/introduction" target="_blank" rel="noreferrer"> <a href="https://{info.version}.archive.immich.app/docs/overview/introduction" target="_blank" rel="noreferrer">
<Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" /> <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="documentation-label"
>
{$t('documentation')} {$t('documentation')}
</p> </p>
</a> </a>
@ -32,10 +29,7 @@
<div> <div>
<a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer"> <a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer">
<Icon icon={mdiGithub} size="1.5em" class="inline-block" /> <Icon icon={mdiGithub} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('source')} {$t('source')}
</p> </p>
</a> </a>
@ -44,10 +38,7 @@
<div> <div>
<a href="https://discord.immich.app" target="_blank" rel="noreferrer"> <a href="https://discord.immich.app" target="_blank" rel="noreferrer">
<Icon icon={siDiscord} class="inline-block" size="1.5em" /> <Icon icon={siDiscord} class="inline-block" size="1.5em" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('discord')} {$t('discord')}
</p> </p>
</a> </a>
@ -56,10 +47,7 @@
<div> <div>
<a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer"> <a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer">
<Icon icon={mdiBugOutline} size="1.5em" class="inline-block" /> <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('bugs_and_feature_requests')} {$t('bugs_and_feature_requests')}
</p> </p>
</a> </a>
@ -75,10 +63,7 @@
<div> <div>
<a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer"> <a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer">
<Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" /> <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="documentation-label"
>
{$t('documentation')} {$t('documentation')}
</p> </p>
</a> </a>
@ -89,10 +74,7 @@
<div> <div>
<a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer"> <a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer">
<Icon icon={mdiGit} size="1.5em" class="inline-block" /> <Icon icon={mdiGit} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('source')} {$t('source')}
</p> </p>
</a> </a>
@ -103,10 +85,7 @@
<div> <div>
<a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer"> <a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer">
<Icon icon={mdiFaceAgent} class="inline-block" size="1.5em" /> <Icon icon={mdiFaceAgent} class="inline-block" size="1.5em" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('support')} {$t('support')}
</p> </p>
</a> </a>
@ -117,10 +96,7 @@
<div> <div>
<a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer"> <a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer">
<Icon icon={mdiBugOutline} size="1.5em" class="inline-block" /> <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
<p <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
id="github-label"
>
{$t('bugs_and_feature_requests')} {$t('bugs_and_feature_requests')}
</p> </p>
</a> </a>

2
web/src/lib/modals/PersonEditBirthDateModal.svelte
View file

@ -37,7 +37,7 @@
<Modal title={$t('set_date_of_birth')} icon={mdiCake} {onClose} size="small"> <Modal title={$t('set_date_of_birth')} icon={mdiCake} {onClose} size="small">
<ModalBody> <ModalBody>
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
{$t('birthdate_set_description')} {$t('birthdate_set_description')}
</p> </p>

46
web/src/lib/modals/ServerAboutModal.svelte
View file

@ -17,11 +17,9 @@
<Modal title={$t('about')} {onClose}> <Modal title={$t('about')} {onClose}>
<ModalBody> <ModalBody>
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-immich-primary dark:text-immich-dark-primary"> <div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-primary">
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc" <label class="font-medium text-primary text-sm" for="version-desc">Immich</label>
>Immich</label
>
<div> <div>
<a <a
href={info.versionUrl} href={info.versionUrl}
@ -36,45 +34,35 @@
</div> </div>
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc" <label class="font-medium text-primary text-sm" for="ffmpeg-desc">ExifTool</label>
>ExifTool</label
>
<p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc"> <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
{info.exiftool} {info.exiftool}
</p> </p>
</div> </div>
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="nodejs-desc" <label class="font-medium text-primary text-sm" for="nodejs-desc">Node.js</label>
>Node.js</label
>
<p class="immich-form-label pb-2 text-sm" id="nodejs-desc"> <p class="immich-form-label pb-2 text-sm" id="nodejs-desc">
{info.nodejs} {info.nodejs}
</p> </p>
</div> </div>
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="vips-desc" <label class="font-medium text-primary text-sm" for="vips-desc">Libvips</label>
>Libvips</label
>
<p class="immich-form-label pb-2 text-sm" id="vips-desc"> <p class="immich-form-label pb-2 text-sm" id="vips-desc">
{info.libvips} {info.libvips}
</p> </p>
</div> </div>
<div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}> <div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="imagemagick-desc" <label class="font-medium text-primary text-sm" for="imagemagick-desc">ImageMagick</label>
>ImageMagick</label
>
<p class="immich-form-label pb-2 text-sm" id="imagemagick-desc"> <p class="immich-form-label pb-2 text-sm" id="imagemagick-desc">
{info.imagemagick} {info.imagemagick}
</p> </p>
</div> </div>
<div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}> <div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc" <label class="font-medium text-primary text-sm" for="ffmpeg-desc">FFmpeg</label>
>FFmpeg</label
>
<p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc"> <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
{info.ffmpeg} {info.ffmpeg}
</p> </p>
@ -82,9 +70,7 @@
{#if info.repository && info.repositoryUrl} {#if info.repository && info.repositoryUrl}
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc" <label class="font-medium text-primary text-sm" for="version-desc">{$t('repository')}</label>
>{$t('repository')}</label
>
<div> <div>
<a <a
href={info.repositoryUrl} href={info.repositoryUrl}
@ -101,9 +87,7 @@
{#if info.sourceRef && info.sourceCommit && info.sourceUrl} {#if info.sourceRef && info.sourceCommit && info.sourceUrl}
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="git-desc" <label class="font-medium text-primary text-sm" for="git-desc">{$t('source')}</label>
>{$t('source')}</label
>
<div> <div>
<a <a
href={info.sourceUrl} href={info.sourceUrl}
@ -120,9 +104,7 @@
{#if info.build && info.buildUrl} {#if info.build && info.buildUrl}
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-desc" <label class="font-medium text-primary text-sm" for="build-desc">{$t('build')}</label>
>{$t('build')}</label
>
<div> <div>
<a <a
href={info.buildUrl} href={info.buildUrl}
@ -139,9 +121,7 @@
{#if info.buildImage && info.buildImage} {#if info.buildImage && info.buildImage}
<div> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-image-desc" <label class="font-medium text-primary text-sm" for="build-image-desc">{$t('build_image')}</label>
>{$t('build_image')}</label
>
<div> <div>
<a <a
href={info.buildImageUrl} href={info.buildImageUrl}
@ -166,9 +146,7 @@
{/if} {/if}
<div class="col-span-full"> <div class="col-span-full">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-history" <label class="font-medium text-primary text-sm" for="version-history">{$t('version_history')}</label>
>{$t('version_history')}</label
>
<ul id="version-history" class="list-none"> <ul id="version-history" class="list-none">
{#each versions.slice(0, 5) as item (item.id)} {#each versions.slice(0, 5) as item (item.id)}
{@const createdAt = DateTime.fromISO(item.createdAt)} {@const createdAt = DateTime.fromISO(item.createdAt)}

4
web/src/lib/modals/SharedLinkCreateModal.svelte
View file

@ -146,7 +146,7 @@
{:else} {:else}
<div class="text-sm"> <div class="text-sm">
{$t('public_album')} | {$t('public_album')} |
<span class="text-immich-primary dark:text-immich-dark-primary">{editingLink.album?.albumName}</span> <span class="text-primary">{editingLink.album?.albumName}</span>
</div> </div>
{/if} {/if}
{/if} {/if}
@ -157,7 +157,7 @@
{:else} {:else}
<div class="text-sm"> <div class="text-sm">
{$t('individual_share')} | {$t('individual_share')} |
<span class="text-immich-primary dark:text-immich-dark-primary">{editingLink.description || ''}</span> <span class="text-primary">{editingLink.description || ''}</span>
</div> </div>
{/if} {/if}
{/if} {/if}

2
web/src/lib/modals/SlideshowSettingsModal.svelte
View file

@ -75,7 +75,7 @@
<Modal size="small" title={$t('slideshow_settings')} onClose={() => onClose()}> <Modal size="small" title={$t('slideshow_settings')} onClose={() => onClose()}>
<ModalBody> <ModalBody>
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"> <div class="flex flex-col gap-4 text-primary">
<SettingDropdown <SettingDropdown
title={$t('direction')} title={$t('direction')}
options={Object.values(navigationOptions)} options={Object.values(navigationOptions)}

2
web/src/lib/modals/TagCreateModal.svelte
View file

@ -38,7 +38,7 @@
<Modal size="small" title={$t('create_tag')} icon={mdiTag} {onClose}> <Modal size="small" title={$t('create_tag')} icon={mdiTag} {onClose}>
<ModalBody> <ModalBody>
<div class="text-immich-primary dark:text-immich-dark-primary"> <div class="text-primary">
<p class="text-sm dark:text-immich-dark-fg"> <p class="text-sm dark:text-immich-dark-fg">
{$t('create_tag_description')} {$t('create_tag_description')}
</p> </p>

2
web/src/lib/modals/UserEditModal.svelte
View file

@ -101,7 +101,7 @@
<p> <p>
{$t('admin.note_apply_storage_label_previous_assets')} {$t('admin.note_apply_storage_label_previous_assets')}
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"> <a href={AppRoute.ADMIN_JOBS} class="text-primary">
{$t('admin.storage_template_migration_job')} {$t('admin.storage_template_migration_job')}
</a> </a>
</p> </p>

15
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -81,6 +81,7 @@
mdiPlus, mdiPlus,
mdiPresentationPlay, mdiPresentationPlay,
mdiShareVariantOutline, mdiShareVariantOutline,
mdiUpload,
} from '@mdi/js'; } from '@mdi/js';
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -534,7 +535,7 @@
onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)} onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary" class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
> >
<span class="text-text-immich-primary dark:text-immich-dark-primary"> <span class="text-primary">
<Icon icon={mdiPlus} size="24" /> <Icon icon={mdiPlus} size="24" />
</span> </span>
<span class="text-lg">{$t('select_photos')}</span> <span class="text-lg">{$t('select_photos')}</span>
@ -710,16 +711,10 @@
{/snippet} {/snippet}
{#snippet trailing()} {#snippet trailing()}
<button <Button variant="ghost" leadingIcon={mdiUpload} onclick={handleSelectFromComputer}
type="button" >{$t('select_from_computer')}</Button
onclick={handleSelectFromComputer}
class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
>
{$t('select_from_computer')}
</button>
<Button size="small" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
>{$t('done')}</Button
> >
<Button disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}>{$t('done')}</Button>
{/snippet} {/snippet}
</ControlAppBar> </ControlAppBar>
{/if} {/if}

2
web/src/routes/(user)/people/+page.svelte
View file

@ -374,7 +374,7 @@
<input <input
type="text" type="text"
class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-immich-primary dark:text-immich-dark-primary" class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-primary"
value={person.name} value={person.name}
placeholder={$t('add_a_name')} placeholder={$t('add_a_name')}
use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }} use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}

4
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -431,9 +431,7 @@
widthStyle="3.375rem" widthStyle="3.375rem"
heightStyle="3.375rem" heightStyle="3.375rem"
/> />
<div <div class="flex flex-col justify-center text-start px-4 text-primary">
class="flex flex-col justify-center text-start px-4 text-immich-primary dark:text-immich-dark-primary"
>
<p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p> <p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm text-gray-500 dark:text-gray-400">
{$t('assets_count', { values: { count: numberOfAssets } })} {$t('assets_count', { values: { count: numberOfAssets } })}

2
web/src/routes/admin/library-management/+page.svelte
View file

@ -277,7 +277,7 @@
{#if libraries.length > 0} {#if libraries.length > 0}
<table class="w-full text-start"> <table class="w-full text-start">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="grid grid-cols-6 w-full place-items-center"> <tr class="grid grid-cols-6 w-full place-items-center">
<th class="text-center text-sm font-medium">{$t('name')}</th> <th class="text-center text-sm font-medium">{$t('name')}</th>

2
web/src/routes/admin/users/+page.svelte
View file

@ -87,7 +87,7 @@
<section class="w-full pb-28 lg:w-[850px]"> <section class="w-full pb-28 lg:w-[850px]">
<table class="my-5 w-full text-start"> <table class="my-5 w-full text-start">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<tr class="flex w-full place-items-center"> <tr class="flex w-full place-items-center">
<th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium" <th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium"