From cbd35d696f9ed53ee6e65b5e3505c895f96cc94d Mon Sep 17 00:00:00 2001
From: Nicholas Chiang <nicholas.h.chiang@gmail.com>
Date: Sun, 23 Jul 2023 13:03:49 -0600
Subject: [PATCH] fix(show/where-to-buy): invert logos in dark mode

This patch updates the "where to buy" buttons to invert their brand or
retailer logos when the user switches to dark mode. Often, these logo
images will simply be PNGs or SVGs with black text on a clear
background. Inverting them gives us a nice logo for dark mode: white
text on a clear background.

Fixes: a909447a4583 ("feat(routes/show): add "where to buy" section")
---
 app/routes/shows.$showId/where-to-buy.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/shows.$showId/where-to-buy.tsx b/app/routes/shows.$showId/where-to-buy.tsx
index 1085b45f..56081eb5 100644
--- a/app/routes/shows.$showId/where-to-buy.tsx
+++ b/app/routes/shows.$showId/where-to-buy.tsx
@@ -70,7 +70,7 @@ function BuyLink({
       rel='noopener noreferrer'
       className={cn(buttonVariants({ variant: 'outline' }), 'h-auto')}
     >
-      {avatar != null && <img src={avatar} alt={alt} />}
+      {avatar != null && <img className='dark:invert' src={avatar} alt={alt} />}
       {avatar == null && alt}
     </a>
   )