From 12464b99181b675775b24863d6b7bc4a3f7873fe Mon Sep 17 00:00:00 2001
From: Steven <xapphire13@live.com>
Date: Fri, 22 Jan 2021 14:42:39 -0800
Subject: [PATCH] fix:[Lightbox] Increase z-index (#411)

* [Lightbox] Increase z-index

* lint
---
 packages/core/src/components/Lightbox/index.tsx | 12 +++++++++++-
 packages/core/src/components/Lightbox/styles.ts | 12 ++++++++++++
 packages/core/src/constants.ts                  |  1 +
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Lightbox/index.tsx b/packages/core/src/components/Lightbox/index.tsx
index a273f97c6..99c5a6fb7 100644
--- a/packages/core/src/components/Lightbox/index.tsx
+++ b/packages/core/src/components/Lightbox/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Sheet from '../Sheet';
 import LightboxImage, { LightboxImageProps } from './Image';
 import Header from './Header';
+import { styleSheetLightboxSheet } from './styles';
 
 export type LightboxProps = {
   /** Images to show. */
@@ -140,7 +141,16 @@ export default class Lightbox extends React.PureComponent<LightboxProps, Lightbo
     );
 
     return (
-      <Sheet compact headerShadow noAnimation portal visible header={header} onClose={onClose}>
+      <Sheet
+        compact
+        headerShadow
+        noAnimation
+        portal
+        visible
+        header={header}
+        styleSheet={styleSheetLightboxSheet}
+        onClose={onClose}
+      >
         <LightboxImage
           aside={aside}
           alt={alt}
diff --git a/packages/core/src/components/Lightbox/styles.ts b/packages/core/src/components/Lightbox/styles.ts
index aad273ab0..1990d0276 100644
--- a/packages/core/src/components/Lightbox/styles.ts
+++ b/packages/core/src/components/Lightbox/styles.ts
@@ -1,4 +1,7 @@
+import { ComponentBlock } from 'aesthetic';
+import { Z_INDEX_LIGHTBOX } from '../../constants';
 import { StyleSheet } from '../../hooks/useStyles';
+import { styleSheetSheet } from '../Sheet/styles';
 
 export const styleSheetHeader: StyleSheet = ({ unit }) => ({
   header: {
@@ -49,3 +52,12 @@ export const styleSheetImage: StyleSheet = ({ color, unit }) => ({
     padding: unit * 3,
   },
 });
+
+export const styleSheetLightboxSheet: StyleSheet = (theme) => {
+  const sheetStyle = styleSheetSheet(theme);
+
+  // Override zIndex
+  (sheetStyle.sheet as ComponentBlock).zIndex = Z_INDEX_LIGHTBOX;
+
+  return sheetStyle;
+};
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index f2dcd6e8f..26b2f73a3 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -102,6 +102,7 @@ export const STATUSES = ['notice', 'info', 'success', 'warning', 'danger', 'mute
 export const BRANDS = ['luxury', 'plus'];
 export const Z_INDEX_MODAL = 2000;
 export const Z_INDEX_PORTAL = 2000; // Same as Modal to fix Tooltip in Modal
+export const Z_INDEX_LIGHTBOX = 2004; // Lightbox is full screen and appears on top of everything else
 export const Z_INDEX_TOAST = 3000;
 
 // EMOJIS