const OverlayContainer = styled.div` left: 0px; right: 0px; bottom: 0px; top: 0px; position: absolute; width: 100%; height: calc(100vh - 88px); z-index: 110; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; `; const PopupContainer = styled.div` position: relative; display: flex; justify-content: center; align-items: center; background-color: rgba(29, 29, 33, 0.2); padding: 1rem; border-radius: 8px; width: 90%; height: 90%; `; const CloseButton = styled.div` color: #fff; :hover { color: #5765f2; } z-index: 40; position: absolute; top: 10px; right: 1rem; cursor: pointer; `; return ( <OverlayContainer> <PopupContainer> <CloseButton onClick={props.handleClosePopup}> <i class="bi bi-x-lg"></i> </CloseButton> <img src={props.imageSrc} style={{ maxHeight: "790px", maxWidth: "790px" }} /> </PopupContainer> </OverlayContainer> );