Use pointer:crosshair when hovering in design view

- use gitlab-ui utlities where possible
- improve accessibilty of new comment button
- remove redundant/unused classes
- update specs
- add changelog

app/assets/javascripts/design_management/components/design_overlay.vue

 <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';
@@ -242,12 +243,15 @@ export default {
       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 +259,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"

app/assets/stylesheets/components/design_management/design.scss

@@ -34,6 +34,10 @@
       background-color: $gray-500;
     }
   }
+
+  .design-detail-overlay-add-comment {
+    cursor: crosshair;
+  }
 }
 
 .design-presentation-wrapper {

changelogs/unreleased/225242-use-pointer-crosshair-when-hovering-on-the-design-view.yml

+---
+title: Use pointer:crosshair when hovering on the design view
+merge_request: 39671
+author:
+type: changed

locale/gitlab.pot

@@ -1530,6 +1530,9 @@ msgstr ""
 msgid "Add comment now"
 msgstr ""
 
+msgid "Add comment to design"
+msgstr ""
+
 msgid "Add deploy freeze"
 msgstr ""
 

spec/frontend/design_management/components/design_overlay_spec.js

@@ -11,7 +11,6 @@ describe('Design overlay component', () => {
 
   const mockDimensions = { width: 100, height: 100 };
 
-  const findOverlay = () => wrapper.find('.image-diff-overlay');
   const findAllNotes = () => wrapper.findAll('.js-image-badge');
   const findCommentBadge = () => wrapper.find('.comment-indicator');
   const findFirstBadge = () => findAllNotes().at(0);
@@ -56,9 +55,7 @@ describe('Design overlay component', () => {
   it('should have correct inline style', () => {
     createComponent();
 
-    expect(wrapper.find('.image-diff-overlay').attributes().style).toBe(
-      'width: 100px; height: 100px; top: 0px; left: 0px;',
-    );
+    expect(wrapper.attributes().style).toBe('width: 100px; height: 100px; top: 0px; left: 0px;');
   });
 
   it('should emit `openCommentForm` when clicking on overlay', () => {
@@ -69,7 +66,7 @@ describe('Design overlay component', () => {
     };
 
     wrapper
-      .find('.image-diff-overlay-add-comment')
+      .find('[data-qa-selector="design_image_button"]')
       .trigger('mouseup', { offsetX: newCoordinates.x, offsetY: newCoordinates.y });
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('openCommentForm')).toEqual([
@@ -309,7 +306,7 @@ describe('Design overlay component', () => {
 
       it.each`
         element            | getElementFunc      | event
-        ${'overlay'}       | ${findOverlay}      | ${'mouseleave'}
+        ${'overlay'}       | ${() => wrapper}    | ${'mouseleave'}
         ${'comment badge'} | ${findCommentBadge} | ${'mouseup'}
       `(
         'should emit `openCommentForm` event when $event fired on $element element',

spec/frontend/design_management/components/design_presentation_spec.js

@@ -42,7 +42,7 @@ describe('Design management design presentation component', () => {
     wrapper.element.scrollTo = jest.fn();
   }
 
-  const findOverlayCommentButton = () => wrapper.find('.image-diff-overlay-add-comment');
+  const findOverlayCommentButton = () => wrapper.find('[data-qa-selector="design_image_button"]');
 
   /**
    * Spy on $refs and mock given values