From afdfd1863fb25b20ed98370b313edb5546a3875a Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Wed, 9 Nov 2022 05:41:45 -0600
Subject: [PATCH] Adjusting dark mode color on the web admin panel

---
 web/src/lib/components/admin-page/jobs/job-tile.svelte    | 2 +-
 .../admin-page/server-stats/server-stats-panel.svelte     | 6 ++++--
 web/src/lib/components/admin-page/user-management.svelte  | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index abc3e83e7d..28242ce0b3 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -30,7 +30,7 @@
 				</tr>
 			</thead>
 			<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"
+				class="overflow-y-auto rounded-md w-full max-h-[320px] block border bg-white dark:border-immich-dark-gray dark:bg-immich-dark-gray/75 dark:text-immich-dark-fg"
 			>
 				<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>
diff --git a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
index b938ce2e60..b5269b0bee 100644
--- a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
+++ b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
@@ -47,12 +47,14 @@
 				</tr>
 			</thead>
 			<tbody
-				class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-bg"
+				class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray dark:text-immich-dark-fg"
 			>
 				{#each stats.usageByUser as user, i}
 					<tr
 						class={`text-center flex place-items-center w-full h-[50px] ${
-							i % 2 == 0 ? 'bg-immich-gray dark:bg-[#e5e5e5]' : 'bg-immich-bg dark:bg-[#eeeeee]'
+							i % 2 == 0
+								? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+								: 'bg-immich-bg dark:bg-immich-dark-gray/50'
 						}`}
 					>
 						<td class="text-sm px-2 w-1/5 text-ellipsis">{getFullName(user.userId)}</td>
diff --git a/web/src/lib/components/admin-page/user-management.svelte b/web/src/lib/components/admin-page/user-management.svelte
index 2ebe2c909f..0b8a3cda74 100644
--- a/web/src/lib/components/admin-page/user-management.svelte
+++ b/web/src/lib/components/admin-page/user-management.svelte
@@ -36,12 +36,12 @@
 	>
 		{#each allUsers as user, i}
 			<tr
-				class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-bg ${
+				class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
 					isDeleted(user)
-						? 'bg-red-50'
+						? 'bg-red-300 dark:bg-red-900'
 						: i % 2 == 0
-						? 'bg-immich-gray dark:bg-[#e5e5e5]'
-						: 'bg-immich-bg dark:bg-[#eeeeee]'
+						? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+						: 'bg-immich-bg dark:bg-immich-dark-gray/50'
 				}`}
 			>
 				<td class="text-sm px-4 w-1/4 text-ellipsis">{user.email}</td>