Document styling with bootstrap and styled components

[jensren]

What: Add a new Wiki page for styling guidelines, and refer to the styling Wiki page in the README wiki page.

Why: we want developers with little css experience to look at the documentation and style their code following our guidelines.

How:

• Add a new page to the Wiki for styling
• Refer to the styling Wiki page in the README, so new devs know to look there
• Add any additional default styles needed for us to use default styles out of the box

Information to include:

• How to use a default bootstrap style (as in your PR)
• How to use a default styled components style (as in your PR)
• When we should use bootstrap vs. styled components
  • Mention that in general, we should not style bootstrap styles with styled components, because bootstrap components are supposed to look the same as each other. We should only style bootstrap components if we need the bootstrap component to do something significantly different (e.g. making a vertical navbar from bootstrap's horizontal navbar)
  • Mention that we should only use styled components if no bootstrap component is available
• Include that we don't need the app to look exactly the same as the Figma designs. It's ok if it looks slightly different (or even significantly different), as long as it matches the theme and looks good
• Link the Figma page with the default styles
• Include guidelines on where to put styles in the code (e.g. put styled component styling under the component)
• Include guidelines on what naming conventions we are using (e.g. style component for NavBar component will be called StyledNavBar)
• Include guidelines on how to import bootstrap components (e.g. I saw you had it as import Button from 'react-bootstrap/Button' and not import { Button } from 'react-bootstrap')

[pratikmdhr]

I made a draft here: https://github.com/reach4help/covidhelphub-frontend/wiki/Styling-Guidelines