Migrate styles from CSS modules to CSS-in-JS

[paulcretu]

Most of the styling is currently being applied from module.css files located in src/styles. It would be good to rewrite these as CSS-in-JS using the sx prop and styled() that MUI provides. Each file corresponds to a page:

• About.module.css
• Blog.module.css
• Home.module.css
• Layout.module.css
• Learn.module.css
• Nav.module.css
• getinvolved.module.css
• globals.css can probably just be removed and just use MUI baseline instead

The goal should also be to use the MUI theme as much as possible, and to pull out commonly re-used styles into components. This migration can be done in one swoop, or each page can be refactored one at a time as the latest designs are implemented.

[YashGupta29]

Hello,
I would love to contribute. Can you please assign this task to me?

[Saksham294]

Hi
I would like to contribute to this issue. Can you please assign it to me?

[DivyanshuParwal]

I think refactoring one at a time is a better option as styles will also be changed in those files accordingly with the designs need to be implemented

[evanjscallan]

I'd like to contribute to this as well if needed.

[evanjscallan]

I've created a reusable theme 'const' using existing stylistic UI attributes for consideration. The theme object would allow the more granular aspects of the CSS styling to be used (mainly with fonts and color palettes) and may speed up the process of refactoring for MUI. Would this be worth submitting as a pull request?

[DivyanshuParwal]

@paulcretu Nav.module.css file could be removed from the above list as it is no longer required. Nav styles are already converted to CSS-in-JS in #14 and the file is being removed in #40.

[paulcretu]

Thanks @DivyanshuParwal, I've checked it off

@evanjscallan yes, we now have a designated file for theming, take a look at theme.js. You may want to add your changes there and open a PR

[rodrickcalvin]

@paulcretu how's the traffic on this?
I can clear it all up

[paulcretu]

I think @DivyanshuParwal has a good point, it's not worth refactoring the styles if the pages are still being implemented. So let's just not add any new CSS in modules, and removing it when implementing each page. In the meantime I'll try to keep this list updated. Leave a comment if anything gets checked off and I don't notice

[UXBrendan]

@paulcretu - does this need to be assigned and completed? If so, how can I help move this item toward completion?

[paulcretu]

Yes this still needs to be done. But it's best done as part of the implementation of each page (the other issues). The plan was to reject any PRs that don't move over to CSS-in-JS. So this issue is mostly for tracking the overall progress of the migration.

I don't think it necessarily needs to be assigned right now, but if there are still any CSS modules remaining once the other pages are implemented, then it should be assigned.