From bf9b4b05c7664acee91f0e6fef7f4ee4e60f1d9e Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sun, 26 Jun 2022 19:33:15 +0530
Subject: [PATCH] fix overlay issue

---
 src/components/Collections/AllCollections/collectionCard.tsx  | 2 +-
 .../Collections/CollectionListBar/CollectionCard.tsx          | 2 +-
 .../Collections/CollectionSelector/AddCollectionButton.tsx    | 4 ++--
 .../Collections/CollectionSelector/CollectionCard.tsx         | 2 +-
 src/components/Container.ts                                   | 3 +--
 src/components/Sidebar/SubscriptionCard/clickOverlay.tsx      | 2 +-
 6 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Collections/AllCollections/collectionCard.tsx b/src/components/Collections/AllCollections/collectionCard.tsx
index b9b778191..2c4ae51c8 100644
--- a/src/components/Collections/AllCollections/collectionCard.tsx
+++ b/src/components/Collections/AllCollections/collectionCard.tsx
@@ -19,7 +19,7 @@ export default function AllCollectionCard({
             collectionTile={AllCollectionTile}
             latestFile={collectionSummary.latestFile}
             onClick={() => onCollectionClick(collectionSummary.id)}>
-            <AllCollectionTileText zIndex={1}>
+            <AllCollectionTileText>
                 <Typography>{collectionSummary.name}</Typography>
                 <Typography variant="body2" color="text.secondary">
                     {constants.PHOTO_COUNT(collectionSummary.fileCount)}
diff --git a/src/components/Collections/CollectionListBar/CollectionCard.tsx b/src/components/Collections/CollectionListBar/CollectionCard.tsx
index 48984d2cc..27d1db3d7 100644
--- a/src/components/Collections/CollectionListBar/CollectionCard.tsx
+++ b/src/components/Collections/CollectionListBar/CollectionCard.tsx
@@ -22,7 +22,7 @@ const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
     return (
         <Box ref={ref}>
             <CollectionCard collectionTile={CollectionBarTile} {...others}>
-                <CollectionBarTileText zIndex={1}>
+                <CollectionBarTileText>
                     <TruncateText text={collectionName} />
                 </CollectionBarTileText>
             </CollectionCard>
diff --git a/src/components/Collections/CollectionSelector/AddCollectionButton.tsx b/src/components/Collections/CollectionSelector/AddCollectionButton.tsx
index 6683f04d7..9f05af001 100644
--- a/src/components/Collections/CollectionSelector/AddCollectionButton.tsx
+++ b/src/components/Collections/CollectionSelector/AddCollectionButton.tsx
@@ -24,12 +24,12 @@ export default function AddCollectionButton({ showNextModal }: Iprops) {
             collectionTile={AllCollectionTile}
             onClick={() => showNextModal()}
             latestFile={null}>
-            <AllCollectionTileText zIndex={1}>
+            <AllCollectionTileText>
                 <Typography variant="body2" fontWeight={'bold'}>
                     {constants.CREATE_COLLECTION}
                 </Typography>
             </AllCollectionTileText>
-            <ImageContainer zIndex={0}>
+            <ImageContainer>
                 <CenteredFlex>+</CenteredFlex>
             </ImageContainer>
         </CollectionCard>
diff --git a/src/components/Collections/CollectionSelector/CollectionCard.tsx b/src/components/Collections/CollectionSelector/CollectionCard.tsx
index defbfa6b2..31b301e50 100644
--- a/src/components/Collections/CollectionSelector/CollectionCard.tsx
+++ b/src/components/Collections/CollectionSelector/CollectionCard.tsx
@@ -18,7 +18,7 @@ export default function CollectionSelectorCard({
             collectionTile={AllCollectionTile}
             latestFile={collectionSummary.latestFile}
             onClick={() => onCollectionClick(collectionSummary.id)}>
-            <AllCollectionTileText zIndex={1}>
+            <AllCollectionTileText>
                 <Typography>{collectionSummary.name}</Typography>
             </AllCollectionTileText>
         </CollectionCard>
diff --git a/src/components/Container.ts b/src/components/Container.ts
index d6dffa5a4..cf8722e6c 100644
--- a/src/components/Container.ts
+++ b/src/components/Container.ts
@@ -62,11 +62,10 @@ export const FluidContainer = styled(FlexWrapper)`
     flex: 1;
 `;
 
-export const Overlay = styled(Box)<{ zIndex: number }>`
+export const Overlay = styled(Box)`
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    z-index: ${({ zIndex }) => zIndex};
 `;
diff --git a/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx b/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
index 76cf006e6..c1a7e92fc 100644
--- a/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
+++ b/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
@@ -3,7 +3,7 @@ import { FlexWrapper, Overlay } from 'components/Container';
 import React from 'react';
 export function ClickOverlay({ onClick }) {
     return (
-        <Overlay zIndex={2} display="flex">
+        <Overlay display="flex">
             <FlexWrapper
                 onClick={onClick}
                 justifyContent={'flex-end'}