[DevToolbar] Iterate on UI design

[ryan953]

@Jesse-Box put together some tweaks to the UI elements to make things look cleaner and consistent. We should iterate on each panel to bring them in-line and improve the overall look

https://www.figma.com/design/G8sBIfdPBh7wwpKdEMjqcD/Specs%3A-Dev-Toolbar-v2?node-id=2005-2843&t=Rt0ZD4spLndPPPaN-0

[aliu39]

Mini tasks:

Overall

• Ensure list item styles (height, font, layout, padding) are consistent for every panel
• Update panel headers style to match the design
  • left-aligned, project badge
  • header links to the relevant page
  • make sure same height + font
  • gray and bold "Unresolved issues/feedback related to this page" for those panels. Divider doesn't reach all the way across panel
  • also, remove the URL from the issues/feedback header, it should only say "this page"

Feedback

• Feedback panel: change header button from "+" to "Report a bug" (see design)

Feature flags

• FF Panel: move clear overrides button from above search bar to the bottom of the "Overrides". Use x icon and "Remove all"
• FF Panel: make a "+ Add a Flag" button in header.
  • does this replace the "Add override button" we currently have at the bottom?
• FF Panel: make toggles larger(?)
  • Contrary to the figma I think we should keep the true/false for clarity.
• FF Panel: remove the gray "Name Value" header
• FF Panel: "search flags" -> "search"

Alerts

• Alerts panel: remove header description

Releases

• Crash-free-rate numbers, release ver, and empty issue list encapsulated in boxes
• Add box color highlight (green/red) for crash-free-rate change
• Update empty state "No new issues in this release"

Newer panels

• Replay/Web Vital/newer panels: brush up styles and ask Jesse for design thoughts

Toolbar

• (andrew) By default, toolbar is just a single icon: Sentry logo
  • The Sentry toolbar expands on onMouseEnter, and contracts onMouseExit if no panel is selected, or the pinning functionality isn’t active
• (andrew) Sentry logo links to Sentry (replaces the X button)
• (andrew) Button to toggle pinned state
• Alerts panel red number badge becomes a small red indicator dot
  • Should also update the styling of the badge added here feat(toolbar): add red indicator badge if crashes >> healthy sessions #75210
• [DevToolbar] Clicking outside of a toolbar panel should close the panel #76251