Replace Unused React SAAS Components with Tailwind Components

[RojaPinnamraju]

1. Identify and remove unused SASS components or styles from the codebase.
2. For components still in use but relying on SASS, refactor them to use TailwindCSS utility classes.
3. Ensure the updated components maintain consistent styling and responsive behavior after the transition to Tailwind.

[nooriaali9]

@RojaPinnamraju this issue misses the size tag - where we amount for the points / effort this story would take. Could you please add that?

Also please add a feature & Milestone to this issue as well.

#407 - you could use this issue as reference

[LoTerence]

Story

As a developer I would like to use a consistent design system for reusable UI components

Problem

Right now, there are two component systems in the codebase - one for sass components, and one for tailwind.

• The sass components are located in the frontend/src/components folder.
• The tailwind components are located in the frontend/src/tw-components folder.

This happened because when they first started the project, they used sass to handle CSS styling. About a year ago, the team decided to implement Tailwind CSS components, which I believe is a better and more maintainable paradigm in the long run.

We should ideally have only one CSS "framework" for consistency. I believe we should migrate all sass to tailwind while we are still in the "early stages" of the project, beginning with the UI components.

How will we do it:

1. Edit the old scss components so that they only use tailwind. All old scss class names should be removed.
2. Test the newly edited component to make sure it is fully functional and looks exactly the same as before.
3. Once the component is fully tested and verified working, remove the .scss file associated with that component
4. Finally, move the component file to the /tw-components folder

Next step after UI components, is to migrate the rest of the frontend code to tailwind (eg. the page components). After that, we can uninstall sass completely.

Actions

Instructions for frontend developers working on this:

1. When you pick up this issue, please only work on one component at a time, to keep your PR diffs small. For example - make a PR for migrating only the Button component, then if you want to work on the Dialog component, make a new PR for that.
2. In your new PR, edit the component to remove sass class names and replace them with tailwind.
3. The new component should retain all the same functionality as the original sass component, and look mostly the same. You may use the figma design system as reference.
4. Submit your PR for review by another frontend dev.

After we do this for every component, we will work on replacing the sass components in the pages one at a time.

Please let me know if you have any questions at all!

Resources

resources