@material-ui/core#IconButton JavaScript Examples

CustomSnackbarProvider = ({ children }) => {
  const notistackRef = useRef();
  const classes = useStyles();
  const onClickDismiss = (key) => () => {
    notistackRef.current.closeSnackbar(key);
  };

  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      ref={notistackRef}
      classes={{
        containerRoot: classes.root,
        variantSuccess: classes.success,
        variantError: classes.error,
        variantWarning: classes.warning,
        variantInfo: classes.info
      }}
      hideIconVariant
      action={(key) => (
        <Box width="2rem">
          <IconButton onClick={onClickDismiss(key)} size="small" className={classes.action}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </Box>
      )}
    >
      {children}
    </SnackbarProvider>
  );
}

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle
      disableTypography
      className={classes.titleSection}
      {...other}
    >
      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignContent="center"
      >
        <Typography variant="h6" className={classes.titleText}>
          {children}
        </Typography>
        {onClose ? (
          <IconButton aria-label="close" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        ) : null}
      </Grid>
    </MuiDialogTitle>
  );
})

export default function NavBar() {
  const classes = useStyles();

  // const preventDefault = (event) => event.preventDefault();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Connect 4
          </Typography>

          <div>
            <Link
              href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
              target="_blank"
              rel="noopener noreferrer"
              color="inherit"
            >
              <IconButton
                aria-label="Github repository link"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <GitHubIcon />
              </IconButton>
            </Link>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default function CreateList() {
	const dispatch = useDispatch();
	const classes = useStyles();
	const [title, setTitle] = useState("");

	const handleSubmit = (e) => {
		e.preventDefault();
		if (title && title !== "Drafts") {
			dispatch(addList(title));
		}
	};

	const handleTextInput = (e) => {
		setTitle(e.currentTarget.value);
	};

	return (
		<form onSubmit={handleSubmit} className={classes.root}>
			<InputBase
				placeholder="New list…"
				inputProps={{ "aria-label": "add list" }}
				onChange={handleTextInput}
				fullWidth
			/>

			<IconButton
				type="submit"
				className={classes.iconButton}
				aria-label="search"
			>
				<AddIcon />
			</IconButton>
		</form>
	);
}

export function CopyButton(props) {
  const { value, label, confirmCopy } = props;
  const classes = useStyles();

  return (
    <IconButton
      className={classes.copyButton}
      title="Copy to clipboard"
      onClick={() => {
        navigator.clipboard.writeText(value);
        confirmCopy(label);
      }}
    >
      <FileCopy fontSize="small" />
    </IconButton>
  );
}

SocialIcons = () => {
  const classes = useStyles();

  const socialItems = Resume.basics.profiles.map((socialItem) => (
    <Link
      href={socialItem.url}
      key={socialItem.network.toLowerCase()}
      target='_blank'
      rel='noopener noreferrer'
      underline='none'
      color='inherit'
    >
      <Tooltip
        title={socialItem.username}
        placement='left'
        TransitionComponent={Zoom}
      >
        <IconButton
          color='inherit'
          aria-label={socialItem.network}
          className={classes.iconButton}
        >
          <i className={`${classes.icon} ${socialItem.x_icon}`}></i>
        </IconButton>
      </Tooltip>
    </Link>
  ));

  return <div className={classes.socialIcons}>{socialItems}</div>;
}

render() {
        const { selectedTab } = this.state;
        return (
            <StyledTabs
                value={selectedTab}
                aria-label="profile tabs"
                TabIndicatorProps={{ style: { background: 'none' } }}
            >
                {this.state.users.map((user, index) => (
                    <HeaderTab
                        key={index}
                        label={user.name}
                        id={user.id}
                        value={user.id}
                        handleClick={this.handleClick}
                        active={selectedTab === user.id}
                        refreshUsers={this.refreshUsers}
                    />
                ))}
                <Box>
                    <IconButton onClick={this.handleNewClick}>
                        <AddIcon />
                    </IconButton>
                </Box>
            </StyledTabs>
        );
    }

render() {
    const { image, title, caption, elevation, float } = this.props;
    const { open } = this.state;

    return (
      <>
        <Paper
          className={cn('lightbox-thumb', { [float]: Boolean(float) })}
          elevation={elevation}
        >
          <img src={image || NoImage} alt={title} onClick={this.handleOpen} />
          <Typography variant="caption">{title}</Typography>
        </Paper>
        <Dialog
          open={open}
          onClose={this.handleClose}
          maxWidth="xl"
          TransitionComponent={Zoom}
        >
          <AppBar position="static">
            <Toolbar variant="dense">
              <Typography variant="subtitle1" className="title-text">{title}</Typography>
              <IconButton color="inherit" aria-label="Close" onClick={this.handleClose}>
                <CloseIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <DialogContent>
            <img src={image} alt={title} />
            <Typography>{caption}</Typography>
          </DialogContent>
        </Dialog>
      </>
    );
  }

function UserMoreMenu({ id }) {
  const navigate = useNavigate();
  const ref = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <IconButton ref={ref} onClick={() => setIsOpen(true)}>
        <Icon icon={moreVerticalFill} width={20} height={20} />
      </IconButton>

      <Menu
        open={isOpen}
        anchorEl={ref.current}
        onClose={() => setIsOpen(false)}
        PaperProps={{
          sx: { width: 200, maxWidth: '100%' }
        }}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <MenuItem sx={{ color: 'text.secondary' }} onClick={() => navigate(id)}>
          <ListItemIcon>
            <Icon icon={trash2Outline} width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Delete" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>

        <MenuItem component={RouterLink} to="#" sx={{ color: 'text.secondary' }}>
          <ListItemIcon>
            <Icon icon={editFill} width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Create" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>
      </Menu>
    </>
  );
}

