@material-ui/core#DialogTitle TypeScript Examples

export function DeleteDialog(props: Props) {
  const { t } = useTranslation();
  const note = props.note;

  const deleteNote = useCallback((note: Note) => {
    vscode.postMessage({
      action: MessageAction.DeleteNote,
      data: note,
    });
  }, []);

  return (
    <Dialog open={props.open} onClose={props.onClose}>
      <DialogTitle>{t("delete-file-dialog/title")}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t("delete-file-dialog/subtitle")}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          style={{ color: "red" }}
          onClick={() => {
            deleteNote(note);
            props.onClose();
          }}
        >
          {t("general/Delete")}
        </Button>
        <Button onClick={props.onClose}>{t("general/cancel")}</Button>
      </DialogActions>
    </Dialog>
  );
}

_Dialog = ({ open, title, body, actions, onClose }: { open: boolean, title?: string, body?: string, actions: Action[], onClose: () => void }) => {
	if (open) {
		return (
			<Dialog onClose={onClose} open={open} maxWidth='md'>
				<div style={{ minWidth: '280px' }}>
					<DialogTitle>
						{title}
					</DialogTitle>
					{body && <DialogContent dividers>
						{body}
					</DialogContent>}
					<DialogActions>
						{actions.map((action, index) => {
							return (
								<Button key={index} variant={action.variant} color={action.color} autoFocus={action.autoFocus} onClick={() => {
									onClose()
									if (action.handler) {
										action.handler()
									}
								}}>
									{action.title}
								</Button>
							)
						})
						}
					</DialogActions>
				</div>
			</Dialog>
		)
	}
	return <></>
}

export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
}: DialogProps<AlertParams, FormReturn>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog()}
      disableBackdropClick
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      style={{ padding: 100 }}
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton
          autoFocus
          style={{ width: '100%' }}
          onClick={() => closeDialog()}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}

export default function (props: { renderError: RenderError }): JSX.Element {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Dialog open={true} maxWidth={false}>
        <DialogTitle disableTypography>
          <Typography variant='h5'>Oops! Something went wrong...</Typography>
        </DialogTitle>
        <DialogContent className={classes.dialogContent}>
          <img
            src='/img/hippo-with-turtle.jpg'
            alt={`"hippo" by .wilkie is licensed with CC BY-NC-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/2.0/`}
          />
          <pre className={classes.pre}>{props.renderError.error.stack || props.renderError.error.message}</pre>
        </DialogContent>
        <DialogActions>
          <Button component={'a'} href='/'>
            Go home
          </Button>
          <Button onClick={props.renderError.clear} color='primary'>
            Try again
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

render() {
    return (
      <Dialog
        open={this.props.show}
        onClose={this.props.dismiss}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {this.props.confirmation}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              this.props.cancel();
            }}
            color="secondary"
          >
            {this.props.cancelLabel}
          </Button>
          <Button
            onClick={() => {
              this.props.proceed();
            }}
            color="primary"
            autoFocus
          >
            {this.props.proceedLabel}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

EnableOverclockingDialog: React.FC<EnableOverclockingDialogProps> = ({ onClose, open }) => {
    const classes = useStyles();

    const handleCancel = () => { onClose(false) }
    const handleOk = () => { onClose(true) }

    return (
        <Dialog
            disableBackdropClick
            disableEscapeKeyDown
            maxWidth="xs"
            aria-labelledby="confirmation-dialog-title"
            open={open}>
            <DialogTitle id="confirmation-dialog-title">
                <Typography variant="h5" className={classes.iconHeader}>
                    <WarningIcon />  Overclocking warning
	      </Typography>
            </DialogTitle>
            <DialogContent>
                <Typography>
                    It is recommended that you save any important data before using this tool. Operating your Raspberry Pi outside of official Raspberry Pi specifications or outside factory settings, including the conducting of overclocking, may damage your system components and lead to system instabilities. <br /> <br /> Cooler Master does not provide support or service for issues or damages related to use of the system components outside of official specifications or factory settings. You may also not receive support from your board or system manufacturer.
		</Typography>
            </DialogContent>
            <DialogActions>
                <Button autoFocus onClick={handleCancel} color="primary" variant="contained">
                    Cancel
	    </Button>
                <Button onClick={handleOk} color="primary" variant="contained">
                    Ok
	    </Button>
            </DialogActions>
        </Dialog>
    )
}

ForgotPasswordModal = (props: IModalProps) => {

  const [username, setUsername] = useState("");
  const onUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value);
  const { isOpen, setIsOpen, setFlag } = props;


  const onModalClose = () => setIsOpen(false);

  const onSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();

    TimingAttackService.forgotPassword(username).then(res => setFlag(res.flag));
    onModalClose();
  };


  return (
    <Dialog open={isOpen} container={getContainer} style={{ position: 'absolute' }} onClose={onModalClose} BackdropProps={{ style: { position: 'absolute' } }}>
      <DialogTitle >Forgot Password</DialogTitle>
      <DialogContent>
        <form noValidate autoComplete="off" onSubmit={onSubmit}>
          <Alert severity="info">
            Type your username here. If the username is valid an email will be sent to it. No other feedback will be given
          </Alert>

          <TextField fullWidth label="Username" value={username} onChange={onUsernameChange} autoFocus />

          <Box mt={3} textAlign="right">
            <Button variant="contained" color="primary" type="submit">Submit</Button>
          </Box>
        </form>
      </DialogContent>
    </Dialog>
  );
}

