From 553f3f28e5da2810551f92f25f929cd07dabaf6c Mon Sep 17 00:00:00 2001
From: Ryan Poon <96387349+sopa301@users.noreply.github.com>
Date: Sat, 27 Apr 2024 15:48:07 +0800
Subject: [PATCH] [#2184] Fix Inconsistent Line Number Colours (#2185)

Fix Inconsistent Line Number Colours

A regression has occurred where the line numbers no longer have a
consistent grey color.

Let's fix the bug and add a test to catch further regressions of the
same nature.
---
 .../codeView/codeView_codeHighlighting.cy.js  | 25 +++++++++++++++++++
 frontend/src/components/c-segment.vue         |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/tests/codeView/codeView_codeHighlighting.cy.js b/frontend/cypress/tests/codeView/codeView_codeHighlighting.cy.js
index adbd9c338c..727478e8f0 100644
--- a/frontend/cypress/tests/codeView/codeView_codeHighlighting.cy.js
+++ b/frontend/cypress/tests/codeView/codeView_codeHighlighting.cy.js
@@ -1,5 +1,30 @@
 // Assumes: RepoSense repo from 03/05/2018 to current date
 describe('code highlighting works properly', () => {
+  it('line numbers should all have the same colour', () => {
+    cy.get('.icon-button.fa-code')
+      .should('exist')
+      .first()
+      .click();
+
+    cy.get('#tab-authorship .files', { timeout: 90000 })
+      .should('be.visible');
+
+    cy.get('.line-number') // this is just a wrapper
+      .first()
+      .children()
+      // The actual line number element. We can't name the class
+      // because it's generated by the code highlighter.
+      .first()
+      .should('have.css', 'color')
+      .then((firstColor) => {
+        cy.get('.line-number')
+          .each((el) => cy.wrap(el)
+            .children()
+            .first()
+            .should('have.css', 'color', firstColor));
+      });
+  });
+
   it('should highlight code when there is a single author', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
index ac52d5bbcd..a27037607b 100644
--- a/frontend/src/components/c-segment.vue
+++ b/frontend/src/components/c-segment.vue
@@ -73,7 +73,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../styles/hightlight-js-style.css';
 @import '../styles/_colors.scss';