From 37e3d42b62bf2460f7443ac9e57661140983d335 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 6 Oct 2017 12:32:39 +0100
Subject: [PATCH] UX review

---
 .../javascripts/vue_shared/components/issue/issue_warning.vue | 2 +-
 app/assets/stylesheets/framework/variables.scss               | 1 +
 app/assets/stylesheets/pages/issuable.scss                    | 4 ++++
 app/assets/stylesheets/pages/note_form.scss                   | 4 ++++
 app/views/projects/_md_preview.html.haml                      | 2 +-
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 35d6f333417..16c0a8efcd2 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -32,7 +32,7 @@
   <div class="issuable-note-warning">
     <i
       aria-hidden="true"
-      class="fa"
+      class="fa icon"
       :class="iconClass"
       v-if="!isLockedAndConfidential"
     ></i>
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d7a8bfab08a..0dafe039028 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -703,3 +703,4 @@ $java: #70ad51;
 Issuable warning
 */
 $issuable-warning-size: 24px;
+$issuable-warning-icon-margin: 4px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e8d57214cb7..db3b7e89d7b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -14,6 +14,10 @@
   width: $issuable-warning-size;
   height: $issuable-warning-size;
   text-align: center;
+
+  &:first-of-type {
+    margin-right: $issuable-warning-icon-margin;
+  }
 }
 
 .sidebar-item-icon {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 14ce8b97c13..716bc4090cc 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -110,6 +110,10 @@
   padding: 3px 12px;
   margin: auto;
   align-items: center;
+
+  .icon {
+    margin-right: $issuable-warning-icon-margin;
+  }
 }
 
 .disabled-comment .issuable-note-warning {
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 119a8279d89..770608eddff 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -2,7 +2,7 @@
 
 - if defined?(@merge_request) && @merge_request.discussion_locked?
   .issuable-note-warning
-    = icon('lock')
+    = icon('lock', class: 'icon')
     %span
       = _('This merge request is locked.')
       = _('Only project members can comment.')
-- 
GitLab