Feature/css migration part 2

[zoe-gonzales]

This migrates the following to use styled components:

• [ ] button
• [ ] h1
• [ ] a
• [ ] th
• [ ] span
• [ ] ul
• [ ] img
• [ ] form

To test:

1. Comment out the styles in public/index.css for each of the elements listed above
2. Start the app
3. Click test throughout the app, including testing of all tables, buttons, forms, and page headers to ensure no styling regressions

[zoe-gonzales]

@joven-health-mike This PR is starting to get pretty big with the various file changes, so I decided to do input, select, and label in a separate PR.

Also, I think that the following ESLint rules would be really helpful to have in the code base. Would it be alright with you if I set them up in a separate PR? max line length: https://eslint.org/docs/latest/rules/max-len import order: https://eslint.org/docs/latest/rules/sort-imports

[joven-health-mike]

@joven-health-mike This PR is starting to get pretty big with the various file changes, so I decided to do input, select, and label in a separate PR.

Also, I think that the following ESLint rules would be really helpful to have in the code base. Would it be alright with you if I set them up in a separate PR? max line length: https://eslint.org/docs/latest/rules/max-len import order: https://eslint.org/docs/latest/rules/sort-imports

Yes, That's fine with me.

[joven-health-mike]

@zoe-gonzales With the buttons set up like this, will we be able to change the color of the button in the file we're using it in? E.g. right now, all the buttons are blue, but if we want one of them on a page to be red, can we do that with how you have it set up right now?

[zoe-gonzales]

@zoe-gonzales With the buttons set up like this, will we be able to change the color of the button in the file we're using it in? E.g. right now, all the buttons are blue, but if we want one of them on a page to be red, can we do that with how you have it set up right now?

Ah yes for sure. That can be done by setting the color in the styled component definition like this:

const DangerButton = styled.button`
  ${buttonStyles}

  color: red;
`;

Another approach would be to have a different css definition for different button themes for more reusability. So something like this:

const coreButton = css`
  margin-left: 25px;
  margin-bottom: 10px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`
const dangerButton = css`
  background-color: red;

  &:hover {
    border: red;
  }
`

const DangerButton = styled.button`
  ${coreButton}
  ${dangerButton}
`;

Also, down the line we could have a whole separate Button component that has different variants in the styling, like a DangerButton that's red, and InfoButton that's blue, a SuccessButton that's green, etc. That would allow for greater reusability of styles and allow us to import and use the component without having to define a styled component each time. But that's would be like starting to build component library which is probably more than we need at the moment.