Fixed styling of image comment badges on commits

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

4 files changed, 11 insertions, 1 deletions

diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js
index eddaeda9578..000157efad0 100644
--- a/app/assets/javascripts/image_diff/helpers/badge_helper.js
+++ b/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);
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5405f20a760..18c62cb4f1e 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/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;
diff --git a/changelogs/unreleased/commit-badge-style-fix.yml b/changelogs/unreleased/commit-badge-style-fix.yml
new file mode 100644
index 00000000000..d7b37717853
--- /dev/null
+++ b/changelogs/unreleased/commit-badge-style-fix.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed styling of image comment badges on commits
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/image_diff/helpers/badge_helper_spec.js b/spec/javascripts/image_diff/helpers/badge_helper_spec.js
index 8ea05203d00..b3001d45e3c 100644
--- a/spec/javascripts/image_diff/helpers/badge_helper_spec.js
+++ b/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);
     });