1 files changed, 27 insertions, 23 deletions
diff --git a/app/views/shared/file_hooks/_index.html.haml b/app/views/shared/file_hooks/_index.html.haml
index ba968c6b2d2..9f1b11d6ab5 100644
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
@@ -1,26 +1,30 @@
 - file_hooks = Gitlab::FileHook.files
 
-.row.gl-mt-3
-  .col-lg-4
-    %h4.gl-mt-0
-      = _('File Hooks')
-    %p
-      = _('File hooks are similar to system hooks but are executed as files instead of sending data to a URL.')
-      = link_to _('For more information, see the File Hooks documentation.'), help_page_path('administration/file_hooks')
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
+        = _('File Hooks')
+  %p.gl-text-secondary
+    = _('File hooks are similar to system hooks but are executed as files instead of sending data to a URL.')
+    = link_to _('For more information, see the File Hooks documentation.'), help_page_path('administration/file_hooks')
 
-
-  .col-lg-8.gl-mb-3
-    - if file_hooks.any?
-      = render Pajamas::CardComponent.new do |c|
-        - c.with_header do
-          = _('File Hooks (%{count})') % { count: file_hooks.count }
-        - c.with_body do
-          %ul.content-list
-            - file_hooks.each do |file|
-              %li
-                .monospace
-                  = File.basename(file)
-    - else
-      = render Pajamas::CardComponent.new do |c|
-        - c.with_body do
-          .nothing-here-block= _('No file hooks found.')
+  .gl-mb-3
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body'}) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('File Hooks')
+            %span.gl-new-card-count
+              = sprite_icon('hook', css_class: 'gl-mr-2')
+              #{file_hooks.count}
+      - c.with_body do
+        .gl-new-card-content
+          - if file_hooks.any?
+            %ul.content-list{ class: 'gl-my-n3!' }
+              - file_hooks.each do |file|
+                %li.label-list-item
+                  .monospace
+                    = File.basename(file)
+          - else
+            .gl-new-card-empty.gl-text-center= _('No file hooks found.')