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

Lovely, nice touch.

Sure, testing this locally now :)

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.

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

Yeah I think temporary mismatches are fine, too.

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

I think open in background is broken on this branch

I think open in background is broken on this branch

Just tested and it's working for me...

Will do some more testing

How has the testing been going @bmulholland ? For me it's been really stable.

Once this is merged I plan to (finally) move forward with #985 - I have configured this on the atlassify codebase so should be an easy port across

Yeah it's been working well for me :)

@afonsojramos - I know you're a busy man atm, but if you do happen to have time to shake this down would love your feedback, too

Giving it a try! 👀

Wow, this has been a huge amount of work! Everything looks great!

However, I've found a couple of visual issues:

1. Input component hover border is red by default?

2. Spacing in some icons under accounts seems too tight. I imagine my name is too long 😅 If it was my full name it would be even worse 🧨

3. This weird hover in this text and icons under Accounts.

And got a few questions regarding implementation on some things. I know that to add primer/react we needed to add styled-components, but I don't think we should mix and match both styled-components and tailwind. So I'd probably change those sx's.

I'm also (sometimes) seeing some errors on the console, but I think that is related to this: https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default

Appreciate the kind words @afonsojramos and the feedback on some visual inconsistencies. I'll address them shortly 👨‍💻