From 32ac007809d5f284aad076a7092cc56c68e2959b Mon Sep 17 00:00:00 2001
From: Arthur Dufour <dufourarthur.perso@gmail.com>
Date: Fri, 16 Feb 2024 09:27:01 +0100
Subject: [PATCH] feat: improve icons ui/ux

---
 src/components/NotificationRow.tsx            | 36 +++++++------------
 src/components/Repository.tsx                 | 20 +++++------
 .../NotificationRow.test.tsx.snap             | 28 +++++++--------
 .../__snapshots__/Repository.test.tsx.snap    | 17 ++++-----
 4 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 732bd5694..7f1dbc4a5 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -62,8 +62,8 @@ export const NotificationRow: React.FC<IProps> = ({
   });
 
   return (
-    <div className="flex space-x-2 p-2 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker">
-      <div className={`flex justify-center items-center w-8 ${realIconColor}`}>
+    <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker">
+      <div className={`flex justify-center items-center w-5 ${realIconColor}`}>
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
 
@@ -84,39 +84,27 @@ export const NotificationRow: React.FC<IProps> = ({
 
       <div className="flex justify-center items-center gap-2">
         <button
-          className="focus:outline-none"
+          className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
           onClick={() => markNotificationDone(notification.id, hostname)}
         >
-          <CheckIcon
-            className="hover:text-green-500"
-            size={16}
-            aria-label="Mark as Done"
-          />
+          <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
 
         <button
-          className="focus:outline-none"
-          title="Mark as Read"
-          onClick={() => markNotification(notification.id, hostname)}
+          className="focus:outline-none h-full hover:text-red-500"
+          title="Unsubscribe"
+          onClick={unsubscribe}
         >
-          <ReadIcon
-            className="hover:text-green-500"
-            size={14}
-            aria-label="Mark as Read"
-          />
+          <BellSlashIcon size={14} aria-label="Unsubscribe" />
         </button>
 
         <button
-          className="border-0 bg-none float-right"
-          title="Unsubscribe"
-          onClick={unsubscribe}
+          className="focus:outline-none h-full hover:text-green-500"
+          title="Mark as Read"
+          onClick={() => markNotification(notification.id, hostname)}
         >
-          <BellSlashIcon
-            className="hover:text-red-500"
-            size={14}
-            aria-label="Unsubscribe"
-          />
+          <ReadIcon size={14} aria-label="Mark as Read" />
         </button>
       </div>
     </div>
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index ddf1ef4a1..27e72085d 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -35,19 +35,19 @@ export const RepositoryNotifications: React.FC<IProps> = ({
 
   return (
     <>
-      <div className="flex p-2 bg-gray-100 dark:bg-gray-darker dark:text-white">
-        <div className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
-          <img className="rounded w-5 h-5 ml-1 mr-3" src={avatarUrl} />
+      <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
+        <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
+          <img className="rounded w-5 h-5" src={avatarUrl} />
           <span onClick={openBrowser}>{repoName}</span>
         </div>
 
-        <div className="flex w-8 justify-center items-center">
-          <button className="focus:outline-none" onClick={markRepoAsRead}>
-            <ReadIcon
-              className="hover:text-green-500"
-              size={16}
-              aria-label="Mark Repository as Read"
-            />
+        <div className="flex justify-center items-center">
+          <button
+            className="focus:outline-none h-full hover:text-green-500"
+            title="Mark Repository as Read"
+            onClick={markRepoAsRead}
+          >
+            <ReadIcon size={14} aria-label="Mark Repository as Read" />
           </button>
         </div>
       </div>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 635848ad4..643122d32 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`components/Notification.js should render itself & its children 1`] = `
 <div
-  className="flex space-x-2 p-2 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker"
+  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker"
 >
   <div
-    className="flex justify-center items-center w-8 text-green-500"
+    className="flex justify-center items-center w-5 text-green-500"
   >
     <svg
       aria-hidden="false"
@@ -61,14 +61,14 @@ exports[`components/Notification.js should render itself & its children 1`] = `
     className="flex justify-center items-center gap-2"
   >
     <button
-      className="focus:outline-none"
+      className="focus:outline-none h-full hover:text-green-500"
       onClick={[Function]}
       title="Mark as Done"
     >
       <svg
         aria-hidden="false"
         aria-label="Mark as Done"
-        className="hover:text-green-500"
+        className="octicon octicon-check"
         fill="currentColor"
         focusable="false"
         height={16}
@@ -90,14 +90,14 @@ exports[`components/Notification.js should render itself & its children 1`] = `
       </svg>
     </button>
     <button
-      className="focus:outline-none"
+      className="focus:outline-none h-full hover:text-red-500"
       onClick={[Function]}
-      title="Mark as Read"
+      title="Unsubscribe"
     >
       <svg
         aria-hidden="false"
-        aria-label="Mark as Read"
-        className="hover:text-green-500"
+        aria-label="Unsubscribe"
+        className="octicon octicon-bell-slash"
         fill="currentColor"
         focusable="false"
         height={14}
@@ -114,19 +114,19 @@ exports[`components/Notification.js should render itself & its children 1`] = `
         width={14}
       >
         <path
-          d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+          d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
         />
       </svg>
     </button>
     <button
-      className="border-0 bg-none float-right"
+      className="focus:outline-none h-full hover:text-green-500"
       onClick={[Function]}
-      title="Unsubscribe"
+      title="Mark as Read"
     >
       <svg
         aria-hidden="false"
-        aria-label="Unsubscribe"
-        className="hover:text-red-500"
+        aria-label="Mark as Read"
+        className="octicon octicon-read"
         fill="currentColor"
         focusable="false"
         height={14}
@@ -143,7 +143,7 @@ exports[`components/Notification.js should render itself & its children 1`] = `
         width={14}
       >
         <path
-          d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+          d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
         />
       </svg>
     </button>
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index f62796cee..2960f4ad7 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`components/Repository.tsx should render itself & its children 1`] = `
 [
   <div
-    className="flex p-2 bg-gray-100 dark:bg-gray-darker dark:text-white"
+    className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white"
   >
     <div
-      className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+      className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
     >
       <img
-        className="rounded w-5 h-5 ml-1 mr-3"
+        className="rounded w-5 h-5"
         src="https://avatars0.githubusercontent.com/u/6333409?v=3"
       />
       <span
@@ -19,19 +19,20 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       </span>
     </div>
     <div
-      className="flex w-8 justify-center items-center"
+      className="flex justify-center items-center"
     >
       <button
-        className="focus:outline-none"
+        className="focus:outline-none h-full hover:text-green-500"
         onClick={[Function]}
+        title="Mark Repository as Read"
       >
         <svg
           aria-hidden="false"
           aria-label="Mark Repository as Read"
-          className="hover:text-green-500"
+          className="octicon octicon-read"
           fill="currentColor"
           focusable="false"
-          height={16}
+          height={14}
           role="img"
           style={
             {
@@ -42,7 +43,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             }
           }
           viewBox="0 0 16 16"
-          width={16}
+          width={14}
         >
           <path
             d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"