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; } } .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 (width < 720px) { 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%; `; 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={"megha19.near/widget/devhub.components.molecule.Button"} props={{ classNames: { root: "btn-outline-secondary" }, label: "Cancel", onClick: onCancelClick, }} /> <Widget src={"megha19.near/widget/devhub.components.molecule.Button"} props={{ classNames: { root: "btn-danger" }, label: "Ready to Cancel", onClick: onConfirmClick, }} /> </div> </ModalDialog> </Modal> </> );