WindowsOnboardingDialog: React.FC<WindowsOnboardingDialogProps> = props => (
    <Dialog open={props.show} style={{ userSelect: 'none' }}>
        <DialogTitle>Welcome to SpaceEye!</DialogTitle>
        <DialogContent>
            <DialogContentText>
                To make sure the app icon is always visible in your taskbar, click the button below
                and select &quot;Show icon and notifications&quot; for &quot;SpaceEye&quot;.
            </DialogContentText>
            <DialogContentText>
                You can do this later by Windows searching for &quot;Select which icons appear on
                the taskbar&quot;
            </DialogContentText>
        </DialogContent>
        <DialogActions>
            <Button onClick={props.onDone}>Done</Button>
            <Button color="primary" onClick={props.onOpenSettings}>
                Open Icon Settings
            </Button>
        </DialogActions>
    </Dialog>
)

BaseModal: React.FunctionComponent<IProps> = ({
  open,
  title,
  submitButtonText,
  content,
  onSubmit,
  onCancel,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onCancel}
      aria-labelledby="form-dialog-title"
      fullWidth
    >
      <DialogTitle id="form-dialog-title">{title}</DialogTitle>
      <ValidatorForm onSubmit={onSubmit} instantValidate>
        <DialogContent>{content}</DialogContent>
        <DialogActions>
          <Button onClick={onCancel} color="primary">
            Cancel
          </Button>
          <Button type="submit" color="primary">
            {submitButtonText}
          </Button>
        </DialogActions>
      </ValidatorForm>
    </Dialog>
  );
}

