Update style of snippet detail page

CHANGELOG

@@ -59,7 +59,7 @@ v 8.1.0 (unreleased)
   - Fix position of hamburger in header for smaller screens (Han Loong Liauw)
   - Fix bug where Emojis in Markdown would truncate remaining text (Sakata Sinji)
   - Persist filters when sorting on admin user page (Jerry Lukins)
-  - Added last modified date to snippets#show (Han Loong Liauw)
+  - Update style of snippet detail page (Han Loong Liauw)
   - Allow dashboard and group issues/MRs to be filtered by label
   - Add spellcheck=false to certain input fields
   - Invalidate stored service password if the endpoint URL is changed

app/assets/stylesheets/pages/snippets.scss

@@ -31,28 +31,22 @@
   }
 }
 
-.snippet-details {
+.snippet-holder {
+  .snippet-details {
     .page-title {
       margin-top: -15px;
       padding: 10px 0;
       margin-bottom: 0;
       color: #5c5d5e;
-    font-size: 13px;
-    @include clearfix();
+      font-size: 16px;
 
-    .creator {
-      color: $gl-gray;
-      a {
-        color: $gl-gray;
-      }
+      .author {
+        color: #5c5d5e;
       }
 
       .snippet-id {
         color: #5c5d5e;
       }
-    .btn {
-      padding: 10px $gl-padding;
-    }
     }
 
     .snippet-title {
@@ -73,8 +67,14 @@
         display: none;
       }
     }
+  }
+
+  .file-holder {
+    border-top: 0;
+  }
 }
 
+
 .snippet-box {
   @include border-radius(2px);
 

app/views/projects/snippets/show.html.haml

 - page_title @snippet.title, "Snippets"
 = render "header_title"
-= render 'shared/snippets/header'
 
-.file-holder
+.snippet-holder
+  = render 'shared/snippets/header'
+
+  %article.file-holder
     .file-title
-    %i.fa.fa-file
+      = blob_icon 0, @snippet.file_name
       %strong
         = @snippet.file_name
-    .file-actions
-      .btn-group
+      .file-actions.hidden-xs
+        .btn-group.tree-btn-group
           = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
 
     = render 'shared/snippets/blob'
-%div#notes= render "projects/notes/notes_with_form"
+
+  %div#notes= render "projects/notes/notes_with_form"

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

-.snippet
-  .snippet-details
+.snippet-details
   .page-title
     .snippet-box{class: visibility_level_color(@snippet.visibility_level)}
       = visibility_level_icon(@snippet.visibility_level)

app/views/snippets/show.html.haml

 - page_title @snippet.title, "Snippets"
-= render 'shared/snippets/header'
 
-.file-holder
+.snippet-holder
+  = render 'shared/snippets/header'
+
+  %article.file-holder
     .file-title
-    %i.fa.fa-file
+      = blob_icon 0, @snippet.file_name
       %strong
         = @snippet.file_name
-    .file-actions
-      .btn-group
+      .file-actions.hidden-xs
+        .btn-group.tree-btn-group
           = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
     = render 'shared/snippets/blob'