react-bootstrap#Modal JavaScript Examples

function MyVerticallyCenteredModal(props) {
  const { activity } = props;

  return (
    <Modal
      {...props}
      size="lg"
      className="video_activity"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          <img src={logo} alt="" />
        </Modal.Title>
      </Modal.Header>

      <Modal.Body>
        {!!activity && (
          <Suspense fallback={<div>Loading</div>}>
            <H5PPreview
              activityId={activity}
              tokenrequire={false}
              showltipreview
            />
          </Suspense>
        )}
      </Modal.Body>
    </Modal>
  );
}

GameConfigurationModal = ({ optionSettings, onClose, onOptionSettingToggle }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Game Configuration')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <GameConfiguration
                        optionSettings={optionSettings}
                        onOptionSettingToggle={onOptionSettingToggle}
                    />
                </Modal.Body>
            </Modal>
        </>
    );
}

function ModalAfterSubmit(){
    return(
        <>
        <Modal.Dialog>
            <Modal.Header closeButton>
                <Modal.Title>Modal title</Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <p>Modal body text goes here.</p>
            </Modal.Body>

            <Modal.Footer>
                <Button variant="secondary">Close</Button>
                <Button variant="primary">Save changes</Button>
            </Modal.Footer>
        </Modal.Dialog>
        </>
    )
}

