[#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.

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')

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';