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: put the card mimetype accent on the bottom edge

Browse source 
Roland's call, and the better one: along the top the accent sat immediately
against the poster's own top border, so the two edges competed.  On the bottom it
closes the card and reads as a property of the whole thing rather than a header
rule.
This commit is contained in:
Roland 2026-07-30 13:53:43 -06:00
parent 31d20c04da
commit dc811d08e3
No known key found for this signature in database
GPG key ID: 1BA620CE6C9A4680
3 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/components/ThemeSamplePage.js
View file

@ -398,7 +398,7 @@ export function ThemeSamplePage() {
/>)}
</CardGroup>
<p style={{fontSize: 12, color: 'var(--muted)', marginTop: 10}}>
The top edge carries the file type's colour, so a grid of results is
The bottom edge carries the file type's colour, so a grid of results is
scannable by kind before any title is read. It comes from a token, so night
and amber render the accent in their own single hue rather than four.
</p>

3
app/src/components/ui/Surfaces.tsx
View file

@ -148,7 +148,8 @@ export function Card({media, title, meta, children, onClick, color, className}:
flexDirection: 'column',
// An accent edge rather than a tinted surface: the design rules keep surfaces
// flat, and a 3px edge survives night mode without becoming a bright patch.
borderTop: color ? `3px solid var(--${color})` : undefined,
// Along the bottom, where it does not compete with the poster's top edge.
borderBottom: color ? `3px solid var(--${color})` : undefined,
}}
>
{media && <div style={{borderBottom: '1px solid var(--border)'}}>{media}</div>}

4
app/src/components/ui/ui.test.js
View file

@ -440,13 +440,13 @@ describe('Card', () => {
// files had dropped the accent because our Card had no equivalent.
const {container} = renderUI(<Card title='Water Storage.pdf' color='red'/>);
expect(container.firstChild).toHaveStyle({borderTop: '3px solid var(--red)'});
expect(container.firstChild).toHaveStyle({borderBottom: '3px solid var(--red)'});
});
it('has no accent when no colour is given', () => {
const {container} = renderUI(<Card title='Plain'/>);
expect(container.firstChild.style.borderTop).toBe('');
expect(container.firstChild.style.borderBottom).toBe('');
});
});