jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve readability of image captions

This commit is contained in:
Evan Hahn 2021-06-29 16:13:36 -05:00 committed by GitHub
parent dc78165043
commit 92cbfc4437
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fixtures/2000x2000-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 B

12
ts/components/Lightbox.stories.tsx
View File

@ -42,7 +42,7 @@ story.add('Image', () => {
return <Lightbox {...props} />;
});
story.add('Image with Caption', () => {
story.add('Image with Caption (normal image)', () => {
const props = createProps({
caption:
'This is the user-provided caption. It can get long and wrap onto multiple lines.',
@ -52,6 +52,16 @@ story.add('Image with Caption', () => {
return <Lightbox {...props} />;
});
story.add('Image with Caption (all-white image)', () => {
const props = createProps({
caption:
'This is the user-provided caption. It should be visible on light backgrounds.',
objectURL: '/fixtures/2000x2000-white.png',
});
return <Lightbox {...props} />;
});
story.add('Video', () => {
const props = createProps({
contentType: VIDEO_MP4,

2
ts/components/Lightbox.tsx
View File

@ -107,6 +107,8 @@ const styles = {
right: 0,
textAlign: 'center',
color: 'white',
fontWeight: 'bold',
textShadow: '0 0 1px black, 0 0 2px black, 0 0 3px black, 0 0 4px black',
padding: '1em',
paddingLeft: '3em',
paddingRight: '3em',