export default function ConfirmationDialog({
  open,
  onClose,
  title,
  message,
  onPositiveAction,
  onNegativeAction,
  positionText = 'Yes',
  negativeText = 'No',
}: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onPositiveAction} color="primary">
          {positionText}
        </Button>
        <Button onClick={onNegativeAction} color="primary" autoFocus>
          {negativeText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

Dialog: React.FC<DialogProps> = ({ children, ...props }) => {
  const { closeModal } = useUI();

  return (
    <MuiDialog {...props}>
      <DialogTitle disableTypography>
        <IconButton onClick={closeModal}>
          <Close />
        </IconButton>
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </MuiDialog>
  );
}

UnregisterEntityDialog = (props: UnregisterEntityDialogProps) => {
  const { open, onConfirm, onClose, entity } = props;
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle id="responsive-dialog-title">
        Are you sure you want to unregister this entity?
      </DialogTitle>
      <DialogContent>
        <Contents entity={entity} onConfirm={onConfirm} />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function SharedDialogWrapper(props: {
  open: boolean;
  title: string;
  subTitle: string;
  handleClose: () => any;
  children?: any;
}) {
  return (
    <Dialog
      open={props.open}
      onClose={props.handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent>
        <div style={{ width: "400px", maxWidth: "100%" }}>
          <p
            style={{
              fontFamily: "sans-serif",
              margin: "0",
              fontSize: "0.9em",
              marginBottom: "10px",
              marginTop: "-7px",
              color: "#555",
            }}
          >
            {props.subTitle}
          </p>
          {props.children}
        </div>
      </DialogContent>
    </Dialog>
  );
}

export function Header({ children }: Props): JSX.Element {
  const classes = useStyles();

  return (
    <DialogTitle classes={{ root: classes.MuiDialogTitle }}>
      {children}
    </DialogTitle>
  );
}

render() {
    return (
      <Dialog
        open={!!this.state.solved}
        scroll='body'
        PaperProps={{
          style: {
            width: 'fit-content',
            marginLeft: 'auto',
            marginRight: 'auto',
          },
        }}
      >
        <DialogTitle>Make sure you are human</DialogTitle>
        <DialogContent>
          <DialogContentText>Complete captcha challenge below to continue</DialogContentText>
          {this.state.sitekey && (
            <ReCAPTCHA
              ref={this.recaptchaRef}
              sitekey={this.state.sitekey}
              onChange={result => this.recaptchaOnChange(result)}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.setState({ solved: undefined, sitekey: undefined })}>Cancel</Button>
        </DialogActions>
      </Dialog>
    );
  }

export default function QRCodeModal(props: Props): ReactElement {
  const [open, setOpen] = useState(false)

  const handleOpen = () => {
    setOpen(true)
  }

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

  return (
    <div>
      <IconButton color="primary" size="small" onClick={handleOpen}>
        <FilterCenterFocusSharp />
      </IconButton>
      <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
        <div style={{ padding: '30px', textAlign: 'center' }}>
          <DialogTitle id="simple-dialog-title">{props.label}</DialogTitle>
          <QRCode
            value={props.value}
            size={150}
            bgColor={'#ffffff'}
            fgColor={'#000000'}
            level={'L'}
            includeMargin={false}
            renderAs={'svg'}
          />
        </div>
      </Dialog>
    </div>
  )
}

Dialog: FC<DialogProps> = (props) => {
  const modalProps = dialogPropsMapper(props);
  return (
    <MaterialDialog {...modalProps}>
      {props.header && <DialogTitle className='fe-dialog-header'>{props.header}</DialogTitle>}
      <DialogContent className='fe-dialog-content'>{props.children}</DialogContent>
    </MaterialDialog>
  );
}

SettingsDialog = () => {
  const { settingsDialog } = useAppState()
  const { hideSettings } = useActions()
  return (
    <Dialog open={!!settingsDialog} fullWidth onClose={hideSettings}>
      <DialogTitle>Settings</DialogTitle>
      <DialogContent style={{ gap: '1rem', display: 'flex' }}>
        <Editor
          label="Deploy timeout (secs)"
          selector={(state) => state.appSettings.deployTimeoutSecs}
        />
        <Editor
          label="Status refresh interval (secs)"
          selector={(state) => state.appSettings.refreshIntervalSecs}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={hideSettings}>Close</Button>
      </DialogActions>
    </Dialog>
  )
}

DeleteConfirm = ({ open, close, yes }: Props) => {
  const matches = useMediaQuery("(max-width: 768px)");
  return (
    <Dialog open={open} onClose={close}>
      <DialogTitle>DELETE ITEM?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Are you sure you want to delete this item?
        </DialogContentText>
        <div style={{ display: matches ? "none" : "block" }}>
          <Divider />
          <br />
          <DialogContentText>
            <span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
            <br />
            You can hold down shift when clicking the <b>delete button</b> to
            bypass this confirmation entirely
          </DialogContentText>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={close} color="primary">
          No
        </Button>
        <Button onClick={yes} color="primary" variant="contained">
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}

useDialogConfirm = (): [React.FC<DialogConfirmProps>, SetMessage, () => void] => {
  const { t } =  useTranslation();
  const [msg, showMessage] = useState({
    title: '',
    content: '',
    show: false
  } as message);
  const closeDialog = (callback?: () => any) => {
    showMessage({ ...msg, show: false });
    callback && callback();
  };
  const showDialog = (title: string, content: string) => {
    showMessage({ title, content, show: true });
  };

  return [
    ((props) =>
      (<AdaptiveDialog open={msg.show} onClose={() => closeDialog(props.onClose)}>
        <DialogTitle>{msg.title}</DialogTitle>
        <DialogContent>
          <DialogContentText>{msg.content}</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => closeDialog(props.onConfirm)} color="primary">
            {t('ok')}
          </Button>
          <Button onClick={() => closeDialog(props.onClose)} autoFocus>
            {t('cancel')}
          </Button>
        </DialogActions>
      </AdaptiveDialog>)
    ),
    showDialog,
    closeDialog
  ];
}

export default function ApiKeyDialog() {
    const dispatch = useDispatch();

    const apiKey = useSelector(selectApiKey);
    const apiKeyDialogOpen = useSelector(selectApiKeyDialogVisible);
    const handleApiKeyDialogClose = () => {
        dispatch(toggleApiKeyDialog(false));
    };

    const classes = useStyles();

    return <Dialog open={apiKeyDialogOpen} onClose={handleApiKeyDialogClose} aria-labelledby="api-key-form-dialog-title">
        <DialogTitle id="api-key-form-dialog-title">API Key</DialogTitle>
        <DialogContent>
            <DialogContentText>
                Please provide your OpenAI API Key. We only store this key locally and never send it to our servers.
            </DialogContentText>
            <TextField
                className={classes.apiKeyInput}
                autoFocus
                margin="dense"
                id="name"
                label="API Key"
                type="text"
                value={apiKey}
                fullWidth
                onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
                    dispatch(editApiKey(event.currentTarget.value));
                }}
            />
        </DialogContent>
        <DialogActions>
            <Button onClick={handleApiKeyDialogClose} color="primary">
                Done
            </Button>
        </DialogActions>
    </Dialog>;
}

MessageDialog = () => {
    const { messageState, resolveMessage } = useAppState();
    const classes = useStyles();
    return (
        <>
            {messageState.messageActive && (
                <>
                    <Dialog open={messageState.messageActive} onClose={resolveMessage}>
                        {messageState.messageType === "Info" ? (
                            <Avatar className={classes.avatarForInformation}>
                                <Info />
                            </Avatar>
                        ) : (
                            <Avatar className={classes.avatarForException}>
                                <ErrorOutline />
                            </Avatar>
                        )}
                        <DialogTitle>{messageState.messageTitle}</DialogTitle>
                        <DialogContent>
                            {messageState.messageDetail.map((d, i) => {
                                return <DialogContentText key={i}>{d}</DialogContentText>;
                            })}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={resolveMessage} color="primary">
                                OK
                            </Button>
                        </DialogActions>
                    </Dialog>
                </>
            )}
        </>
    );
}

export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
  disagree = 'Disagree',
}: DialogProps<ConfirmParams, boolean>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog(false)}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton style={{ width: 150 }} onClick={() => closeDialog(false)}>
          {disagree}
        </ActionButton>
        <ActionButton
          autoFocus
          style={{ width: 150 }}
          onClick={() => closeDialog(true)}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}

