Consolidate button wording in dialogs (“Close” / “Back”)

[jotaen4tinypilot]

Related #1684. Stacked onto #1687.

As discussed in https://github.com/tiny-pilot/tinypilot-pro/pull/1139, this PR consolidates the wording for “Cancel”/“Close”/“Back”/“OK” buttons across all our dialogs, to only use “Close” or “Back”. It also outlines the rules in the style guide.

• In the style guide, I restructured some of the existing text, to accommodate the new rules in a clearer way.
• The code for the demo overlays has become borderline complex. To me, it’s still okay-ish for now, but for the future we could consider to simplify the setup, and make it more straightforward / less interactive.
• I didn’t change the id attributes or CSS class names of the affected button elements, so their wording might now diverge from the label: e.g., we have a button labelled Close, with a cancel-hostname-change id attribute. To me, the UI label and the internal technical name are conceptually different enough that it wouldn’t be worth the hassle to keep them aligned, and we already diverge in other places anyway (e.g., we have a button labelled Paste, with a confirm-btn id attribute; or a button labelled Apply, with a save-btn id attribute.)
  • If we’d feel that it’s worth to unify all button labels with their id attribute / CSS class name, I’d suggest to do that in a separate refactoring step, and for all buttons in one go.

Screen.Recording.2023-11-21.at.19.02.22.mov

Currently blocked by #1686 (e2e tests failing).

[jotaen4tinypilot]

Automated comment from CodeApprove ➜

⏳ @jdeanwallace please review this Pull Request

[jdeanwallace]

Automated comment from CodeApprove ➜

✔️ Approved

LGTM!

---

👀 @jotaen4tinypilot it's your turn please take a look

[jdeanwallace]

Automated comment from CodeApprove ➜

✔️ Approved

---

In: Discussion

I didn’t change the id attributes or CSS class names of the affected button elements

Yeah I agree that this is not necessary.

---

👀 @jotaen4tinypilot it's your turn please take a look