Redesign the remaining views in the Lapis style (board E)

claude-bot commented

2026-10-31 18:59:01 +00:00

Collaborator

Follow-up to #95: give the views that the Design canvas (board C, Lapis) didn't draw the same look. That means serif titles, small-caps section labels, hairline rows, lapis only for what is chosen or tappable, and no grey Suru boxes.

Mockups: board E, drawn in the Lapis style.

The source is images/redesign/board-e.dc.html in the wiki.

Gaps on main (`5a8cce8`)

Settings is one long page with Suru buttons. On a checked Sans/Serif or Paper/White button the text is dark on lapis, about 2:1 contrast (QC of #95).
Verse sheet has a bold sans "Cross-references" header and doesn't follow artboard 2.
Modules is drawn in dark only. Its Aleppo row puts the metadata right to left ("MB 1.0 · 2.0.1 · עברית"), a bidi bug.
Bible chooser: the selected row has a grey-blue fill.
Not drawn before now: Go to, the Bible chooser, the footnote sheet, the first-start page, the Settings sub-pages and About.

Plan

Each step is one PR, in order (one at a time, serial CI). Each gets phone QC.

Settings: E1 (a short list), E2/E9 (Text and layout sub-page: sample verse, sliders, a readable Sans/Serif choice, switches) and E3 (Language sub-page with a lapis check; Light background is a sub-page drawn the same way). Fixes the contrast. (#149)
Verse sheet and footnote sheet: E5. Serif title with copy, bookmark and note icons, NOTES and CROSS-REFERENCES labels, and an outlined "Install TSK" with its explanation. (#152; the bookmark and note icons wait until those features exist)
Bible chooser and Go to: E4 (abbreviation badges, lapis check, + to add) and E6 (testament tabs, plain cells, the current book and chapter in lapis). (#153; the badges show the module name, and Go to keeps its three steps)
Modules in light: E8 (filter chips, outlined Update/Install, thin progress bar). Includes the Aleppo bidi fix: wrap the language name in an isolate. (#154; a sheet per module instead of a detail page)
Menus: the ⋮ menu of Modules (Import, Refresh) and the Cut/Copy/Paste menu of text fields, still plain Suru. Not on board E; owner agreed 2026-11-03 to a separate PR after step 4. On the page's ground with a hairline and rounded corners, our own colours for text and icons, checked on the phone in light and dark (#84). (#159)
First start: E7 (checkboxes, total size, one lapis Download). (#160; rows show a new short title, plus a note of what the module offers, at the owner's request)
About: E10 (a dialog with the icon, version, licence, source code, and the licences of the modules and fonts). (#161; a short "Licences" row opens its own page)

Open choices

These are assumed until the owner says otherwise:

Light background stays a sub-page (E3), not a switch.
The Bible badges show the abbreviation.

The #95 QC checklist, the wiki manual page and closing #95 are paused until this is done.

Follow-up to #95: give the views that the Design canvas (board C, Lapis) didn't draw the same look. That means serif titles, small-caps section labels, hairline rows, lapis only for what is chosen or tappable, and no grey Suru boxes. **Mockups:** board E, drawn in the Lapis style. ![Board E](https://code.austinschaefer.com/schaefera/utStudyBIble/wiki/raw/images/redesign/board-e.png) The source is `images/redesign/board-e.dc.html` in the wiki. ## Gaps on main (5a8cce8) - **Settings** is one long page with Suru buttons. On a checked Sans/Serif or Paper/White button the text is dark on lapis, about 2:1 contrast (QC of #95). - **Verse sheet** has a bold sans "Cross-references" header and doesn't follow artboard 2. - **Modules** is drawn in dark only. Its Aleppo row puts the metadata right to left ("MB 1.0 · 2.0.1 · עברית"), a bidi bug. - **Bible chooser:** the selected row has a grey-blue fill. - **Not drawn before now:** Go to, the Bible chooser, the footnote sheet, the first-start page, the Settings sub-pages and About. ## Plan Each step is one PR, in order (one at a time, serial CI). Each gets phone QC. 1. [x] **Settings:** E1 (a short list), E2/E9 (Text and layout sub-page: sample verse, sliders, a readable Sans/Serif choice, switches) and E3 (Language sub-page with a lapis check; Light background is a sub-page drawn the same way). Fixes the contrast. (#149) 2. [x] **Verse sheet and footnote sheet:** E5. Serif title with copy, bookmark and note icons, NOTES and CROSS-REFERENCES labels, and an outlined "Install TSK" with its explanation. (#152; the bookmark and note icons wait until those features exist) 3. [x] **Bible chooser and Go to:** E4 (abbreviation badges, lapis check, + to add) and E6 (testament tabs, plain cells, the current book and chapter in lapis). (#153; the badges show the module name, and Go to keeps its three steps) 4. [x] **Modules in light:** E8 (filter chips, outlined Update/Install, thin progress bar). Includes the Aleppo bidi fix: wrap the language name in an isolate. (#154; a sheet per module instead of a detail page) 5. [x] **Menus:** the ⋮ menu of Modules (Import, Refresh) and the Cut/Copy/Paste menu of text fields, still plain Suru. Not on board E; owner agreed 2026-11-03 to a separate PR after step 4. On the page's ground with a hairline and rounded corners, our own colours for text and icons, checked on the phone in light and dark (#84). (#159) 6. [x] **First start:** E7 (checkboxes, total size, one lapis Download). (#160; rows show a new short title, plus a note of what the module offers, at the owner's request) 7. [x] **About:** E10 (a dialog with the icon, version, licence, source code, and the licences of the modules and fonts). (#161; a short "Licences" row opens its own page) ## Open choices These are assumed until the owner says otherwise: - Light background stays a sub-page (E3), not a switch. - The Bible badges show the abbreviation. The #95 QC checklist, the wiki manual page and closing #95 are paused until this is done.

schaefera referenced this issue from a commit

2026-10-31 19:13:16 +00:00

controls: SectionLabel, ValueRow, LapisSwitch, Segmented for the flat settings list (#148)

schaefera referenced this issue from a commit

2026-10-31 19:13:16 +00:00

Settings as one flat list with pages: Text and layout, Light background, Language, Module sources (#148)

schaefera referenced this issue from a commit

2026-10-31 19:13:16 +00:00

e2e: drive Settings through its pages; settings-pages case (#148)

claude-bot referenced this issue

2026-10-31 19:13:19 +00:00

Settings redesign: flat list and pages (#148 step 1) #149

schaefera referenced this issue from a commit

2026-10-31 19:16:49 +00:00

e2e settings-pages: relative Back waits; assert the typeface is saved and the search filters (#148)

schaefera referenced this issue from a commit

2026-10-31 19:30:31 +00:00

mem-check: CI baseline 185000 kB, 10% over the normal median again (#148)

schaefera referenced this issue from a commit

2026-11-03 07:58:27 +00:00

settings: two sample verses, readable slider labels in dark, Navigation section (#148)

claude-bot referenced this issue

2026-11-03 08:13:23 +00:00

Even out Sans and Serif at the same text size (after #148) #150

claude-bot commented

2026-11-03 08:13:23 +00:00

Author

Collaborator

Two additions from the owner (2026-11-03):

After this issue: evening out Sans and Serif at the same text size is scheduled to follow all six steps: #150.
Design record: each redesigned view also goes onto the "Lectern design language" canvas (https://claude.ai/artifact/MwvxmpLR96sZkwbiCwAhp6) when its PR merges. The owner chose the existing canvas over a new design-sync project, because standalone Claude Design goes read-only on 2026-12-14. Writing to the canvas needs a session with the Artifact tool.

🤖 Generated with Claude Code

Two additions from the owner (2026-11-03): - **After this issue:** evening out Sans and Serif at the same text size is scheduled to follow all six steps: #150. - **Design record:** each redesigned view also goes onto the "Lectern design language" canvas (https://claude.ai/artifact/MwvxmpLR96sZkwbiCwAhp6) when its PR merges. The owner chose the existing canvas over a new design-sync project, because standalone Claude Design goes read-only on 2026-12-14. Writing to the canvas needs a session with the Artifact tool. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

schaefera referenced this issue from a commit

2026-11-03 08:15:47 +00:00

docs: link the Lectern design canvas as the design system (#148)

claude-bot referenced this issue

2026-11-03 08:15:57 +00:00

Link the Lectern design canvas as the design system (#148) #151

schaefera referenced this issue from a commit

2026-11-03 08:26:46 +00:00

settings: cap the sample's height, so large text keeps the sliders on the page (#148)

schaefera referenced this issue from a commit

2026-11-03 08:50:06 +00:00

Merge pull request 'Link the Lectern design canvas as the design system (#148)' (#151) from docs/design-system-link into main