Skip to content

refactor(sidebar): wrap gitify icon with button #892

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
afonsojramos merged 1 commit into from
Mar 18, 2024
Merged

refactor(sidebar): wrap gitify icon with button #892

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
9 changes: 6 additions & 3 deletions src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,14 @@ export const Sidebar: React.FC = () => {
return (
<div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto ">
<div className="flex flex-col flex-1 items-center py-4">
<Logo
<button
className="w-5 my-3 mx-auto cursor-pointer"
data-testid="gitify-logo"
title="Open Gitify on GitHub"
onClick={onOpenBrowser}
/>
data-testid="gitify-logo"
>
<Logo aria-label="Open Gitify" />
</button>

<div
className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
Expand Down
162 changes: 88 additions & 74 deletions src/components/__snapshots__/Sidebar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
<div
className="flex flex-col flex-1 items-center py-4"
>
<svg
<button
className="w-5 my-3 mx-auto cursor-pointer"
data-testid="gitify-logo"
onClick={[Function]}
role="logo"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
title="Open Gitify on GitHub"
>
<defs>
<linearGradient
id="linearGradient-light"
x1="90.8779989%"
x2="-1.30249747%"
y1="80.0676288%"
y2="32.7108237%"
>
<stop
offset="0%"
stopColor="#CCCCCC"
/>
<stop
offset="100%"
stopColor="#FFFFFF"
/>
</linearGradient>
</defs>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
<svg
aria-label="Open Gitify"
className=""
onClick={[Function]}
role="logo"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient
id="linearGradient-light"
x1="90.8779989%"
x2="-1.30249747%"
y1="80.0676288%"
y2="32.7108237%"
>
<stop
offset="0%"
stopColor="#CCCCCC"
/>
<stop
offset="100%"
stopColor="#FFFFFF"
/>
</linearGradient>
</defs>
<g
fill="url(#linearGradient-light)"
fillRule="nonzero"
id="Logo"
transform="translate(6.000000, 6.000000)"
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
>
<path
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"
/>
<g
fill="url(#linearGradient-light)"
fillRule="nonzero"
id="Logo"
transform="translate(6.000000, 6.000000)"
>
<path
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"
/>
</g>
</g>
</g>
</svg>
</svg>
</button>
<div
aria-label="4 Unread Notifications"
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
Expand Down Expand Up @@ -127,51 +134,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
<div
className="flex flex-col flex-1 items-center py-4"
>
<svg
<button
className="w-5 my-3 mx-auto cursor-pointer"
data-testid="gitify-logo"
onClick={[Function]}
role="logo"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
title="Open Gitify on GitHub"
>
<defs>
<linearGradient
id="linearGradient-light"
x1="90.8779989%"
x2="-1.30249747%"
y1="80.0676288%"
y2="32.7108237%"
>
<stop
offset="0%"
stopColor="#CCCCCC"
/>
<stop
offset="100%"
stopColor="#FFFFFF"
/>
</linearGradient>
</defs>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
<svg
aria-label="Open Gitify"
className=""
onClick={[Function]}
role="logo"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient
id="linearGradient-light"
x1="90.8779989%"
x2="-1.30249747%"
y1="80.0676288%"
y2="32.7108237%"
>
<stop
offset="0%"
stopColor="#CCCCCC"
/>
<stop
offset="100%"
stopColor="#FFFFFF"
/>
</linearGradient>
</defs>
<g
fill="url(#linearGradient-light)"
fillRule="nonzero"
id="Logo"
transform="translate(6.000000, 6.000000)"
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
>
<path
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"
/>
<g
fill="url(#linearGradient-light)"
fillRule="nonzero"
id="Logo"
transform="translate(6.000000, 6.000000)"
>
<path
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"
/>
</g>
</g>
</g>
</svg>
</svg>
</button>
<div
aria-label="4 Unread Notifications"
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
Expand Down