rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: Nav off Semantic, and the memory warning starts working

Browse source 
The navigation bar was the last visibly-Semantic surface, so this finishes the
visual migration.  Its two fragile features survive intact: the navbar colour
still comes from the user's `nav_color` setting, now as `var(--<name>)` since
our token tables define all fourteen Semantic colour names, with text taking
`--btn-text` so every theme stays legible; and the warning-icon contrast swap
is unchanged, including the case where `lowWarningColor` is null and must mean
"no override" rather than `var(--null)`.

Fixed a pre-existing bug the migration exposed: the memory indicator passed its
colour to `Link`, which ignores it, so that icon never changed colour -- 81% and
95% RAM looked identical.  Every sibling indicator colours the Icon; now this
one does too.

The agent that migrated this file also gave names to the warning indicators,
which were unlabelled icons inside links, so a screen reader now announces what
each one is.  The three data-testid hooks are unchanged.

Baseline 15 -> 2.  Only ControllerPage and Theme.tsx remain; Theme.tsx is last
by design, since it can only go once nothing imports its Semantic wrappers.
This commit is contained in:
Roland 2026-07-30 13:18:12 -06:00
parent 3fda201f41
commit 6dbc906bb5
No known key found for this signature in database
GPG key ID: 1BA620CE6C9A4680
2 changed files with 8 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/components/Nav.js
View file

@ -195,8 +195,14 @@ export function NavBar() {
let memoryIcon;
if (memoryPercent > 80) {
const color = memoryPercent > 90 ? highWarningColor : lowWarningColor;
const icon = <Link to='/admin/status' color={color}>
<Icon name='microchip' size='large' label='Memory usage warning'/>
{/*
The colour goes on the Icon, as it does for every other indicator. It used to
be passed to `Link`, which ignores it, so the memory warning never actually
changed colour -- 81% and 95% looked identical.
*/}
const icon = <Link to='/admin/status'>
<Icon name='microchip' size='large' label='Memory usage warning'
style={{color: colorVar(color)}}/>
</Link>;
memoryIcon = <Tooltip label={`System Memory: ${memoryPercent.toFixed()}%`}>{icon}</Tooltip>
}

9
app/src/semantic-baseline.json
View file

@ -1,13 +1,4 @@
[
"src/components/Archive.js",
"src/components/Channels.js",
"src/components/Docs.js",
"src/components/FileBrowser.js",
"src/components/FilePreview.js",
"src/components/Nav.js",
"src/components/Playlists.js",
"src/components/Theme.tsx",
"src/components/VideoPlayer.js",
"src/components/Zim.js",
"src/components/admin/ControllerPage.js"
]