From 9f27da4f2cf5400325a4135bd7245615af20846a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:42:22 -0600
Subject: [PATCH] add small gradient below timeago on event thumbnails

---
 web/src/components/image/EventThumbnail.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/image/EventThumbnail.tsx b/web/src/components/image/EventThumbnail.tsx
index fbd2b4ebc..f6b2a25a2 100644
--- a/web/src/components/image/EventThumbnail.tsx
+++ b/web/src/components/image/EventThumbnail.tsx
@@ -20,8 +20,10 @@ export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
         onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
         fill={event.retain_indefinitely ? "currentColor" : "none"}
       />
-      <div className="absolute left-1 bottom-0 text-xs text-white">
-        <TimeAgo time={event.start_time * 1000} dense />
+      <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
+        <div className="absolute left-1 bottom-0 text-xs text-white w-full">
+          <TimeAgo time={event.start_time * 1000} dense />
+        </div>
       </div>
     </div>
   );