Skip to content

Commit 7397d3c

Browse files
authored
feat: improve icons ui/ux (#776)
1 parent a46c7a2 commit 7397d3c

File tree

4 files changed

+45
-56
lines changed

4 files changed

+45
-56
lines changed

src/components/NotificationRow.tsx

+12-24
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ export const NotificationRow: React.FC<IProps> = ({
6262
});
6363

6464
return (
65-
<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">
66-
<div className={`flex justify-center items-center w-8 ${realIconColor}`}>
65+
<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">
66+
<div className={`flex justify-center items-center w-5 ${realIconColor}`}>
6767
<NotificationIcon size={18} aria-label={notification.subject.type} />
6868
</div>
6969

@@ -84,39 +84,27 @@ export const NotificationRow: React.FC<IProps> = ({
8484

8585
<div className="flex justify-center items-center gap-2">
8686
<button
87-
className="focus:outline-none"
87+
className="focus:outline-none h-full hover:text-green-500"
8888
title="Mark as Done"
8989
onClick={() => markNotificationDone(notification.id, hostname)}
9090
>
91-
<CheckIcon
92-
className="hover:text-green-500"
93-
size={16}
94-
aria-label="Mark as Done"
95-
/>
91+
<CheckIcon size={16} aria-label="Mark as Done" />
9692
</button>
9793

9894
<button
99-
className="focus:outline-none"
100-
title="Mark as Read"
101-
onClick={() => markNotification(notification.id, hostname)}
95+
className="focus:outline-none h-full hover:text-red-500"
96+
title="Unsubscribe"
97+
onClick={unsubscribe}
10298
>
103-
<ReadIcon
104-
className="hover:text-green-500"
105-
size={14}
106-
aria-label="Mark as Read"
107-
/>
99+
<BellSlashIcon size={14} aria-label="Unsubscribe" />
108100
</button>
109101

110102
<button
111-
className="border-0 bg-none float-right"
112-
title="Unsubscribe"
113-
onClick={unsubscribe}
103+
className="focus:outline-none h-full hover:text-green-500"
104+
title="Mark as Read"
105+
onClick={() => markNotification(notification.id, hostname)}
114106
>
115-
<BellSlashIcon
116-
className="hover:text-red-500"
117-
size={14}
118-
aria-label="Unsubscribe"
119-
/>
107+
<ReadIcon size={14} aria-label="Mark as Read" />
120108
</button>
121109
</div>
122110
</div>

src/components/Repository.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,19 @@ export const RepositoryNotifications: React.FC<IProps> = ({
3535

3636
return (
3737
<>
38-
<div className="flex p-2 bg-gray-100 dark:bg-gray-darker dark:text-white">
39-
<div className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
40-
<img className="rounded w-5 h-5 ml-1 mr-3" src={avatarUrl} />
38+
<div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
39+
<div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
40+
<img className="rounded w-5 h-5" src={avatarUrl} />
4141
<span onClick={openBrowser}>{repoName}</span>
4242
</div>
4343

44-
<div className="flex w-8 justify-center items-center">
45-
<button className="focus:outline-none" onClick={markRepoAsRead}>
46-
<ReadIcon
47-
className="hover:text-green-500"
48-
size={16}
49-
aria-label="Mark Repository as Read"
50-
/>
44+
<div className="flex justify-center items-center">
45+
<button
46+
className="focus:outline-none h-full hover:text-green-500"
47+
title="Mark Repository as Read"
48+
onClick={markRepoAsRead}
49+
>
50+
<ReadIcon size={14} aria-label="Mark Repository as Read" />
5151
</button>
5252
</div>
5353
</div>

src/components/__snapshots__/NotificationRow.test.tsx.snap

+14-14
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
exports[`components/Notification.js should render itself & its children 1`] = `
44
<div
5-
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"
5+
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"
66
>
77
<div
8-
className="flex justify-center items-center w-8 text-green-500"
8+
className="flex justify-center items-center w-5 text-green-500"
99
>
1010
<svg
1111
aria-hidden="false"
@@ -61,14 +61,14 @@ exports[`components/Notification.js should render itself & its children 1`] = `
6161
className="flex justify-center items-center gap-2"
6262
>
6363
<button
64-
className="focus:outline-none"
64+
className="focus:outline-none h-full hover:text-green-500"
6565
onClick={[Function]}
6666
title="Mark as Done"
6767
>
6868
<svg
6969
aria-hidden="false"
7070
aria-label="Mark as Done"
71-
className="hover:text-green-500"
71+
className="octicon octicon-check"
7272
fill="currentColor"
7373
focusable="false"
7474
height={16}
@@ -90,14 +90,14 @@ exports[`components/Notification.js should render itself & its children 1`] = `
9090
</svg>
9191
</button>
9292
<button
93-
className="focus:outline-none"
93+
className="focus:outline-none h-full hover:text-red-500"
9494
onClick={[Function]}
95-
title="Mark as Read"
95+
title="Unsubscribe"
9696
>
9797
<svg
9898
aria-hidden="false"
99-
aria-label="Mark as Read"
100-
className="hover:text-green-500"
99+
aria-label="Unsubscribe"
100+
className="octicon octicon-bell-slash"
101101
fill="currentColor"
102102
focusable="false"
103103
height={14}
@@ -114,19 +114,19 @@ exports[`components/Notification.js should render itself & its children 1`] = `
114114
width={14}
115115
>
116116
<path
117-
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"
117+
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"
118118
/>
119119
</svg>
120120
</button>
121121
<button
122-
className="border-0 bg-none float-right"
122+
className="focus:outline-none h-full hover:text-green-500"
123123
onClick={[Function]}
124-
title="Unsubscribe"
124+
title="Mark as Read"
125125
>
126126
<svg
127127
aria-hidden="false"
128-
aria-label="Unsubscribe"
129-
className="hover:text-red-500"
128+
aria-label="Mark as Read"
129+
className="octicon octicon-read"
130130
fill="currentColor"
131131
focusable="false"
132132
height={14}
@@ -143,7 +143,7 @@ exports[`components/Notification.js should render itself & its children 1`] = `
143143
width={14}
144144
>
145145
<path
146-
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"
146+
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"
147147
/>
148148
</svg>
149149
</button>

src/components/__snapshots__/Repository.test.tsx.snap

+9-8
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
exports[`components/Repository.tsx should render itself & its children 1`] = `
44
[
55
<div
6-
className="flex p-2 bg-gray-100 dark:bg-gray-darker dark:text-white"
6+
className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white"
77
>
88
<div
9-
className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
9+
className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
1010
>
1111
<img
12-
className="rounded w-5 h-5 ml-1 mr-3"
12+
className="rounded w-5 h-5"
1313
src="https://avatars0.githubusercontent.com/u/6333409?v=3"
1414
/>
1515
<span
@@ -19,19 +19,20 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
1919
</span>
2020
</div>
2121
<div
22-
className="flex w-8 justify-center items-center"
22+
className="flex justify-center items-center"
2323
>
2424
<button
25-
className="focus:outline-none"
25+
className="focus:outline-none h-full hover:text-green-500"
2626
onClick={[Function]}
27+
title="Mark Repository as Read"
2728
>
2829
<svg
2930
aria-hidden="false"
3031
aria-label="Mark Repository as Read"
31-
className="hover:text-green-500"
32+
className="octicon octicon-read"
3233
fill="currentColor"
3334
focusable="false"
34-
height={16}
35+
height={14}
3536
role="img"
3637
style={
3738
{
@@ -42,7 +43,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
4243
}
4344
}
4445
viewBox="0 0 16 16"
45-
width={16}
46+
width={14}
4647
>
4748
<path
4849
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"

0 commit comments

Comments
 (0)