MemberCard = (props) => {
    return(        
    <Card style={{maxWidth : '11em', padding : '0em 0px 1em 0px', margin : '2px', minHeight : '17.5em', position : 'relative'}}>
        <CardContent style={{textAlign : 'center'}}>
            <img src={props.image} style={{borderRadius : '50%', width : '60%', padding : '4px'}}/>
                    <Typography variant="h6" style={{fontSize : '1.2em', fontWeight : 'bold'}}>{props.name}</Typography>
                    <Typography variant="body2">{props.pos}</Typography>
        </CardContent>
        <Box style={{display : 'flex', justifyContent : 'center', position : 'absolute', bottom : '20px', width : '100%'}}>
                    <IconButton style={{padding : '4px'}} onClick={() => window.open(props.github)}><GitHubIcon/></IconButton>
                    <IconButton style={{padding : '4px'}} onClick={() => window.open(props.linkedin)}><LinkedInIcon /></IconButton>
                </Box>

    </Card>)
}

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6" color="primary">
        {children}
      </Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

About = () => {
  const classes = useStyle();
  return (
    <Container>
      <Typography variant="h4" className={classes.contributers} component="h2">
        Contributers
      </Typography>
      {data.contributers.map((contributer) => (
        <Card className={classes.root} elevation={4}>
          <CardContent className={classes.content}>
            <Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
            <Typography variant="h5" className={classes.name}>
              {contributer.name}
            </Typography>
          </CardContent>
          <CardActions className={classes.actions}>
            <IconButton href={contributer.username}>
              <GitHub className={classes.avatar} />
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </Container>
  );
}

export default function MenuHeader({ text, closeHandler, type, backHandler }) {
  const classes = useStyles({ type })
  return (
    <div style={{ display: 'flex' }}>
      {type === 'background' && (
        <IconButton onClick={backHandler} className={classes.close}>
          <ArrowBackIosIcon fontSize="small" />
        </IconButton>
      )}
      <div className={classes.title}>{text}</div>
      <IconButton onClick={closeHandler} className={classes.close}>
        <CloseIcon />
      </IconButton>
    </div>
  )
}

Post = ({ post, onCommentChange, onLike }) => {
  const firstCharacter = post.userName[0].toUpperCase();
  return (
    <Card className="ins-post">
      <Link
        to={`/profile/${post.userName}`}
        className="profile-navigation-link"
      >
        <CardHeader
          avatar={
            <Avatar style={{ background: getBackgroundColor(firstCharacter) }}>
              {firstCharacter || '-'}
            </Avatar>
          }
          title={post.userName}
        />
      </Link>
      <img
        className="ins-post-media"
        src={post.media}
        title={post.content}
        alt={post.title}
      />
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites" onClick={onLike}>
          <FavoriteBorderOutlined />
        </IconButton>
      </CardActions>
      <CardContent className="comments-section">
        <b>{`${post.likes || 0} Likes`}</b>
        {post.comment.map((c) => (
          <Comment {...c} />
        ))}
      </CardContent>
      <AddComment onCommentChange={onCommentChange} />
    </Card>
  );
}

function Header() {



    const classes = useStyle();

    return (
        <div className={styles.header}>
            <div><Notification/></div>
            <div className={classes.defaultHeader}>
                <IconButton>
                <div className={styles.logo}><img className={styles.logoImage} src={require("../../data/logoUnfinished.jpg").default} alt="logo"/></div>
                </IconButton>
                <Button  className={classes.linkStyle}><CategoryIcon /></Button>
                <form noValidate autoComplete="off">
                        <TextField id="standard-basic" label="Search Courses" variant="filled" />
                </form>
                <Button> <ShoppingCart /> </Button>
                <div className={styles.signupOptions}>
                    <Link to="login">
                    <Button variant="contained"  color="primary" className={classes.root}>Login</Button>
                    </Link>
                    <Link to="signup">
                    <Button variant="contained" color="primary" className={classes.root}>Signup</Button>
                    </Link>
                </div>
            </div>
        </div>
    )
}

MenuCard = ({ item, onAddItem }) => {
  const classes = useStyles()
  return (
    <Card style={{ padding: "10px" }}>
      <Grid container justify="space-between" spacing={5} direction="column">
        <Grid item>
          <Typography variant={"subtitle2"}>{item.name}</Typography>
        </Grid>
        <Grid item>
          <Grid container justify="space-between" alignItems="center">
            <Grid item>
              <Typography variant="body2">{item.price}</Typography>
            </Grid>
            <Grid item>
              <IconButton
                component="span"
                size="small"
                className={classes.iconButton}
                onClick={() => onAddItem(item)}
              >
                <img
                  src={addButton}
                  alt={"add-" + item.name}
                  style={{ width: "6vw", height: "6vh" }}
                />
              </IconButton>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Card>
  )
}

LeftNav = ({ onOpenMenuClick, isNavOpen }) => {
  const classes = useStyles();
  const location = useLocation();

  const routes = [
    { title: "Dashboard", icon: (props) => <DashboardIcon {...props} />, url: UrlService.dashboard(), activeRoutes: [UrlService.dashboard()] },
    {
      title: "Deployments",
      icon: (props) => <CloudIcon {...props} />,
      url: UrlService.deploymentList(),
      activeRoutes: [UrlService.deploymentList(), "/deployment"]
    },
    { title: "Templates", icon: (props) => <CollectionsIcon {...props} />, url: UrlService.templates(), activeRoutes: [UrlService.templates()] },
    { title: "Providers", icon: (props) => <DnsIcon {...props} />, url: UrlService.providers(), activeRoutes: [UrlService.providers()] },
    { title: "Settings", icon: (props) => <SettingsIcon {...props} />, url: UrlService.settings(), activeRoutes: [UrlService.settings()] }
  ];

  return (
    <div className={classes.root} style={{ width: isNavOpen ? drawerWidth : closedDrawerWidth }}>
      <List className={classes.list}>
        <ListItem>
          <ListItemIcon className={classes.closedListItemIcon}>
            <IconButton size="small" onClick={onOpenMenuClick} className={classes.toggleButton}>
              {isNavOpen ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>
          </ListItemIcon>

          <ListItemText
            primary={
              <Button size="small" variant="contained" color="primary" fullWidth component={Link} to="/createDeployment" className={classes.deployButton}>
                Deploy
              </Button>
            }
            primaryTypographyProps={{
              component: "div",
              className: classes.deployButtonContainer,
              style: { opacity: isNavOpen ? 1 : 0, flex: 1 }
            }}
          />
        </ListItem>

        {routes.map((route) => {
          const isSelected = route.url === UrlService.dashboard() ? location.pathname === "/" : route.activeRoutes.some((x) => location.pathname.startsWith(x));
          const listItemIcon = (
            <ListItemIcon color="primary" className={classes.closedListItemIcon}>
              {route.icon({ color: isSelected ? "primary" : "disabled" })}
            </ListItemIcon>
          );

          return (
            <ListItem button key={route.title} component={Link} to={route.url} selected={isSelected}>
              {isNavOpen ? (
                listItemIcon
              ) : (
                <Tooltip classes={{ tooltip: classes.tooltip }} arrow title={route.title} placement="right">
                  {listItemIcon}
                </Tooltip>
              )}

              <ListItemText
                primary={route.title}
                primaryTypographyProps={{
                  className: clsx(classes.listText, { [classes.selected]: isSelected, [classes.notSelected]: !isSelected }),
                  style: { opacity: isNavOpen ? 1 : 0 }
                }}
              />
            </ListItem>
          );
        })}
      </List>
    </div>
  );
}

EditList = (props) => {
	const { listTitle, list, handleInputText, submit } = props;

	const { form, iconButton, divider, input } = useStyles();

	const dispatch = useDispatch();
	const { lists } = useSelector((state) => state.kanban);

	const [modalOpen, setModalOpen] = useState(false);

	const handleDeleteConfirmation = () => {
		dispatch(deleteList(lists, list));
	};

	const handleBlur = (e) => {
		if (!modalOpen) {
			submit(e);
		}
	};

	return (
		<>
			<form onSubmit={submit} className={form} style={{ width: "100%" }}>
				<InputBase
					autoFocus
					onFocus={(e) => e.target.select()}
					onBlur={handleBlur}
					onChange={handleInputText}
					id="standard-error-helper-text"
					defaultValue={listTitle}
					fullWidth
					className={input}
					inputProps={{
						"aria-label": "edit title",
					}}
				/>
				<IconButton
					type="submit"
					className={iconButton}
					aria-label="confirm edit"
				>
					<CheckIcon />
				</IconButton>
				<Divider className={divider} orientation="vertical" />
				<IconButton
					onClick={() => setModalOpen(true)}
					className={iconButton}
					aria-label="delete list"
				>
					<DeleteIcon />
				</IconButton>
			</form>

			<Modal
				open={modalOpen}
				handleClose={() => setModalOpen(false)}
				title={`Would you like to delete the ${listTitle} list?`}
				content={
					"Confirming this action all posts in the list will also be deleted."
				}
				handleConfirmation={handleDeleteConfirmation}
			/>
		</>
	);
}

export default function Topbar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <Grid container>
            <Grid item xs={6} sm={4} md={2}>
              <img src={logo} alt="logo" className={classes.logo} />
            </Grid>
            <Grid item xs={12} sm={6} md={8} className={classes.title}>
              <Typography variant="h5">USFM Grammar Online</Typography>
            </Grid>
            <Grid item xs={6} sm={2} md={2}>
              <Box
                display="flex"
                flexDirection="row-reverse"
                p={1}
                m={1.5}
                mr={0}
              >
                <Tooltip title="GitHub code repository">
                  <IconButton
                    variant="outlined"
                    className={classes.button}
                    color="inherit"
                    href="https://github.com/Bridgeconn/usfm-grammar"
                    target="_blank"
                    rel="noopener"
                  >
                    <GitHubIcon />
                  </IconButton>
                </Tooltip>
                <Typography className={classes.version}>v2.2.0</Typography>
              </Box>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </div>
  );
}

function OwnerUsers() {
	const [organizers, setOrganizers] = useState([]);

	const getUsers = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/owner/allAdmins`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setOrganizers(res.data.result);
			})
		} catch(error) {
			console.log(error);
		}
	}

	useEffect(() => {
		getUsers();
	}, [])

	return (
		<div className="owner-quizzes">
			<List aria-label="users-display" className="owner-quiz-list">
				{organizers.map((user) => (
					<ListItem button key={user._id}>
						<ListItemText primary={user.email} secondary={user.name} />
						<ListItemSecondaryAction>
							<IconButton edge="end" aria-label="details">
								<ArrowForwardIos />
							</IconButton>
					</ListItemSecondaryAction>
					</ListItem>
				))}
			</List>
		</div>
	)

}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }

AnnounceMessage = ({
  toggleAnnounceMessage,
  setToggleAnnounceMessage,
}) => {
  const iOS =
    typeof navigator !== 'undefined' &&
    typeof navigator.userAgent !== 'undefined' &&
    /iPad|iPhone|iPod/.test(navigator.userAgent);

  const { drawer, title, formTitle, directions, closeAnnounce } = useStyles();

  return (
    <SwipeableDrawer
      disablebackdroptransition={!iOS ? 'true' : 'false'}
      disablediscovery={iOS ? 'true' : 'false'}
      anchor={'right'}
      open={toggleAnnounceMessage}
      onOpen={() => setToggleAnnounceMessage(true)}
      onClose={() => setToggleAnnounceMessage(false)}
      classes={{ paper: drawer }}
      PaperProps={{ elevation: 6 }}
    >
      <Grid container spacing={2}>
        <Grid item className={title}>
          <Typography variant="h4" className={formTitle}>
            Announce Message
          </Typography>
          <IconButton
            color="primary"
            className={closeAnnounce}
            onClick={() => setToggleAnnounceMessage(false)}
          >
            <Close fontSize="inherit" />
          </IconButton>
        </Grid>
        <Grid item>
          <Typography variant="body1" className={directions}>
            Write a group message or notification below. Then select the target
            audience for your message. All replies will be available in your
            Messaging Inbox.
          </Typography>
        </Grid>
        <Grid item>
          <AnnounceMessageForm
            setToggleAnnounceMessage={setToggleAnnounceMessage}
          />
        </Grid>
      </Grid>
    </SwipeableDrawer>
  );
}

Header = ({ title, hierarchy }) => {
  const { page, standalone, queenBindings, quit, setPage, currentPage } = useContext(
    OrchestratorContext
  );
  const classes = useStyles({ standalone });
  const setToFirstPage = useCallback(() => setPage('1'), [setPage]);
  const quitButtonRef = useRef();

  const utilInfo = type => {
    return {
      ...SIMPLE_CLICK_EVENT,
      idParadataObject: `${type}-button`,
      page: currentPage,
    };
  };
  const { sequence, subSequence } = hierarchy || {};

  const sequenceBinded = {
    ...sequence,
    label: lunatic.interpret(['VTL'])(queenBindings)(sequence?.label),
  };

  const subSequenceBinded = subSequence
    ? {
        ...subSequence,
        label: lunatic.interpret(['VTL'])(queenBindings)(subSequence?.label),
      }
    : null;

  const quitShortCut = () => {
    if (quitButtonRef && quitButtonRef.current) quitButtonRef.current.focus();
    quit();
  };

  return (
    <div className={classes.root}>
      <Navigation className={classes.headerItemNavigation} title={title} />
      <div className="header-item">
        <ButtonBase
          focusRipple
          onClick={setToFirstPage}
          aria-label={D.backToBeginning}
          title={D.backToBeginning}
        >
          <img id="logo" src={insee} alt="Logo de L'Insee" className={classes.headerLogo} />
        </ButtonBase>
      </div>
      <div className={classes.headerTitle}>
        <span className={classes.questionnaireTitle}>{title}</span>
        {sequence && (
          <BreadcrumbQueen
            sequence={sequenceBinded}
            subsequence={subSequenceBinded}
            currentPage={page}
          />
        )}
      </div>
      {!standalone && (
        <>
          <div className={classes.headerClose}>
            <IconButton
              ref={quitButtonRef}
              title={D.simpleQuit}
              className={classes.closeIcon}
              onClick={paradataHandler(quit)(utilInfo('end-survey'))}
            >
              <ExitToApp htmlColor={'#000000'} />
            </IconButton>
          </div>
          <KeyboardEventHandler
            handleKeys={['alt+q']}
            onKeyEvent={paradataHandler(quitShortCut)(utilInfo('end-survey'))}
            handleFocusableElements
          />
        </>
      )}
    </div>
  );
}

render() {
        return (
            <Dialog fullWidth={true} open={this.props.isOpen}>
                <DialogTitle>
                    <Box display="flex" alignItems="center">
                        <Box flexGrow={1}>{t('ehr', 'Request Data')}</Box>
                        <Box>
                            <IconButton onClick={this.props.onClose}>
                                <CloseIcon />
                            </IconButton>
                        </Box>
                    </Box>
                </DialogTitle>
                <DialogContent>
                    <Grid container direction="column">
                        <Grid item xs={6}>
                            <KailonaTextField
                                inputRef={this.toEmailRef}
                                id="providerEmail"
                                type="text"
                                label={t('ehr', 'Email')}
                                style={{ width: '100%' }}
                            />
                        </Grid>
                        <Grid item xs={12} style={{ marginTop: '20px' }}>
                            <Grid container direction="column">
                                <Grid item>
                                    <Typography variant="body2">{t('ehr', 'Message to Provider:')}</Typography>
                                </Grid>
                                <Grid item>
                                    <TextareaAutosize
                                        ref={this.emailBodyRef}
                                        rowsMin={5}
                                        defaultValue={this.defaultEmailBody}
                                        style={{ width: '100%', resize: 'vertical' }}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </DialogContent>
                <DialogActions>
                    <KailonaButton
                        class="default"
                        title={t('ehr', 'Cancel')}
                        onClick={this.props.onClose}
                        disabled={this.state.loading}
                    />
                    <KailonaButton
                        class="primary"
                        title={t('ehr', 'Send Request')}
                        onClick={this.sendRequest}
                        loading={this.state.loading}
                        disabled={this.state.loading}
                    />
                </DialogActions>
            </Dialog>
        );
    }

render() {
        return (
            <div className="header-section">
                <Grid container spacing={3} justify="center" alignItems="center">
                    <Grid item xs={6} md={10} className='title-container'>
                        {/* <span className="logo">
                            <a href="http://karlzhu-se.github.io/ark-funds-monitor/">
                                <img height="90" width="120" src="https://ark-funds.com/wp-content/uploads/2020/07/ark-logo-1-1.svg" alt="ark-funds.com" title="" />
                            </a>
                        </span> */}
                        <a className='title' href="http://karlzhu-se.github.io/ark-funds-monitor/">
                            <span>ARK Funds Monitor</span>
                        </a>
                        {/* <div className="github-section">
                            <span>View it on</span>
                            <a className="github-icon" href="https://github.com/KarlZhu-SE/ark-funds-monitor" target="_blank" rel="noopener noreferrer" aria-label="Github">
                                <svg height="24" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
                            </a>
                        </div> */}
                    </Grid>

                    <Grid item xs={6} md={2} className="ticker-input-section">
                        <form onSubmit={this.handleSubmit}>
                            <FormControl>
                                <div>
                                    <Input
                                        id="ticker-textfield"
                                        value={this.state.inputTicker}
                                        onCompositionStart={this.handlingComposition}
                                        onCompositionUpdate={this.handlingComposition}
                                        onCompositionEnd={this.handleComposition}
                                        onChange={this.handleChange}
                                        onBlur={this.handleBlur}
                                        placeholder='Ticker'
                                        endAdornment={
                                            <InputAdornment position="start">
                                                <IconButton
                                                    aria-label="Search"
                                                    onClick={this.handleSubmit}
                                                    edge="end"
                                                >
                                                    <SearchIcon color="primary" />
                                                </IconButton>
                                            </InputAdornment>
                                        }
                                    />
                                </div>
                            </FormControl>
                        </form>
                    </Grid>
                </Grid>
            </div>
        );
    }

export default function StepperFinish() {
  const classes = useStyles();
  const { state } = useState();
  const { nn_state } = useNNState();
  const {model_state} = useModelState();
  const [codeCopied, setCodeCopied] = React.useState(false);

  const copyToClipboard = (setCopied = true) => {
    navigator.clipboard.writeText(CodeGen(state, nn_state, model_state));
    setCodeCopied(setCopied);
  };

  const openInCollab = async () => {
    copyToClipboard(true);
    await new Promise((r) => setTimeout(r, 1200));
    window
      .open("https://colab.research.google.com/#create=true", "_blank")
      .focus();
  };

  return (
    <>
      <Typography className={classes.titleInner} color="textPrimary">
        You're all set to continue the journey!
      </Typography>
      <Grid
        direction="row"
        container
        justify="center"
        spacing={2}
        style={{ marginBottom: "8px" }}
      >
        <Grid item>
          <Tooltip
            title={codeCopied ? "Code copied!" : "Copy code"}
            placement="top"
          >
            <IconButton
              onClick={copyToClipboard}
              color="primary"
              component="span"
            >
              {codeCopied ? <AssignmentTurnedInIcon /> : <AssignmentIcon />}
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Launch Google Collab" placement="top">
            <IconButton onClick={openInCollab} color="primary" component="span">
              <ExitToAppIcon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Reset Otto" placement="top">
            <IconButton
              onClick={() => {
                window.location.reload();
                return false;
              }}
              color="primary"
              component="span"
            >
              <RotateLeftIcon />
            </IconButton>
          </Tooltip>
        </Grid>
      </Grid>
      <CodeContainer getIsShown={() => true} />
    </>
  );
}

render() {
    const { open, closeWindow } = this.props;
    const { formData, loading } = this.state;

    return (
      <Dialog
        open={open}
        onClose={closeWindow}
        maxWidth="xl"
      >
        <AppBar position="static">
          <Toolbar variant="dense">
            <Typography variant="subtitle1" className="title-text">Login</Typography>
            <IconButton color="inherit" aria-label="Close" onClick={closeWindow}>
              <CloseIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
        <DialogContent>
          <form autoComplete="off" onSubmit={this.handleSubmit}>
            <FormControl component="fieldset" className="form-control">
              <TextField
                id="login-username"
                required
                label="Username"
                value={formData.username}
                onChange={this.handleChange('username')}
              />
              <TextField
                id="login-password"
                required
                label="Password"
                value={formData.password}
                onChange={this.handleChange('password')}
                type="password"
              />
              <Button
                variant="contained"
                color="primary"
                type="submit"
                className="submit"
                disabled={loading}
              >
                Login
              </Button>
            </FormControl>
          </form>
        </DialogContent>
      </Dialog>
    );
  }

export default function UserListToolbar({ numSelected, filterName, onFilterName }) {
  return (
    <RootStyle
      sx={{
        ...(numSelected > 0 && {
          color: 'primary.main',
          bgcolor: 'primary.lighter'
        })
      }}
    >
      {numSelected > 0 ? (
        <Typography component="div" variant="subtitle1">
          {numSelected} selected
        </Typography>
      ) : (
        <SearchStyle
          value={filterName}
          onChange={onFilterName}
          placeholder="Search user..."
          startAdornment={
            <InputAdornment position="start">
              <Box component={Icon} icon={searchFill} sx={{ color: 'text.disabled' }} />
            </InputAdornment>
          }
        />
      )}

      {numSelected > 0 ? (
        <Tooltip title="Delete">
          <IconButton>
            <Icon icon={trash2Fill} />
          </IconButton>
        </Tooltip>
      ) : (
        <Tooltip title="Filter list">
          <IconButton>
            <Icon icon={roundFilterList} />
          </IconButton>
        </Tooltip>
      )}
    </RootStyle>
  );
}