Correct disabled note form style

app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue

 <script>
   export default {
-    name: 'discussionLockedWidget',
+    computed: {
+      icon() {
+        return gl.utils.spriteIcon('lock');
+      },
+    },
   };
 
 </script>
@@ -8,7 +12,8 @@
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning">
-      This issue is locked. Only <b>project members</b> can comment.
+      <span class="icon" v-html="icon"></span>
+      <span>This issue is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>
 </template>

app/assets/stylesheets/pages/note_form.scss

@@ -112,6 +112,22 @@
   align-items: center;
 }
 
+.disabled-comment .issuable-note-warning {
+  border: none;
+  border-radius: $label-border-radius;
+  padding-top: $gl-vert-padding;
+  padding-bottom: $gl-vert-padding;
+
+  .icon svg {
+    position: relative;
+    top: 2px;
+    margin-right: $btn-xs-side-margin;
+    width: $gl-font-size;
+    height: $gl-font-size;
+    fill: $orange-600;
+  }
+}
+
 .sidebar-item-value {
   .fa {
     background-color: inherit;

app/views/shared/notes/_notes_with_form.html.haml

@@ -27,9 +27,11 @@
 - elsif discussion_locked
   .disabled-comment.text-center.prepend-top-default
     %span.issuable-note-warning
-      This
-      = issuable.class.to_s.titleize.downcase
-      is locked. Only
-      %b project members
-      can comment.
+      %span.icon= sprite_icon('lock', size: 14)
+      %span
+        This
+        = issuable.class.to_s.titleize.downcase
+        is locked. Only
+        %b project members
+        can comment.
 %script.js-notes-data{ type: "application/json" }= initial_notes_data(autocomplete).to_json.html_safe