const PopupContainer = styled.div` display: flex; flex-direction: column; width: 350px; height: 300px; border-radius: 16px; padding-top: 30px; background: #fff; align-items: center; img { width: 70px; } h1 { font-size: 25px; margin-top: 10px; font-weight: 600; } `; const PopupButtons = styled.div` margin-top: 30px; a { border: 1.5jpx solid #0d6efd; cursor: pointer; margin-right: 10px; transition: .3s ease-in-out; padding: 7px; border-radius: 8px; } a:hover { opacity: .5; } button { width: 120px } `; return ( <PopupContainer> <img src="https://cdn-icons-png.flaticon.com/128/5709/5709755.png" alt="" /> <h1>Successfully Listed</h1> <PopupButtons> <a target="_blank" href={props.externalLink}> View on Explorer </a> <button onClick={props.closeModal}>Close</button> </PopupButtons> </PopupContainer> );