const isOpen = props.isOpen; const onCancelClick = props.onCancelClick; const onConfirmClick = props.onConfirmClick; const Modal = styled.div` display: ${({ hidden }) => (hidden ? "none" : "flex")}; position: fixed; inset: 0; justify-content: center; align-items: center; opacity: 1; z-index: 999; .black-btn { background-color: #000 !important; border: none; color: white; &:active { color: white; } } @media screen and (max-width: 768px) { h5 { font-size: 16px !important; } } .btn { font-size: 14px; } `; const ModalBackdrop = styled.div` position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0.4; `; const ModalDialog = styled.div` padding: 2em; z-index: 999; overflow-y: auto; max-height: 85%; margin-top: 5%; width: 50%; @media screen and (max-width: 768px) { margin: 2rem; width: 100%; } `; const ModalHeader = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 4px; `; const ModalFooter = styled.div` padding-top: 4px; display: flex; flex-direction: row; justify-content: space-between; align-items: items-center; `; const CloseButton = styled.button` display: flex; align-items: center; justify-content: center; background-color: white; padding: 0.5em; border-radius: 6px; border: 0; color: #344054; &:hover { background-color: #d3d3d3; } `; const ConfirmButton = styled.button` padding: 0.7em; border-radius: 6px; border: 0; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); background-color: #12b76a; color: white; &:hover { background-color: #0e9f5d; } `; const ModalContent = styled.div` flex: 1; font-size: 14px; margin-top: 4px; margin-bottom: 4px; overflow-y: auto; max-height: 50%; @media screen and (max-width: 768px) { font-size: 12px !important; } `; const NoButton = styled.button` background: transparent; border: none; padding: 0; margin: 0; box-shadow: none; `; return ( <> <Modal hidden={!isOpen}> <ModalBackdrop /> <ModalDialog className="card"> <ModalHeader> <h5 className="mb-0">Confirm proposal cancellation</h5> </ModalHeader> <ModalContent> If you cancel this proposal, the status will change to Cancelled and indicate to sponsors that this proposal is no longer active or relevant. Comments are still open, but you cannot reopen this proposal or make additional changes. <br /> Are you sure you want to proceed? </ModalContent> <div className="d-flex gap-2 align-items-center justify-content-end mt-2"> <Widget src={ "devgovgigs.petersalomonsen.near/widget/devhub.components.molecule.Button" } props={{ classNames: { root: "btn-outline-secondary" }, label: "Cancel", onClick: onCancelClick, }} /> <Widget src={ "devgovgigs.petersalomonsen.near/widget/devhub.components.molecule.Button" } props={{ classNames: { root: "btn-danger" }, label: "Ready to Cancel", onClick: onConfirmClick, }} /> </div> </ModalDialog> </Modal> </> );