Applying theme style to paragraphs in inventory.

app/src/components/inventory/CatalogEditor.js

@@ -2,6 +2,7 @@ import React, {useState} from "react";
 import {Input, Select, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "semantic-ui-react";
 import {Button, Header, Icon, Modal, Table} from "../Theme";
 import {ALL_UNITS} from "./units";
+import {ThemeContext} from "../../contexts/contexts";
 
 const UNIT_OPTIONS = [{key: '', value: '', text: '—'}, ...ALL_UNITS.map(u => ({key: u, value: u, text: u}))];
 
@@ -24,6 +25,7 @@ function blankEntry() {
  */
 export function CatalogEditor({catalog, open, onClose, onSave}) {
     const [draft, setDraft] = useState([]);
+    const {t} = React.useContext(ThemeContext);
 
     React.useEffect(() => {
         if (open) {
@@ -46,7 +48,7 @@ export function CatalogEditor({catalog, open, onClose, onSave}) {
     return <Modal open={open} onClose={onClose} closeIcon size='fullscreen'>
         <Modal.Header>Food Catalog</Modal.Header>
         <Modal.Content scrolling>
-            <p style={{opacity: 0.8}}>
+            <p {...t} style={{...t.style, opacity: 0.8}}>
                 Known items used to autocomplete and pre-fill the entry form. <strong>kcal</strong> is the total
                 calories for one package of the given size.
             </p>

app/src/components/inventory/InventoryExportPanel.js

@@ -3,6 +3,7 @@ import {Select} from "semantic-ui-react";
 import {Button, Header, Icon, Segment} from "../Theme";
 import {downloadCSV, inventoryExportFilename, toCSV} from "./inventoryExport";
 import {groupFieldsOf, summableFieldsOf} from "./summarize";
+import {ThemeContext} from "../../contexts/contexts";
 
 const fieldOptions = (fs) => fs.map(f => ({key: f.key, value: f.key, text: f.label}));
 
@@ -15,6 +16,7 @@ export function InventoryExportPanel({name, fields, items, groupKey, sumKey, onG
     const count = (items || []).length;
     const groupFields = groupFieldsOf(fields);
     const summableFields = summableFieldsOf(fields);
+    const {t} = React.useContext(ThemeContext);
 
     const exportCSV = () =>
         downloadCSV(inventoryExportFilename(name, 'csv'), toCSV(fields, items));
@@ -22,7 +24,7 @@ export function InventoryExportPanel({name, fields, items, groupKey, sumKey, onG
     return <>
         <Segment>
             <Header as='h3'><Icon name='file alternate outline'/> CSV</Header>
-            <p>
+            <p {...t}>
                 A comma-separated spreadsheet of all {count} item{count === 1 ? '' : 's'} and every field, openable
                 in Excel, Numbers, or Google Sheets.  Generated entirely on this device.
             </p>
@@ -33,7 +35,7 @@ export function InventoryExportPanel({name, fields, items, groupKey, sumKey, onG
 
         <Segment>
             <Header as='h3'><Icon name='file pdf outline'/> PDF</Header>
-            <p>
+            <p {...t}>
                 A printable table of the whole inventory, followed by a summary grouped by the field you choose.
                 This opens your browser's print dialog — choose "Save as PDF" as the destination to get a PDF file,
                 or print it on paper.

app/src/components/inventory/InventoryItemsMobile.js

@@ -2,6 +2,7 @@ import React from "react";
 import {TableBody, TableCell, TableHeader, TableHeaderCell, TableRow} from "semantic-ui-react";
 import {Icon, Table} from "../Theme";
 import {formatValue, isItemExpired} from "./InventoryTable";
+import {ThemeContext} from "../../contexts/contexts";
 
 // Fallback columns for inventories whose schema predates the per-field `mobile` flag: these preferred keys in
 // order, else the first few fields.
@@ -30,13 +31,14 @@ export function mobileColumns(fields) {
  */
 export function InventoryItemsMobile({fields, items}) {
     const columns = mobileColumns(fields);
+    const {t} = React.useContext(ThemeContext);
 
     return <>
-        <p style={{opacity: 0.7, fontSize: '0.85em', marginBottom: '0.5em'}}>
+        <p {...t} style={{...t.style, opacity: 0.7, fontSize: '0.85em', marginBottom: '0.5em'}}>
             Read-only — rotate to landscape to edit.
         </p>
         {(items || []).length === 0
-            ? <p>No items yet.</p>
+            ? <p {...t}>No items yet.</p>
             : <Table celled unstackable>
                 <TableHeader>
                     <TableRow>

app/src/components/inventory/InventoryRoute.js

@@ -12,7 +12,7 @@ import {RationEstimatePanel} from "../calculators/RationCalculator";
 import {defaultGroupKey, defaultSumKey, findCaloriesKey, findCountKey} from "./summarize";
 import {FieldSchemaEditor} from "./FieldSchemaEditor";
 import {CatalogEditor} from "./CatalogEditor";
-import {Media} from "../../contexts/contexts";
+import {Media, ThemeContext} from "../../contexts/contexts";
 
 const INVENTORY_TYPES = [
     {key: 'food', value: 'food', text: 'Food Storage'},
@@ -23,6 +23,7 @@ const INVENTORY_TYPES = [
 function NewInventoryModal({open, onClose, onCreate}) {
     const [name, setName] = useState('');
     const [type, setType] = useState('food');
+    const {t} = React.useContext(ThemeContext);
 
     const create = async () => {
         const inventory = await onCreate(name, type);
@@ -41,7 +42,7 @@ function NewInventoryModal({open, onClose, onCreate}) {
             <div>
                 Type:{' '}
                 <Select options={INVENTORY_TYPES} value={type} onChange={(e, data) => setType(data.value)}/>
-                <p style={{fontSize: '0.85em', opacity: 0.7, marginTop: '0.5em'}}>
+                <p {...t} style={{...t.style, fontSize: '0.85em', opacity: 0.7, marginTop: '0.5em'}}>
                     The type seeds a starting set of fields — you can customize them afterward.
                 </p>
             </div>
@@ -73,6 +74,8 @@ export function InventoryRoute() {
     // Free-text filter applied to the active inventory's items across every column.
     const [search, setSearch] = useState('');
 
+    const {t} = React.useContext(ThemeContext);
+
     // Default to the first inventory once loaded.
     React.useEffect(() => {
         if (slug == null && inventories && inventories.length > 0) {
@@ -210,7 +213,7 @@ export function InventoryRoute() {
             <FieldSchemaEditor fields={fields} open={editFieldsOpen}
                                onClose={() => setEditFieldsOpen(false)}
                                onSave={newFields => persistInventory(slug, {fields: newFields})}/>
-        </> : <p>Create an inventory to get started.</p>}
+        </> : <p {...t}>Create an inventory to get started.</p>}
 
         <NewInventoryModal open={newOpen} onClose={() => setNewOpen(false)} onCreate={onCreate}/>