fix overlay issue
This commit is contained in:
parent
204e44ecf6
commit
bf9b4b05c7
|
@ -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)}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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};
|
||||
`;
|
||||
|
|
|
@ -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'}
|
||||
|
|
Loading…
Reference in a new issue