refactor(topicsSelection): use headless ui component

[bmartins-42]

• Define topic interface and default values
• Integrate last ui interface from figma
• Rework component with HeadlessUI combobox

Contributor checklist

• This pull request is on a separate branch and not the main branch

---

Description

This task was about reworking the code to use Headless UI and integrate the latest visual from Figma

Related issue

#276

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

• The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	ca07157
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/6544b169546b0400071ede87
😎 Deploy Preview	https://deploy-preview-519--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andrewtavis]

Hey @bmartins-42! FYI this will get switched after this gets merged in. I made the decision to flatten the i18n JSON so that we can search for the keys and their usages in a full codebase search. This will go into the top most _common name scheme :) More details for this are in #511.

[andrewtavis]

Come to think of it though, _global makes more sense :) Thanks for the suggestion!

[andrewtavis]

@bmartins-42, checking it out now: on selection the topics aren't staying the cta color 🤔 Is the color just not updating, or is the selection getting canceled. And another question: is the user able to select more than one?

[andrewtavis]

Thanks so much for the work here! It's looking great! 😊 Seems like we're very close to closing this out :)

[bmartins-42]

@bmartins-42, checking it out now: on selection the topics aren't staying the cta color 🤔 Is the color just not updating, or is the selection getting canceled. And another question: is the user able to select more than one?

Strange, I will check this tomorrow.

[bmartins-42]

@andrewtavis I fixed the issue, I didn't clean up correctly my work... It should be ok, I also updated the i18n file.

[andrewtavis]

This is so great, @bmartins-42 😊 Really am so grateful for the help here! :) :) I'll try to finalize the hover coloration in #521 so that it's really looking good for the sync on Saturday 🚀

I'll write some comments on how this is working for accessibility in the issue, as I think that further changes should be in a new one as this 100% solves the original issue!

Thank you!