Standardizing frontend components

[Dishant1804]

Is your feature request related to a problem? Please describe.
By using chakraUI i would like to refactor the existing code to make it more standard and uniform.

Describe the solution you'd like
-There are card components, pagination components, modals, buttons and many such components that can be standardized using UI library,
-The tests need to be changed as well in some cases as chakraUI may have different props, so we need to alter the test cases as well to make sure that the component behaves exactly as what we want it to.

Additional context
There was a healthy discussion on this issue with various conversations #538 , #325, #543

[Dishant1804]

@arkid15r i would like to work on it the approach remains the same, we go step by step on building and refactoring the components throughout the frontend codebase, it is fairly big issue and it'll be fun and challenging to do this :)

[Dishant1804]

@arkid15r Also if we are moving forward with this issue, we can use charkaUI's Skeleton in #530 , as he has to refactor we can use chakraUI's skeleton over react-loading-skeleton as it will provide much more uniformity in UI.
Here is the refernce to chakra ui's skeleton https://www.chakra-ui.com/docs/components/skeleton

[arkid15r]

@Dishant1804 I appreciate you volunteering for this task.
You're right it's going to be a big one. Let's create sub-issues to track bite-size tasks as it's easier to estimate them. Also currently we have 21 as the highest number of points per task and I expect this to take more than that.

[arkid15r]

@Dishant1804 I've created https://github.com/OWASP/Nest/milestone/11 milestone to track this migration.
Please feel free to start creating issues for this migration plan.

Thank you!

[arkid15r]

@Dishant1804 this task may be a blocker for some other tasks. Could you add some updates? We need at least minimal chakra ui setup to implement new pages using it instead of shadcn ui.

[Dishant1804]

@arkid15r i've started working on the card component for project details page, let me create a sub issue and proceed with it. so that even if we merge the PR of the card we will be able to move forward as chakraUI will be added to project with it

[Dishant1804]

@Dishant1804 this task may be a blocker for some other tasks. Could you add some updates? We need at least minimal chakra ui setup to implement new pages using it instead of shadcn ui.

@arkid15r i have now added minimal installation of the chakraUI so that we can keep going :) PR #576 does it, i'll proceed progressively towards migration now.

[arkid15r]

@Dishant1804 could you check what's left? It'd be great to finish this as you are the top level issue owner.

[Dishant1804]

@Dishant1804 could you check what's left? It'd be great to finish this as you are the top level issue owner.

Sure @arkid15r I'll create a list about what is left by today and then we can create issues one by one