Repository: gitify-app/gitify
Pull request #1251 (2024-06-16 16:57:45)

style: notification type icon size
Notification type icon was a bit too big from the information architecture perspective, so I reduced it to the size of the rest of the icons.

Before
<img width="450" alt="image" src="https://github.com/gitify-app/gitify/assets/19473034/5d15dcde-85b4-4f88-bd39-b47a0d12d868">

After
<img width="448" alt="image" src="https://github.com/gitify-app/gitify/assets/19473034/0c4bf6d4-dec4-4769-988a-fef8bb4fca97">

Note: After includes fixes from other PRs.

setchy: I kinda liked that the notification type icon was larger 🤷‍♂️ 

Patch:
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 975d09d9..263f65a2 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -108,7 +108,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
         className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
         title={notificationTitle}
       >
-        <NotificationIcon size={18} aria-label={notification.subject.type} />
+        <NotificationIcon size={16} aria-label={notification.subject.type} />
       </div>
 
       <div
@@ -154,7 +154,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           <div title={reason.description}>{reason.title}</div>
           <div title={updatedLabel}>{updatedAt}</div>
           {settings.showPills && (
-            <div>
+            <div className="flex">
               {notification.subject?.linkedIssues?.length > 0 && (
                 <PillButton
                   title={linkedIssuesPillDescription}


Test patch:
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 2ae1c984..962b45f3 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -18,11 +18,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -71,7 +71,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -250,11 +252,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -303,7 +305,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -539,11 +543,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -592,7 +596,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -771,11 +777,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -824,7 +830,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -1060,11 +1068,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -1113,7 +1121,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -1270,11 +1280,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -1323,7 +1333,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -1537,11 +1549,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -1590,7 +1602,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -1793,11 +1807,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -1846,7 +1860,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -2106,11 +2122,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -2159,7 +2175,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -2316,11 +2334,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -2369,7 +2387,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -2583,11 +2603,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -2636,7 +2656,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issue #1"
@@ -2793,11 +2815,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -2846,7 +2868,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issue #1"
@@ -3060,11 +3084,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -3113,7 +3137,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -3337,11 +3363,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -3390,7 +3416,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -3671,11 +3699,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -3724,7 +3752,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="Linked to issues #1, #2"
@@ -3948,11 +3978,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -4001,7 +4031,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="Linked to issues #1, #2"
@@ -4282,11 +4314,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -4421,11 +4453,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -4617,11 +4649,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -4666,7 +4698,9 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="octocat approved these changes"
@@ -4798,11 +4832,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -4847,7 +4881,9 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="octocat approved these changes"
@@ -5036,11 +5072,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -5085,7 +5121,9 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="octocat approved these changes"
@@ -5217,11 +5255,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -5266,7 +5304,9 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="octocat approved these changes"
@@ -5455,11 +5495,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -5508,7 +5548,9 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             >
               7 years ago
             </div>
-            <div>
+            <div
+              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"
                 title="octocat approved these changes"
@@ -5640,11 +5682,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           class="octicon octicon-issue-opened"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           role="img"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -5693,7 +5735,9 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           >
             7 years ago
           </div>
-          <div>
+          <div
+            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"
               title="octocat approved these changes"