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

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

18
web/src/lib/components/admin-page/jobs/job-tile.svelte
View file

@ -11,17 +11,17 @@
const dispatch = createEventDispatcher();
</script>
<div class="flex border-b pb-5">
<div class="flex border-b pb-5 dark:border-b-immich-dark-gray">
<div class="w-[70%]">
<h1 class="text-immich-primary text-sm">{title.toUpperCase()}</h1>
<p class="text-sm mt-1">{subtitle}</p>
<p class="text-sm">
<h1 class="text-immich-primary dark:text-immich-dark-primary text-sm">{title.toUpperCase()}</h1>
<p class="text-sm mt-1 dark:text-immich-dark-fg">{subtitle}</p>
<p class="text-sm dark:text-immich-dark-fg">
<slot />
</p>
<table class="text-left w-full mt-5">
<!-- table header -->
<thead
class="border rounded-md mb-2 bg-immich-primary/10 flex text-immich-primary w-full h-12"
class="border rounded-md mb-2 dark:bg-immich-dark-gray dark:border-immich-dark-gray bg-immich-primary/10 flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/3 font-medium text-sm">Status</th>
@ -29,8 +29,10 @@
<th class="text-center w-1/3 font-medium text-sm">Waiting</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border bg-white">
<tr class="text-center flex place-items-center w-full h-[40px]">
<tbody
class="overflow-y-auto rounded-md w-full max-h-[320px] block border bg-white dark:border-immich-dark-gray dark:bg-[#e5e5e5] dark:text-immich-dark-bg"
>
<tr class="text-center flex place-items-center w-full h-[60px]">
<td class="text-sm px-2 w-1/3 text-ellipsis">{jobStatus ? 'Active' : 'Idle'}</td>
<td class="text-sm px-2 w-1/3 text-ellipsis">{activeJobCount}</td>
<td class="text-sm px-2 w-1/3 text-ellipsis">{waitingJobCount}</td>
@ -41,7 +43,7 @@
<div class="w-[30%] flex place-items-center place-content-end">
<button
on:click={() => dispatch('click')}
class="px-6 py-3 text-sm bg-immich-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg"
class="px-6 py-3 text-sm bg-immich-primary dark:bg-immich-dark-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg dark:text-immich-dark-gray"
disabled={jobStatus}
>
{#if jobStatus}

14
web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
View file

@ -22,7 +22,7 @@
<div class="flex flex-col gap-5">
<div>
<p class="text-sm">TOTAL USAGE</p>
<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
<div class="flex mt-5 justify-between">
<StatsCard logo={CameraIris} title={'PHOTOS'} value={stats.photos.toString()} />
@ -33,9 +33,11 @@
</div>
<div>
<p class="text-sm">USER USAGE DETAIL</p>
<p class="text-sm dark:text-immich-dark-fg">USER USAGE DETAIL</p>
<table class="text-left w-full mt-5">
<thead class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12">
<thead
class="border rounded-md mb-4 bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray flex text-immich-primary dark:text-immich-dark-primary w-full h-12"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/5 font-medium text-sm">User</th>
<th class="text-center w-1/5 font-medium text-sm">Photos</th>
@ -44,11 +46,13 @@
<th class="text-center w-1/5 font-medium text-sm">Size</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
<tbody
class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-bg"
>
{#each stats.usageByUser as user, i}
<tr
class={`text-center flex place-items-center w-full h-[50px] ${
i % 2 == 0 ? 'bg-immich-gray' : 'bg-immich-bg'
i % 2 == 0 ? 'bg-immich-gray dark:bg-[#e5e5e5]' : 'bg-immich-bg dark:bg-[#eeeeee]'
}`}
>
<td class="text-sm px-2 w-1/5 text-ellipsis">{getFullName(user.userId)}</td>

14
web/src/lib/components/admin-page/server-stats/stats-card.svelte
View file

@ -17,15 +17,17 @@
};
</script>
<div class="w-[180px] h-[140px] bg-immich-gray rounded-3xl p-5 flex flex-col justify-between">
<div class="flex place-items-center gap-4">
<svelte:component this={logo} size="40" color={'#4250af'} />
<p class="text-immich-primary">{title}</p>
<div
class="w-[180px] h-[140px] bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
>
<div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
<svelte:component this={logo} size="40" />
<p>{title}</p>
</div>
<div class="relative text-center font-mono font-semibold text-2xl">
<span class="text-[#DCDADA]">{zeros()}</span><span class="text-immich-primary"
>{parseInt(value)}</span
<span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
class="text-immich-primary dark:text-immich-dark-primary">{parseInt(value)}</span
>
{#if unit}
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>

14
web/src/lib/components/admin-page/user-management.svelte
View file

@ -9,7 +9,9 @@
</script>
<table class="text-left w-full my-5">
<thead class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 ">
<thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/4 font-medium text-sm">Email</th>
<th class="text-center w-1/4 font-medium text-sm">First name</th>
@ -17,11 +19,13 @@
<th class="text-center w-1/4 font-medium text-sm">Edit</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
<tbody
class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray"
>
{#each allUsers as user, i}
<tr
class={`text-center flex place-items-center w-full h-[80px] ${
i % 2 == 0 ? 'bg-gray-100' : 'bg-immich-bg'
class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-bg ${
i % 2 == 0 ? 'bg-immich-gray dark:bg-[#e5e5e5]' : 'bg-immich-bg dark:bg-[#eeeeee]'
}`}
>
<td class="text-sm px-4 w-1/4 text-ellipsis">{user.email}</td>
@ -32,7 +36,7 @@
on:click={() => {
dispatch('edit-user', { user });
}}
class="bg-immich-primary text-gray-100 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full p-3 transition-all duration-150 hover:bg-immich-primary/75"
><PencilOutline size="20" /></button
></td
>