Improve theme support for translate editing

[nigel-wells]

This PR improves theme support for a number of components used in the translation editor part of SF.

A number of colors in Quill have also been updated but not everything. Some colors will not be related to the main theme palette but do need attention to better support dark themes. This work could be done at a similar time as working on the notice component which also needs better support for dark mode.

One area in dark mode I didn't complete is the background color of Quill when not in read only mode. Currently it is still the same as light mode. This could be changed to a lighter neutral tone but that will also require changing other elements to better suit the new background - I made an initial start on supporting different colors in Quill based on read only mode.

---

This change is 

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.00%. Comparing base (da744a8) to head (0408239).
Report is 1 commits behind head on master.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3161   +/-   ##
=======================================
  Coverage   83.00%   83.00%           
=======================================
  Files         569      569           
  Lines       33177    33177           
  Branches     5347     5347           
=======================================
  Hits        27540    27540           
  Misses       4833     4833           
  Partials      804      804           

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[josephmyers]

This is one of those tasks that we could spend weeks on. Given the circumstances of the past few weeks, I'd like a second opinion on what I have so far.

[RaymondLuong3]

I looked through the text editor and the other changes here and all of the light mode colours looks good. I had a small suggestion for the note verse text colour. I didn't look too closely at the dark mode changes. We can incrementally refine those too.

Reviewed 20 of 20 files at r1, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @nigel-wells)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/note-dialog/note-dialog.component.scss line 34 at r1 (raw file):

  min-height: 30px;
  .text {
    color: var(--sf-note-dialog-reference-text-color);

I would like to see more contrast between the background and the text colour here.

Code quote:

    color: var(--sf-note-dialog-reference-text-color);

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/biblical-terms/_biblical-terms-theme.scss line 6 at r1 (raw file):

  $is-dark: mat.get-theme-type($theme) == dark;

  --sf-biblical-terms-tabler-header-background: #{mat.get-theme-color($theme, primary, if($is-dark, 10, 95))};

I don't mind the slight colour on the table header, but I also would not be opposed to leaving it white.

Code quote:

  --sf-biblical-terms-tabler-header-background: #{mat.get-theme-color($theme, primary, if($is-dark, 10, 95))};

[josephmyers]

Thanks. I agree, dark mode is important, but not quite as important as light mode. We can tweak it as we see problems

Reviewable status: 19 of 20 files reviewed, 2 unresolved discussions (waiting on @nigel-wells and @RaymondLuong3)

---

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/note-dialog/note-dialog.component.scss line 34 at r1 (raw file):

Previously, RaymondLuong3 (Raymond Luong) wrote…

I would like to see more contrast between the background and the text colour here.

Done.

[RaymondLuong3]

Reviewed 1 of 1 files at r2, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @nigel-wells)