From 92cbfc4437c581754da6000d20aebfc4db4129b9 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Tue, 29 Jun 2021 16:13:36 -0500
Subject: [PATCH] Improve readability of image captions

---
 fixtures/2000x2000-white.png       | Bin 0 -> 585 bytes
 ts/components/Lightbox.stories.tsx |  12 +++++++++++-
 ts/components/Lightbox.tsx         |   2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 fixtures/2000x2000-white.png

diff --git a/fixtures/2000x2000-white.png b/fixtures/2000x2000-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..042ebb76d4470059dd40b842e25c6a27d0ba226c
GIT binary patch
literal 585
zcmeAS@N?(olHy`uVBq!ia0y~yV7~yujLblh1>eG~fE06pPl)UP|NoaCkv_q|z{Ke3
z;uunK>&*d1UZCV5h2P7~j+;vWnWJFXhd?Gj1H=FSD<c^g8EyCEfV}JJ>gTe~DWM4f
Da$X$^

literal 0
HcmV?d00001

diff --git a/ts/components/Lightbox.stories.tsx b/ts/components/Lightbox.stories.tsx
index f82b588ea..dd452b111 100644
--- a/ts/components/Lightbox.stories.tsx
+++ b/ts/components/Lightbox.stories.tsx
@@ -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,
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index d6fc3e4c5..d5041ac97 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -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',