refactor: adopt primer design system ui components

[setchy]

Closes: #1541

Adopts the excellent GitHub Primer Design System Component Library - https://primer.style/components to replace our custom components and provide a level-up on user experience and visual consistency.

This PR, though sizeable, focuses on replacing the following components

• Icons
• Buttons
• Layout via Stack

I have also replaced most tests to use data-testid and getByTestId so that they're more resilient to UI changes

Items found during testing that should be resolved

• Horizontal scroll bar showing on notification animation (mark as read, etc)
• Different uses of colors (tailwind vs design token), eg: green color
• position of repository title tooltip gets cut off

[bmulholland]

I have also replaced most tests to use data-testid and getByTestId so that they're more resilient to UI changes

Lovely, nice touch.

[setchy]

@afonsojramos @bmulholland - I'm pretty happy with the completeness of this initial uplift to use the GitHub Primer UI Components.

I plan to update this issue later with before/after screenshots, but while that's pending, if you do happen to have a few minutes I'd appreciate your feedback by running this branch locally 🙏

[bmulholland]

Sure, testing this locally now :)

[bmulholland]

A minor nitpick: there's now two different versions of green. The Gitify logo in the tray, when there's notifs, is one -- I think the same as open PR green? The sidebar icons are another, along with the sub-icons for a notification.

[setchy]

A minor nitpick: there's now two different versions of green. The Gitify logo in the tray, when there's notifs, is one -- I think the same as open PR green? The sidebar icons are another, along with the sub-icons for a notification.

Good feedback.

The sidebar icons are now using the GitHub design tokens (colors), while the others (notification type icon and tray icons) are unchanged.

Post this PR I do intend to use the GitHub design token colors more extensively and reduce the amount of tailwind colors we're using

[bmulholland]

Yeah I think temporary mismatches are fine, too.

[setchy]

During further testing, noticed that when a notification row is animating out (mark as read, etc) a horizontal scroll bar is being shown temporarily. Added as an open task to the OP