From 13a019e8f97481a11a75f8f80242f7c3487a4b0f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 21 Jan 2025 12:31:04 -0500
Subject: [PATCH 1/2] feat: migrate to RelativeTime component

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../notifications/NotificationFooter.tsx      | 29 +++++-----------
 src/renderer/utils/helpers.test.ts            | 33 -------------------
 src/renderer/utils/helpers.ts                 | 13 --------
 3 files changed, 8 insertions(+), 67 deletions(-)

diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index 09f3cea4f..2b5bd34e1 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -1,15 +1,12 @@
 import type { FC, MouseEvent } from 'react';
 
 import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Avatar } from '@primer/react';
+import { Avatar, RelativeTime } from '@primer/react';
 
 import { IconColor, Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
 import { cn } from '../../utils/cn';
-import {
-  formatNotificationUpdatedAt,
-  isNonHumanUser,
-} from '../../utils/helpers';
+import { isNonHumanUser } from '../../utils/helpers';
 import { openUserProfile } from '../../utils/links';
 import { formatReason } from '../../utils/reason';
 import { Pills } from './Pills';
@@ -23,11 +20,6 @@ export const NotificationFooter: FC<INotificationFooter> = ({
 }: INotificationFooter) => {
   const reason = formatReason(notification.reason);
 
-  const updatedAt = formatNotificationUpdatedAt(notification);
-  const updatedLabel = notification.subject.user
-    ? `${notification.subject.user.login} updated ${updatedAt}`
-    : `Updated ${updatedAt}`;
-
   return (
     <div className="flex flex-wrap items-center gap-1">
       {notification.subject.user ? (
@@ -53,17 +45,12 @@ export const NotificationFooter: FC<INotificationFooter> = ({
           )}
         </>
       )}
-      <span
-        className={cn('text-xs capitalize', Opacity.MEDIUM)}
-        title={reason.description}
-      >
-        {reason.title}
-      </span>
-      <span
-        className={cn('text-xs capitalize', Opacity.MEDIUM)}
-        title={updatedLabel}
-      >
-        {updatedAt}
+      <span className={cn('text-xs', Opacity.MEDIUM)}>
+        <span className={'capitalize'} title={reason.description}>
+          {reason.title}
+        </span>
+        <span> • </span>
+        <RelativeTime datetime={notification.updated_at} />
       </span>
       <Pills notification={notification} />
     </div>
diff --git a/src/renderer/utils/helpers.test.ts b/src/renderer/utils/helpers.test.ts
index b1abe7b8f..5b3d1634c 100644
--- a/src/renderer/utils/helpers.test.ts
+++ b/src/renderer/utils/helpers.test.ts
@@ -18,7 +18,6 @@ import * as apiRequests from './api/request';
 
 import {
   formatForDisplay,
-  formatNotificationUpdatedAt,
   generateGitHubWebUrl,
   generateNotificationReferrerId,
   getChevronDetails,
@@ -534,38 +533,6 @@ describe('renderer/utils/helpers.ts', () => {
         'Not Planned Issue',
       );
     });
-
-    describe('formatNotificationUpdatedAt', () => {
-      it('should use updated_at if last_read_at is null', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: null,
-          updated_at: '2021-06-23T17:00:00Z',
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toContain('ago');
-      });
-
-      it('should return empty if all dates are null', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: null,
-          updated_at: null,
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toBe('');
-      });
-
-      it('should return empty if unable to parse dates', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: 'not an iso date',
-          updated_at: 'not an iso date',
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toBe('');
-      });
-    });
   });
 
   describe('getChevronDetails', () => {
diff --git a/src/renderer/utils/helpers.ts b/src/renderer/utils/helpers.ts
index c95b8f7ab..a660e9f47 100644
--- a/src/renderer/utils/helpers.ts
+++ b/src/renderer/utils/helpers.ts
@@ -3,7 +3,6 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from '@primer/octicons-react';
-import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 
 import { logError, logWarn } from '../../shared/logger';
 import type { Chevron, Hostname, Link } from '../types';
@@ -187,18 +186,6 @@ export function formatForDisplay(text: string[]): string {
     });
 }
 
