Re-jig banner callout markup for new design

app/views/shared/_auto_devops_callout.html.haml

@@ -2,13 +2,13 @@
   .banner-graphic
     = custom_icon('icon_autodevops')
 
-  .prepend-top-10.prepend-left-10.append-bottom-10
+  .banner-body.prepend-top-10.prepend-left-10.append-bottom-10
     %h5= s_('AutoDevOps|Auto DevOps (Beta)')
     %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
     %p
       - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')
       = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link }
-    .prepend-top-10
+    .banner-buttons
       = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings'), class: 'btn js-close-callout'
 
   %button.btn-transparent.banner-close.close.js-close-callout{ type: 'button',

app/views/shared/milestones/_deprecation_message.html.haml

-.milestone-deprecation-message.prepend-top-default.prepend-left-default
-  .illustration.inline= image_tag 'illustrations/milestone_removing-page.svg', class: 'append-right-default'
-  .inline.vertical-align-middle
-    %strong= _('This page will be removed in a future release.')
-    %p.append-bottom-default.prepend-top-5
-      = _('Use group milestones to manage issues from multiple projects in the same milestone.')
-      %br
-      = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link popover-link prepend-left-0'
-    %div= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
+.banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
+  .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
+  .banner-body.prepend-left-10.append-right-10
+    %h5.prepend-top-0= _('This page will be removed in a future release.')
+    %p= _('Use group milestones to manage issues from multiple projects in the same milestone.')
+    = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left'
+    .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
 
-  %template.milestone-deprecation-message-template
+  %template.js-milestone-deprecation-message-template
     .milestone-popover-body
       %ol.milestone-popover-instructions-list.append-bottom-0
         %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe