From 5dfbd7f2386d9bb4cbe64da65ee0e5b1f78a4101 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Mon, 8 Apr 2024 16:32:43 +0800
Subject: [PATCH] failed timestamp text is in red color

---
 packages/web/pages/settings/feeds/index.tsx | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx
index fcff2c823..6084ac145 100644
--- a/packages/web/pages/settings/feeds/index.tsx
+++ b/packages/web/pages/settings/feeds/index.tsx
@@ -230,17 +230,19 @@ export default function Rss(): JSX.Element {
                 >
                   <SpanBox>{`URL: ${subscription.url}`}</SpanBox>
                   {/* show failed timestamp instead of last refreshed timestamp if the feed failed to refresh */}
-                  <SpanBox>{`${
-                    subscription.failedAt
-                      ? `Failed to refresh: ${formattedDateTime(
-                          subscription.failedAt
-                        )}`
-                      : `Last refreshed: ${
-                          subscription.lastFetchedAt
-                            ? formattedDateTime(subscription.lastFetchedAt)
-                            : 'Never'
-                        }`
-                  }`}</SpanBox>
+                  {subscription.failedAt ? (
+                    <SpanBox
+                      css={{ color: 'red' }}
+                    >{`Failed to refresh: ${formattedDateTime(
+                      subscription.failedAt
+                    )}`}</SpanBox>
+                  ) : (
+                    <SpanBox>{`Last refreshed: ${
+                      subscription.lastFetchedAt
+                        ? formattedDateTime(subscription.lastFetchedAt)
+                        : 'Never'
+                    }`}</SpanBox>
+                  )}
                   <SpanBox>
                     {subscription.mostRecentItemDate &&
                       `Most recent item: ${formattedDateTime(