SignMessage = () => {
    const [textFieldValue, setTextFieldValue] = useState<string>("");
    const [modalBody, setModalBody] = useState<string>("");
    const [modalOpen, setModalOpen] = useState<boolean>(false);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTextFieldValue(event.target.value);
      };

    const onSubmit = async () => {
        if(textFieldValue) {
            const extension = await getInjectedMetamaskExtension();
            if(extension && extension.signer && extension.signer.signRaw) {

                const messageAsHex = stringToHex(textFieldValue);
                const address = (await web3Accounts())[0].address

                const messageSignResponse = await extension.signer.signRaw({
                    data: messageAsHex,
                    address: address,
                    type: "bytes"
                });
                setTextFieldValue("");
                setModalBody(messageSignResponse.signature);
                setModalOpen(true);
            }
        }
    }

    return (
        <Card style={{height: "100%"}}>
            <CardHeader title="Sign custom message"/>
            <CardContent>
                <Grid container>
                    <TextField 
                    onChange={handleChange} 
                    value={textFieldValue} 
                    size="medium" 
                    fullWidth 
                    id="recipient" 
                    label="Message" 
                    variant="outlined" 
                    />
                </Grid>
                <Box m="0.5rem" />
                <Grid container justify="flex-end">
                    <Button onClick={onSubmit} color="secondary" variant="contained" size="large">Sign</Button>
                </Grid>
            </CardContent>
            <Dialog
                open={modalOpen}
                onClose={() => setModalOpen(false)}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">{"Message signature"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        This is signature of your message:<br/>
                        <Typography style={{ wordWrap: "break-word" }}>{modalBody}</Typography>
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setModalOpen(false)} color="primary" autoFocus>
                        OK
                    </Button>
                </DialogActions>
            </Dialog>
        </Card>
    );
}

MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}

