Extract SVGs into their own components

[sodic]

Most of Open Saas code has inline SVGs:

• It makes components very long and difficult to read.
• It doesn't say what the SVG is supposed to represent.

We can solve both problems by extracting SVGs to separate components with nice names.

[ayushii06]

Hi 👋

I'd love to contribute to this issue. I took a look at the code, and I noticed an example in the dropdown component where an inline SVG is used:

<svg className={cn('hidden fill-current...', { 'rotate-180': dropdownOpen })} ...>
  <path ... />
</svg>

Refactoring SVGs like this into standalone components (e.g., ChevronDownIcon) would definitely improve readability and reusability. I’d be happy to help extract and name these SVGs meaningfully.

Let me know if you’d like me to begin with specific components or go module by module. I’m ready to open a PR once you give the go-ahead.

Thanks!

[sodic]

Hey @ayushii06, this one's been put on hold because we're changing up the bulk of our UI. But before someone starts working on it, we'll ping you :)

[ayushii06]

Ok, thank you!
I’ll be looking forward to contributing once it’s back on. Also, if you need help with the UI revamp, I’d love to contribute there as well. Just let me know! 🙌