-export function formatNotificationUpdatedAt(
-  notification: Notification,
-): string {
-  try {
-    return formatDistanceToNowStrict(parseISO(notification.updated_at), {
-      addSuffix: true,
-    });
-  } catch (e) {}
-
-  return '';
-}
-
 export function getChevronDetails(
   hasNotifications: boolean,
   isVisible: boolean,

From bb855d0073907a0ad9a939f32407bf96486bf03c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 21 Jan 2025 12:52:35 -0500
Subject: [PATCH 2/2] feat: migrate to RelativeTime component

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../notifications/NotificationFooter.tsx      |  17 +-
 .../AccountNotifications.test.tsx.snap        | 180 +++++--
 .../NotificationFooter.test.tsx.snap          | 450 ++++++++++++++----
 .../NotificationRow.test.tsx.snap             | 270 ++++++++---
 4 files changed, 709 insertions(+), 208 deletions(-)

diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index 2b5bd34e1..ca44a26ee 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -1,7 +1,7 @@
 import type { FC, MouseEvent } from 'react';
 
 import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Avatar, RelativeTime } from '@primer/react';
+import { Avatar, RelativeTime, Stack, Text } from '@primer/react';
 
 import { IconColor, Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
@@ -21,7 +21,7 @@ export const NotificationFooter: FC<INotificationFooter> = ({
   const reason = formatReason(notification.reason);
 
   return (
-    <div className="flex flex-wrap items-center gap-1">
+    <Stack direction="horizontal" align="center" gap="condensed" wrap="wrap">
       {notification.subject.user ? (
         <Avatar
           title={`View profile: ${notification.subject.user.login}`}
@@ -46,13 +46,14 @@ export const NotificationFooter: FC<INotificationFooter> = ({
         </>
       )}
       <span className={cn('text-xs', Opacity.MEDIUM)}>
-        <span className={'capitalize'} title={reason.description}>
-          {reason.title}
-        </span>
-        <span> • </span>
-        <RelativeTime datetime={notification.updated_at} />
+        <Stack direction="horizontal" gap="condensed">
+          <Text title={reason.description}>{reason.title}</Text>
+          <Text>&bull;</Text>
+          <RelativeTime datetime={notification.updated_at} />
+        </Stack>
       </span>
+
       <Pills notification={notification} />
-    </div>
+    </Stack>
   );
 };
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index 8c17fd3d6..150407d1d 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -835,7 +835,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </div>
           <div
-            class="flex flex-wrap items-center gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
             <img
               alt=""
@@ -850,16 +856,35 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               width="14"
             />
             <span
-              class="text-xs capitalize opacity-80"
-              title="You're watching the repository."
+              class="text-xs opacity-80"
             >
-              Updated
-            </span>
-            <span
-              class="text-xs capitalize opacity-80"
-              title="gitify-app updated 8 years ago"
-            >
-              8 years ago
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="stretch"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  •
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
             </span>
             <div
               class="flex"
@@ -1158,7 +1183,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </div>
           <div
-            class="flex flex-wrap items-center gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
             <svg
               aria-hidden="true"
@@ -1177,16 +1208,35 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               />
             </svg>
             <span
-              class="text-xs capitalize opacity-80"
-              title="You created the thread."
+              class="text-xs opacity-80"
             >
-              Authored
-            </span>
-            <span
-              class="text-xs capitalize opacity-80"
-              title="Updated 8 years ago"
-            >
-              8 years ago
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="stretch"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  title="You created the thread."
+                >
+                  Authored
+                </span>
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  •
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:06:34.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
             </span>
             <div
               class="flex"
@@ -1616,7 +1666,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           />
         </div>
         <div
-          class="flex flex-wrap items-center gap-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="wrap"
         >
           <img
             alt=""
@@ -1631,16 +1687,35 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             width="14"
           />
           <span
-            class="text-xs capitalize opacity-80"
-            title="You're watching the repository."
+            class="text-xs opacity-80"
           >
-            Updated
-          </span>
-          <span
-            class="text-xs capitalize opacity-80"
-            title="gitify-app updated 8 years ago"
-          >
-            8 years ago
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
+              >
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
           </span>
           <div
             class="flex"
@@ -1939,7 +2014,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           />
         </div>
         <div
-          class="flex flex-wrap items-center gap-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="wrap"
         >
           <svg
             aria-hidden="true"
@@ -1958,16 +2039,35 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </svg>
           <span
-            class="text-xs capitalize opacity-80"
-            title="You created the thread."
+            class="text-xs opacity-80"
           >
-            Authored
-          </span>
-          <span
-            class="text-xs capitalize opacity-80"
-            title="Updated 8 years ago"
-          >
-            8 years ago
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You created the thread."
+              >
+                Authored
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:06:34.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
           </span>
           <div
             class="flex"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
index 5fad3b8ac..fa0890287 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
@@ -6,7 +6,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-wrap items-center gap-1"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="wrap"
       >
         <img
           alt=""
@@ -21,16 +27,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           width="14"
         />
         <span
-          class="text-xs capitalize opacity-80"
-          title="You're watching the repository."
+          class="text-xs opacity-80"
         >
-          Updated
-        </span>
-        <span
-          class="text-xs capitalize opacity-80"
-          title="gitify-app updated 7 years ago"
-        >
-          7 years ago
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
+            >
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
         </span>
         <div
           class="flex"
@@ -115,7 +140,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   </body>,
   "container": <div>
     <div
-      class="flex flex-wrap items-center gap-1"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="wrap"
     >
       <img
         alt=""
@@ -130,16 +161,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         width="14"
       />
       <span
-        class="text-xs capitalize opacity-80"
-        title="You're watching the repository."
-      >
-        Updated
-      </span>
-      <span
-        class="text-xs capitalize opacity-80"
-        title="gitify-app updated 7 years ago"
+        class="text-xs opacity-80"
       >
-        7 years ago
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
       </span>
       <div
         class="flex"
@@ -281,7 +331,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-wrap items-center gap-1"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="wrap"
       >
         <img
           alt=""
@@ -296,16 +352,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           width="14"
         />
         <span
-          class="text-xs capitalize opacity-80"
-          title="You're watching the repository."
+          class="text-xs opacity-80"
         >
-          Updated
-        </span>
-        <span
-          class="text-xs capitalize opacity-80"
-          title="gitify-app updated 7 years ago"
-        >
-          7 years ago
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
+            >
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
         </span>
         <div
           class="flex"
@@ -390,7 +465,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   </body>,
   "container": <div>
     <div
-      class="flex flex-wrap items-center gap-1"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="wrap"
     >
       <img
         alt=""
@@ -405,16 +486,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         width="14"
       />
       <span
-        class="text-xs capitalize opacity-80"
-        title="You're watching the repository."
+        class="text-xs opacity-80"
       >
-        Updated
-      </span>
-      <span
-        class="text-xs capitalize opacity-80"
-        title="gitify-app updated 7 years ago"
-      >
-        7 years ago
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
       </span>
       <div
         class="flex"
@@ -556,7 +656,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-wrap items-center gap-1"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="wrap"
       >
         <svg
           aria-hidden="true"
@@ -575,16 +681,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
           />
         </svg>
         <span
-          class="text-xs capitalize opacity-80"
-          title="You're watching the repository."
+          class="text-xs opacity-80"
         >
-          Updated
-        </span>
-        <span
-          class="text-xs capitalize opacity-80"
-          title="Updated 7 years ago"
-        >
-          7 years ago
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
+            >
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
         </span>
         <div
           class="flex"
@@ -669,7 +794,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
   </body>,
   "container": <div>
     <div
-      class="flex flex-wrap items-center gap-1"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="wrap"
     >
       <svg
         aria-hidden="true"
@@ -688,16 +819,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
         />
       </svg>
       <span
-        class="text-xs capitalize opacity-80"
-        title="You're watching the repository."
+        class="text-xs opacity-80"
       >
-        Updated
-      </span>
-      <span
-        class="text-xs capitalize opacity-80"
-        title="Updated 7 years ago"
-      >
-        7 years ago
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
       </span>
       <div
         class="flex"
@@ -839,7 +989,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-wrap items-center gap-1"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="wrap"
       >
         <img
           alt=""
@@ -854,16 +1010,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           width="14"
         />
         <span
-          class="text-xs capitalize opacity-80"
-          title="You're watching the repository."
+          class="text-xs opacity-80"
         >
-          Updated
-        </span>
-        <span
-          class="text-xs capitalize opacity-80"
-          title="gitify-app updated 7 years ago"
-        >
-          7 years ago
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
+            >
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
         </span>
         <div
           class="flex"
@@ -948,7 +1123,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   </body>,
   "container": <div>
     <div
-      class="flex flex-wrap items-center gap-1"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="wrap"
     >
       <img
         alt=""
@@ -963,16 +1144,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         width="14"
       />
       <span
-        class="text-xs capitalize opacity-80"
-        title="You're watching the repository."
+        class="text-xs opacity-80"
       >
-        Updated
-      </span>
-      <span
-        class="text-xs capitalize opacity-80"
-        title="gitify-app updated 7 years ago"
-      >
-        7 years ago
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
       </span>
       <div
         class="flex"
@@ -1114,7 +1314,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-wrap items-center gap-1"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="wrap"
       >
         <img
           alt=""
@@ -1129,16 +1335,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           width="14"
         />
         <span
-          class="text-xs capitalize opacity-80"
-          title="You're watching the repository."
-        >
-          Updated
-        </span>
-        <span
-          class="text-xs capitalize opacity-80"
-          title="gitify-app updated 7 years ago"
+          class="text-xs opacity-80"
         >
-          7 years ago
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
+            >
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
         </span>
         <div
           class="flex"
@@ -1223,7 +1448,13 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   </body>,
   "container": <div>
     <div
-      class="flex flex-wrap items-center gap-1"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="wrap"
     >
       <img
         alt=""
@@ -1238,16 +1469,35 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         width="14"
       />
       <span
-        class="text-xs capitalize opacity-80"
-        title="You're watching the repository."
+        class="text-xs opacity-80"
       >
-        Updated
-      </span>
-      <span
-        class="text-xs capitalize opacity-80"
-        title="gitify-app updated 7 years ago"
-      >
-        7 years ago
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
       </span>
       <div
         class="flex"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index 293062f23..d1d271a78 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -93,7 +93,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="flex flex-wrap items-center gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
             <img
               alt=""
@@ -108,16 +114,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               width="14"
             />
             <span
-              class="text-xs capitalize opacity-80"
-              title="You're watching the repository."
+              class="text-xs opacity-80"
             >
-              Updated
-            </span>
-            <span
-              class="text-xs capitalize opacity-80"
-              title="gitify-app updated 7 years ago"
-            >
-              7 years ago
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="stretch"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  •
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
             </span>
             <div
               class="flex"
@@ -419,7 +444,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="flex flex-wrap items-center gap-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="wrap"
         >
           <img
             alt=""
@@ -434,16 +465,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             width="14"
           />
           <span
-            class="text-xs capitalize opacity-80"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="text-xs capitalize opacity-80"
-            title="gitify-app updated 7 years ago"
+            class="text-xs opacity-80"
           >
-            7 years ago
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
+              >
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
           </span>
           <div
             class="flex"
@@ -766,7 +816,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="flex flex-wrap items-center gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
             <img
               alt=""
@@ -781,16 +837,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               width="14"
             />
             <span
-              class="text-xs capitalize opacity-80"
-              title="You're watching the repository."
+              class="text-xs opacity-80"
             >
-              Updated
-            </span>
-            <span
-              class="text-xs capitalize opacity-80"
-              title="gitify-app updated 7 years ago"
-            >
-              7 years ago
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="stretch"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  •
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
             </span>
             <div
               class="flex"
@@ -1056,7 +1131,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="flex flex-wrap items-center gap-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="wrap"
         >
           <img
             alt=""
@@ -1071,16 +1152,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             width="14"
           />
           <span
-            class="text-xs capitalize opacity-80"
-            title="You're watching the repository."
+            class="text-xs opacity-80"
           >
-            Updated
-          </span>
-          <span
-            class="text-xs capitalize opacity-80"
-            title="gitify-app updated 7 years ago"
-          >
-            7 years ago
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
+              >
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
           </span>
           <div
             class="flex"
@@ -1403,7 +1503,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="flex flex-wrap items-center gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
             <img
               alt=""
@@ -1418,16 +1524,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               width="14"
             />
             <span
-              class="text-xs capitalize opacity-80"
-              title="You're watching the repository."
+              class="text-xs opacity-80"
             >
-              Updated
-            </span>
-            <span
-              class="text-xs capitalize opacity-80"
-              title="gitify-app updated 7 years ago"
-            >
-              7 years ago
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="stretch"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  •
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
             </span>
             <div
               class="flex"
@@ -1693,7 +1818,13 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="flex flex-wrap items-center gap-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="wrap"
         >
           <img
             alt=""
@@ -1708,16 +1839,35 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             width="14"
           />
           <span
-            class="text-xs capitalize opacity-80"
-            title="You're watching the repository."
+            class="text-xs opacity-80"
           >
-            Updated
-          </span>
-          <span
-            class="text-xs capitalize opacity-80"
-            title="gitify-app updated 7 years ago"
-          >
-            7 years ago
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
+              >
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
           </span>
           <div
             class="flex"