Top Bar Redesign

[BryonLewis]

Implement the new top bar redesign: https://www.figma.com/design/HzfMOKyPaKVVDN7OEKGfgs/RDWatch?node-id=912-3161&node-type=frame&t=N4IryMPZ3iEtguqt-0

• Update Theme to utilize colors from Figma

TODO:

• Restructure top bar into a row with the legend also available in it,
• Restructure legend into a button that togglesd into the legend with a close option
• Observations/Sites are now buttons with a hover arrow on the right side. The buttons change size based on the selection of Models or Ground Truth.
• Region is also a button with a dropdown that can have a disabled state as well.
• Satellite images should probably still use the satellite icon to initiate downloading, it has a spinning icon for downloading and a dropdown for all the settings once it is configured.
  • I think for satellite images to work properly I may need to add the current ModelRunList to the store so it can be accessed by other components instead of the current Event emitting that is being run right now.
• Maybe remove the autoZoom functionality?
• All buttons in the area need a tooltip to indicate what they do
• Needs to handle squashing if the legend becomes wide (it has both observations and Site labels displayed). Looks like I use some rows with columns that can squash when needed:
• Annotator Mode Toolbar needs to be modified with Add proposals
• Buttons in the SideBar need to be removed that duplicated in the top bar.