Bug-1915777: Make test tags theme aware

[moijes12]

This change updates the tag options used in the TestHeader and SubtestsRevisionHeader to change the tag background and font based on the theme chosen (dark / light). New background colors are defined in the styles/Colors.ts for the option and existing font colors are reused for the font.

This has been tested locally and the screenshots are as below.

1. TestHeader update

2. Subtests Header Update

npm run fix-all has been applied before creating the commit.

@davehunt @kala-moz

[netlify]

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	1c42b4d
🔍 Latest deploy log	https://app.netlify.com/projects/mozilla-perfcompare/deploys/69944f71e6b3cc00083ceb1f
😎 Deploy Preview	https://deploy-preview-993--mozilla-perfcompare.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.48%. Comparing base (fa5cbcd) to head (1c42b4d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #993      +/-   ##
==========================================
+ Coverage   96.46%   96.48%   +0.02%     
==========================================
  Files         104      104              
  Lines        3025     3044      +19     
  Branches      691      695       +4     
==========================================
+ Hits         2918     2937      +19     
  Misses        106      106              
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[moijes12]

Converting this to draft. I will have a look at improving the tests

[moijes12]

@kala-moz Since this is a change to an UI element color, do we have to write tests for it ?

[moijes12]

Adding latest screenshots

[moijes12]

@kala-moz I am opening this back for review again. In the latest commit, I have moved the logic to get the required colors for tags and text into helper functions. These helper functions take the theme as argument. Unit tests have been added to validate the helpers. The changes have been rebased over the latest changes in main.

[kala-moz]

Thanks for your PR! There is a faster way to accomplish this using MUI's dark theme setup.

First, go to

perfcompare/src/theme/protocolTheme.ts

Line 49 in fda1fb2

};

And add the colors for the tag options for both dark and light mode, along with the a new inverted property for text:

const lightMode = { 
...,
  text: {
...,
    inverted: Colors.InvertedText,
  },
...,
  tagOptions: {
    option1: Colors.TagOptionBackground3n,
    option2: Colors.TagOptionBackground3n1,
    option3: Colors.TagOptionBackground3n2,
  },
};

const darkMode = { 
...,
 text: {
   ...,
    inverted: Colors.InvertedTextDark,
  },
...,
  tagOptions: {
    option1: Colors.TagOptionBackground3nDark,
    option2: Colors.TagOptionBackground3n1Dark,
    option3: Colors.TagOptionBackground3n2Dark,
  },
};

Next, add a Box MUI element to TestHeader here replacing the parent div and and add the overriding sx prop styles:

perfcompare/src/components/CompareResults/TestHeader.tsx

Line 121 in fda1fb2

<div className={styles.tagsOptions}>

    <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '4px',
          margin: '0 4px',
          textAlign: 'right',
          '& span': {
            color: 'text.inverted',
          },
          '& span:nth-child(3n)': {
           //using our new tag options color here that we created in protocolTheme
            bgcolor: 'tagOptions.option1',
          },
          '& span:nth-child(3n+1)': {
            bgcolor: 'tagOptions.option2',
          },
          '& span:nth-child(3n+2)': {
            bgcolor: 'tagOptions.option3',
          },
        }}
      >
  ....
     </Box>

Do the same for SubtestRevisionHeader:

perfcompare/src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx

Line 176 in fda1fb2

<div className={styles.tagsOptions}>

You can delete all the unused code and no need for new tests.