From 973c5240fe16a134f80ff2b9d99070cb4b49f2a8 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 13 Nov 2018 21:25:35 -0600
Subject: [PATCH] Fix styling of snippet and commit discussion comments

---
 app/assets/stylesheets/pages/notes.scss     | 20 ++++++++++++++++++++
 app/views/discussions/_discussion.html.haml |  8 ++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 35e01c9c807..507d90e9bbf 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -910,3 +910,23 @@ $note-form-margin-left: 72px;
     }
   }
 }
+
+//This needs to be deleted when Snippet/Commit comments are convered to Vue
+// See https://gitlab.com/gitlab-org/gitlab-ce/issues/53918#note_117038785
+.unstyled-comments {
+
+  .discussion-header {
+    padding: $gl-padding;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .note-wrapper.outlined {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .discussion-form-container {
+    padding: $gl-padding;
+  }
+}
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index 1765251c93d..10187129a33 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -1,12 +1,12 @@
 - expanded = discussion.expanded?
-%li.note.note-discussion.timeline-entry
+%li.note.note-discussion.timeline-entry.unstyled-comments
   .timeline-entry-inner
-    .timeline-icon
-      = link_to user_path(discussion.author) do
-        = image_tag avatar_icon_for_user(discussion.author), class: "avatar s40"
     .timeline-content
       .discussion.js-toggle-container{ data: { discussion_id: discussion.id } }
         .discussion-header
+          .timeline-icon
+            = link_to user_path(discussion.author) do
+              = image_tag avatar_icon_for_user(discussion.author), class: "avatar s40"
           .discussion-actions
             %button.note-action-button.discussion-toggle-button.js-toggle-button{ type: "button", class: ("js-toggle-lazy-diff" unless expanded) }
               - if expanded