Added opacity transition to pins

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33493

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

@@ -47,7 +47,7 @@ export default {
       'btn-transparent comment-indicator': isNewNote,
       'js-image-badge badge badge-pill': !isNewNote,
     }"
-    class="position-absolute"
+    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"

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

@@ -9,8 +9,16 @@
     top: 35px;
   }
 
-  .inactive {
-    opacity: 0.5;
+  .design-pin {
+    transition: opacity 0.5s ease;
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
   }
 }
 

changelogs/unreleased/217692-design-view-highlight-focused-design-pins-follow-up.yml

+---
+title: Add opacity transition to active design discussion pins
+merge_request: 33493
+author:
+type: other

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design discussions component should match the snapshot of note when repositioning 1`] = `
+exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
 <button
   aria-label="Comment form position"
-  class="position-absolute btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
   style="left: 10px; top: 10px; cursor: move;"
   type="button"
 >
@@ -14,10 +14,10 @@ exports[`Design discussions component should match the snapshot of note when rep
 </button>
 `;
 
-exports[`Design discussions component should match the snapshot of note with index 1`] = `
+exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="position-absolute js-image-badge badge badge-pill"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -27,10 +27,10 @@ exports[`Design discussions component should match the snapshot of note with ind
 </button>
 `;
 
-exports[`Design discussions component should match the snapshot of note without index 1`] = `
+exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="position-absolute btn-transparent comment-indicator"
+  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator"
   style="left: 10px; top: 10px;"
   type="button"
 >

spec/frontend/design_management/components/design_note_pin_spec.js

 import { shallowMount } from '@vue/test-utils';
 import DesignNotePin from '~/design_management/components/design_note_pin.vue';
 
-describe('Design discussions component', () => {
+describe('Design note pin component', () => {
   let wrapper;
 
   function createComponent(propsData = {}) {