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 this project was first started, the devs 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. 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 Tailwind component to make sure it is fully functional.
   • They should be based off the new up to date figma design system components
   • Or they should look exactly the same as before (ie. they should look the same as the scss counterpart).
3. Once the component is fully tested and verified working, remove the .scss file associated with that component and refactor away any old code.
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.

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

Resources

CTJ Figma - Design System resources

[nooriaali9]

Hi @RojaPinnamraju I saw that you were caught up with your move, were you able to look into this issue post joining back? Please post any updates on the progress of this story.

[RojaPinnamraju]

Hey @nooriaali9 Yeah, sorry, I haven’t had much of a chance to work on it yet. I had some interviews last week and this week, but I’ll be getting to it soon. I’ll post an update as soon as I make progress. Thanks for checking in!