Make image markers independent of badge class

What does this MR do and why?

Make existing diff markers independent of badge badge-pill class, and use the common component DesignNotePin.

• app/assets/javascripts/image_diff/helpers/badge_helper.js #344316 (closed)
• app/assets/javascripts/deprecated_notes.js #344312 (closed)
• app/assets/javascripts/image_diff/image_diff.js #344313 (closed)
• app/assets/javascripts/image_diff/helpers/dom_helper.js #344314 (closed)
• app/assets/javascripts/mr_notes/init_notes.js #344315 (closed)
• app/assets/javascripts/diffs/components/image_diff_overlay.vue #344295 (closed)
• app/assets/javascripts/design_management/components/design_notes/design_discussion.vue #344294 (closed)
• app/assets/javascripts/image_diff/replaced_image_diff.js #344310 (closed)

Reviewing changes

1. app/assets/javascripts/batch_comments/components/diff_file_drafts.vue: Add a comment and start a review. Your comment will be added to the "draft" state.

2. app/assets/javascripts/diffs/components/diff_discussions.vue: Discussions the in MR

3. app/assets/javascripts/diffs/components/image_diff_overlay.vue: The diff image in the MR.

4. app/assets/javascripts/image_diff/helpers/badge_helper.js: Referenced by other files like deprecated_notes.

5. app/assets/javascripts/image_diff/helpers/dom_helper.js: Referenced and used by other files like deprecated_notes.

6. app/assets/javascripts/image_diff/image_diff.js: Navigate to a commit (Eg. https://gdk.local:3000/h5bp/html5-boilerplate/-/commit/16459007b2eab725b235c30da97bcb245f85cfcf) and add / remove a new image diff comment.

7. app/assets/javascripts/image_diff/replaced_image_diff.js: in MR switch between 2-up, Swipe, and Onion mode.

8. app/assets/javascripts/deprecated_notes.js: Navigate to a commit (Eg. https://gdk.local:3000/h5bp/html5-boilerplate/-/commit/16459007b2eab725b235c30da97bcb245f85cfcf) and add a new comment on image.
   

9. app/views/discussions/_notes.html.haml and app/views/shared/notes/_note.html.haml: Navigate to a commit (Eg. https://gdk.local:3000/h5bp/html5-boilerplate/-/commit/16459007b2eab725b235c30da97bcb245f85cfcf) and add comments. These files render the HTML in discussion.

Screenshots or screen recordings

New pin, and resolved pin

In diffs

** Draft comments **

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.