Repository: gitify-app/gitify
Pull request #1277 (2024-06-19 15:20:06)

refactor: rename custom text size to xxs
`xss` ➡️ `xxs`


Patch:
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 2ce62415..0567de52 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -151,10 +151,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             </button>
           ) : (
             <div>
-              <FeedPersonIcon
-                size={16}
-                className="text-gray-500 dark:text-gray-300"
-              />
+              <FeedPersonIcon size={16} className={IconColor.GRAY} />
             </div>
           )}
           <div title={reason.description}>{reason.title}</div>
diff --git a/src/components/buttons/PillButton.tsx b/src/components/buttons/PillButton.tsx
index a64e0c39..cabdddf1 100644
--- a/src/components/buttons/PillButton.tsx
+++ b/src/components/buttons/PillButton.tsx
@@ -15,7 +15,7 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
     <button
       title={props.title}
       type="button"
-      className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+      className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
       <props.icon size={12} className={props.color} aria-label={props.title} />
       {props.metric}
diff --git a/tailwind.config.js b/tailwind.config.js
index 44eaf6f1..3050e176 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       fontSize: {
-        xss: '0.625rem', // 10px
+        xxs: '0.625rem', // 10px
       },
       colors: {
         gray: {


Test patch:
diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 93b6b1d5..66ebbf24 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -3,6 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { mockAccountNotifications } from '../__mocks__/notifications-mocks';
 import { mockSettings } from '../__mocks__/state-mocks';
 import { AppContext } from '../context/App';
+import { IconColor } from '../types';
 import * as comms from '../utils/comms';
 import { Sidebar } from './Sidebar';
 
@@ -252,7 +253,7 @@ describe('components/Sidebar.tsx', () => {
       );
 
       const notificationsIcon = screen.getByTitle('4 Unread Notifications');
-      expect(notificationsIcon.className).toContain('text-green-500');
+      expect(notificationsIcon.className).toContain(IconColor.GREEN);
       expect(notificationsIcon.childNodes.length).toBe(2);
       expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
       expect(notificationsIcon.childNodes[1].nodeValue).toBe('4');
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index fa2df90e..9d8d7d20 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -100,7 +100,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -122,7 +122,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -144,7 +144,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="1 comment"
                 type="button"
               >
@@ -309,7 +309,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -334,7 +334,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -356,7 +356,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -378,7 +378,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="1 comment"
               type="button"
             >
@@ -600,7 +600,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -625,7 +625,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -647,7 +647,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -669,7 +669,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="2 comments"
                 type="button"
               >
@@ -834,7 +834,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -859,7 +859,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -881,7 +881,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -903,7 +903,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="2 comments"
               type="button"
             >
@@ -1125,7 +1125,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -1150,7 +1150,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -1172,7 +1172,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -1337,7 +1337,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -1362,7 +1362,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -1384,7 +1384,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -1606,7 +1606,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -1631,7 +1631,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -1653,7 +1653,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -1675,7 +1675,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="2 comments"
                 type="button"
               >
@@ -1697,7 +1697,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="🏷️ enhancement
 🏷️ good-first-issue"
                 type="button"
@@ -1864,7 +1864,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -1889,7 +1889,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -1911,7 +1911,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -1933,7 +1933,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="2 comments"
               type="button"
             >
@@ -1955,7 +1955,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="🏷️ enhancement
 🏷️ good-first-issue"
               type="button"
@@ -2179,7 +2179,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -2204,7 +2204,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -2226,7 +2226,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -2391,7 +2391,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -2416,7 +2416,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -2438,7 +2438,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -2660,7 +2660,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issue #1"
                 type="button"
               >
@@ -2685,7 +2685,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -2707,7 +2707,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -2872,7 +2872,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issue #1"
               type="button"
             >
@@ -2897,7 +2897,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -2919,7 +2919,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -3141,7 +3141,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -3166,7 +3166,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -3188,7 +3188,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -3210,7 +3210,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="2 comments"
                 type="button"
               >
@@ -3232,7 +3232,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="🏷️ enhancement
 🏷️ good-first-issue"
                 type="button"
@@ -3256,7 +3256,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Milestone 1"
                 type="button"
               >
@@ -3420,7 +3420,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -3445,7 +3445,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -3467,7 +3467,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -3489,7 +3489,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="2 comments"
               type="button"
             >
@@ -3511,7 +3511,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="🏷️ enhancement
 🏷️ good-first-issue"
               type="button"
@@ -3535,7 +3535,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Milestone 1"
               type="button"
             >
@@ -3756,7 +3756,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Linked to issues #1, #2"
                 type="button"
               >
@@ -3781,7 +3781,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -3803,7 +3803,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -3825,7 +3825,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="2 comments"
                 type="button"
               >
@@ -3847,7 +3847,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="🏷️ enhancement
 🏷️ good-first-issue"
                 type="button"
@@ -3871,7 +3871,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 2
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="Milestone 1"
                 type="button"
               >
@@ -4035,7 +4035,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Linked to issues #1, #2"
               type="button"
             >
@@ -4060,7 +4060,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -4082,7 +4082,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -4104,7 +4104,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="2 comments"
               type="button"
             >
@@ -4126,7 +4126,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="🏷️ enhancement
 🏷️ good-first-issue"
               type="button"
@@ -4150,7 +4150,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               2
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="Milestone 1"
               type="button"
             >
@@ -4701,7 +4701,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -4723,7 +4723,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -4883,7 +4883,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -4905,7 +4905,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -5122,7 +5122,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -5144,7 +5144,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -5304,7 +5304,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -5326,7 +5326,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
@@ -5548,7 +5548,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               class="flex"
             >
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="octocat approved these changes"
                 type="button"
               >
@@ -5570,7 +5570,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
                 1
               </button>
               <button
-                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 title="gitify-app requested changes"
                 type="button"
               >
@@ -5735,7 +5735,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             class="flex"
           >
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="octocat approved these changes"
               type="button"
             >
@@ -5757,7 +5757,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               1
             </button>
             <button
-              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               title="gitify-app requested changes"
               type="button"
             >
diff --git a/src/components/buttons/__snapshots__/PillButton.test.tsx.snap b/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
index 593415d2..8b13de2a 100644
--- a/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/buttons/PillButton.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+        class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
         title="Mock Pill"
         type="button"
       >
@@ -31,7 +31,7 @@ exports[`components/buttons/PillButton.tsx should render 1`] = `
   </body>,
   "container": <div>
     <button
-      class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+      class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
       title="Mock Pill"
       type="button"
     >