[nimbus] alternating row colors on summary tables makes it tricky to scan

[pdehaan]

Per my comment in the EXP-648 "I want to be able to see branches and full audience information on the Summary/Design Page" Epic:

Only immediate issue I noticed was that the Figma specs didn't specify alternating colored row backgrounds for the various tables, but the current tables have alternating white/grey colored backgrounds.

Re: https://stage.experimenter.nonprod.dataops.mozgcp.net/nimbus/browser-settings-attr-targeting-test

Personally, I feel that when every single line in the page/tables alternate, it really loses the effect of highlighting important information. The table rows already have borders to make it easier to scan the row heading/label vs the content (since each table has horizontal based label:value layouts). I think the only place where the colored header makes sense is in the "Branches" table, where we have a table header for the branch name (see "control" and "treatment" below):

But, because not only the header row has a background, but EVERY row, it makes it much harder to visually distinguish the important row headers.

┆Issue is synchronized with this Jira Task ┆Issue Number: EXP-854

[pdehaan]

Possibly a better explanation...

If I remove the .table-striped from the table, and move the branch label row into a more semantically correct <thead>; something like this:

<thead class="thead-light">
  <tr>
    <th colspan="2" data-testid="branch-name">control</th>
  </tr>
</thead>

... then it makes it a bit easier to read (maybe, maybe not, what do I know).

[data-sync-user]

➤ Wil Clouser commented:

[~amedinac@mozilla.com] do you want alternating row colors?

[AnaMedinac]

@pdehaan thanks for raising this - Let's go with your proposed solution. @LZoog Is it an easy update?

[LZoog]

@AnaMedinac Should be! :)