From c4735111335bc5c8fe553afe6dd12ccc5a799f94 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Fri, 9 May 2025 18:56:41 -0400
Subject: [PATCH] feat(web): stat card tweaks (#18189)

feat: stat card tweaks
---
 .../server-stats/server-stats-panel.svelte        |  2 +-
 .../admin-page/server-stats/stats-card.svelte     | 15 +++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

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 30f9326b8b..3dcd3b4594 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
@@ -38,7 +38,7 @@
   <div>
     <p class="text-sm dark:text-immich-dark-fg">{$t('total_usage').toUpperCase()}</p>
 
-    <div class="mt-5 hidden justify-between lg:flex">
+    <div class="mt-5 hidden justify-between lg:flex gap-4">
       <StatsCard icon={mdiCameraIris} title={$t('photos').toUpperCase()} value={stats.photos} />
       <StatsCard icon={mdiPlayCircle} title={$t('videos').toUpperCase()} value={stats.videos} />
       <StatsCard icon={mdiChartPie} title={$t('storage').toUpperCase()} value={statsUsage} unit={statsUsageUnit} />
diff --git a/web/src/lib/components/admin-page/server-stats/stats-card.svelte b/web/src/lib/components/admin-page/server-stats/stats-card.svelte
index face970591..aa18c6f3ae 100644
--- a/web/src/lib/components/admin-page/server-stats/stats-card.svelte
+++ b/web/src/lib/components/admin-page/server-stats/stats-card.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { ByteUnit } from '$lib/utils/byte-units';
+  import { Code, Text } from '@immich/ui';
 
   interface Props {
     icon: string;
@@ -20,18 +21,16 @@
   });
 </script>
 
-<div class="flex h-[140px] w-[250px] flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
-  <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+<div class="flex h-[140px] w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
+  <div class="flex place-items-center gap-4">
     <Icon path={icon} size="40" />
-    <p>{title}</p>
+    <Text size="large" fontWeight="bold">{title}</Text>
   </div>
 
-  <div class="relative text-center font-mono text-2xl font-semibold">
-    <span class="text-[#DCDADA] dark:text-[#525252]">{zeros()}</span><span
-      class="text-immich-primary dark:text-immich-dark-primary">{value}</span
-    >
+  <div class="relative mx-auto font-mono text-2xl font-semibold">
+    <span class="text-gray-400 dark:text-gray-600">{zeros()}</span><span>{value}</span>
     {#if unit}
-      <span class="absolute -top-5 end-2 text-base font-light text-gray-400">{unit}</span>
+      <Code color="muted" class="absolute -top-5 end-2 font-light">{unit}</Code>
     {/if}
   </div>
 </div>