UX review

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>

app/assets/stylesheets/framework/variables.scss

@@ -703,3 +703,4 @@ $java: #70ad51;
 Issuable warning
 */
 $issuable-warning-size: 24px;
+$issuable-warning-icon-margin: 4px;

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 {

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 {

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.')