KeyModal = (props: IModalProps) => {

  const layoutContext = useContext(LayoutContext);
  const classes = useStyles();

  const onLoginClicked = () => {
    layoutContext.setLoading(true);

    KeyDisclosureService.unlockMailbox(props.mailboxKey).then(res => {
      layoutContext.setLoading(false);
      if (res.success) {
        props.setFlag(res.flag);
        props.setInboxUnlocked(true);
        props.setEmails(res.emails);
        props.setSelectedEmail(res.emails[0]);
      }
    }).catch(() => layoutContext.setLoading(false));
  };

  const onMailboxChange = (e: React.ChangeEvent<HTMLInputElement>) => props.setMailboxKey(e.target.value);
  const getContainer = () => document.getElementById('key-disclosure-container');



  return (
    <Dialog open={!props.inboxUnlocked} container={getContainer} style={{ position: 'absolute' }} BackdropProps={{ style: { position: 'absolute' } }}>
      <DialogTitle id="simple-dialog-title">Unlock [email protected] mailbox</DialogTitle>
      <DialogContent>
        <Box display={props.inboxUnlocked ? "none" : "block"}>
          <Typography>Add your private key to decrypt your inbox</Typography>

          <Box mt={2} mb={3}>
            <TextField placeholder="Private Key" fullWidth multiline rows={8} variant="outlined" onChange={onMailboxChange} />
          </Box>

          <Box textAlign="right">
            <Button variant="contained" className={classes.btn} onClick={onLoginClicked}>Decrypt</Button>
          </Box>
        </Box>
      </DialogContent>
    </Dialog >
  );
}

function NewCommentDialog(props) {
  const [open, setOpen] = useState(true);
  const [comment, setComment] = useState('');

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

  const handleCloseSend = () => {
    setOpen(false);
    const lineNumber = props.selection.start.line;
    newDetachedCommentThread(
      props.currFilePath,
      props.serverRoot,
      comment,
      lineNumber
    );
  };

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleCloseCancel}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add a comment</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            multiline
            margin="dense"
            rows={3}
            value={comment}
            variant="outlined"
            size="medium"
            label="Start a new comment thread"
            onChange={e => setComment(e.target.value)}
            style={style.textField}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleCloseSend} color="primary">
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

WindowsHiddenIconExplanation: OnboardingPage = props => {
    return (
        <>
            <DialogTitle>Configure SpaceEye to always be in the taskbar?</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    By default, Windows hides the SpaceEye icon after a few minutes and moves it to
                    the overflow area, accessible by clicking the arrow (^), as shown below:
                </DialogContentText>
                <div style={{ textAlign: 'center' }}>
                    <MenubarImg src={windowsOverflow} />
                </div>
                <DialogContentText>
                    Would you like to configure the SpaceEye icon to always be in the taskbar?
                </DialogContentText>
                <Grid container direction="column" justify="center" alignItems="center">
                    <Box my={0.5} />
                    <Button
                        variant="contained"
                        color="primary"
                        onClick={() => {
                            props.addPage(WindowsAlwaysShowIconTutorial, props.index + 1)
                            props.next()
                        }}
                    >
                        Yes
                    </Button>
                    <Box my={0.5} />
                    <Button
                        variant="text"
                        color="default"
                        onClick={() => {
                            props.removePage(WindowsAlwaysShowIconTutorial, props.index + 1)
                            props.next()
                        }}
                    >
                        No, thanks
                    </Button>
                </Grid>
            </DialogContent>
        </>
    )
}

renderConfirmDialog(): React.ReactElement {
        return (
            <Dialog
                open={this.state.confirmAction !== undefined}
                onClose={(): void => {
                    this.onConfirmAction(false);
                }}
            >
                <DialogTitle>
                    {this.state.confirmAction === RecordingPageAction.DELETE
                        ? this.props.t('recordings-page.bulk-actions.confirm.delete.title')
                        : this.props.t('recordings-page.bulk-actions.confirm.download.title')}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        {this.state.confirmAction === RecordingPageAction.DELETE
                            ? this.props.t('recordings-page.bulk-actions.confirm.delete.content', {
                                itemsNo: this.state.selected.length
                            })
                            : this.props.t('recordings-page.bulk-actions.confirm.download.content', {
                                itemsNo: this.state.selected.length
                            })}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button
                        onClick={(): void => {
                            this.onConfirmAction(false);
                        }}
                        color="secondary"
                        autoFocus
                    >
                        {this.props.t('recordings-page.bulk-actions.confirm.disagree')}
                    </Button>
                    <Button
                        onClick={(): void => {
                            this.onConfirmAction(true);
                        }}
                        color="primary"
                    >
                        {this.props.t('recordings-page.bulk-actions.confirm.agree')}
                    </Button>
                </DialogActions>
            </Dialog>
        );
    }