Update style of snippet detail page

5 files changed, 83 insertions, 79 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8b225d264e8..df4daddeac3 100644
--- a/CHANGELOG
+++ b/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
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index af391481764..f8a8636818a 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -31,50 +31,50 @@
   }
 }
 
-.snippet-details {
-  .page-title {
-    margin-top: -15px;
-    padding: 10px 0;
-    margin-bottom: 0;
-    color: #5c5d5e;
-    font-size: 13px;
-    @include clearfix();
+.snippet-holder {
+  .snippet-details {
+    .page-title {
+      margin-top: -15px;
+      padding: 10px 0;
+      margin-bottom: 0;
+      color: #5c5d5e;
+      font-size: 16px;
 
-    .creator {
-      color: $gl-gray;
-      a {
-        color: $gl-gray;
+      .author {
+        color: #5c5d5e;
       }
-    }
 
-    .snippet-id {
-      color: #5c5d5e;
+      .snippet-id {
+        color: #5c5d5e;
+      }
     }
-    .btn {
-      padding: 10px $gl-padding;
+
+    .snippet-title {
+      margin: 0;
+      font-size: 23px;
+      color: #313236;
     }
-  }
 
-  .snippet-title {
-    margin: 0;
-    font-size: 23px;
-    color: #313236;
-  }
+    @media (max-width: $screen-md-max) {
+      .new-snippet-link {
+        display: none;
+      }
+    }
 
-  @media (max-width: $screen-md-max) {
-    .new-snippet-link {
-      display: none;
+    @media (max-width: $screen-sm-max) {
+      .creator,
+      .page-title .btn-close {
+        display: none;
+      }
     }
   }
 
-  @media (max-width: $screen-sm-max) {
-    .creator,
-    .page-title .btn-close {
-      display: none;
-    }
+  .file-holder {
+    border-top: 0;
   }
 }
 
+
 .snippet-box {
   @include border-radius(2px);
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 1aeb0da2016..5d706942f2d 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,15 +1,18 @@
 - page_title @snippet.title, "Snippets"
 = render "header_title"
-= render 'shared/snippets/header'
-
-.file-holder
-  .file-title
-    %i.fa.fa-file
-    %strong
-      = @snippet.file_name
-    .file-actions
-      .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"
+
+.snippet-holder
+  = render 'shared/snippets/header'
+
+  %article.file-holder
+    .file-title
+      = blob_icon 0, @snippet.file_name
+      %strong
+        = @snippet.file_name
+      .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"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index 95786ee3377..0a4a790ec5e 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -1,25 +1,24 @@
-.snippet
-  .snippet-details
-    .page-title
-      .snippet-box{class: visibility_level_color(@snippet.visibility_level)}
-        = visibility_level_icon(@snippet.visibility_level)
-        = visibility_level_label(@snippet.visibility_level)
-      %span.snippet-id Snippet ##{@snippet.id}
-      %span.creator
-        · created by #{link_to_member(@project, @snippet.author, size: 24)}
-        ·
-        = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-        - if @snippet.updated_at != @snippet.created_at
-          %span
-            ·
-            = icon('edit', title: 'edited')
-            = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
+.snippet-details
+  .page-title
+    .snippet-box{class: visibility_level_color(@snippet.visibility_level)}
+      = visibility_level_icon(@snippet.visibility_level)
+      = visibility_level_label(@snippet.visibility_level)
+    %span.snippet-id Snippet ##{@snippet.id}
+    %span.creator
+      · created by #{link_to_member(@project, @snippet.author, size: 24)}
+      ·
+      = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
+      - if @snippet.updated_at != @snippet.created_at
+        %span
+          ·
+          = icon('edit', title: 'edited')
+          = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
 
-      .pull-right
-        - if @snippet.project_id?
-          = render "projects/snippets/actions"
-        - else
-          = render "snippets/actions"
-    .gray-content-block.middle-block
-      %h2.snippet-title
-        = gfm escape_once(@snippet.title)
+    .pull-right
+      - if @snippet.project_id?
+        = render "projects/snippets/actions"
+      - else
+        = render "snippets/actions"
+  .gray-content-block.middle-block
+    %h2.snippet-title
+      = gfm escape_once(@snippet.title)
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 612d7b65d8d..69d8899d4c1 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,12 +1,14 @@
 - page_title @snippet.title, "Snippets"
-= render 'shared/snippets/header'
 
-.file-holder
-  .file-title
-    %i.fa.fa-file
-    %strong
-      = @snippet.file_name
-    .file-actions
-      .btn-group
-        = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
-  = render 'shared/snippets/blob'
+.snippet-holder
+  = render 'shared/snippets/header'
+
+  %article.file-holder
+    .file-title
+      = blob_icon 0, @snippet.file_name
+      %strong
+        = @snippet.file_name
+      .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'