1 files changed, 30 insertions, 19 deletions

diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue
index 926e7c74802..5c4a3ab5f94 100644
--- a/app/assets/javascripts/design_management/components/design_overlay.vue
+++ b/app/assets/javascripts/design_management/components/design_overlay.vue
@@ -1,4 +1,5 @@
 <script>
+import { __ } from '~/locale';
 import activeDiscussionQuery from '../graphql/queries/active_discussion.query.graphql';
 import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
 import DesignNotePin from './design_note_pin.vue';
@@ -236,18 +237,26 @@ export default {
       });
     },
     isNoteInactive(note) {
-      return this.activeDiscussion.id && this.activeDiscussion.id !== note.id;
+      const discussionNotes = note.discussion.notes.nodes || [];
+
+      return (
+        this.activeDiscussion.id &&
+        !discussionNotes.some(({ id }) => id === this.activeDiscussion.id)
+      );
     },
     designPinClass(note) {
       return { inactive: this.isNoteInactive(note), resolved: note.resolved };
     },
   },
+  i18n: {
+    newCommentButtonLabel: __('Add comment to design'),
+  },
 };
 </script>
 
 <template>
   <div
-    class="position-absolute image-diff-overlay frame"
+    class="gl-absolute gl-top-0 gl-left-0 frame"
     :style="overlayStyle"
     @mousemove="onOverlayMousemove"
     @mouseleave="onNoteMouseup"
@@ -255,26 +264,28 @@ export default {
     <button
       v-show="!disableCommenting"
       type="button"
-      class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
+      role="button"
+      :aria-label="$options.i18n.newCommentButtonLabel"
+      class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent design-detail-overlay-add-comment"
       data-qa-selector="design_image_button"
       @mouseup="onAddCommentMouseup"
     ></button>
-    <template v-for="note in notes">
-      <design-note-pin
-        v-if="resolvedDiscussionsExpanded || !note.resolved"
-        :key="note.id"
-        :label="note.index"
-        :repositioning="isMovingNote(note.id)"
-        :position="
-          isMovingNote(note.id) && movingNoteNewPosition
-            ? getNotePositionStyle(movingNoteNewPosition)
-            : getNotePositionStyle(note.position)
-        "
-        :class="designPinClass(note)"
-        @mousedown.stop="onNoteMousedown($event, note)"
-        @mouseup.stop="onNoteMouseup(note)"
-      />
-    </template>
+
+    <design-note-pin
+      v-for="note in notes"
+      v-if="resolvedDiscussionsExpanded || !note.resolved"
+      :key="note.id"
+      :label="note.index"
+      :repositioning="isMovingNote(note.id)"
+      :position="
+        isMovingNote(note.id) && movingNoteNewPosition
+          ? getNotePositionStyle(movingNoteNewPosition)
+          : getNotePositionStyle(note.position)
+      "
+      :class="designPinClass(note)"
+      @mousedown.stop="onNoteMousedown($event, note)"
+      @mouseup.stop="onNoteMouseup(note)"
+    />
 
     <design-note-pin
       v-if="currentCommentForm"