createModal(title, toggle) {
    return (
      <Modal size="lg" show centered>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Enter the message to send to all users:</p>
          <Form.Group>
            <Form.Control as="textarea" rows="10" id="comment" onChange={this.handleChange} />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button
            variant="primary btn-square"
            disabled={!this.state.comment.length}
            onClick={() => {
              if (window.confirm('You are about to send this message to all users (' + this.props.user_count + ' accounts). Are you sure?')) {
                this.submit();
              }
            }}>
            Send
          </Button>
          <Button variant="secondary btn-square" onClick={toggle}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }

render() {
		return (<Modal bssize="small" className={'h100 flex-important align-items-center'}
			show={this.props.shouldLogin}
			dialogClassName="loginModal"
		>
			<Modal.Body>
				<Login />
			</Modal.Body>
		</Modal>)
	}

render(){
  return (
    <div class="container-fluid">
          <Alert color="danger" className="Rounded p-3" >
                <CardTitle align="left">{this.state.sect}</CardTitle>
                <CardSubtitle align="left">
                    <Row>
                      <Col style={{"padding":"0px"}}>Section</Col>
                      <Col style={{"textAlign":"end"}}><Button onClick={()=>{this.handleModalsection()}}>Edit</Button></Col>
                    </Row>
                  </CardSubtitle> 
                  <Modal show={this.state.show} onHide={()=>this.handleModalsection()} >
                    <Modal.Header closeButton>Edit Section</Modal.Header>
                    <Modal.Body>
                      <form onSubmit={this.onSubmitsection}>
                        <Table className="section" responsive>
                        <tbody>
                        <tr>
                            <td>
                              <input type="text" name="section" value={this.state.sect}
                               onChange={this.onChangesection}  />
                            </td>
                            <td>
                              <div className={"form-group"}>
                                  <input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                        </Table>
                      </form>
                    </Modal.Body>
                  </Modal>

              </Alert>
        </div>

        );
}

export function ErrorModal({ show, handleClose, err }) {
  return (
    <>
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Body>
          <Alert variant="danger" onClose={handleClose}>
            <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
            <p>
              {err}
            </p>
          </Alert>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={handleClose}>
            Understood
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render() {
        return (
            <Modal show={this.props.show} onHide={this.props.onHide}>
                <Modal.Header closeButton={true}>
                    <Modal.Title>
                        {this.props.header}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {this.props.children}
                </Modal.Body>
                <Modal.Footer>
                    {this.props.footer}
                </Modal.Footer>
            </Modal>
        );
    }

export default function ImageViewer(props) {
	const { showModal, handleDownloadClick, handleRemoveDocClick, children, onHide, documentName } = props;
	return (
		<>
			<Modal
				className="modal fade stories"
				id="StoryDefault"
				tabIndex={-1}
				role="dialog"
				show={showModal}
				onHide={onHide}
				size="lg"
			>
				<Modal.Body style={{ padding: 0 }}>{children}</Modal.Body>
				<Modal.Footer style={{ padding: 0, justifyContent: 'space-between' }}>
					<div style={{ float: 'left' }}>{documentName}</div>
					<div>
						<Button onClick={handleRemoveDocClick} className="btn-sm" variant="danger">
							Remove
						</Button>
						&nbsp;
						<Button
							className="btn-sm"
							type="button"
							onClick={e => handleDownloadClick(e)}
							variant="primary"
						>
							Download
						</Button>
					</div>
				</Modal.Footer>
			</Modal>
		</>
	);
}

render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }

ModalWindow = ({
  children,
  toShow,
  onClose,
  onSubmit,
  onAfterClose,
  title,
  cancelButtonText,
  hideCancelButton,
  submitButtonText,
  useRedButton,
  marginLeft,
}) => (
  <Modal
    className={`${marginLeft ? classNames(styles.wrapper, 'ml-4') : styles.wrapper}`}
    show={toShow}
    onHide={onClose}
    onExited={onAfterClose}
    onEscapeKeyDown={onClose}
  >
    <Modal.Header closeButton>
      <h4>{title}</h4>
    </Modal.Header>
    <Modal.Body className={styles['modal-body']}>
      {children}
    </Modal.Body>
    <Modal.Footer className="justify-content-around">
      {hideCancelButton ? null : <button className={`btn btn-secondary ${styles['modal-btn']}`} type="button" onClick={onClose}>{cancelButtonText}</button>}
      <button className={`btn ${useRedButton ? 'btn-danger' : 'btn-success'} ${styles['modal-btn']}`} type="submit" onClick={onSubmit}>{submitButtonText}</button>
    </Modal.Footer>
  </Modal>
)

render() {
    return (
      <Modal show={this.props.show} onHide={this.callCloseFunction}>
        <Modal.Header closeButton>
          <Modal.Title>{this.props.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{this.props.body}</Modal.Body>
        <Modal.Footer>
          <Button variant={this.props.cancelButtonVariant ? this.props.cancelButtonVariant : 'secondary'} onClick={this.callCloseFunction}>
            {this.props.cancelText ? this.props.cancelText : 'Cancel'}
          </Button>
          <Button variant={this.props.submitButtonVariant ? this.props.submitButtonVariant : 'primary'} onClick={this.callSubmitFunction}>
            {this.props.submitText ? this.props.submitText : 'Submit'}
          </Button>
        </Modal.Footer>
      </Modal>
    )
  }

function HomeModal({lgShow, setLgShow, HomeCards}) {
	return (
		<Modal
			size='lg'
			show={lgShow}
			onHide={() => setLgShow(false)}
			aria-labelledby='example-modal-sizes-title-lg'>
			<Modal.Header closeButton>
				<Modal.Title id='example-modal-sizes-title-lg'>
					{HomeCards.title}
				</Modal.Title>
			</Modal.Header>
			<Modal.Body>{setModal(HomeCards.title, HomeCards.value)}</Modal.Body>
		</Modal>
	)
}

export default function AlertModal({
    open,
    toggle,
    children,
}) {
    return (
        <Modal
            show={open}
            onHide={toggle}
            animation={false}
        >
            <Modal.Header closeButton>
                <Modal.Title>Opps!! Error...</Modal.Title>
            </Modal.Header>
            <Modal.Body>{children}</Modal.Body>
            <Modal.Footer>
                <Button variant="danger"
                    onClick={toggle}
                >
                    Ok
                </Button>
            </Modal.Footer>
        </Modal>
    );
}

export function FundErrorModal () {
  const { error, setError } = useFundError()
  return (
    <Modal
      show={error}
      onHide={() => setError(false)}
    >
      <div className='modal-close' onClick={() => setError(false)}>X</div>
      <Modal.Body>
        <p className='font-weight-bolder'>you need more sats</p>
        <div className='d-flex justify-content-end'>
          <Link href='/wallet?type=fund'>
            <Button variant='success' onClick={() => setError(false)}>fund</Button>
          </Link>
        </div>
      </Modal.Body>
    </Modal>
  )
}

function SearchWrapper() {
    const { centerCoord } = useMaskData();
    const { t } = useTranslation();
    const [showModal, setShowModal] = useState(true);

    const handleClose = () => setShowModal(false);

    return (
        <>
            {!centerCoord ? <Search /> : <SearchResult />}
            
            <Modal show={showModal} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t("serviceShutdown")}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>
                        {t("notice.publicMaskShutdown")}
                    </p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" href="https://livecorona.co.kr">
                        {t("covid19Dashboard")}
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        {t("close")}
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

function CustomModal({header, body, children, show}) {
  return (
    <>
      <Modal show={show}>
        <Modal.Header closeButton>
          <Modal.Title>{header}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{body}</Modal.Body>
        <Modal.Footer>
          {children}
        </Modal.Footer>
      </Modal>
    </>
  );
}

AreYouSure = ({ isOpen, hide, iAmSure, children }) => {
  return (
    <Modal centered show={isOpen} onHide={hide}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm operation</Modal.Title>
      </Modal.Header>
      <Modal.Body>{children}</Modal.Body>
      <Modal.Footer>
        <Button className="button square accent" onClick={hide}>
          Go back
        </Button>
        <Button className="button full primary" onClick={iAmSure}>
          Delete
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

ExistingActivitySearchContainer = (props) => {
  const {
    closeModal,
    insertActivityCallback,
    libraries,
    getActivityData,
    selectedActivity,
    resetActivityData,
  } = props;

  const handleAddActivity = (activity) => {
    getActivityData(activity.id);
  };

  useEffect(() => {
    if (selectedActivity === null) return;

    const data = {
      specific: {
        action: {
          params: JSON.parse(selectedActivity.h5p.params),
          library: `${selectedActivity.h5p.library.name} ${selectedActivity.h5p.library.majorVersion}.${selectedActivity.h5p.library.minorVersion}`,
          metadata: { ...selectedActivity.h5p.metadata},
          subContentId: '',
        }
      },
      generic: 'action',
    };
    insertActivityCallback(data);
    resetActivityData();
    closeModal();
  }, [selectedActivity])

  return (
    <Modal {...props} show backdrop="static" keyboard={false} size="xl" aria-labelledby="contained-modal-title-vcenter" centered className="existing-activity-search-modal">
      <Modal.Header>
          <h2 className="curriki-utility-headings">Add existing activities</h2>
          <img
            src={cross}
            alt="cross"
            onClick={closeModal}
          />
      </Modal.Header>
      <Modal.Body>
          <ExistingActivitySearch addActivity={handleAddActivity} libraries={libraries} />
      </Modal.Body>
    </Modal>
  );
}

ViadeModal = (props) => {
  const [show, setShow] = useState(false);

  const handleClose = () => {
    props.handleClose();
    setShow(false);
  };
  const handleShow = (e) => {
    props.onOpen();
    setShow(true);
  };

  const saveButton = props.saveText ? (
    <Button
      data-testid="modalSaveButton"
      disabled={props.saveDisabled}
      variant="primary"
      onClick={() => {
        props.onSave();
        setShow(false);
      }}
    >
      {props.saveText}
    </Button>
  ) : null;

  const closeButton = props.closeText ? (
    <Button
      data-testid="modalCancelButton"
      variant="secondary"
      onClick={handleClose}
    >
      {props.closeText}
    </Button>
  ) : null;

  return (
    //Main show button
    <div>
      <Button
        data-testid="modalButton"
        disabled={props.disabled}
        variant="primary"
        onClick={e => {
          handleShow(e);
        }}
      >
        {props.toggleText}
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title data-testid="modalTitle">{props.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{props.children}</Modal.Body>
        <Modal.Footer>
          {saveButton}
          {closeButton}
        </Modal.Footer>
      </Modal>
    </div>
  );
}

SelectDeckModal = ({ onClose, onDeckSelected, onChooseForMe }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Select Deck')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <Tabs>
                            <TabList>
                                <Tab>My Decks</Tab>
                                <Tab>Pre-cons</Tab>
                                <Tab>Building Basics</Tab>
                                <Tab style={{ backgroundColor: 'skyblue', color: '#333' }}>
                                    <img
                                        src={igcircle}
                                        alt='Adventuring Party'
                                        height='22'
                                        width='22'
                                    />{' '}Adventuring Party
                                </Tab>
                            </TabList>

                            <TabPanel>
                                <Button onClick={() => onChooseForMe(0)}>
                                    Choose for me
                                </Button>
                                <DeckList onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(1)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={1} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(3)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={3} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(2)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={2} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                        </Tabs>
                    </div>
                </Modal.Body>
            </Modal>
        </>
    );
}

createModal(title, toggle, submit) {
    return (
      <Modal size="lg" show centered>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Row>
              <Form.Group as={Col}>
                <Form.Label className="nav-input-label">Lab Test Type</Form.Label>
                <Form.Control as="select" className="form-control-lg" id="lab_type" onChange={this.handleChange} value={this.state.lab_type}>
                  <option disabled></option>
                  <option>PCR</option>
                  <option>Antigen</option>
                  <option>IgG Antibody</option>
                  <option>IgM Antibody</option>
                  <option>IgA Antibody</option>
                </Form.Control>
              </Form.Group>
            </Row>
            <Row>
              <Form.Group as={Col}>
                <Form.Label className="nav-input-label">Specimen Collection Date</Form.Label>
                <Form.Control
                  type="date"
                  className="form-square form-control-lg"
                  value={this.state.specimen_collection}
                  onChange={this.handleChange}
                  id="specimen_collection"
                />
              </Form.Group>
            </Row>
            <Row>
              <Form.Group as={Col}>
                <Form.Label className="nav-input-label">Report Date</Form.Label>
                <Form.Control type="date" className="form-square form-control-lg" value={this.state.report} onChange={this.handleChange} id="report" />
              </Form.Group>
            </Row>
            <Row>
              <Form.Group as={Col}>
                <Form.Label className="nav-input-label">Result</Form.Label>
                <Form.Control as="select" className="form-control-lg" id="result" onChange={this.handleChange} value={this.state.result}>
                  <option disabled></option>
                  <option>positive</option>
                  <option>negative</option>
                  <option>indeterminate</option>
                  <option>other</option>
                </Form.Control>
              </Form.Group>
            </Row>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary btn-square" onClick={submit}>
            Create
          </Button>
          <Button variant="secondary btn-square" onClick={toggle}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }

render(){
  return (
    <div class="container-fluid">

          <Alert color="success" className="Rounded p-3" >
                <CardTitle align="left">{this.state.branch.slice(0,3)}</CardTitle>
                <CardSubtitle align="left">
                  <Row>
                    <Col style={{"padding":"0px"}}>
                      Branch
                    </Col>
                    <Col style={{"textAlign":"end"}}>
                      <Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbranch()}}>Edit</Button>
                    </Col>
                  </Row>
                  </CardSubtitle> 
                  <Modal show={this.state.show} onHide={()=>this.handleModalbranch()} >
                    <Modal.Header closeButton>Edit Branch</Modal.Header>
                    <Modal.Body>
                      <form onSubmit={this.onSubmitbranch}>
                        <Table className="branchMarks" responsive>
                        <tbody>
                        <tr>
                            <td>
                              <input type="text" name="Branch" value={this.state.branch}
                               onChange={this.onChangebranch}  />
                            </td>
                            <td>
                              <div className={"form-group"}>
                                  <input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                        </Table>
                      </form>
                    </Modal.Body>
                  </Modal>
              </Alert>
        </div>
        );
}

function ReceiveModal(props) {
  const [state] = useContext(UserContext);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (copied)
      setTimeout(() => {
        setCopied(false);
      }, 1500);
  }, [copied]);

  return (
    <div>
      <Modal
        size="lg"
        dialogClassName="modal-90w"
        centered
        className="modal_wrapper"
        show
        {...props}
      >
        <Modal.Header closeButton>
          <Header>
            <HeaderTitle>Receive on Polygon Nightfall</HeaderTitle>
          </Header>
        </Modal.Header>
        <Modal.Body style={{ padding: '0px' }}>
          <MyBody>
            <div>
              <QRCode value={state.compressedPkd} />
            </div>
            <p>Wallet Address</p>
            <span>{state.compressedPkd}</span>
            {copied ? (
              <MyFooter>
                <Lottie
                  style={{ height: '32px', width: '32px', margin: '20px' }}
                  animationData={checkMarkYes}
                  loop
                />
              </MyFooter>
            ) : (
              <CopyToClipboard text={state.compressedPkd} onCopy={() => setCopied(true)}>
                <MyFooter>
                  <QrCodeButton>Copy Address</QrCodeButton>
                </MyFooter>
              </CopyToClipboard>
            )}
          </MyBody>
        </Modal.Body>
      </Modal>
    </div>
  );
}

render() {
    var center = [this.state.lat, this.state.lng];

    const basemapsDict = {
      dark: "	https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
      osm: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      hot: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",

    }

    return (
      <Map zoom={this.state.zoom} center={center}>
        <div className="leaflet-bottom leaflet-right buttons-container">
          <Container>
            <Fab
              color="primary"
              aria-label="edit"
              tooltip="Add a new story!"
              onClick={this.showModal}>
              <FaPlus />
            </Fab>
          </Container>
        </div>
        {
          <Modal position={[this.state.lat, this.state.lng]} show={this.state.showModal} onHide={this.closeModal.bind(this)}>

            <form onSubmit={this.handleSubmit}>
              <h3> Add your Story. </h3>
              <label>
                <br />
                      Title:
                      <br />
                <input name="storyTitle" type="text" defaultValue={this.state.storyTitle} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Body:<br />
                <textarea name="storyBody" defaultValue={this.state.storyBody} onChange={this.handleChange} />
                <br />
              </label>
              <label>
                <br />
                      Add a photo: (optional) <br />
                <input type="file" style={{ marginRight: "-95px" }} ref={this.fileInput} />

                <br />
              </label>
              <br />
              <br />
              <input type="submit" value="Submit" />
            </form>
          </Modal>}


        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url={basemapsDict[this.state.basemap]}
        />
        <Basemap basemap={this.state.basemap} onChange={this.onBMChange} />


        <GeojsonLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />

        <GeoWikipediaLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />



        <Marker position={center} icon={MyLocationIcon}>
          <Popup>
            <div>Your Location - latitude: {Number(this.state.lat).toFixed(4)} - longitude: {Number(this.state.lng).toFixed(4)}</div>
          </Popup>
        </Marker>
      </Map>
    );
  }

ConfirmationModal = ({
  onClose,
  onConfirm,
  description,
  declineBtnText,
  confirmBtnText,
}) => {
  return (
    <>
      <Modal
        show={true}
        size="lg"
        aria-labelledby="confirmation-modal"
        centered
      >
        <div className="body-content d-flex flex-column">
          <h2>{fbt('Confirm', 'Confirm')}</h2>
          <div className="currencies">{description}</div>
        </div>
        <div className="body-actions d-flex align-items-center justify-content-center">
          <button
            className="btn-clear-blue d-flex align-items-center justify-content-center mr-2"
            onClick={onClose}
          >
            {declineBtnText}
          </button>
          <button
            className="btn-blue d-flex align-items-center justify-content-center ml-2"
            onClick={onConfirm}
          >
            {confirmBtnText}
          </button>
        </div>
      </Modal>
      <style jsx>{`
        .body-content {
          color: black;
          text-align: center;
          padding: 20px;
        }

        .body-content h2 {
          font-size: 25px;
          margin-bottom: 18px;
          font-weight: bold;
          color: #183140;
        }

        .body-actions {
          min-height: 95px;
          background-color: #f2f3f5;
          border-radius: 0px 0px 10px 10px;
          border-top: solid 1px #cdd7e0;
        }

        button {
          padding: 0px 60px;
          height: 50px;
          border-radius: 25px;
          font-size: 18px;
        }
      `}</style>
    </>
  )
}

SimpleModal = (props) => {
  return (
    <Modal
      show={props.open}
      onHide={props.onClose}
      backdrop="static"
      keyboard={false}
      dialogClassName={clsx(
        styles.simpleModal,
        props.className,
        props.isConfirmSwap && styles.confirmSwap,
        props.title === 'Transaction Submitted' && 'centerAlign',
        props.isConfirmTransaction && 'removeCloseIcon',
      )}
      centered={true}
    >
      {/* * Header */}
      <div
        className={clsx('d-flex', props.isConfirmSwap ? styles.confirmSwapHeader : styles.header, {
          [styles.noTitle]: !props.title,
        })}
      >
        <div className={clsx(styles.title, 'flex-grow-1')}>
          {props.title}
          {props.title === 'Transaction Submitted' && (
            <OverlayTrigger
              placement="right"
              overlay={
                <Tooltip id="button-tooltip-ts" {...props}>
                  Your transaction has been added to the mempool. It can take up to 30 seconds
                  before your transaction is confirmed.
                </Tooltip>
              }
            >
              <span
                style={{ cursor: 'pointer' }}
                className="material-icons-round ml-1  info-transaction-submitted"
              >
                help_outline
              </span>
            </OverlayTrigger>
          )}
        </div>
        {!props.isConfirmTransaction && (
          <div className={styles.closeBtn} onClick={props.onClose}>
            <span className="material-icons-round">close</span>
          </div>
        )}
      </div>
      {/* * Header */}

      {/* * Body */}
      <div
        className={clsx(props.isConfirmSwap ? styles.confirmSwapContent : styles.content, {
          [styles.noTopPadding]: !props.title,
        })}
      >
        {props.children}
      </div>
      {/* * Body */}
    </Modal>
  );
}

render() {
    return (
      <>
        <Modal
          show={this.state.show}
          onHide={this.handleClose}
          size={"xs"}
          aria-labelledby="contained-modal-title-vcenter"
          centered
          dialogClassName="small-modal"
        >
          <Modal.Header style={{ background: "#AB84C8" }}>
            <h5
              style={{ textAlign: "center", width: "100%", fontSize: "1.5rem" }}
            >
              Sort
            </h5>
          </Modal.Header>
          <Modal.Body>
            <Form.Control
              as="select"
              className="small-selection"
              onChange={(e) => {
                this.setState({ sort: e.target.value });
              }}
            >
              <option value="name" selected>
                Name
              </option>
              <option value="rating">Rating</option>
              <option value="total_project">Total Project</option>
            </Form.Control>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
            <Button
              variant="primary"
              style={{ background: "#AB84C8" }}
              onClick={()=>{
                this.props.onSort(this.state.sort);
                this.handleClose();
              }}
            >
              Sort
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }

TimeZoneAction = ({ setMenuOpen, setTimeZone, timeZone, darkMode }) => {
  const [timeZoneOpen, setTimeZoneOpen] = useState(false)

  const theme = theme => ({
    ...theme,
    colors: {
      ...theme.colors,
      neutral0: darkMode ? '#101214' : '#fff',
      neutral80: darkMode ? '#fff' : '#000',
      primary25: darkMode ? '#343A40' : '#deebff',
      primary: '#42A5FF',
    }
  })

  return <>
    <FABAction
      className='fab-action'
      title='Change Timezone'
      content={<BsClock size='1.25em' className='m-1' />}
      onClick={() => {
        setTimeZoneOpen(true)
        setMenuOpen(false)
      }}
    />

    <Modal size="xl" centered show={timeZoneOpen} onHide={() => setTimeZoneOpen(false)}>
      <Modal.Header closeButton>
        <Modal.Title>Change the timezone</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <TimezoneSelect theme={theme} value={timeZone} onChange={tz => setTimeZone(tz.value)} />
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={() => setTimeZoneOpen(false)}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  </>
}