Replace all styling with Tailwind

Question

Replace all styling with Tailwind

Opened this issue a year ago · 14 comments

Blocked by #1724

Answer 1 · 2023-09-17T17:38:56.000Z

@subhajit20 You could gradually work on this one! One component and/or one page per PR. It's nice because you won't feel like there's a mountain of work. Just whatever you feel comfortable contributing.

Answer 2 · 2023-09-17T17:41:45.000Z

@kylemh Sure, Can you assign this to me?

Answer 3 · 2023-09-17T17:42:40.000Z

Note that you may need to define Tailwind theme values to leverage the existing CSS values more ergonomically:

https://github.com/OperationCode/front-end/blob/main/common/styles/variables.css
https://github.com/OperationCode/front-end/blob/main/common/styles/media-queries.css
https://github.com/OperationCode/front-end/blob/main/common/styles/themeMap.js

Answer 4 · 2023-09-18T06:17:45.000Z

@kylemh when I push changes this error is comming
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Will I change ReactDom.render to create room for all the test files?

Answer 5 · 2023-09-18T06:27:17.000Z

This is a Next.js application. ReactDOM.render is not used in this repository. Perhaps try re-installing dependencies? Hopefully you've gone through the README instructions!

Answer 6 · 2023-09-18T06:28:09.000Z

This is a Next.js application. ReactDOM.render is not used in this repository. Perhaps try re-installing dependencies? Hopefully you've gone through the README instructions!

Sorry I have fixed that

Answer 7 · 2023-10-22T15:06:44.000Z

Hello @kylemh is the issue still open? I can help in converting the CSS of the footer to Tailwind. Since this is a big issue I hope it wouldn't be a problem with @subhajit20 if I join.

Answer 8 · 2023-10-22T19:13:45.000Z

I don't think it'd be a problem! Just steer clear of the work being done in #1746 obviously

Answer 9 · 2023-10-23T10:06:36.000Z

Yes, I will make sure I do that. Should I start working on this? Can you assign me?

Answer 10 · 2023-10-23T10:15:19.000Z

I can only assign one person to an issue on GitHub. Feel free to work on it regardless. Maybe post here what components you are working on for visibility.

Answer 11 · 2023-11-16T14:49:31.000Z

hey @kylemh I am not able to make another pr, the create new pr popup is not coming on the pull request page .

Answer 12 · 2023-11-16T14:55:19.000Z

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request hopefully this helps!

Answer 13 · 2023-11-16T14:57:31.000Z

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request hopefully this helps!

done that,Thanks

Answer 14 · 2023-12-17T14:04:22.000Z

@subhajit20 please note the changes I made here:
https://github.com/OperationCode/front-end/compare/main..ee6c78cfe6ef2bdb5a67a34857e0ccb7372ac9c7

I changed some theme names and values.
I installed twmerge (please read the docs and make sure that components using the className prop leverage the function that is exported from this package in the manner that I used in these changes).
I fixed visual bug in ImageCard (while converting it to Tailwind)