Make snippet list easier to scan

app/assets/stylesheets/framework/snippets.scss

@@ -4,7 +4,12 @@
   }
 
   .snippet-filename {
-    padding: 0 2px;
+    color: $gl-text-color-secondary;
+    font-weight: normal;
+  }
+
+  .snippet-info {
+    color: $gl-text-color-secondary;
   }
 }
 

app/views/shared/snippets/_snippet.html.haml

@@ -7,8 +7,9 @@
   .title
     = link_to reliable_snippet_path(snippet) do
       = snippet.title
-    - if snippet.file_name
-      %span.snippet-filename.monospace.d-none.d-sm-inline-block
+    - if snippet.file_name.present?
+      %span.snippet-filename.d-none.d-sm-inline-block.ml-2
+        = sprite_icon('doc-code', size: 16, css_class: 'file-icon align-text-bottom')
         = snippet.file_name
 
     %ul.controls

changelogs/unreleased/31964-make-snippet-list-easier-to-scan.yml

+---
+title: Make snippet list easier to scan
+merge_request: 19490
+author:
+type: other