Repository: gitify-app/gitify
Pull request #1301 (2024-06-21 02:01:13)

refactor: further margin and size tweaks


Patch:
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 8eda15d1..518e94d8 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -74,8 +74,10 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           )}
           onClick={toggleAccountNotifications}
         >
-          <div className="flex gap-3">
-            <PlatformIcon type={account.platform} size={Size.MEDIUM} />
+          <div className="flex">
+            <div className="mr-3 flex items-center justify-center">
+              <PlatformIcon type={account.platform} size={Size.MEDIUM} />
+            </div>
             <button
               type="button"
               title="Open Profile"
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 00424ad4..a1c22c22 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -117,7 +117,7 @@ export const NotificationRow: FC<INotificationRow> = ({
       )}
     >
       <div
-        className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
+        className={cn('mr-3 flex items-center justify-center', iconColor)}
         title={notificationTitle}
       >
         <NotificationIcon
diff --git a/src/components/notification/NotificationHeader.tsx b/src/components/notification/NotificationHeader.tsx
index 248db2d0..a4c9dd1f 100644
--- a/src/components/notification/NotificationHeader.tsx
+++ b/src/components/notification/NotificationHeader.tsx
@@ -33,7 +33,7 @@ export const NotificationHeader: FC<INotificationHeader> = ({
           <AvatarIcon
             title={repoSlug}
             url={repoAvatarUrl}
-            size={Size.SMALL}
+            size={Size.XSMALL}
             defaultIcon={MarkGithubIcon}
           />
         </span>


Test patch:
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index e63164fd..9250db70 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -9,27 +9,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
-          class="flex gap-3"
+          class="flex"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
+          <div
+            class="mr-3 flex items-center justify-center"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="mr-1"
+              title="GitHub Cloud"
             >
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+            </span>
+          </div>
           <button
             title="Open Profile"
             type="button"
@@ -69,7 +73,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -100,7 +104,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="rounded-full object-cover size-5"
+                class="rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -265,7 +269,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         id="148827438"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-gray-500 dark:text-gray-300"
+          class="mr-3 flex items-center justify-center text-gray-500 dark:text-gray-300"
           title=" Issue"
         >
           <svg
@@ -296,7 +300,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="rounded-full object-cover size-5"
+                class="rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -423,27 +427,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
-        class="flex gap-3"
+        class="flex"
       >
-        <span
-          class="mr-1"
-          title="GitHub Cloud"
+        <div
+          class="mr-3 flex items-center justify-center"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
           >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </span>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+        </div>
         <button
           title="Open Profile"
           type="button"
@@ -483,7 +491,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -514,7 +522,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="rounded-full object-cover size-5"
+              class="rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -679,7 +687,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       id="148827438"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-gray-500 dark:text-gray-300"
+        class="mr-3 flex items-center justify-center text-gray-500 dark:text-gray-300"
         title=" Issue"
       >
         <svg
@@ -710,7 +718,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="rounded-full object-cover size-5"
+              class="rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -894,27 +902,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
-          class="flex gap-3"
+          class="flex"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
+          <div
+            class="mr-3 flex items-center justify-center"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="mr-1"
+              title="GitHub Cloud"
             >
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+            </span>
+          </div>
           <button
             title="Open Profile"
             type="button"
@@ -959,27 +971,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
-        class="flex gap-3"
+        class="flex"
       >
-        <span
-          class="mr-1"
-          title="GitHub Cloud"
+        <div
+          class="mr-3 flex items-center justify-center"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
           >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </span>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+        </div>
         <button
           title="Open Profile"
           type="button"
@@ -1081,27 +1097,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
-          class="flex gap-3"
+          class="flex"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
+          <div
+            class="mr-3 flex items-center justify-center"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="mr-1"
+              title="GitHub Cloud"
             >
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+            </span>
+          </div>
           <button
             title="Open Profile"
             type="button"
@@ -1143,27 +1163,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
-        class="flex gap-3"
+        class="flex"
       >
-        <span
-          class="mr-1"
-          title="GitHub Cloud"
+        <div
+          class="mr-3 flex items-center justify-center"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
           >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </span>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+        </div>
         <button
           title="Open Profile"
           type="button"
@@ -1262,27 +1286,31 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
-          class="flex gap-3"
+          class="flex"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
+          <div
+            class="mr-3 flex items-center justify-center"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="mr-1"
+              title="GitHub Cloud"
             >
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+            </span>
+          </div>
           <button
             title="Open Profile"
             type="button"
@@ -1323,27 +1351,31 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
       >
         <div
-          class="flex gap-3"
+          class="flex"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
+          <div
+            class="mr-3 flex items-center justify-center"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="mr-1"
+              title="GitHub Cloud"
             >
-              <path
-                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+            </span>
+          </div>
           <button
             title="Open Profile"
             type="button"
@@ -1388,27 +1420,31 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
       class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold bg-gray-300 dark:bg-gray-darkest dark:text-white opacity-70"
     >
       <div
-        class="flex gap-3"
+        class="flex"
       >
-        <span
-          class="mr-1"
-          title="GitHub Cloud"
+        <div
+          class="mr-3 flex items-center justify-center"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-mark-github"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
           >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-        </span>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+              />
+            </svg>
+          </span>
+        </div>
         <button
           title="Open Profile"
           type="button"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index ba12864d..bf6d61fa 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -244,7 +244,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -535,7 +535,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -769,7 +769,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -1060,7 +1060,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -1272,7 +1272,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -1541,7 +1541,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -1799,7 +1799,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2114,7 +2114,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2326,7 +2326,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2595,7 +2595,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2807,7 +2807,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -3076,7 +3076,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3355,7 +3355,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -3691,7 +3691,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3970,7 +3970,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4306,7 +4306,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4445,7 +4445,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4641,7 +4641,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4672,7 +4672,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             <span>
               <img
                 alt="gitify-app/notifications-test's avatar"
-                class="rounded-full object-cover size-5"
+                class="rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               />
             </span>
@@ -4840,7 +4840,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4871,7 +4871,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           <span>
             <img
               alt="gitify-app/notifications-test's avatar"
-              class="rounded-full object-cover size-5"
+              class="rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
             />
           </span>
@@ -5096,7 +5096,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5278,7 +5278,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5517,7 +5517,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5699,7 +5699,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5938,7 +5938,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         id="138661096"
       >
         <div
-          class="mr-3 flex w-5 items-center justify-center text-green-500"
+          class="mr-3 flex items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -6125,7 +6125,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
       id="138661096"
     >
       <div
-        class="mr-3 flex w-5 items-center justify-center text-green-500"
+        class="mr-3 flex items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
diff --git a/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap b/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap
index 4a959d29..be3a6711 100644
--- a/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap
+++ b/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`components/notification/NotificationHeader.tsx should render itself & i
         <span>
           <img
             alt="gitify-app/notifications-test's avatar"
-            class="rounded-full object-cover size-5"
+            class="rounded-full object-cover size-4"
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
         </span>
@@ -31,7 +31,7 @@ exports[`components/notification/NotificationHeader.tsx should render itself & i
       <span>
         <img
           alt="gitify-app/notifications-test's avatar"
-          class="rounded-full object-cover size-5"
+          class="rounded-full object-cover size-4"
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
       </span>