Fixed styling of image comment badges on commits

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54849

app/assets/javascripts/image_diff/helpers/badge_helper.js

@@ -12,7 +12,7 @@ export function createImageBadge(noteId, { x, y }, classNames = []) {
 }
 
 export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
-  const buttonEl = createImageBadge(noteId, coordinate, ['badge']);
+  const buttonEl = createImageBadge(noteId, coordinate, ['badge', 'badge-pill']);
   buttonEl.innerText = badgeText;
 
   containerEl.appendChild(buttonEl);

app/assets/stylesheets/pages/diff.scss

@@ -914,6 +914,7 @@
     padding: 0;
     width: (2px * $image-comment-cursor-left-offset);
     height: (2px * $image-comment-cursor-top-offset);
+    color: $blue-400;
     // center the indicator to match the top left click region
     margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
     margin-left: (-1px * $image-comment-cursor-left-offset) + 1;

changelogs/unreleased/commit-badge-style-fix.yml

+---
+title: Fixed styling of image comment badges on commits
+merge_request:
+author:
+type: fixed

spec/javascripts/image_diff/helpers/badge_helper_spec.js

@@ -61,6 +61,10 @@ describe('badge helper', () => {
       expect(buttonEl).toBeDefined();
     });
 
+    it('should add badge classes', () => {
+      expect(buttonEl.className).toContain('badge badge-pill');
+    });
+
     it('should set the badge text', () => {
       expect(buttonEl.innerText).toEqual(badgeText);
     });