Merge branch 'thutterer/paper-cut-haml-broadcast-notification-styles' into 'master'

Improve styles of Rails-rendered broadcast messages

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121034



Merged-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Pedro Pombeiro <noreply@pedro.pombei.ro>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Reviewed-by: Andrew Fontaine <afontaine@gitlab.com>
Co-authored-by: Andrew Fontaine <afontaine@gitlab.com>
Co-authored-by: Thomas Hutterer <thutterer@gitlab.com>

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -46,3 +46,7 @@
     min-height: 34px;
   }
 }
+
+.gl-broadcast-message-content p:last-child {
+  margin: 0;
+}

app/views/shared/_broadcast_message.html.haml

@@ -19,21 +19,22 @@
         icon: 'close',
         size: :small,
         button_options: { class: 'gl-close-btn-color-inherit gl-broadcast-message-dismiss js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601 } },
-        icon_classes: 'gl-mx-3! gl-text-white')
+        icon_classes: 'gl-text-white')
 - else
   - notification_class = "js-broadcast-notification-#{message.id}"
   - notification_class << ' preview' if preview
-  .broadcast-message.broadcast-notification-message.mt-2{ role: "alert", class: notification_class, data: { qa_selector: 'broadcast_notification_container' } }
-    = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
-    - if message.message.present?
-      %h2.gl-sr-only
-        = s_("Admin message")
-      = render_broadcast_message(message)
-    - else
-      = yield
+  .gl-broadcast-message.broadcast-notification-message.gl-mt-3{ role: "alert", class: notification_class, data: { qa_selector: 'broadcast_notification_container' } }
+    .gl-broadcast-message-content
+      .gl-broadcast-message-icon
+        = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
+      - if message.message.present?
+        %h2.gl-sr-only
+          = s_("Admin message")
+        = render_broadcast_message(message)
+      - else
+        = yield
     - if !preview
-      = render Pajamas::ButtonComponent.new(variant: :link,
+      = render Pajamas::ButtonComponent.new(category: :tertiary,
         icon: 'close',
         size: :small,
-        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601, qa_selector: 'close_button' } },
-        icon_classes: 'gl-mx-3! gl-text-gray-700')
+        button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601, qa_selector: 'close_button' } })