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"