Popup layout and styling enhancements

[hazzuk]

Description

This PR makes changes to the popup window by changing the placement of UI elements and improving the overall look and feel through styling.

Motivation

The previous interface (whilst perfectly functional) suffers from some key issues I set out to solve:

• The media buttons are placed separately, creating large areas of unused space
• Media buttons are placed too far away from other controls and the center of the page
• Lack of cohesion between different UI elements

Changes

• Numerous styling changes to create a more modern, homogeneous and less distracting design
• Media buttons are now placed at the bottom of the window alongside other toolbar buttons
• The 'report issues' link is now a toolbar button
• A dedicated 'announcements' element was added, which is also now dismissible
• Improvements to toolbar buttons in light mode to ensure better visibility
• Structural changes using CSS grid/flex to avoid a need of hardcoded width/height values

Testing

My tests included some of the following:

• Both the popup box in it's standard mode and as a separate window
• All controls present in the window
• Restarting playback and restarting the browser
• Ensuring any errors are also still correctly displayed

Screenshots

Popup New (with announcement hidden)

Popup New/previous

Separate window (dark mode) New/previous

Separate window (light mode) New/previous