From e0acf316771f051e6a883a705b251eddae9ccdf7 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Thu, 23 Apr 2026 23:33:48 +0200
Subject: [PATCH] fix: use native img tag for game covers, add fallback icon,
 improve text contrast

---
 app/components/ActivityFeed.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index c5c304d..17fdd49 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -171,14 +171,19 @@ export default function ActivityFeed({
             <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-300">{t("gaming")}</span>
           </div>
           <div className="flex gap-4">
-            {data.gaming.image && (
-              <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
-                <Image src={data.gaming.image} alt={data.gaming.name} fill className="object-cover" sizes="48px" unoptimized />
+            {data.gaming.image ? (
+              <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative bg-indigo-500/10">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={data.gaming.image} alt={data.gaming.name} className="w-full h-full object-cover" />
+              </div>
+            ) : (
+              <div className="w-12 h-12 rounded-xl shrink-0 bg-indigo-500/20 dark:bg-indigo-400/20 flex items-center justify-center">
+                <Gamepad2 size={20} className="text-indigo-500 dark:text-indigo-300" />
               </div>
             )}
             <div className="min-w-0 flex flex-col justify-center">
-              <p className="font-bold text-stone-900 dark:text-white text-base truncate">{data.gaming.name}</p>
-              <p className="text-xs text-stone-600 dark:text-stone-300 truncate">
+              <p className="font-bold text-indigo-700 dark:text-white text-base truncate">{data.gaming.name}</p>
+              <p className="text-xs text-indigo-600/70 dark:text-indigo-200/80 truncate">
                 {getSafeGamingText(data.gaming.details, data.gaming.state, t("inGame"))}
               </p>
             </div>