Moar

src/components/Avatar.astro

@@ -9,7 +9,7 @@ const initial = name ? name.charAt(0).toUpperCase() : '?';
 ---
 
 <div class:list={["avatar placeholder", className]}>
-  <div class="bg-primary text-primary-content w-10 rounded-full flex items-center justify-center">
-    <span class="text-lg font-semibold">{initial}</span>
+  <div class="bg-primary/15 text-primary w-9 h-9 rounded-full flex items-center justify-center">
+    <span class="text-sm font-semibold">{initial}</span>
   </div>
 </div>

src/components/StatCard.astro

@@ -13,13 +13,17 @@ interface Props {
 const { title, value, description, icon, color = 'text-primary', valueClass } = Astro.props;
 ---
 
-<div class="stat">
-  {icon && (
-    <div class:list={["stat-figure", color]}>
-      <Icon name={icon} class="w-8 h-8" />
+<div class="card card-border bg-base-100">
+  <div class="card-body p-4 gap-1">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wider text-base-content/60">{title}</span>
+      {icon && (
+        <div class:list={[color, "opacity-40"]}>
+          <Icon name={icon} class="w-5 h-5" />
+        </div>
+      )}
     </div>
-  )}
-  <div class="stat-title">{title}</div>
-  <div class:list={["stat-value", color, valueClass]}>{value}</div>
-  {description && <div class="stat-desc">{description}</div>}
+    <div class:list={["text-2xl font-bold", color, valueClass]}>{value}</div>
+    {description && <div class="text-xs text-base-content/50">{description}</div>}
+  </div>
 </div>