feat: use the configured font on the help page

Author: aradzie

package-lock.json

@@ -1,5 +1,6 @@
 import { test } from "node:test";
 import { FakeIntlProvider } from "@keybr/intl";
+import { FakeSettingsContext } from "@keybr/settings";
 import { render } from "@testing-library/react";
 import { assert } from "chai";
 import { MemoryRouter } from "react-router";
@@ -9,7 +10,9 @@ test("render", () => {
   const r = render(
     <FakeIntlProvider>
       <MemoryRouter>
-        <HelpPage />
+        <FakeSettingsContext>
+          <HelpPage />
+        </FakeSettingsContext>
       </MemoryRouter>
     </FakeIntlProvider>,
   );

packages/page-help/lib/HelpPage.test.tsx

@@ -1,7 +1,8 @@
 import { Layout, loadKeyboard } from "@keybr/keyboard";
 import { KeyLayer, VirtualKeyboard, ZonesLayer } from "@keybr/keyboard-ui";
 import { KeyLegendList } from "@keybr/lesson-ui";
-import { singleLine } from "@keybr/textinput";
+import { useSettings } from "@keybr/settings";
+import { singleLine, toTextDisplaySettings } from "@keybr/textinput";
 import { StaticText } from "@keybr/textinput-ui";
 import { Article, Figure } from "@keybr/widget";
 import { FormattedMessage } from "react-intl";
@@ -12,6 +13,8 @@ import * as styles from "./HelpApp.module.less";
 
 export function HelpPage() {
   const keyboard = loadKeyboard(Layout.EN_US);
+  const { settings } = useSettings();
+  const textDisplaySettings = toTextDisplaySettings(settings);
 
   return (
     <Article>
@@ -64,6 +67,7 @@ export function HelpPage() {
 
         <div className={styles.example}>
           <StaticText
+            settings={textDisplaySettings}
             lines={singleLine(
               "teen nien neer nient relier ine neerine elerine neer",
             )}
@@ -91,6 +95,7 @@ export function HelpPage() {
 
         <div className={styles.example}>
           <StaticText
+            settings={textDisplaySettings}
             lines={singleLine(
               "entin entle intell letter rittle ritin tete titient",
             )}
@@ -118,6 +123,7 @@ export function HelpPage() {
 
         <div className={styles.example}>
           <StaticText
+            settings={textDisplaySettings}
             lines={singleLine(
               "less les list res rise ins test tes listree listree",
             )}
@@ -145,6 +151,7 @@ export function HelpPage() {
 
         <div className={styles.example}>
           <StaticText
+            settings={textDisplaySettings}
             lines={singleLine(
               "res ress risin its seen rise ensiste liste its estine",
             )}
@@ -174,6 +181,7 @@ export function HelpPage() {
 
         <div className={styles.example}>
           <StaticText
+            settings={textDisplaySettings}
             lines={singleLine("a list of words with all the letters")}
           />
         </div>

packages/page-help/lib/HelpPage.tsx

@@ -13,6 +13,7 @@
     "@keybr/lesson-ui": "*",
     "@keybr/pages-shared": "*",
     "@keybr/phonetic-model": "*",
+    "@keybr/settings": "*",
     "@keybr/textinput": "*",
     "@keybr/textinput-ui": "*",
     "@keybr/widget": "*"