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

feat(web) dark mode (#867)

Browse source
This commit is contained in:
Alex 2022-10-26 11:10:48 -05:00 • committed by GitHub
parent ae96508e15
commit f94176a910
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 362 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -60,12 +60,7 @@
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
data-testid="context-button-parent"
>
<CircleIconButton
logo={DotsVertical}
size={'20'}
hoverColor={'rgba(95,99,104, 0.5)'}
logoColor={'#fdf8ec'}
/>
<CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} />
</div>
<div class={`h-[275px] w-[275px] z-[-1]`}>
@ -78,11 +73,14 @@
</div>
<div class="mt-4">
<p class="text-sm font-medium text-gray-800" data-testid="album-name">
<p
class="text-sm font-medium text-gray-800 dark:text-immich-dark-primary"
data-testid="album-name"
>
{album.albumName}
</p>
<span class="text-xs flex gap-2" data-testid="album-details">
<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
<p>{album.assetCount} items</p>
{#if album.shared}

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

@ -331,7 +331,7 @@
};
</script>
<section class="bg-immich-bg">
<section class="bg-immich-bg dark:bg-immich-dark-bg">
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<ControlAppBar
@ -340,7 +340,9 @@
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary">Selected {multiSelectAsset.size}</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {multiSelectAsset.size}
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
{#if isOwned}
@ -386,7 +388,7 @@
<button
disabled={album.assetCount == 0}
on:click={() => (isShowShareUserSelection = true)}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
class="immich-text-button border bg-immich-primary dark:bg-immich-dark-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed dark:text-immich-dark-bg dark:border-immich-dark-gray"
><span class="px-2">Share</span></button
>
{/if}
@ -404,9 +406,9 @@
}}
on:focus={() => (isEditingTitle = true)}
on:blur={() => (isEditingTitle = false)}
class={`transition-all text-6xl text-immich-primary w-[99%] border-b-2 border-transparent outline-none ${
class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
} focus:outline-none focus:border-b-2 focus:border-immich-primary bg-immich-bg`}
} focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
type="text"
bind:value={album.albumName}
disabled={!isOwned}
@ -468,13 +470,15 @@
<!-- Album is empty - Show asset selectection buttons -->
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
<div class="w-[300px]">
<p class="text-xs">ADD PHOTOS</p>
<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
<button
on:click={() => (isShowAssetSelection = true)}
class="w-full py-8 border bg-white rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary"
class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
>
<span><Plus color="#4250af" size="24" /> </span>
<span class="text-lg text-immich-fg">Select photos</span>
<span class="text-text-immich-primary dark:text-immich-dark-primary"
><Plus size="24" />
</span>
<span class="text-lg">Select photos</span>
</button>
</div>
</section>

12
web/src/lib/components/album-page/asset-selection.svelte
View file

@ -70,7 +70,7 @@
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg z-[9999]"
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
>
<ControlAppBar
on:close-button-click={() => {
@ -80,28 +80,28 @@
>
<svelte:fragment slot="leading">
{#if $selectedAssets.size == 0}
<p class="text-lg">Add to album</p>
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
{:else}
<p class="text-lg">{$selectedAssets.size} selected</p>
<p class="text-lg dark:text-immich-dark-fg">{$selectedAssets.size} selected</p>
{/if}
</svelte:fragment>
<svelte:fragment slot="trailing">
<button
on:click={() => openFileUploadDialog(UploadType.ALBUM)}
class="text-immich-primary text-sm hover:bg-immich-primary/10 transition-all px-6 py-2 rounded-lg font-medium"
class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
>
Select from computer
</button>
<button
disabled={$selectedAssets.size === 0}
on:click={addSelectedAssets}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
class="immich-text-button border bg-immich-primary dark:bg-immich-dark-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed dark:text-immich-dark-bg dark:border-immich-dark-gray"
><span class="px-2">Done</span></button
>
</svelte:fragment>
</ControlAppBar>
<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg">
<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
<AssetGrid isAlbumSelectionMode={true} />
</section>
</section>

7
web/src/lib/components/album-page/share-info-modal.svelte
View file

@ -68,14 +68,14 @@
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<p class="font-medium text-immich-fg">Options</p>
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
</span>
</svelte:fragment>
<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
{#each album.sharedUsers as user}
<div
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50"
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
>
<div class="flex gap-4 place-items-center">
<CircleAvatar {user} />
@ -88,14 +88,13 @@
on:click={() => showContextMenu(user.id)}
logo={DotsVertical}
backgroundColor={'transparent'}
logoColor={'#5f6368'}
hoverColor={'#e2e7e9'}
size={'20'}
/>
{:else if user.id == currentUser?.id}
<button
on:click={() => removeUser('me')}
class="text-sm text-immich-primary font-medium transition-colors hover:text-immich-primary/75"
class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
>Leave</button
>
{/if}

10
web/src/lib/components/album-page/user-selection-modal.svelte
View file

@ -38,7 +38,7 @@
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<img src="/immich-logo.svg" width="24" alt="Immich" />
<p class="font-medium text-immich-fg">Invite to album</p>
<p class="font-medium">Invite to album</p>
</span>
</svelte:fragment>
@ -51,7 +51,7 @@
{#key user.id}
<button
on:click={() => deselectUser(user)}
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 transition-colors"
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
<CircleAvatar size={28} {user} />
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
@ -68,11 +68,11 @@
{#each users as user}
<button
on:click={() => selectUser(user)}
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 transition-all"
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
>
{#if selectedUsers.includes(user)}
<span
class="bg-immich-primary text-white rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl"
class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
>✓</span
>
{:else}
@ -80,7 +80,7 @@
{/if}
<div class="text-left">
<p class="text-immich-fg">
<p class="text-immich-fg dark:text-immich-dark-fg">
{user.firstName}
{user.lastName}
</p>