Broadcast message does not match design specs

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

The current implementation of broadcast messages does not match our design specs.

These are screenshots of the current implementation in GitLab:

Broadcast message as a notification	Broadcast message as a banner

Here's a screenshot of our spec for the banner type:

The notification type should look like this (see #362735 (comment 952557556) for the discussion on this):

The problems are:

• Notification type
  • The dismiss button is not in the top right
  • The margins/paddings around the content of the message are incorrect. For instance, the text wraps around the bullhorn icon, when it should be inset a fixed amount.
• Banner type
  • Dismiss button is too wide

Suggested solution

• Rewrite the template to produce the same markup as GlBroadcastMessage (assuming that follows the design specs, which it currently appears to)
• Remove app/assets/stylesheets/framework/broadcast_messages.scss, and rely only on GitLab UI's styles
• (optional) Migrate it to a ViewComponent

If in doubt, @mention a Foundations team member for guidance.