@material-ui/core#Typography JavaScript Examples

The following examples show how to use @material-ui/core#Typography. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SignUpCard.js    From bunk-manager-mern with MIT License 6 votes vote down vote up
SignUpCard = (props) => {
  const classes = useStyles(props);
  const {googleLogin} = useContext(AuthContext);
  return (
    <React.Fragment>
      <Typography color="primary" className={classes.signUpHeader} variant="h5">
        Sign Up
      </Typography>
      <p>using</p>
      <div className={classes.oAuthDiv}>
        {/* <Button>
          <FacebookIcon className={classes.fb}/>
        </Button> */}
        <Button onClick={()=>googleLogin()}>
          <img src={google} alt="Google" width="30" height="30" />
        </Button>
      </div>
      <Typography color="primary" className={classes.p} variant="h6">
        <Divider />
        OR
      </Typography>
      <Button className={classes.button} component={Link} to="/user/signup">

        Register

      </Button>
    </React.Fragment>
  );
}
Example #2
Source File: AppSettingsContainer.js    From akashlytics-deploy with GNU General Public License v3.0 6 votes vote down vote up
AppSettingsContainer = () => {
  const { isLoadingSettings } = useSettings();

  return (
    <>
      <AutoUpdater />

      {isLoadingSettings ? (
        <Box display="flex" alignItems="center" justifyContent="center" height="100%" width="100%" flexDirection="column">
          <Box paddingBottom="1rem">
            <CircularProgress size="3rem" />
          </Box>
          <div>
            <Typography variant="h5">Loading settings...</Typography>
          </div>
        </Box>
      ) : (
        <AppContainer />
      )}
    </>
  );
}
Example #3
Source File: CoinButton.js    From Alternative-Uniswap-Interface with GNU General Public License v3.0 6 votes vote down vote up
export default function CoinButton(props) {
  const { coinName, coinAbbr, onClick, ...other } = props;
  const classes = useStyles();

  return (
    <ButtonBase focusRipple className={classes.button} onClick={onClick}>
      <Grid container direction="column">
        <Typography variant="h6">{coinAbbr}</Typography>
        <Typography variant="body2" className={classes.coinName}>
          {coinName}
        </Typography>
      </Grid>
    </ButtonBase>
  );
}
Example #4
Source File: navbar.js    From connect-4-online-multiplayer with MIT License 6 votes vote down vote up
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>
  );
}
Example #5
Source File: index.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up
export default function EventsCalendar() {
  const classes = useStyles();
  const { loading, error, data, refetch } = useQuery(GET_EVENT_LIST);
  // refetches EVENT_LIST without refreshing page
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Typography className={classes.heading} variant="h1" gutterBottom>
          Upcoming Events
        </Typography>
      </Box>
      <Grid className={classes.grid}>
        {data &&
          data?.events?.map((event, id) => (
            <EventCard key={id} event={event} />
          ))}
      </Grid>
    </main>
  );
}
Example #6
Source File: WritersFavoriteGrants.js    From grants-fe with MIT License 6 votes vote down vote up
export default function WritersFavoriteGrants() {
  const faveArr = useSelector((state) => state.favorites.favorites);
  const user = useSelector((state) => state.profileInfo.profileDetails);
  const classes = useStyles();

  if (faveArr.length === 0) {
    return <Redirect to="/Grants" />;
  }
  return (
    <div>
      <Typography variant="h3" className={classes.h3}>
        <Grid container justify="center">
          <Grid item>
            {user.org_name !== "" ? user.org_name : user.first_name}'s Favorite
            Grants
          </Grid>
        </Grid>
      </Typography>
      {faveArr.map((grant) => {
        return (
          <div key={grant.id} className={classes.container}>
            <GrantCard data={grant} />
          </div>
        );
      })}
    </div>
  );
}
Example #7
Source File: tipsLayout.js    From resumeker-fe with MIT License 6 votes vote down vote up
function TipsLayout(props) {
    const classes = useStyles();

    return (
        <Grid item xs={false} sm={4} md={3} className={classes.image}>
            <Grid item className={classes.startText}>
                <Avatar className={classes.avatar}>
                    <DescriptionIcon />
                </Avatar>
                <Typography
                    component="h1"
                    variant="h5"
                    className={classes.spacing}
                >
                    Start Making Your Resume
                </Typography>
            </Grid>
            <Grid item className={classes.tips}>
                {props.tips}
            </Grid>
        </Grid>
    );
}
Example #8
Source File: TwitterConnectCallback.js    From social-media-strategy-fe with MIT License 6 votes vote down vote up
Callback = () => {
  const { authService } = useOktaAuth();
  const location = useLocation();
  const { push } = useHistory();

  useEffect(() => {
    const { oauth_token, oauth_verifier } = queryString.parse(location.search);
    axiosWithAuth(authService)
      .post("/auth/twitter/callback", {
        oauth_token,
        oauth_verifier,
      })
      .then((res) => push("/home"))
      .catch((err) => {
        console.error(err);
        push("/connect/twitter");
      });
    // eslint-disable-next-line
  }, []);

  return (
    <div style={container}>
      <Typography variant="h6">Redirecting you back to SoMe</Typography>
      <br />
      <CircularProgress />
    </div>
  );
}
Example #9
Source File: Card.jsx    From Corona-tracker with MIT License 6 votes vote down vote up
Facts = ({ data }) => {
  const { title, body, footer, link } = data;

  const classes = useStyles();
  return (
    <Grid>
      <Typography variant="subtitle1" color="secondary">
        {title}
      </Typography>
      <Typography paragraph variant="body1" className={classes.fontChange} color="textSecondary">
        {body}
      </Typography>
      <footer>
        <Typography variant="caption">{footer}</Typography>
        {link && (
          <Button size="small" href={link}>
            Learn More
          </Button>
        )}
      </footer>
    </Grid>
  );
}
Example #10
Source File: ClickableMap.js    From app with MIT License 6 votes vote down vote up
function SelectedLocationMarker({
  position: { latitude: lat, longitude: lng },
  title,
}) {
  const [marker, setMarker] = useState(null);

  const handleOnLoad = (mapMarker) => {
    setMarker(mapMarker);
  };

  const renderInfoWindow = (mapMarker) => {
    if (mapMarker === null) return null;

    return (
      <InfoWindow anchor={mapMarker}>
        <div>
          <Typography variant="subtitle2">{title}</Typography>
        </div>
      </InfoWindow>
    );
  };

  return (
    <Marker position={{ lat, lng }} onLoad={handleOnLoad}>
      {renderInfoWindow(marker)}
    </Marker>
  );
}
Example #11
Source File: ProfileSection.js    From Quizzie with MIT License 6 votes vote down vote up
function ProfileSection(props) {
	const [userType, setUserType] = useState(props.type);
	const profile = props.profile;

	return (
		<div className="profile-section">
			<Typography variant="h6" className="profile-param">Name: <span className="profile-data">{profile.name}</span></Typography>
			<Typography variant="h6" className="profile-param">E-mail: <span className="profile-data resp-text">{profile.email}</span></Typography>
			<Typography variant="h6" className="profile-param">Phone Number: <span className="profile-data">{profile.mobileNumber}</span></Typography>
			{userType === "user" ?
				<div>
					<Typography variant="h6" className="profile-param">Quizzes Enrolled: <span className="profile-data">{profile.quizzesEnrolled.length}</span></Typography>
					<Typography variant="h6" className="profile-param">Quizzes Completed: <span className="profile-data">{profile.quizzesGiven.length}</span></Typography>
				</div>
			: <Typography variant="h6" className="profile-param">Quizzes Created: <span className="profile-data">{profile.quizzes.length}</span></Typography> }
			<div className="m-top">
				<Button className="profile-btn update-prof-btn" component={Link} to={`/updateProfile/${userType}`}>Update Profile</Button>
				{profile.googleId === undefined ? <Button className="profile-btn" component={Link} to={`/updatePassword/${userType}`}>Update Password</Button> : null }
			</div>
		</div>
	)
}
Example #12
Source File: NeedsHero.js    From e-Pola with MIT License 6 votes vote down vote up
function NeedsHero({ onClick }) {
  const classes = useStyles()

  return (
    <Paper className={classes.root} onClick={onClick}>
      <Typography variant="h4">
        <Trans>Hello User</Trans>!
      </Typography>
      <Typography variant="h6">
        <Trans>Your Needs List</Trans>
      </Typography>
    </Paper>
  )
}
Example #13
Source File: Title.js    From Designer-Client with GNU General Public License v3.0 6 votes vote down vote up
function TitleTypo(props) {
    return (
        <Typography 
            align={props.align || "left"} 
            variant={props.variant} 
            gutterBottom={props.gutterBottom}>
            {props.text}

            {props.smallText &&
                <small style={{marginLeft: 8}}>
                    {props.smallText}
                </small>
            }
        </Typography>
    )
}
Example #14
Source File: index.js    From flame-coach-web with MIT License 6 votes vote down vote up
UICard = ({
  isLoading,
  title,
  children
}) => {
  const classes = useStyles();

  return (
    <Card className={clsx(classes.root)}>
      <CardContent className={classes.content}>
        {isLoading ? <Loading size={50} /> :
          <>
            <Typography className={classes.title} gutterBottom variant="h3" component="h2">
              {title}
            </Typography>
            {children}
          </>
        }
      </CardContent>
    </Card>
  );
}
Example #15
Source File: GrowerOrganization.js    From treetracker-admin-client with GNU Affero General Public License v3.0 6 votes vote down vote up
GrowerOrganization = (props) => {
  const appContext = useContext(AppContext);
  const { organizationName, assignedOrganizationId, compact } = props;

  const renderGrowerOrganization = () => (
    <Typography style={{ color: '#C0C0C0', fontStyle: 'italic' }}>
      {organizationName}
    </Typography>
  );
  const renderGrowerAssignedOrganization = (id) => {
    const assignedOrganization = getOrganizationById(appContext.orgList, id);
    return (
      <Typography>
        {assignedOrganization?.name} ({id})
      </Typography>
    );
  };
  const orgNamesMatch =
    assignedOrganizationId &&
    organizationName &&
    (
      getOrganizationById(appContext.orgList, assignedOrganizationId)?.name ||
      ''
    ).toLowerCase() === organizationName.toLowerCase();

  return (
    <>
      {assignedOrganizationId &&
        renderGrowerAssignedOrganization(assignedOrganizationId)}
      {organizationName &&
        (!compact || !assignedOrganizationId) &&
        !orgNamesMatch &&
        renderGrowerOrganization()}
    </>
  );
}
Example #16
Source File: LoginCard.js    From bunk-manager-mern with MIT License 5 votes vote down vote up
LoginCard = (props) => {
  const location = useLocation();
  let { from } = location.state || { from: { pathname: "/" } };
  //styles
  const classes = useStyles(props);
  //formik hook
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema,
    onSubmit: (values) => {
      props.loggingUser(values, from);
    },
  });

  return (
    <React.Fragment>
      <Typography color="primary" className={classes.loginHeader} variant="h5">
        Sign In
      </Typography>
      <form
        autoComplete="off"
        className={classes.form}
        onSubmit={formik.handleSubmit}
      >
        {props.error ? <div>{props.error.msg}</div> : null}
        <input
          id="login-email"
          label="Email"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={
            formik.touched.email && Boolean(formik.errors.email).toString()
          }
          variant="outlined"
          name="email"
          placeholder="Username or Email"
          type="text"
          className={classes.input}
        />
        {formik.errors.email ? <div>{formik.errors.email}</div> : null}
        <input
          name="password"
          placeholder="Password"
          type="password"
          className={classes.input}
          id="login-password"
          value={formik.values.password}
          onChange={formik.handleChange}
          error={
            formik.touched.password &&
            Boolean(formik.errors.password).toString()
          }
        />
        {formik.errors.password ? <div>{formik.errors.password}</div> : null}
        <Button
          type="submit"
          className={classes.button}
          color="secondary"
          variant="contained"
        >
          {props.auth.isLoading ? (
            <CircularProgress color="primary" />
          ) : (
            "Sign In"
          )}
        </Button>
      </form>
    </React.Fragment>
  );
}
Example #17
Source File: ExportCertificate.js    From akashlytics-deploy with GNU General Public License v3.0 5 votes vote down vote up
export function ExportCertificate(props) {
  const classes = useStyles();
  const selectedWallet = useSelectedWalletFromStorage();

  useEffect(() => {
    async function init() {
      await analytics.event("deploy", "export certificate");
    }

    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Dialog open={props.isOpen} onClose={props.onClose} maxWidth="sm" fullWidth>
      <DialogTitle>Export certificate</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        {selectedWallet && selectedWallet.cert && selectedWallet.certKey ? (
          <>
            <Typography variant="body1" className={classes.label}>
              Cert
            </Typography>
            <CodeSnippet code={selectedWallet.cert} />
            <Typography variant="body1" className={classes.label}>
              Key
            </Typography>
            <CodeSnippet code={selectedWallet.certKey} />
          </>
        ) : (
          <Alert severity="warning">
            Unable to find local certificate. Meaning you have a certificate on chain but not in the tool. We suggest you regenerate a new one to be able to use
            the tool properly.
          </Alert>
        )}
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={props.onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #18
Source File: game.js    From connect-4-online-multiplayer with MIT License 5 votes vote down vote up
export default function Game() {
  const [board, setBoard] = useState(intitializeBoard());
  const [playerTurn, setPlayerTurn] = useState(Player.One);
  const [gameState, setGameState] = useState(GameState.Ongoing);

  const renderCells = () => {
    return board.map((player, index) => renderCell(player, index));
  };

  const handleOnClick = (index) => () => {
    if (gameState !== GameState.Ongoing) return;

    const column = index % 7;

    makeMove(column);
  };

  const makeMove = (column) => {
    const index = findLowestEmptyIndex(board, column);

    const newBoard = board.slice();
    newBoard[index] = playerTurn;

    const gameState = getGameState(newBoard);

    setBoard(newBoard);
    setPlayerTurn(togglePlayerTurn(playerTurn));
    setGameState(gameState);
  };

  const renderCell = (player, index) => {
    return (
      <Box
        className="cell"
        key={index}
        onClick={handleOnClick(index)}
        data-player={getPrettyPlayer(player)}
      />
    );
  };

  const renderGameStatus = () => {
    let text;
    if (gameState === GameState.Ongoing) {
      text = "Game is in progress...";
    } else if (gameState === GameState.Draw) {
      text = "Game is a draw.";
    } else if (gameState === GameState.PlayerOneWin) {
      text = "Player 1 won!";
    } else if (gameState === GameState.PlayerTwoWin) {
      text = "Player 2 won!";
    }

    return (
      <Typography variant="h3" align="center" mb={1}>
        {text}
      </Typography>
    );
  };

  return (
    <Box>
      {renderGameStatus()}
      <Box className="board" my={2}>
        {renderCells()}
      </Box>
      {gameState === GameState.Ongoing ? (
        <Typography variant="h3" align="center">
          Player {playerTurn}'s Turn
        </Typography>
      ) : null}
    </Box>
  );
}
Example #19
Source File: SimpleModal.js    From AdaptivApps-fe with MIT License 5 votes vote down vote up
export default function SimpleModal({ activity, activityData }) {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    setOpen(false);
  };
  const body = (
    <Container style={modalStyle} className={classes.paper}>
      <Box className={classes.imgBox}>
        <img
          className={classes.img}
          src={
            (activity && activity?.event?.imgUrl) ||
            (activityData && activityData?.event?.imgUrl)
          }
          alt="Event"
        />
      </Box>
      <Box className={classes.modalMiddle}>
        <Typography className={classes.title} id="simple-modal-title">
          {activity.name}
        </Typography>
        <Typography className={classes.date}>{activity.startTime}</Typography>
        <Typography className={classes.details} id="simple-modal-description">
          {activity?.details}
        </Typography>
      </Box>
      <Box className={classes.modalBottom}>
        <Box>
          <Button className={classes.modalBtn2} onClick={handleClose}>
            Close
          </Button>
        </Box>
      </Box>
    </Container>
  );

  return (
    <div>
      <Button className={classes.btn} onClick={handleOpen}>
        {activity.name}
      </Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}
Example #20
Source File: WorkHistory.js    From grants-fe with MIT License 5 votes vote down vote up
WorkHistory = ({writer}) => {
  const classes = useStyles();
  const workClasses = workStyles();

  return (
    <h3 className={classes.finalGrid}>
      Work History:
      {writer &&
        writer.workHistory &&
        writer.workHistory.map((writersWorkHistory) => (
          <Card
            className={workClasses.cardRoot}
            key={writersWorkHistory.id}
            variant="outlined"
          >
            <CardContent>
              <Typography
                className={workClasses.title}
                color="textSecondary"
                gutterBottom
                data-testid="company-header"
              >
                Company
              </Typography>
              <Typography variant="h5" component="h2">
                {writersWorkHistory.company}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
                data-testid="position-header"
              >
                Position: {writersWorkHistory.position}
              </Typography>
              <Typography variant="body2" component="p">
                Start Date: {writersWorkHistory.start_date}
                <br />
                {writersWorkHistory.current_position === "true"
                  ? `Current Position`
                  : `End Date: ${writersWorkHistory.end_date}`}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
              >
                responsibilities: {writersWorkHistory.responsibilities}
              </Typography>
            </CardContent>
          </Card>
        ))}
    </h3>
  );
}
Example #21
Source File: TwitterConnect.js    From social-media-strategy-fe with MIT License 5 votes vote down vote up
function TwitterConnect(props) {
  const classes = useStyles();
  const { authService } = useOktaAuth();
  const [loading, setLoading] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    (async () => {
      const oktaUser = await authService.getUser();
      setIsConnected(oktaUser.twitter_handle);
      setLoading(false);
    })();
  }, [authService]);

  function authorizeTwitter() {
    axiosWithAuth(authService)
      .get("/auth/twitter/authorize")
      .then(({ data }) => (window.location.href = data))
      .catch((err) => console.error(err));
  }

  function disconnectTwitter() {
    setLoading(true);

    axiosWithAuth(authService)
      .get("/auth/twitter/disconnect")
      .then(({ data }) => {
        setIsConnected(false);
        setLoading(false);
      })
      .catch((err) => console.error(err));
  }

  return (
    <Grid container className={classes.root}>
      <Grid item className={classes.content}>
        {loading ? (
          <CircularProgress />
        ) : (
          <>
            <Typography variant="h4" component="h1" className={classes.header}>
              {isConnected
                ? "Your twitter account is connected."
                : "Let's get your account set up!"}
            </Typography>
            <img src={twitterLogo} alt="Twitter logo" />
            <Button
              variant="contained"
              color={isConnected ? "secondary" : "primary"}
              className={classes.button}
              disableElevation
              onClick={isConnected ? disconnectTwitter : authorizeTwitter}
            >
              {isConnected ? "Disconnect Twitter" : "Connect to Twitter"}
            </Button>
          </>
        )}
      </Grid>
    </Grid>
  );
}
Example #22
Source File: FlashCards.jsx    From Corona-tracker with MIT License 5 votes vote down vote up
FlashCards = props => {
  const { cardData, mode, score, showQuizScoreDialog, setQuizScore, updateQuizScore } = props;
  const classes = useStyles();
  const [gone] = useState(() => new Set());
  const [cardProp, set] = useSprings(cardData.length, i => ({ ...to(i), from: from(i) }));
  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
    const trigger = velocity > 0.2;
    const dir = xDir < 0 ? -1 : 1;

    if (!down && trigger) gone.add(index);
    set(i => {
      if (index !== i) return; // We're only interested in changing spring-data for the current spring
      const isGone = gone.has(index);
      const x = isGone ? (100 + window.innerWidth) * dir : down ? mx : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
      const rot = mx / 100 + (isGone ? dir * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
      const scale = down ? 1.1 : 1; // Active cards lift up a bit
      if (mode === 'quiz' && isGone) {
        const userAns = x > 0;
        if (userAns === cardData[i].answer) updateQuizScore({ score: score + 1 });
      }
      return { x, rot, scale, delay: undefined, config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 } };
    });
    if (!down && gone.size === cardData.length) {
      if (mode === 'quiz') {
        setQuizScore({ score, quizSize: cardData.length });
      }
      setTimeout(() => {
        return gone.clear() || set(i => to(i));
      }, 600);
    }
  });

  return (
    <div>
      {showQuizScoreDialog && <QuizScoreDialog />}
      <Typography color="secondary" variant="button">
        {mode === 'quiz' && `Score ${score}/${cardData.length}`}
      </Typography>
      <div className={classes.FlashCards}>
        {cardProp.map(({ x, y, rot, scale }, i) => (
          <Card
            key={`${i}card`}
            i={i}
            x={x}
            y={y}
            rot={rot}
            scale={scale}
            trans={trans}
            data={cardData[cardData.length - i - 1]}
            bind={bind}
            mode={mode}
          />
        ))}
      </div>
    </div>
  );
}
Example #23
Source File: BlogPage.js    From app with MIT License 5 votes vote down vote up
function BlogPage() {
  const classes = useStyles();
  const [posts, setPosts] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_BLOG_POST_URL}index.json`)
      .then((res) => res.json())
      .then((data) => {
        setLoaded(true);
        setPosts(data);
        setLoading(false);
      })
      .catch(() => {
        setLoaded(false);
        setLoading(false);
      });
  }, []);

  if (!loaded && !loading) {
    return <Redirect to="/*" />;
  }
  return (
    <>
      <Helmet>
        <title>Blog</title>
      </Helmet>
      <Container maxWidth="md">
        <Typography variant="h5" gutterBottom>
          Blog
        </Typography>
        {posts.map((post) => {
          return (
            <Paper className={classes.paper} key={post.id}>
              <Post
                slug={post.slug}
                title={post.title}
                author={post.author}
                date={post.createdAt.substring(0, 10)}
                key={post.id}
                content={post.summary}
              />
            </Paper>
          );
        })}
      </Container>
    </>
  );
}
Example #24
Source File: PlayMenuBar.js    From Quizzie with MIT License 5 votes vote down vote up
function PlayMenuBar() {
	const { isLoggedIn } = useContext(InfoContext);
	const [loginModalOpen, setLoginModalOpen] = useState(false);
	const [registerModalOpen, setRegisterModalOpen] = useState(false);

	const onCloseHandle = () => {
		setLoginModalOpen(false);
		setRegisterModalOpen(false);
	}

	if (!isLoggedIn) {
		return (
			<div className="play-container">
				<Grid container spacing={0}>
					<Grid item xs={12} md={6} className="not-logged-menu">
						<Typography variant="h4" className="login-msg">You are not logged in!</Typography>
						<Typography variant="h6" className="login-msg">Login/Signup to continue!</Typography>
						<div className="button-bar">
							<Button size="large" className="action-button login-button" onClick={() => setLoginModalOpen(true)}>Login</Button>
							<Button size="large" className="action-button signup-button" onClick={() => setRegisterModalOpen(true)}>SignUp</Button>
						</div>
					</Grid>
				</Grid>
				<Dialog open={loginModalOpen} onClose={onCloseHandle} aria-labelledby="form-dialog-title"
					PaperProps={{ style: { backgroundColor: 'white', color: '#333', minWidth: '40%' } }}
					style={{ width: '100%' }}>
					<div className="modal-info">
						<Typography variant="h5" className="type-head">Are you a student or an organizer?</Typography>
						<div className="modal-btns">
							<Link to="/login/user" className="link">
								<Button variant="outlined" color="primary" className="modal-select-btn modal-student">Student</Button>
							</Link>
							<Link to="/login/organizer" className="link">
								<Button variant="outlined" color="secondary" className="modal-select-btn modal-organizer">Organizer</Button>
							</Link>
						</div>
					</div>
				</Dialog>
				<Dialog open={registerModalOpen} onClose={onCloseHandle} aria-labelledby="form-dialog-title"
					PaperProps={{ style: { backgroundColor: 'white', color: '#333', minWidth: '40%' } }}
					style={{ width: '100%' }}>
					<div className="modal-info">
						<Typography variant="h5" className="type-head">Are you a student or an organizer?</Typography>
						<div className="modal-btns">
							<Link to="/register/user" className="link">
								<Button variant="outlined" color="primary" className="modal-select-btn modal-student">Student</Button>
							</Link>
							<Link to="/register/organizer" className="link">
								<Button variant="outlined" color="secondary" className="modal-select-btn modal-organizer">Organizer</Button>
							</Link>
						</div>
					</div>
				</Dialog>
			</div>
		);
	}
	else if (isLoggedIn) {
		return (
			<div className="play-container">
				<Grid container spacing={0}>
					<Grid item xs={12} md={6}>
						<div className="play-menu">
							<Link to="/dashboard" style={{textDecoration: 'none'}}>
								<Button size="large" className="quiz-button"><p className="button-text">Go to the Dashboard</p></Button>
							</Link>
						</div>
					</Grid>
				</Grid>
			</div>
		);
	}
}
Example #25
Source File: AccountEditor.js    From e-Pola with MIT License 5 votes vote down vote up
function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(({ firebase }) => firebase.profile)

  if (!isLoaded(profile)) {
    return <LoadingSpinner />
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch((error) => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)
        return Promise.reject(error)
      })
  }

  return (
    <Grid container spacing={2} justify="center">
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <Avatar
          className={classes.avatarCurrent}
          alt="DP image"
          src={(profile && profile.avatarUrl) || defaultUserImageUrl}
        />
        <div className={classes.linkedAccounts}>
          <Typography variant="h6" color="secondary">
            Linked Accounts
          </Typography>
          {!!profile && !!profile.providerData && (
            <ProviderDataForm providerData={profile.providerData} />
          )}
        </div>
      </Grid>
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <AccountForm onSubmit={updateAccount} account={profile} />
      </Grid>
    </Grid>
  )
}
Example #26
Source File: Home.js    From Designer-Client with GNU General Public License v3.0 5 votes vote down vote up
export function Home(props) {
  return (
    <Typography paragraph>
      Home      
    </Typography>
  )
}
Example #27
Source File: header.js    From React-Messenger-App with MIT License 5 votes vote down vote up
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>
    );
  }
Example #28
Source File: homepage.jsx    From animeworldz with MIT License 5 votes vote down vote up
function Homepage() {
  const { popular } = useContext(PopularAnimeContext);
  const [recent, setRecent] = useState([]);
  const { schedule } = useContext(ScheduleContext);

  const useStyles = makeStyles({
    root: {
      maxWidth: "100vw",
    },
    title: {
      padding: "10px",
      flexGrow: 1,
    },
    grids: {
      display: "flex",
    },
    spinner: {
      padding: "5px",
    },
  });

  const getRecent = () => {
    axios
      .get("/api/v1/anime/recent/1", {})
      .then((res) => {
        setRecent(res.data);
      })
      .catch((err) => console.log(err));
  };

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

  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Grid item container spacing={2}>
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Popular Anime
          </Typography>
        </Grid>
        <PopularCards Anime={popular} />
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Recent Anime
          </Typography>
        </Grid>
        <RecentCards Anime={recent} />
        <Grid item xs={12}>
          <Typography className={classes.title} variant="h5">
            Schedule
          </Typography>
          <Schedule schedule={schedule} />
        </Grid>
      </Grid>
    </div>
  );
}
Example #29
Source File: viewer.js    From healthcare-api-dicom-viewer with Apache License 2.0 5 votes vote down vote up
/**
   * Renders the component
   * @return {ReactComponent} <Viewer/>
   */
  render() {
    return (
      <Box p={2} display="flex" flexWrap="wrap">
        <Box mr={2}>
          <div id="cornerstone-div"
            ref={(input) => {
              this.canvasElement = input;
            }}
            style={{
              width: 500,
              height: 500,
              background: 'black',
            }}
          >
            <canvas className="cornerstone-canvas"></canvas>
          </div>
          <LinearProgress variant="buffer"
            value={this.state.renderedImagesProgress}
            valueBuffer={this.state.readyImagesProgress} /><br/>
          <TextField
            label="Max Simultaneous Requests"
            style={{width: 250}}
            defaultValue={this.state.maxSimultaneousRequests}
            onChange={(e) => {
              this.setState({maxSimultaneousRequests: Number(e.target.value)});
            }} /><br/><br/>
          <Button
            variant="contained"
            color="primary"
            disabled={this.state.isDisplaying}
            onClick={() => this.getInstances()}>
              Start
          </Button>
        </Box>
        <Box>
          <Typography variant="h5">
            Frames Loaded: {this.state.numReadyImages}
          </Typography>
          <Typography variant="h5">
            Frames Displayed: {this.state.numRenderedImages}
          </Typography>
          <Typography variant="h5">
            Total Time: {(this.state.totalTimer / 1000).toFixed(2)}s
          </Typography>
          <Typography variant="h5">
            Time to First Image: {
              (this.state.timeToFirstImage / 1000).toFixed(2)
            }s
          </Typography>
          <Typography variant="h5">
            Average FPS: {(this.state.numRenderedImages /
                        (this.state.renderTimer / 1000)).toFixed(2)}
          </Typography>
          <Typography variant="body1">
            Use your browser&apos;s developer tools to see bandwidth usage.
          </Typography>
        </Box>
      </Box>
    );
  }