Skip to content

feat: improve icons ui/ux #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 16, 2024
Merged

feat: improve icons ui/ux #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 12 additions & 24 deletions src/components/NotificationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/components/Repository.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions src/components/__snapshots__/NotificationRow.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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>
Expand Down
17 changes: 9 additions & 8 deletions src/components/__snapshots__/Repository.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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={
{
Expand All @@ -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"
Expand Down