From 21a0c4d95c839ab0c25886d5cedb1df6382311ba Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 20 Jun 2024 00:11:30 -0400
Subject: [PATCH 1/2] refactor: opacity

---
 src/components/AccountNotifications.tsx       |  10 +-
 src/components/NotificationRow.tsx            |  22 ++-
 src/components/RepositoryNotifications.tsx    |  11 +-
 .../AccountNotifications.test.tsx.snap        |  67 ++++---
 .../NotificationRow.test.tsx.snap             | 164 +++++++++---------
 .../RepositoryNotifications.test.tsx.snap     |  28 +--
 src/types.ts                                  |   7 +
 7 files changed, 163 insertions(+), 146 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index ad54f272d..86a3a5a4d 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -5,8 +5,9 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
-import type { Account } from '../types';
+import { type Account, Opacity } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openAccountProfile } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
@@ -64,7 +65,11 @@ export const AccountNotifications: FC<IAccountNotifications> = (
     <>
       {showAccountHostname && (
         <div
-          className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+          className={cn(
+            'group flex items-center justify-between px-3 py-2 text-sm font-semibold',
+            'bg-gray-300 dark:bg-gray-darkest dark:text-white',
+            Opacity.LOW,
+          )}
           onClick={toggleAccountNotifications}
         >
           <div className="flex gap-3">
@@ -73,7 +78,6 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               type="button"
               title="Open Profile"
               onClick={() => openAccountProfile(account)}
-              className="opacity-80"
             >
               @{account.user.login}
             </button>
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 7a6d6f734..c4e77f407 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { IconColor } from '../types';
+import { IconColor, Opacity } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import {
@@ -118,7 +118,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         animateExit &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
-        showAsRead && 'opacity-50 dark:opacity-50',
+        showAsRead && Opacity.READ,
       )}
     >
       <div
@@ -132,19 +132,22 @@ export const NotificationRow: FC<INotificationRow> = ({
       </div>
 
       <div
-        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         onClick={() => handleNotification()}
       >
         {!groupByRepository && (
           <div
-            className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            className={cn(
+              'mb-1 flex items-center gap-1 text-xs',
+              Opacity.MEDIUM,
+            )}
             title={repoSlug}
           >
             <span>
               <AvatarIcon
                 title={repoSlug}
                 url={repoAvatarUrl}
-                size="medium"
+                size="small"
                 defaultIcon={MarkGithubIcon}
               />
             </span>
@@ -158,14 +161,19 @@ export const NotificationRow: FC<INotificationRow> = ({
         )}
 
         <div
-          className="mb-1 cursor-pointer truncate text-sm"
+          className="mb-1 truncate text-sm"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
+        <div
+          className={cn(
+            'flex flex-wrap items-center gap-1 text-xs capitalize',
+            Opacity.MEDIUM,
+          )}
+        >
           {notification.subject.user ? (
             <button
               type="button"
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index 31909999b..bc8ead0f2 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -7,7 +7,9 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
+import { Opacity } from '../types';
 import type { Notification } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { openRepository } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
 import { AvatarIcon } from './icons/AvatarIcon';
@@ -55,7 +57,12 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
         onClick={toggleRepositoryNotifications}
       >
-        <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
+        <div
+          className={cn(
+            'flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium',
+            Opacity.MEDIUM,
+          )}
+        >
           <AvatarIcon
             title={repoName}
             url={avatarUrl}
@@ -63,7 +70,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             defaultIcon={MarkGithubIcon}
           />
           <span
-            className="cursor-pointer truncate opacity-90"
+            className="cursor-pointer truncate "
             onClick={() => openRepository(repoNotifications[0].repository)}
           >
             {repoName}
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index db8dd0097..a79a5c72e 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -31,7 +31,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </svg>
           </span>
           <button
-            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -92,16 +91,16 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="cursor-pointer rounded-full object-cover size-5"
+                class="cursor-pointer rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -112,14 +111,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -288,16 +287,16 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="cursor-pointer rounded-full object-cover size-5"
+                class="cursor-pointer rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -308,14 +307,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="Improve the UI"
           >
             Improve the UI
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -420,7 +419,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -445,7 +444,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </span>
         <button
-          class="opacity-80"
           title="Open Profile"
           type="button"
         >
@@ -506,16 +504,16 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="cursor-pointer rounded-full object-cover size-5"
+              class="cursor-pointer rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -526,14 +524,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -702,16 +700,16 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="cursor-pointer rounded-full object-cover size-5"
+              class="cursor-pointer rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -722,14 +720,14 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="Improve the UI"
         >
           Improve the UI
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -891,7 +889,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -916,7 +914,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </svg>
           </span>
           <button
-            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -956,7 +953,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -981,7 +978,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </span>
         <button
-          class="opacity-80"
           title="Open Profile"
           type="button"
         >
@@ -1078,7 +1074,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1103,7 +1099,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </svg>
           </span>
           <button
-            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -1140,7 +1135,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -1165,7 +1160,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </span>
         <button
-          class="opacity-80"
           title="Open Profile"
           type="button"
         >
@@ -1259,7 +1253,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1284,7 +1278,6 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             </svg>
           </span>
           <button
-            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -1320,7 +1313,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
     </div>
     <div>
       <div
-        class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+        class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
           class="flex gap-3"
@@ -1345,7 +1338,6 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             </svg>
           </span>
           <button
-            class="opacity-80"
             title="Open Profile"
             type="button"
           >
@@ -1385,7 +1377,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+      class="group flex items-center justify-between px-3 py-2 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
         class="flex gap-3"
@@ -1410,7 +1402,6 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           </svg>
         </span>
         <button
-          class="opacity-80"
           title="Open Profile"
           type="button"
         >
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index afe757105..db60f81f8 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -33,17 +33,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -267,17 +267,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -558,17 +558,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -792,17 +792,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -1083,17 +1083,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -1295,17 +1295,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -1564,17 +1564,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -1822,17 +1822,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -2137,17 +2137,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -2349,17 +2349,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -2618,17 +2618,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -2830,17 +2830,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -3099,17 +3099,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -3378,17 +3378,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -3714,17 +3714,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -3993,17 +3993,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -4329,17 +4329,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -4468,17 +4468,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
@@ -4664,16 +4664,16 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            class="mb-1 flex items-center gap-1 text-xs opacity-80"
             title="gitify-app/notifications-test"
           >
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="cursor-pointer rounded-full object-cover size-5"
+                class="cursor-pointer rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -4684,14 +4684,14 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             </span>
           </div>
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -4863,16 +4863,16 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+          class="mb-1 flex items-center gap-1 text-xs opacity-80"
           title="gitify-app/notifications-test"
         >
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="cursor-pointer rounded-full object-cover size-5"
+              class="cursor-pointer rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -4883,14 +4883,14 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </span>
         </div>
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5119,17 +5119,17 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -5301,17 +5301,17 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5540,17 +5540,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <button
               class="flex-shrink-0"
@@ -5722,17 +5722,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <button
             class="flex-shrink-0"
@@ -5961,17 +5961,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 cursor-pointer truncate text-sm"
+            class="mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center gap-1 text-xs capitalize"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
           >
             <div>
               <svg
@@ -6148,17 +6148,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 cursor-pointer truncate text-sm"
+          class="mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center gap-1 text-xs capitalize"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
         >
           <div>
             <svg
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 5d08ac19c..e5751f957 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
@@ -17,7 +17,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate "
           >
             gitify-app/notifications-test
           </span>
@@ -102,7 +102,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
@@ -110,7 +110,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate "
         >
           gitify-app/notifications-test
         </span>
@@ -252,7 +252,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -269,7 +269,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate "
           >
             gitify-app/notifications-test
           </span>
@@ -347,7 +347,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -364,7 +364,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate "
           >
             gitify-app/notifications-test
           </span>
@@ -449,7 +449,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -466,7 +466,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
           />
         </svg>
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate "
         >
           gitify-app/notifications-test
         </span>
@@ -608,7 +608,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+          class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -625,7 +625,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             />
           </svg>
           <span
-            class="cursor-pointer truncate opacity-90"
+            class="cursor-pointer truncate "
           >
             gitify-app/notifications-test
           </span>
@@ -710,7 +710,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
       class="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
+        class="flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -727,7 +727,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           />
         </svg>
         <span
-          class="cursor-pointer truncate opacity-90"
+          class="cursor-pointer truncate "
         >
           gitify-app/notifications-test
         </span>
diff --git a/src/types.ts b/src/types.ts
index 71bd888a9..018104677 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -137,6 +137,13 @@ export enum IconColor {
   WHITE = 'text-white',
 }
 
+export enum Opacity {
+  READ = 'opacity-50',
+  LOW = 'opacity-70',
+  MEDIUM = 'opacity-80',
+  HIGH = 'opacity-90',
+}
+
 export type PullRequestApprovalIcon = {
   type: FC<OcticonProps>;
   color: IconColor;

From ae787c4ef4ec50ca458d0b898f27534dcdc5e72c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 20 Jun 2024 12:16:00 -0400
Subject: [PATCH 2/2] remove space

---
 src/components/RepositoryNotifications.tsx         |  2 +-
 .../RepositoryNotifications.test.tsx.snap          | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index bc8ead0f2..6f917154a 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -70,7 +70,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             defaultIcon={MarkGithubIcon}
           />
           <span
-            className="cursor-pointer truncate "
+            className="cursor-pointer truncate"
             onClick={() => openRepository(repoNotifications[0].repository)}
           >
             {repoName}
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index e5751f957..bfc598eb6 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
-            class="cursor-pointer truncate "
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -110,7 +110,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
-          class="cursor-pointer truncate "
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
@@ -269,7 +269,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate "
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -364,7 +364,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
             />
           </svg>
           <span
-            class="cursor-pointer truncate "
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -466,7 +466,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
           />
         </svg>
         <span
-          class="cursor-pointer truncate "
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
@@ -625,7 +625,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             />
           </svg>
           <span
-            class="cursor-pointer truncate "
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -727,7 +727,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           />
         </svg>
         <span
-          class="cursor-pointer truncate "
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>