mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: text-primary (#22141)
This commit is contained in:
parent
53a6724039
commit
11e72a0f35
63 changed files with 138 additions and 229 deletions
|
|
@ -367,11 +367,7 @@
|
|||
>
|
||||
{#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
|
||||
{#if useLocationPin}
|
||||
<Icon
|
||||
icon={mdiMapMarker}
|
||||
size="50px"
|
||||
class="dark:text-immich-dark-primary text-immich-primary -translate-y-[50%]"
|
||||
/>
|
||||
<Icon icon={mdiMapMarker} size="50px" class="text-primary -translate-y-[50%]" />
|
||||
{:else}
|
||||
<img
|
||||
src={getAssetThumbnailUrl(feature.properties?.id)}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
</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}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
<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 () => {
|
||||
onClose();
|
||||
if (info) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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"
|
||||
>
|
||||
<div class="text-immich-primary dark:text-immich-dark-primary">
|
||||
<div class="text-primary">
|
||||
<Icon icon={mdiAccount} size="56" />
|
||||
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</script>
|
||||
|
||||
<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-lg mt-6">{$t('purchase_activated_subtitle')}</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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"
|
||||
>
|
||||
<div class="text-immich-primary dark:text-immich-dark-primary">
|
||||
<div class="text-primary">
|
||||
<Icon icon={mdiServer} size="56" />
|
||||
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
<button
|
||||
id={getId(0)}
|
||||
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"
|
||||
onclick={() => handleClearAll()}
|
||||
tabindex="-1"
|
||||
|
|
|
|||
|
|
@ -78,9 +78,9 @@
|
|||
<div>
|
||||
<div class="flex gap-2 place-items-center">
|
||||
{#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}
|
||||
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
<h2 class="font-medium text-primary">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,9 @@
|
|||
<div class="mt-8 flex justify-between gap-2">
|
||||
<div class="left">
|
||||
{#if showResetToDefault}
|
||||
<button
|
||||
type="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"
|
||||
<Button variant="ghost" shape="round" size="small" onclick={() => onReset({ default: true })}
|
||||
>{$t('reset_to_default')}</Button
|
||||
>
|
||||
{$t('reset_to_default')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div class="mb-4 w-full">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<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 { 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 {
|
||||
title: string;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="grid grid-cols-2">
|
||||
<div>
|
||||
<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}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<div class="flex place-items-center justify-between">
|
||||
<div>
|
||||
<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}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
|
|
|
|||
|
|
@ -81,9 +81,7 @@
|
|||
|
||||
<div class="mb-4 w-full">
|
||||
<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}</label
|
||||
>
|
||||
<label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
|
||||
{#if required}
|
||||
<div class="text-red-400">*</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,7 @@
|
|||
|
||||
<div class="mb-4 w-full">
|
||||
<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}</label
|
||||
>
|
||||
<label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
|
||||
|
||||
{#if isEdited}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="flex place-items-center justify-between">
|
||||
<div class="me-2">
|
||||
<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}
|
||||
</label>
|
||||
{#if isEdited}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div class="mb-4 w-full">
|
||||
<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}
|
||||
<div class="text-red-400">*</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
{#if showSettingDescription}
|
||||
<div>
|
||||
<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')}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -96,17 +96,13 @@
|
|||
<div class="h-6 w-6">
|
||||
<ImmichLogo noText class="h-[24px]" />
|
||||
</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')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Icon
|
||||
icon={mdiInformationOutline}
|
||||
class="hidden sidebar:flex text-immich-primary dark:text-immich-dark-primary font-medium"
|
||||
size="18"
|
||||
/>
|
||||
<Icon icon={mdiInformationOutline} class="hidden sidebar:flex text-primary font-medium" size="18" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -142,7 +138,7 @@
|
|||
/>
|
||||
</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')}
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -57,9 +57,7 @@
|
|||
draggable="false"
|
||||
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
|
||||
{isSelected
|
||||
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
|
||||
: ''}"
|
||||
{isSelected ? 'bg-immich-primary/10 text-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10' : ''}"
|
||||
>
|
||||
<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 />
|
||||
|
|
|
|||
|
|
@ -51,9 +51,7 @@
|
|||
/>
|
||||
</li>
|
||||
{#each parents as parent (parent)}
|
||||
<li
|
||||
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
|
||||
<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)}>
|
||||
{parent.value}
|
||||
|
|
@ -61,9 +59,7 @@
|
|||
</li>
|
||||
{/each}
|
||||
|
||||
<li
|
||||
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
|
||||
<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>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
title={item.value}
|
||||
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">
|
||||
{item.value}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<a
|
||||
href={getLink(node.path)}
|
||||
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
|
||||
>
|
||||
{#if node.size > 0}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
|
||||
<Icon
|
||||
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}
|
||||
size="20"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue