1 files changed, 31 insertions, 28 deletions
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 51f44afe55e..ab6875a09f7 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -1,44 +1,47 @@
-%p
-  %strong Request URL:
-  POST
-  = hook_log.url
-  = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+%span.gl-display-flex.gl-align-items-center
+  %h4
+    POST
+    = hook_log.url
+  %span.badge.gl-badge.badge-pill.badge-muted.sm.gl-ml-3
+    = hook_log.trigger.singularize.titleize
 
 %p
-  %strong Trigger:
-  %td.d-none.d-sm-block
-    %span.badge.badge-gray.deploy-project-label
-      = hook_log.trigger.singularize.titleize
-%p
-  %strong Elapsed time:
-  #{number_with_precision(hook_log.execution_duration, precision: 2)} sec
-%p
-  %strong Request time:
-  = time_ago_with_tooltip(hook_log.created_at)
+  = _('Completed in %{duration_seconds} seconds (%{relative_time})').html_safe % { duration_seconds: number_with_precision(hook_log.execution_duration, precision: 2), relative_time: time_ago_with_tooltip(hook_log.created_at) }
 
 %hr
 
 - if hook_log.internal_error_message.present?
-  .bs-callout.bs-callout-danger
-    = hook_log.internal_error_message
+  .gl-alert-container
+    .gl-alert.gl-alert-danger
+      .gl-alert-container
+        = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+        .gl-alert-content
+          %h4.gl-alert-title= _('Internal error occured while delivering this webhook.')
+          .gl-alert-body
+            = _('Error: %{error}') % { error: hook_log.internal_error_message }
+
+%h4= _('Response')
+= render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+%pre.gl-mt-3
+  :escaped
+    #{hook_log.response_body}
 
-%h5 Request headers:
+%h5= _('Headers')
 %pre
-  - hook_log.request_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.response_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Request body:
+%h4.gl-mt-6= _('Request')
 %pre
   :escaped
     #{Gitlab::Json.pretty_generate(hook_log.request_data)}
-%h5 Response headers:
+
+%h5= _('Headers')
 %pre
-  - hook_log.response_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.request_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Response body:
-%pre
-  :escaped
-    #{hook_log.response_body}
+
+