1 files changed, 27 insertions, 10 deletions
diff --git a/app/views/shared/_broadcast_message.html.haml b/app/views/shared/_broadcast_message.html.haml
index 7aaae3a88f3..ab6423e9ade 100644
--- a/app/views/shared/_broadcast_message.html.haml
+++ b/app/views/shared/_broadcast_message.html.haml
@@ -1,12 +1,29 @@
-- is_banner = message.broadcast_type == 'banner'
+- icon_name = 'bullhorn'
+- dismissable = message.dismissable?
+- preview = local_assigns.fetch(:preview, false)
 
-%div{ class: "broadcast-message #{'alert-warning' if is_banner} broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'} js-broadcast-notification-#{message.id} gl-display-flex",
-  style: broadcast_message_style(message), dir: 'auto' }
-  .gl-flex-grow-1.gl-text-right.gl-pr-3
-    = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
-  %div{ class: !fluid_layout && 'container-limited' }
-    = render_broadcast_message(message)
-  .gl-flex-grow-1.gl-flex-basis-0.gl-text-right
-    - if (message.notification? || message.dismissable?) && opts[:preview].blank?
+- unless message.notification?
+  .gl-broadcast-message.broadcast-banner-message{ role: "alert", class: "js-broadcast-notification-#{message.id} #{message.theme}" }
+    .gl-broadcast-message-content
+      .gl-broadcast-message-icon
+        = sprite_icon(icon_name)
+      .gl-broadcast-message-text.js-broadcast-message-preview
+        - if message.message.present?
+          = render_broadcast_message(message)
+        - else
+          = yield
+    - if dismissable && !preview
+      %button.btn.gl-close-btn-color-inherit.gl-broadcast-message-dismiss.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-dismiss-current-broadcast-notification{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
+        = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! 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 }
+    = sprite_icon(icon_name, css_class: 'vertical-align-text-top')
+    - if message.message.present?
+      = render_broadcast_message(message)
+    - else
+      = yield
+    - if !preview
       %button.js-dismiss-current-broadcast-notification.btn.btn-link.gl-button{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } }
-        = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! #{is_banner ? 'gl-text-white' : 'gl-text-gray-700'}")
+        = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! gl-text-gray-700")