Update create merge request button on last push event

Changelog: changed

app/assets/stylesheets/pages/events.scss

@@ -154,21 +154,6 @@
   }
 }
 
-/*
- * Last push widget
- */
-.event-last-push {
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  .event-last-push-text {
-    @include str-truncated(100%);
-    font-size: 13px;
-    margin-right: $gl-padding;
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .event-item {
     padding-left: 0;

app/assets/stylesheets/utilities.scss

@@ -226,6 +226,10 @@ $gl-line-height-42: px-to-rem(42px);
   max-height: none !important;
 }
 
+.gl-max-w-50p {
+  max-width: 50%;
+}
+
 // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
 .gl-popover {
   .popover-header {

app/views/projects/_last_push.html.haml

 - event = last_push_event
 - if event && show_last_push_widget?(event)
-  .row-content-block.top-block.d-none.d-sm-block.white
-    .event-last-push
-      .event-last-push-text
-        %span= s_("LastPushEvent|You pushed to")
-        %strong
-          = link_to event.ref_name, project_commits_path(event.project, event.ref_name), class: 'ref-name'
+  .gl-alert.gl-alert-success.mt-2{ role: 'alert' }
+    = sprite_icon('check-circle', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    %button.js-close-banner.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
+      = sprite_icon('close', size: 16, css_class: 'gl-icon')
+    .gl-alert-body
+      %span= s_("LastPushEvent|You pushed to")
+      %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }
+        = link_to event.ref_name, project_commits_path(event.project, event.ref_name), class: 'ref-name gl-text-truncate'
 
-        - if event.project != @project
-          %span= s_("LastPushEvent|at")
-          %strong= link_to_project event.project
+      - if event.project != @project
+        %span= s_("LastPushEvent|at")
+        %strong= link_to_project event.project
 
-        #{time_ago_with_tooltip(event.created_at)}
+      #{time_ago_with_tooltip(event.created_at)}
 
-      - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
-        .flex-right
-          = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-info btn-sm qa-create-merge-request" do
-            #{ _('Create merge request') }
+    - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
+      .gl-alert-actions
+        = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-confirm qa-create-merge-request" do
+          #{ _('Create merge request') }