Map page layout fixes

[gsehrlich]

Describe the bug

• Too little space between the grid container and the header and footer (overlap, actually).
• The logo isn't aligned and is responsible for too much header padding.
• The nav items are aligned with the bottom of the header, which doesn't match the wireframes
• The map box and map menu are equal-width rectangular columns, which doesn't match the wireframes.
• The font sizes in the map menu don't make sense.
• The "We haven't collected data for this date" alert isn't noticeable because it's far from the datepicker.

To Reproduce
Steps to reproduce the behavior:

1. Go to the map page.
2. See issues.

Expected behavior

• The grid container should not overlap the header or footer, and it should have more space in between.
• The logo should be less padded and better aligned with the left margin of the grid container.
• The nav items should be at the top of the header.
• The map box should be larger and square, and the map menu should be narrower.
• The map menu font sizes should be hierarchical.
• The "We haven't collected data for this date" alert should be in a more noticeable location.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Brave
• Version 1.44.101

Additional context
Wireframes: https://www.figma.com/file/YJGrbzkh0dei32uAH3Q5m3/WOAQ?node-id=2619%3A6859

Labels

• Add a status label
  • needs definition
  • needs help
  • ready to work on
  • in progress
  • backlog
• Add a bug label
• Add additional labels as needed

Affected Components (For Developers)
Header and map index. Semantic UI defaults were overriding CSS changes I was trying to make, so I'm not sure exactly where the new styles should go.

Technical Resources (For Developers)

• Remove the grid container's negative margin and give it about 3rem padding at the bottom.
• Align logo and remove padding around it
• For the nav items, replace align-self: flex-end with flex-start.
• Give the map box height and width an equal, fixed percentage of something (60vw?) to make it square, and reduce the map menu width to fit
• Fix font sizes in map menu
• Remove absolute from "We haven't collected data for this date" alert and put it adjacent to the datepicker

[ahmedsilat44]

Hey @gsehrlich I would like to work on this issue, Could you assign it to me. Thanks 😄

[gsehrlich]

Hey @ahmedsilat44, thanks for reaching out! Unfortunately this project isn't really set up to onboard new volunteers at the moment. Once we are, the way to get involved is through our parent organization Open Oakland, which you can learn more about at openoakland.org. Open Oakland is based in Oakland, California, U.S. and mostly focused on local issues, although some of us on this project imagine that aspects of the app that aren't specific to Oakland could be equally useful for air quality advocacy purposes elsewhere in the world.