CSS refactoring

[joven-health-mike]

• [x] Implement component-based CSS
• [x] Refactor existing CSS file into the components to which they belong

[zoe-gonzales]

Hi @joven-health-mike ! Here's the plan I have so far for migrating the CSS to styled components. Let me know if I missed anything or if you have questions or feedback.

✅ PR 1:

• Install styled-components package
• Transform a couple of styles using it (leftSide and rightSide classes seem like safe options since they only appear on the home page)
• Confirm no styling regressions in the homepage UI

✅ PR 2:

• Transform all basic html tag styling (button, h1, a, th, span, ul, img, form, input, select, label)
• Confirm no styling regressions in the app in all pages where the above elements are used

✅ PR 3:

• Transform all remaining custom classes in public/index.css
• Confirm no styling regressions in the app in all pages where the above classes are used

✅ PR 4:

• Transform all react-datepicker styles
• Confirm no regressions anywhere DateSelector component is used

✅ PR 5:

• delete public/index.css and remove import from public/index.html
• I believe we'll also be able to delete all of the *.module.css files

Refactoring of styles to use mixins whenever possible will be done when defining each styled component. I think this will be easier than refactoring separately afterwards. I anticipate there being many opportunities to reuse mixins especially with the basic HTML elements.

Finally a quick question, where does the button-x class come from? I tried searching for its definition in the code but didn't see it anywhere.

[joven-health-mike]

Thanks @zoe-gonzales, this plan looks good to me. Let me know in Slack when you're ready for me to review any PRs.

Good catch on the button-x class, it doesn't look like it's implemented. The XButton component builds all of the little icons in each table, so we may want to style those differently, depending on which button it is (e.g. delete button has a red background, etc). That might change once I get feedback from a graphic designer, but I want to have the ability to change those based on what we're using the XButton for.

[zoe-gonzales]

Thanks @zoe-gonzales, this plan looks good to me. Let me know in Slack when you're ready for me to review any PRs.

Good catch on the button-x class, it doesn't look like it's implemented. The XButton component builds all of the little icons in each table, so we may want to style those differently, depending on which button it is (e.g. delete button has a red background, etc). That might change once I get feedback from a graphic designer, but I want to have the ability to change those based on what we're using the XButton for.

Ok got it! Good to know, I thought it might have come from a library or something. Sounds good to me, I'll get started on that work!