SF-2956 Fix import question dialog offline error message color

[Nateowami]

Fixes the color of the offline error messages (previously they were black).

---

This change is 

[marksvc]

This is reviewable in Devin Review.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.93%. Comparing base (6d62696) to head (eef9af9).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3918   +/-   ##
=======================================
  Coverage   80.93%   80.93%           
=======================================
  Files         664      664           
  Lines       42149    42149           
  Branches     6938     6944    +6     
=======================================
  Hits        34115    34115           
  Misses       6866     6866           
  Partials     1168     1168           

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

[marksvc]

Thank you. BTW, I notice that there are a number of other mat-error element usages in this class. If the problem is that mat-error was being used outside of mat-form-field, then there are a few other places where the text will similarly not be styled as intended.

@marksvc reviewed 1 file and all commit messages, and made 1 comment.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on Nateowami).

[github-actions]

📸 Screenshot diff deployed! (3 changes)

View the visual diff at: https://pr-3918--sf-screenshot-diffs.netlify.app

[Nateowami]

@marksvc I've made a bunch of changes so this is now materially different. Can you re-review?

[marksvc]

I see that it was two weeks ago that you pushed and marked this PR as ready for review, although I only got a notification when you commented. Sorry for the additional delay in getting back to you.

@marksvc reviewed 14 files and all commit messages, and made 5 comments.
Reviewable status: all files reviewed, 4 unresolved discussions (waiting on Nateowami).

---

.grit/patterns/mat_error_inside_form_field.md line 23 at r2 (raw file):

Bare mat-error is matched (but there is no single auto-fix; choose error-text or offline-text)

Because mat-error is display: block, have you considered modifying the grit rule to transform any <mat-error> not-inside <mat-form-field> to <span class="error-text">? Because the only difference between .offline-text and .error-text is the display: block;.

Not super important.

---

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.html line 52 at r2 (raw file):

                  <a mat-button [href]="urls.transceleratorImportHelpPage" target="_blank">{{ t("learn_more") }}</a>
                  @if (transceleratorRequest.status === "offline") {
                    <span class="offline-text"> {{ t("no_import_offline", { method: "Transcelerator" }) }} </span>

If this was previously a mat-error, which looks to use display: block, it seems that using span class="offline-text" will move to, or potentially move to, an inline display. The screenshot comparison didn't show any trouble. I looked at some of the places in the browser or considered their adjacency to other block elements and they seem fine except for the one I commented on.

---

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss line 168 at r2 (raw file):

}

:not(mat-form-field) > .mat-mdc-form-field-error {

And are you wanting to bring this over, too? Or should it just be deleted?

---

src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html line 90 at r2 (raw file):

              </div>
              @if (biblicalTermsMessage) {
                <span class="error-text">

This one is messed up. With mat-error, it's more like

with the text to the right of the icon. With span error-text, the text is now below the icon, such as:

[Nateowami]

Thanks for your review Mark. Unfortunately I had forgotten to push my latest changes, so some of the things you'd mentioned would have been addressed (and I think now are) by just pushing the latest I had locally.

@Nateowami made 5 comments.
Reviewable status: 9 of 15 files reviewed, 4 unresolved discussions (waiting on marksvc).

---

.grit/patterns/mat_error_inside_form_field.md line 23 at r2 (raw file):

Previously, marksvc wrote…

Because mat-error is display: block, have you considered modifying the grit rule to transform any <mat-error> not-inside <mat-form-field> to <span class="error-text">? Because the only difference between .offline-text and .error-text is the display: block;.

Not super important.

The Grit rule is a lint rule only, not a rewrite. It runs on CI. I don't see a purpose to have it rewrite, which requires some judgement calls depending on the context.

Grit can act as a migrator, but is not being used in that capacity here.

---

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.html line 52 at r2 (raw file):

Previously, marksvc wrote…

If this was previously a mat-error, which looks to use display: block, it seems that using span class="offline-text" will move to, or potentially move to, an inline display. The screenshot comparison didn't show any trouble. I looked at some of the places in the browser or considered their adjacency to other block elements and they seem fine except for the one I commented on.

That's a good point, but in a lot of contexts it won't make a difference, such as here, where it's a child of a flex container. On the settings page it made an actual difference.

---

src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss line 168 at r2 (raw file):

Previously, marksvc wrote…

And are you wanting to bring this over, too? Or should it just be deleted?

Good catch; deleted. And the rule never worked as intended because mat-form-field is not the direct parent of .mat-mdc-form-field-error. This rule is supposed to say "style the form field errors that aren't directly in form fields", but actually ends up styling all the errors, including those in form fields. The consequence is that the font size of errors in form fields in this component will revert to the size Material would normally style them, rather than keeping this accidental override.

---

src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.html line 90 at r2 (raw file):

Previously, marksvc wrote…

This one is messed up. With mat-error, it's more like

with the text to the right of the icon. With span error-text, the text is now below the icon, such as:

Thanks for catching this. Fixed by updating the SCSS file to target .error-text instead of .mat-mdc-form-field-error

[marksvc]

@marksvc reviewed 6 files and all commit messages, and resolved 4 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on Nateowami).