front-end icon indicating copy to clipboard operation
front-end copied to clipboard

Replace all styling with Tailwind

Open kylemh opened this issue 1 year ago • 14 comments

Blocked by #1724

kylemh avatar Sep 10 '23 05:09 kylemh

@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.

kylemh avatar Sep 17 '23 17:09 kylemh

@kylemh Sure, Can you assign this to me?

subhajit20 avatar Sep 17 '23 17:09 subhajit20

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

kylemh avatar Sep 17 '23 17:09 kylemh

@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?

subhajit20 avatar Sep 18 '23 06:09 subhajit20

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!

kylemh avatar Sep 18 '23 06:09 kylemh

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

subhajit20 avatar Sep 18 '23 06:09 subhajit20

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.

akash0708 avatar Oct 22 '23 15:10 akash0708

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

kylemh avatar Oct 22 '23 19:10 kylemh

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

akash0708 avatar Oct 23 '23 10:10 akash0708

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.

kylemh avatar Oct 23 '23 10:10 kylemh

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

subhajit20 avatar Nov 16 '23 14:11 subhajit20

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!

kylemh avatar Nov 16 '23 14:11 kylemh

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

subhajit20 avatar Nov 16 '23 14:11 subhajit20

@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)

kylemh avatar Dec 17 '23 14:12 kylemh