feat: migrate headless ui components to radix primitives

[sdthakral33]

What does this PR do?

This PR contains the changes for migrating headlessui library to radix ui primitve

Related issues

/claim #4327
Fixes #4327

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (non-breaking small changes to existing functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Explanation of the changes

All the components like menus and modals using headlessui components have been migrated to radix ui primitive

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
web	✅ Ready (Inspect)	Visit Preview	Jan 1, 2024 6:58pm

[algora-pbc]

💵 To receive payouts, sign up on Algora, link your Github account and connect with Stripe/Alipay.

[sdthakral33]

Hey @bigint Please review this PR.
Thanks!

[bigint]

Screen.Recording.2023-12-26.at.9.29.10.PM.mov

can't close modal on clicking outside

[bigint]

Screen.Recording.2023-12-26.at.9.30.02.PM.mov

scroll is enabled even after opening the modal

[bigint]

Screen.Recording.2023-12-26.at.9.31.08.PM.mov

dropdown misaligned

[bigint]

Screen.Recording.2023-12-26.at.9.31.40.PM.mov

here too

[bigint]

misaligned here too

[sdthakral33]

@bigint Thanks for the comments! Working on fixing those.

[vercel]

@sdthakral33 is attempting to deploy a commit to the Hey Team on Vercel.

A member of the Team first needs to authorize it.

[sdthakral33]

@bigint Addressed All the review comments and made changes accordingly. Please review the changes again.
Thanks!

[bigint]

there is no spacing below the navbar weird 🤔

[bigint]

@sdthakral33 can you please make it pixel perfect checking side by side with prod and your branch?

[sdthakral33]

Visit Preview

@bigint I am not to seeing this issue on my machine. I did a side by side check also, it looks fine.

[bigint]

It's happening for me when staff mode is enabled, there will be another navbar above the navbar, it works fine on main branch

[sdthakral33]

@bignit Is there some way for me to test the behaviour in staff mode?

[bigint]

you can just set true on staff mode boolean manual on the code

hey/apps/web/src/components/Shared/Navbar/index.tsx

Line 73 in 351a5b4

{staffMode ? <StaffBar /> : null}

[sdthakral33]

@bigint I have fixed that navbar issue, can you pls check it again

[bigint]

Screen.Recording.2023-12-27.at.10.11.56.PM.mov

closing is not smooth!

[sdthakral33]

Screen.Recording.2023-12-27.at.10.11.56.PM.mov
closing is not smooth!

@bigint Fixed this in the latest commit.

[sdthakral33]

@bigint Any updates on this PR? I have made all the changes wrt the review comments and everything now seems to work fine. Can you please review and provide any further comments if you have.
Thanks!

[sdthakral33]

@bigint Any Updates?

[bigint]

I see lot of issues still

seeing outer ring on hover

[sdthakral33]

I see lot of issues still

seeing outer ring on hover

@bigint It is already existing behaviour. It is coming on :focus-visible not on :hover, adding a blue outline. I have not added anything extra. Please see the attached screenshot for reference on testnet.

[sdthakral33]

I see lot of issues still

seeing outer ring on hover

@bigint Is there any issue other than this one that you have observed?

[sdthakral33]

I see lot of issues still

seeing outer ring on hover

@bigint It is already existing behaviour. It is coming on :focus-visible not on :hover, adding a blue outline. I have not added anything extra. Please see the attached screenshot for reference on testnet.

@bigint Let me know if you want me to fix this behaviour.

[bigint]

@sdthakral33 it can happen when using keyboard but when just using the mouse its happening 🙇🏼

[bigint]

Screen.Recording.2024-01-04.at.3.42.28.PM.mov