@material-ui/core#DialogContent JavaScript Examples

render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.props.onClose)}
				disableBackdropClick={false}
				open={true}
				onClose={this.onClose}
			>
				<DialogTitle>Leaderboard</DialogTitle>
				<DialogContent>
					<TableContainer component={Paper}>
						<Table>
							<TableBody>
								{this.state.userStats.map((userStat, idx) => {
									return this.makeRow(
										idx + 1,
										userStat.Properties.User
									);
								})}
							</TableBody>
						</Table>
					</TableContainer>
				</DialogContent>
				<DialogActions>
					<Button onClick={this.onClose} color="primary">
						Close
					</Button>
				</DialogActions>
			</Dialog>
		);
	}

BetaBanner = () => {
  const [isBetaBarVisible, setIsBetaBarVisible] = useState(true);
  const classes = useStyles();

  const onCloseClick = () => {
    localStorage.setItem("isBetaBannerSeen", true);

    setIsBetaBarVisible(false);
  };

  return (
    <>
      {isBetaBarVisible && (
        <Dialog open={true} maxWidth="xs" fullWidth>
          <DialogContent className={classes.dialogContent}>
            <Typography variant="h3">
              <strong>Welcome!</strong>
            </Typography>
            <Box padding="1rem 0">
              <Chip label="BETA" color="secondary" className={classes.betaChip} size="small" />
            </Box>
            <div className={classes.betaText}>
              <Typography variant="body1">
                <strong>Akashlytics Deploy</strong> is currently in <strong>BETA</strong>. We strongly suggest you start with a new wallet and a small amount of
                AKT until we further stabilize the product. Enjoy!
              </Typography>
            </div>
          </DialogContent>
          <DialogActions>
            <Button variant="contained" onClick={onCloseClick} type="button" color="primary">
              Got it!
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

Modal = (props) => {
	const { open, handleClose, title, content, handleConfirmation } = props;
	return (
		<Dialog open={open} onClose={handleClose} aria-labelledby="dialog-title">
			<div style={{ minWidth: 300 }}>
				<DialogTitle id="dialog-title">{title}</DialogTitle>

				<DialogContent>
					{props.children ? (
						<>{props.children}</>
					) : (
						content && (
							<DialogContentText id="dialog-description">
								{content}
							</DialogContentText>
						)
					)}
				</DialogContent>

				<DialogActions>
					<Button onClick={handleClose} color="primary">
						Cancel
					</Button>
					{handleConfirmation && (
						<Button onClick={handleConfirmation} color="primary" autoFocus>
							Confirm
						</Button>
					)}
				</DialogActions>
			</div>
		</Dialog>
	);
}

export function ErrorDialog(props) {
  const alert = useSelector(state => state.alerts)
  const dispatch = useDispatch();
  
  const handleClose = () => {
    dispatch(alertActions.clear());
  }

  const titleText = alert.title || '문제가 발생하였습니다.'
  const bodyMessage = alert.message || '관리자에게 문의하여 주세요.'

  return (
    <Dialog
      open={alert.open}
      onClose={handleClose}
      aria-labelledby="error-alert-dialog-title"
      aria-describedby="error-alert-dialog-description"
    >
      { alert.title && 
        <DialogTitle id="alert-dialog-title">{titleText}</DialogTitle>
      }
      <DialogContent>
        {bodyMessage}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          닫기
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    const { characters, characterId, open, onClose } = this.props;
    const { name, error } = this.state;
    const characterName = pathOr(null, [characterId])(characters);
    const validChar = !(characterId === null || characterName === null);

    return (
      <Dialog open={open} onClose={onClose}>
        <DialogTitle>
          {!validChar
            ? 'Add Character'
            : `Edit [${characterName}]`}
        </DialogTitle>
        <DialogContent>
          <form onSubmit={this.handleSave}>
            <TextField
              label="Character Name"
              value={name}
              onChange={this.handleChange}
              inputProps={{
                maxLength: 20,
              }}
              autoFocus
              error={Boolean(error)}
              helperText={error}
            />
          </form>
        </DialogContent>
        <DialogActions>
          {validChar &&
          <Button onClick={this.handleDelete} classes={{ label: 'text-red' }}>Delete</Button>}
          <Button onClick={onClose}>Cancel</Button>
          <Button color="primary" onClick={this.handleSave}>Confirm</Button>
        </DialogActions>
      </Dialog>
    );
  }

export default function FieldControlDialog(props) {
  return (
    <Dialog
      open={props.open}
      onClose={props.closeDialog}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth={'lg'}
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description"></DialogContentText>
        <div>
          <DndProvider backend={props.backend}>{props.component}</DndProvider>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.action} color="primary" autoFocus>
          {props.actionProcess && <CircularProgress size={24} />}
          {!props.actionProcess && 'Save'}
        </Button>
        <Button onClick={props.closeDialog} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

UpdateAvatarModal = ({ handleCloseMenu, user }) => {
  const classes = useDialogStyles();
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
    handleCloseMenu();
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <MenuItem onClick={handleClickOpen}>
        <ListItemIcon>
          <FaceIcon style={{ marginRight: 7 }} />
          {user.avatar.exists ? 'Change Avatar' : 'Add Avatar'}
        </ListItemIcon>
      </MenuItem>
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="sm"
        classes={{ paper: classes.dialogWrapper }}
        fullWidth
      >
        <DialogTitle onClose={handleClose}>
          {user.avatar.exists ? 'Update your avatar' : 'Add an avatar'}
        </DialogTitle>
        <DialogContent>
          <UpdateAvatarForm closeModal={handleClose} />
        </DialogContent>
      </Dialog>
    </div>
  );
}

render() {
    const { closeModal, modalOpen } = this.props;

    const fullScreen = window.innerWidth < 450;

    return (
      <Dialog open={ modalOpen } onClose={ closeModal } fullWidth={ true } maxWidth={ 'sm' } TransitionComponent={ Transition } fullScreen={ fullScreen }>
        <DialogContent>
          <Unlock closeModal={ closeModal } />
        </DialogContent>
      </Dialog>
    )
  }

render() {
    const { closeModal, modalOpen } = this.props;

    // const fullScreen = window.innerWidth < 576;

    return (
      <Dialog
        open={modalOpen}
        onClose={closeModal}
        fullWidth={true}
        maxWidth={"sm"}
        TransitionComponent={Transition}
      >
        <DialogContent>
          <Unlock closeModal={closeModal} />
        </DialogContent>
      </Dialog>
    );
  }

render() {
    //console.log("Rendering AddGraph");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="center">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="plotname">Plot Name</InputLabel>
                <Input
                  id="plotname"
                  onChange={event => this.plotname = event.target.value}
                  aria-describedby="plotname-helper-text"
                  inputProps={{
                    'aria-label': 'Plot Name',
                  }}
                />
                <FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
            <ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
              {this.renderButtons()}
            </ToggleButtonGroup>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

render() {
        const {
            maxWidth,
            scroll,
        } = this.props;
        return (
            <Dialog
                open={this.state.dialogOpen}
                scroll={scroll}
                fullWidth={true}
                maxWidth={maxWidth}
                onBackdropClick={this.handleToggle}
            >
                <DialogContent>
                    {this.props.children}
                </DialogContent>
            </Dialog>
        );
    }

StopDialog = ({open, stops, handleClose}) => {
  const { routeList, stopList } = useContext ( AppContext )
  const { i18n } = useTranslation()
  const [ routes, setRoutes ] = useState([])
  const classes = useStyles()

  useEffect(() => {
    if (stops === undefined) {
      setRoutes([])
      return
    }
    let _routes = [];
    Object.entries(routeList).forEach(([key, route]) => {
      stops.some( ([co, stopId]) => {
        if ( route.stops[co] && route.stops[co].includes(stopId) ) {
          _routes.push(key+'/'+route.stops[co].indexOf(stopId))
          return true
        }
        return false
      })
    })
    setRoutes(_routes)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stops])
  
  return (
    <Dialog open={open} onClose={handleClose} className={classes.dialog}>
      <DialogTitle className={classes.title}>{stopList[stops[0][1]].name[i18n.language]}</DialogTitle>
      <DialogContent>
        <List>
          {routes.map(route => (
            <SuccinctTimeReport key={route} routeId={route} />
          ))}
        </List>
      </DialogContent>
    </Dialog>
  )
}

CustomDialog = ({
  open,
  onClose,
  title,
  description,
  children,
  actions,
  ...props
}) => {
  const dialogClasses = useDialogStyles();

  return (
    <Dialog
      open={open}
      onClose={onClose}
      classes={dialogClasses}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      transitionDuration={0}
      {...props}
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
      <DialogContent>
        {description && (
          <DialogContentText id="alert-dialog-description">
            {description}
          </DialogContentText>
        )}
        {children}
      </DialogContent>
      {actions && <DialogActions>{actions}</DialogActions>}
    </Dialog>
  );
}

export default function Popup(props) {
  const { btnText, children, handleClose, open, title } = props;

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          {btnText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

// Dialog box to display generated netlist
export function NetlistModal ({ open, close, netlist }) {
  const netfile = useSelector(state => state.netlistReducer)
  const createNetlistFile = () => {
    const titleA = netfile.title.split(' ')[1]
    const blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' })
    FileSaver.saveAs(blob, `${titleA}_eSim_on_cloud.cir`)
  }
  return (
    <Dialog
      open={open}
      onClose={close}
      TransitionComponent={Transition}
      keepMounted
      aria-labelledby="generate-netlist"
      aria-describedby="generate-netlist-description"
    >
      <DialogTitle id="generate-netlist-title">{'Netlist Generator'}</DialogTitle>
      <DialogContent dividers>
        <DialogContentText id="generate-netlist-description">
          Current Netlist for given schematic...<br /><br />
          <TextareaAutosize aria-label="empty textarea" rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} />
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        {/* Button to download the netlist */}
        <Button color="primary" onClick={createNetlistFile}>
          Download
        </Button>
        <Button onClick={close} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

DialogWindowWrapper = ({ isOpen, handleClose, title, children }) => {
  const styles = useStyles();

  return (
    <Dialog
      className={styles.dialogComponent}
      id='dialog-window'
      onClose={handleClose}
      open={isOpen}
    >
      <div className={styles.dialogTitleWrapper}>
        <DialogTitle className={styles.dialogTitle} onClose={handleClose}>
          {title}
        </DialogTitle>
        <Tooltip
          title={config.buttonTitles.CLOSE_DIALOG_TITLE}
          placement='bottom'
        >
          <span className={styles.closeButton} onClick={handleClose}>
            &#215;
          </span>
        </Tooltip>
      </div>
      <DialogContent dividers>{children}</DialogContent>
    </Dialog>
  );
}

AnalysisDialog = props => {
  const classes = useStyles();

  const {
    open, onClose, onChange, isNew, title: titleOld, content: contentOld, analysisId,
  } = props;
  const [title, setTitle] = useState(isNew ? '' : titleOld);
  const [content, setContent] = useState(isNew ? '' : contentOld);
  const [error, setError] = useState('');

  const handleSubmit = (contentNew) => {
    setContent(contentNew);
    if (isNew) {
      APIService.addAnalysis(title, contentNew).then(onChange).catch(() => setError('Error in adding Analysis'));
    } else {
      APIService.updateAnalysis(analysisId, title, contentNew).then(onChange).catch(() => setError('Error in updating Analysis'));
    }
  };

  return (
    <Dialog open={open} onClose={onClose} aria-labelledby="Add Analysis form">
      <DialogContent>
        <div className={classes.form}>
          <Input type="text" label="Title" required onChange={e => setTitle(e.target.value)} value={title} />
          <TextEditor content={content} onUpdate={handleSubmit} onCancel={onClose} />
        </div>
        <p className={classes.error}>
          {error}
        </p>
      </DialogContent>
    </Dialog>
  );
}

export default function NewVersionDialog(props) {
  const showNewVersionDialog = useSelector(
    (state) => state.Commons.showNewVersionDialog
  );
  const { value } = useAsync(fetchNewVersionDate);
  const dispatch = useDispatch();

  if (!value) {
    return null;
  }

  function onSubmit() {
    dispatch(hideNewVersionDialog());
    window.location.reload();
  }

  return (
    <Dialog
      open={showNewVersionDialog}
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogTitle>{value.title}</DialogTitle>
      <DialogContent>{value.description}</DialogContent>
      <DialogActions>
        <Button onClick={onSubmit}>رفتن به نسخه‌ی جدید</Button>
      </DialogActions>
    </Dialog>
  );
}

function DialogComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Dialog Example</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This is a dialog from the Material UI app rendered in a React{" "}
            <code>Portal</code>.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={handleClose}
            variant="contained"
            color="primary"
            autoFocus
          >
            Nice
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

function DialogComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Dialog Example</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This is a dialog from the Material UI app rendered in a React <code>Portal</code>.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} variant="contained" color="primary" autoFocus>
            Nice
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default function UrlsDialog(props) {
    const classes = useStyles();
    return (
        <Dialog open={props.state.hitsopen} onClose={props.handleClose} aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Link Activity</DialogTitle>
            <DialogContent>
                {props.hitActivity.map((activity) => (
                    <Accordion className={classes.accordion}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1a-content"
                            id="panel1a-header"
                        >
                            <Typography className={classes.heading}>{activity.data.timestamp}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Box bgcolor="text.primary" color="background.paper" p={2} width={1}>
                                <div>
                                    <p><b>IPV4:</b>{activity.data.ipv4}</p>
                                    <p><b>User-Agent:</b>{activity.data.useragent}</p>
                                </div>
                            </Box>

                        </AccordionDetails>
                    </Accordion>
                ))}
            </DialogContent>
            <DialogActions>
                <Button onClick={props.handleClose} color="primary">
                    Cancel
              </Button>
            </DialogActions>
        </Dialog>
    );
}

export default function RemoveDialog({ open, setOpen, name, action }) {
  return (
    <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm">
      <DialogTitle>{name}</DialogTitle>
      <DialogContent>
        <DialogContentText>Are you sure that you want to remove selected item?</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={action}>Remove Item</Button>
        <Button onClick={() => setOpen(false)} color="primary">
          Keep Item
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export function DeviceSelector({ className, hidden }) {
  const classes = useStyles();

  return (
    <DialogContent className={className} hidden={hidden}>
      <div className={classes.listSection}>
        <AudioInputList />
      </div>
      <div className={classes.listSection}>
        <AudioOutputList />
      </div>
      <div className={classes.listSection}>
        <VideoInputList />
      </div>
    </DialogContent>
  );
}

DialogDisplay = ({ person: { name, designation, phoneNumber, emailId, githubProfile, linkedinProfile } }) => {
    const classes = teamMemberStyles();
    const [open, setOpen] = useState(false);
    return (
        <div className={`${classes.tilebar} ${classes.tilebarRootTitle} ${classes.tilebarBottom}`}>
            <div className={`${classes.titlePosRight} ${classes.titleWrap}`}>
                <div className={classes.title}>{name}</div>
                <div><span>{designation}</span></div>
            </div>
            <CardActions onClick={() => setOpen(true)} className={classes.actionItem}><Info /></CardActions>
            <Dialog
                aria-labelledby="simple-dialog-title"
                aria-describedby="simple-dialog-description"
                open={open}
                onClose={() => { setOpen(false) }}
            >
                <DialogContent style={{minWidth:'38vh',minHeight:'25vh'}}>
                    {name ? <DialogContentText className={classes.dialogHeading}>{name}</DialogContentText> : null}
                    {phoneNumber ? <DialogContentText className={classes.dialogContent}><LocalPhone className={classes.icon}/> {phoneNumber}</DialogContentText> : null}
                    {emailId ? <DialogContentText className={classes.dialogContent}><Mail className={classes.icon}/> {emailId}</DialogContentText> : null}
                    {githubProfile ? <a href={githubProfile} alt={"githubProfile"} ><GitHub className={classes.githubIcon} /></a> : null}
                    {linkedinProfile ? <a href={linkedinProfile} alt={"linkedinProfile"}><LinkedIn className={classes.linkedinIcon} /></a> : null}
                </DialogContent>
            </Dialog>
        </div>
    )
}

function ConfirmClearDialog(props) {
  const { setQueue, confirmDialog, setConfirmDialog } = props;

  function handleClickYes() {
    setQueue([]);
  }

  function handleClickNo() {
    setConfirmDialog({ ...confirmDialog, isOpen: false });
  }

  return (
    <Dialog
      open={confirmDialog.isOpen}
      PaperProps={{ style: { backgroundColor: "orange", boxShadow: "none" } }}
    >
      <DialogTitle>
        <Typography variant="h6" color="primary">
          {confirmDialog.title}
        </Typography>
      </DialogTitle>

      <DialogContent>
        <Typography variant="subtitle2" color="primary">
          {confirmDialog.subTitle}
        </Typography>
      </DialogContent>

      <DialogActions>
        <Button onClick={handleClickYes}>
          <Typography color="primary"> Yes </Typography>
        </Button>
        <Button onClick={handleClickNo}>
          <Typography color="primary"> No </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function UrlsDialog(props) {
  return (
    <Dialog open={props.state.warnOpen} onClose={props.warnClose} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">Replace?</DialogTitle>
      <DialogContent>
        <DialogContentText>There is already a Short URL with this same name. Do you want to Replace?</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.warnClose} color="primary">
          Cancel
        </Button>
        <Button onClick={props.handleReplace} color="primary">
          Replace
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.close)}
				open={this.state.open}
				className="find-game-dialog"
				disableBackdropClick={false}
				onClose={this.close}
			>
				<DialogTitle>Find game</DialogTitle>
				<DialogContent>
					<DialogContentText>
						Enter any game ID or URL to find it. You can find the
						game URL in the address bar for any opened game, or by
						choosing "Share" in the top right menu of any game.
					</DialogContentText>
					<TextField
						id="find-game-by-id-input-field"
						label="Game ID"
						autoFocus
						margin="dense"
						fullWidth
					/>
					<DialogActions>
						<Button onClick={this.close} color="primary">
							Cancel
						</Button>
						<Button
							onClick={this.onFind}
							color="primary"
						>
							Find
						</Button>
					</DialogActions>
				</DialogContent>
			</Dialog>
		);
	}

AccountsModal = ({ onClose }) => {
  const classes = useStyles();
  const { address, setSelectedWallet, wallets, setWallets } = useWallet();
  const { localCerts, setLocalCert, setValidCertificates, setSelectedCertificate } = useCertificate();
  const { wallets: storageWallets } = useStorageWallets();
  const history = useHistory();

  const handleSelectAccount = (wallet) => {
    if (wallet.address !== address) {
      const newWallet = wallets.find((w) => w.address === wallet.address);

      // Update memory wallets
      for (let i = 0; i < wallets.length; i++) {
        wallets[i].selected = wallets[i].address === wallet.address;
      }

      // Update storage wallets
      const newStorageWallets = storageWallets.map((w) => ({ ...w, selected: w.address === wallet.address }));
      const localCert = localCerts.find((c) => c.address === wallet.address);

      updateStorageWallets(newStorageWallets);
      setWallets(wallets);
      setSelectedWallet(newWallet);
      setValidCertificates([]);
      setSelectedCertificate(null);

      if (localCert) {
        setLocalCert(localCert);
      }

      onClose();

      history.replace(UrlService.dashboard());
    }
  };

  const handleAddAccount = () => {
    history.push(UrlService.register(true));
    onClose();
  };

  return (
    <Dialog open={true} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>
        <span className={classes.dialogTitle}>
          Accounts
          <Button variant="contained" size="small" color="primary" onClick={handleAddAccount}>
            Add account
          </Button>
        </span>
      </DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <List className={classes.list}>
          {storageWallets.map((wallet) => {
            return (
              <ListItem key={wallet.address} dense button onClick={() => handleSelectAccount(wallet)}>
                <ListItemIcon>{wallet.address === address && <CheckIcon color="primary" />}</ListItemIcon>
                <ListItemText
                  classes={{ secondary: classes.secondaryText }}
                  primary={
                    <Box display="flex" alignItems="center" justifyContent="space-between" fontSize="1rem">
                      {wallet.name}
                    </Box>
                  }
                  secondary={wallet.address}
                />
              </ListItem>
            );
          })}
        </List>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} type="button" autoFocus variant="contained" color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

function DiagnosticContainer(props) {
  const { reminderStatus, setReminderStatus } = props;
  const handleClose = () => {
    setReminderStatus(false);
  };
  const classes = useStyles();
  const { userSession } = useBlockstack();
  const today = new Date();
  const { i18n } = useTranslation();
  const history = useHistory();

  return (
    <div>
      <Typography variant="h5">
        <Trans i18nKey="logSection.text.hello.hello " />
        <b>{userSession.loadUserData().profile.name}</b>
      </Typography>
      <Typography variant="h6">
        <Trans i18nKey="logSection.text.todayIs.todayIs" />:{' '}
        <b>{today.toLocaleDateString(i18n.languages, dateOptions)}</b>{' '}
      </Typography>
      <hr className={classes.hr} />
      <HealthLogToggle />
      <Dialog
        open={reminderStatus}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogContent className={classes.dialog}>
          <DialogContentText id="alert-dialog-description">
            <Trans i18nKey="logSection.text.takeSurvey.takeASurvey" />{' '}
          </DialogContentText>
          <DialogActions className={classes.buttonContainer}>
            <Button
              className={classes.button}
              color="default"
              onClick={() => {
                handleClose();
                history.push('/symptomsurvey');
              }}
            >
              <Trans i18nKey="logSection.text.takeSurvey.takeASurvey" />
            </Button>
            <Button onClick={handleClose} color="default">
              <Trans i18nKey="surveySection.text.close.close" />
            </Button>
          </DialogActions>
        </DialogContent>
      </Dialog>
    </div>
  );
}