Fix design comment pin sizing bug

Regression somewhere meant that pin for
new design comments were both
too small, and slightly incorrectly positioned.

This commit fixes both issues and updates test snapshots.

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

 <script>
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'DesignNotePin',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     position: {
@@ -47,13 +47,13 @@ export default {
       'btn-transparent comment-indicator': isNewNote,
       'js-image-badge badge badge-pill': !isNewNote,
     }"
-    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center"
+    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"
     @click="$emit('click', $event)"
   >
-    <icon v-if="isNewNote" name="image-comment-dark" />
+    <gl-icon v-if="isNewNote" name="image-comment-dark" :size="24" />
     <template v-else>
       {{ label }}
     </template>

app/assets/javascripts/design_management_new/components/design_note_pin.vue

 <script>
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'DesignNotePin',
   components: {
-    Icon,
+    GlIcon,
   },
   props: {
     position: {
@@ -47,13 +47,13 @@ export default {
       'btn-transparent comment-indicator': isNewNote,
       'js-image-badge badge badge-pill': !isNewNote,
     }"
-    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center"
+    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"
     @click="$emit('click', $event)"
   >
-    <icon v-if="isNewNote" name="image-comment-dark" />
+    <gl-icon v-if="isNewNote" name="image-comment-dark" :size="24" />
     <template v-else>
       {{ label }}
     </template>

app/assets/stylesheets/pages/diff.scss

@@ -992,7 +992,8 @@ table.code {
 }
 
 .frame .badge.badge-pill,
-.frame .image-comment-badge {
+.frame .image-comment-badge,
+.frame .comment-indicator {
   // Center align badges on the frame
   transform: translate(-50%, -50%);
 }

changelogs/unreleased/design-management-pin.yml

+---
+title: Fix sizing of pins for new design comments
+merge_request: 37541
+author:
+type: fixed

spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap

@@ -3,13 +3,13 @@
 exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px; cursor: move;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;
@@ -17,7 +17,7 @@ exports[`Design note pin component should match the snapshot of note when reposi
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -30,13 +30,13 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;

spec/frontend/design_management_new/components/__snapshots__/design_note_pin_spec.js.snap

@@ -3,13 +3,13 @@
 exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px; cursor: move;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;
@@ -17,7 +17,7 @@ exports[`Design note pin component should match the snapshot of note when reposi
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -30,13 +30,13 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
   style="left: 10px; top: 10px;"
   type="button"
 >
-  <icon-stub
+  <gl-icon-stub
     name="image-comment-dark"
-    size="16"
+    size="24"
   />
 </button>
 `;