Skip to content

Commit fa4c054

Browse files
setchyadufr
setchy
authored and
adufr
committed
refactor(sidebar): wrap gitify icon with button (gitify-app#892)
1 parent eb60cb3 commit fa4c054

File tree

2 files changed

+94
-77
lines changed

2 files changed

+94
-77
lines changed

‎src/components/Sidebar.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,14 @@ export const Sidebar: React.FC = () => {
4343
return (
4444
<div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto ">
4545
<div className="flex flex-col flex-1 items-center py-4">
46-
<Logo
46+
<button
4747
className="w-5 my-3 mx-auto cursor-pointer"
48-
data-testid="gitify-logo"
48+
title="Open Gitify on GitHub"
4949
onClick={onOpenBrowser}
50-
/>
50+
data-testid="gitify-logo"
51+
>
52+
<Logo aria-label="Open Gitify" />
53+
</button>
5154

5255
<div
5356
className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${

‎src/components/__snapshots__/Sidebar.test.tsx.snap

+88-74
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
77
<div
88
className="flex flex-col flex-1 items-center py-4"
99
>
10-
<svg
10+
<button
1111
className="w-5 my-3 mx-auto cursor-pointer"
1212
data-testid="gitify-logo"
1313
onClick={[Function]}
14-
role="logo"
15-
viewBox="0 0 500 500"
16-
xmlns="http://www.w3.org/2000/svg"
17-
xmlnsXlink="http://www.w3.org/1999/xlink"
14+
title="Open Gitify on GitHub"
1815
>
19-
<defs>
20-
<linearGradient
21-
id="linearGradient-light"
22-
x1="90.8779989%"
23-
x2="-1.30249747%"
24-
y1="80.0676288%"
25-
y2="32.7108237%"
26-
>
27-
<stop
28-
offset="0%"
29-
stopColor="#CCCCCC"
30-
/>
31-
<stop
32-
offset="100%"
33-
stopColor="#FFFFFF"
34-
/>
35-
</linearGradient>
36-
</defs>
37-
<g
38-
fill="none"
39-
fillRule="evenodd"
40-
stroke="none"
41-
strokeWidth="1"
16+
<svg
17+
aria-label="Open Gitify"
18+
className=""
19+
onClick={[Function]}
20+
role="logo"
21+
viewBox="0 0 500 500"
22+
xmlns="http://www.w3.org/2000/svg"
23+
xmlnsXlink="http://www.w3.org/1999/xlink"
4224
>
25+
<defs>
26+
<linearGradient
27+
id="linearGradient-light"
28+
x1="90.8779989%"
29+
x2="-1.30249747%"
30+
y1="80.0676288%"
31+
y2="32.7108237%"
32+
>
33+
<stop
34+
offset="0%"
35+
stopColor="#CCCCCC"
36+
/>
37+
<stop
38+
offset="100%"
39+
stopColor="#FFFFFF"
40+
/>
41+
</linearGradient>
42+
</defs>
4343
<g
44-
fill="url(#linearGradient-light)"
45-
fillRule="nonzero"
46-
id="Logo"
47-
transform="translate(6.000000, 6.000000)"
44+
fill="none"
45+
fillRule="evenodd"
46+
stroke="none"
47+
strokeWidth="1"
4848
>
49-
<path
50-
d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
51-
/>
49+
<g
50+
fill="url(#linearGradient-light)"
51+
fillRule="nonzero"
52+
id="Logo"
53+
transform="translate(6.000000, 6.000000)"
54+
>
55+
<path
56+
d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
57+
/>
58+
</g>
5259
</g>
53-
</g>
54-
</svg>
60+
</svg>
61+
</button>
5562
<div
5663
aria-label="4 Unread Notifications"
5764
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
@@ -127,51 +134,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
127134
<div
128135
className="flex flex-col flex-1 items-center py-4"
129136
>
130-
<svg
137+
<button
131138
className="w-5 my-3 mx-auto cursor-pointer"
132139
data-testid="gitify-logo"
133140
onClick={[Function]}
134-
role="logo"
135-
viewBox="0 0 500 500"
136-
xmlns="http://www.w3.org/2000/svg"
137-
xmlnsXlink="http://www.w3.org/1999/xlink"
141+
title="Open Gitify on GitHub"
138142
>
139-
<defs>
140-
<linearGradient
141-
id="linearGradient-light"
142-
x1="90.8779989%"
143-
x2="-1.30249747%"
144-
y1="80.0676288%"
145-
y2="32.7108237%"
146-
>
147-
<stop
148-
offset="0%"
149-
stopColor="#CCCCCC"
150-
/>
151-
<stop
152-
offset="100%"
153-
stopColor="#FFFFFF"
154-
/>
155-
</linearGradient>
156-
</defs>
157-
<g
158-
fill="none"
159-
fillRule="evenodd"
160-
stroke="none"
161-
strokeWidth="1"
143+
<svg
144+
aria-label="Open Gitify"
145+
className=""
146+
onClick={[Function]}
147+
role="logo"
148+
viewBox="0 0 500 500"
149+
xmlns="http://www.w3.org/2000/svg"
150+
xmlnsXlink="http://www.w3.org/1999/xlink"
162151
>
152+
<defs>
153+
<linearGradient
154+
id="linearGradient-light"
155+
x1="90.8779989%"
156+
x2="-1.30249747%"
157+
y1="80.0676288%"
158+
y2="32.7108237%"
159+
>
160+
<stop
161+
offset="0%"
162+
stopColor="#CCCCCC"
163+
/>
164+
<stop
165+
offset="100%"
166+
stopColor="#FFFFFF"
167+
/>
168+
</linearGradient>
169+
</defs>
163170
<g
164-
fill="url(#linearGradient-light)"
165-
fillRule="nonzero"
166-
id="Logo"
167-
transform="translate(6.000000, 6.000000)"
171+
fill="none"
172+
fillRule="evenodd"
173+
stroke="none"
174+
strokeWidth="1"
168175
>
169-
<path
170-
d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
171-
/>
176+
<g
177+
fill="url(#linearGradient-light)"
178+
fillRule="nonzero"
179+
id="Logo"
180+
transform="translate(6.000000, 6.000000)"
181+
>
182+
<path
183+
d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
184+
/>
185+
</g>
172186
</g>
173-
</g>
174-
</svg>
187+
</svg>
188+
</button>
175189
<div
176190
aria-label="4 Unread Notifications"
177191
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"

0 commit comments

Comments
 (0)