From 849d319c5eb20de333764b76e87980b568d730b1 Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Fri, 22 Sep 2023 10:51:50 +0100
Subject: [PATCH] remove filters when lightbox is active

---
 src/components/LightBox/LightBox.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/LightBox/LightBox.tsx b/src/components/LightBox/LightBox.tsx
index 0ba2e30..42e4b20 100644
--- a/src/components/LightBox/LightBox.tsx
+++ b/src/components/LightBox/LightBox.tsx
@@ -160,7 +160,11 @@ export const LightBox = ({ children }: LightBoxProps) => {
         </>
       )}
 
-      <LightboxMediaContainer ref={ref} style={getStyle(ref.current)}>
+      <LightboxMediaContainer
+        ref={ref}
+        style={getStyle(ref.current)}
+        isActive={isActive}
+      >
         {lightBoxContent}
       </LightboxMediaContainer>
     </>
@@ -197,7 +201,7 @@ const ExitFullscreenIconButton = styled(IconButton)`
   margin-right: 16px;
 `
 
-const LightboxMediaContainer = styled.div`
+const LightboxMediaContainer = styled.div<{ isActive?: boolean }>`
   // Show the fullscreen button when users hover over the container.
   &:hover .fullscreen-button {
     opacity: 1;
@@ -210,6 +214,15 @@ const LightboxMediaContainer = styled.div`
       overflow: visible !important;
     }
   }
+
+  // When the lightbox is active and showing media - removes any filters from said media.
+  ${(props) =>
+    props.isActive &&
+    `
+  div {
+    filter: none;
+  }
+`}
 `
 
 export const Header = styled.header`