@material-ui/core/colors#green TypeScript Examples

useSwitchStyles = makeStyles(() =>
  createStyles({
    switchBase: {
      "&$checked": { color: green["A700"] },
      "&$checked + $track": { backgroundColor: green["A700"] },
    },
    checked: {},
    track: {},
  })
)

useStyles = makeStyles({
  consoleContainer: {
    backgroundColor: '#000',
    color: green[500],
    padding: '20px',
    height: '500px'

  },
  console: {},
  "@global": {
    '.typed-cursor': {
      backgroundColor: green[500],
      width: '10px',
      display: 'inline-block'
    }
  }

})

useStyles = makeStyles({
  container: {
    backgroundColor: "#66bd4a"
  },
  title: {
    textAlign: 'center',
    color: "#FFF",
  },
  loginButton: {
    textTransform: "none",
    backgroundColor: green[500],
    color: '#FFF'
  },
  siteLogo: {
    color: green[500],
    fontSize: '200px'
  }
})

useStyles = makeStyles(
    createStyles({
        buttonProgress: {
            color: green[500],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
        },
    }),
)

useStyles = makeStyles((theme: Theme) => ({
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500],
    },
    buttonProgress: {
        color: green[500],
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -12,
        marginLeft: -12,
    },
}))

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    offline: {
      '& .MuiBadge-badge': {
        backgroundColor: orange[400]
      }
    },
    online: {
      '& .MuiBadge-badge': {
        backgroundColor: green[400]
      }
    }
  })
)

StyledBadge = withStyles((theme: Theme) =>
  createStyles({
    badge: {
      left: -8,
      bottom: 8,
      color: grey[500],
      backgroundColor: green[400]
    }
  }),
)(Badge)

useStyles = makeStyles((theme) =>
    createStyles({
        table: {
            '& th, & td': {
                fontSize: 15,
            },
        },
        mono: {
            fontFamily: 'Fira Mono, Consolas, monospace',
        },
        bold: {
            fontWeight: 'bold',
        },
        changed: {
            fontWeight: 500,
            border: 'none',
            width: 100,
        },
        added: {
            backgroundColor:
                theme.palette.type === 'light' ? green[100] : green[900],
            color: theme.palette.type === 'light' ? green[900] : green[100],
        },
        modified: {
            backgroundColor:
                theme.palette.type === 'light' ? blue[100] : blue[900],
            color: theme.palette.type === 'light' ? blue[900] : blue[100],
        },
        removed: {
            backgroundColor:
                theme.palette.type === 'light' ? red[100] : red[900],
            color: theme.palette.type === 'light' ? red[900] : red[100],
        },
    })
)

GreenCheckbox = withStyles({
  root: {
    color: grey[600],
    "&$checked": {
      color: green[600],
    },
  },
  checked: {},
})((props: CheckboxProps) => <Checkbox color="default" {...props} />)

function TopNavBar({ usesConnection, reconnect, connected }: Props) {
  const dispatch = useDispatch()

  return (
    <NavBar>
      <NavigationItems>
        {usesConnection && (
          <LanguageIcon
            onClick={reconnect}
            style={connected ? { color: green[500] } : { color: red[500] }}
          />
        )}
        <UserActions
          userActionsVisible={false}
          logOut={() => dispatch(logout())}
          toggleUserActions={() => {}}
        />
      </NavigationItems>
    </NavBar>
  )
}

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      maxWidth: 345,
    },
    media: {
      height: 0,
      paddingTop: '56.25%', // 16:9
    },
    expand: {
      transform: 'rotate(0deg)',
      marginLeft: 'auto',
      transition: theme.transitions.create('transform', {
        duration: theme.transitions.duration.shortest,
      }),
    },
    expandOpen: {
      transform: 'rotate(180deg)',
    },
    avatar: {
      backgroundColor: green[500],
    },
  }),
)

theme = createMuiTheme({
  palette: {
    type: 'dark',
    background: {
      default: grey[800],
      paper: grey[900],
    },
    primary: green,
    secondary: purple,
  },
})

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      maxWidth: 600,
    },
    INFO: {
      color: theme.palette.common.white,
      backgroundColor: theme.palette.primary.main,
    },
    WARNING: {
      color: theme.palette.common.white,
      backgroundColor: amber[700],
    },
    SUCCESS: {
      color: theme.palette.common.white,
      backgroundColor: green[400],
    },
    ERROR: {
      color: theme.palette.common.white,
      backgroundColor: red[400],
    },
    message: {
      width: "100%",
      display: "flex",
    },
    messageText: {
      marginRight: theme.spacing(1),
    },
    icon: {
      width: 28,
      height: 28,
    },
    iconVariant: {
      opacity: 0.9,
      marginRight: theme.spacing(2),
    },
    closeButton: {
      padding: theme.spacing(0.25),
      width: theme.spacing(2.75),
      height: theme.spacing(2.75),
      marginLeft: "auto",
      marginTop: theme.spacing(0),
    },
    snackbarContent: {
      padding: theme.spacing(0.75, 1, 0.75, 2),
    },
  })
)

colors: { [key in Possiblestatus]: string } = {
  [CallStatus.CANCELED]: orange[700],
  [CallStatus.IN_PROGRESS]: grey[700],
  [CallStatus.COMPLETED]: green[700],
}

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
      paddingTop: '20px',
      display: 'flex',
      alignItems: 'center',
    },
    paper: {
      padding: theme.spacing(2),
      margin: theme.spacing(1),
      width: theme.spacing(36),
    },
    button: {
      '& > *': {
        marginRight: theme.spacing(2),
      },
    },
    buttonProgress: {
      // default secondary color
      color: pink.A400,
      position: 'absolute',
      top: '50%',
      left: '50%',
      marginTop: -12,
      marginLeft: -12,
    },
    startButtonSuccess: {
      backgroundColor: green[500],
      '&:hover': {
        backgroundColor: green[700],
      },
    },
    startButtonFailure: {
      backgroundColor: red[500],
      '&:hover': {
        backgroundColor: red[700],
      },
    },
    quickStartButton: {
      textTransform: 'none',
    }
  }),
)

function ShareSection() {
  const { t } = useTranslation()
  const currentGame = React.useContext(CurrentGameContext)
  const [copyButtonClicked, setCopyButtonClicked] = React.useState(false)

  React.useEffect(() => {
    let timeout: NodeJS.Timeout
    if (copyButtonClicked) {
      timeout = setTimeout(() => {
        setCopyButtonClicked(false)
      }, 1000)
    }
    return () => timeout && clearTimeout(timeout)
  }, [copyButtonClicked])

  return (
    <Grid item>
      {t("lobby.shareGame.linkLabel", "Share your link with everyone playing")}
      <Grid container spacing={2} style={{ paddingTop: 8, paddingBottom: 8 }}>
        <Grid item xs={8}>
          <TextField
            id="standard-read-only-input"
            defaultValue={document.URL.replace("http://", "").replace(
              "https://",
              ""
            )}
            fullWidth
            InputProps={{
              readOnly: true,
            }}
          />
        </Grid>
        <Grid item xs={4}>
          <Clipboard
            data-clipboard-text={document.URL}
            style={{ border: "none", background: "none" }}
          >
            <Button
              variant="contained"
              color="default"
              style={
                copyButtonClicked
                  ? { backgroundColor: green[600], color: "#fff" }
                  : {}
              }
              onClick={() => setCopyButtonClicked(true)}
            >
              {copyButtonClicked ? t("copied", "Copied") : t("copy", "Copy")}
            </Button>
          </Clipboard>
        </Grid>
      </Grid>
      {t("lobby.shareGame.codeLabel", "Or the code")}
      <Typography variant="h6">{currentGame.join_code}</Typography>
    </Grid>
  )
}

function ScreenCard(props: {
  card: CurrentGameSubscription["games"][0]["cards"][0]
}) {
  const currentGame = React.useContext(CurrentGameContext)
  const [acceptCard] = useAcceptCardMutation()
  const [rejectCard] = useRejectCardMutation()

  const player = currentGame.players.find(
    (player) => player.id === props.card.player_id
  )

  return (
    <BowlCard padding={2}>
      <Grid container direction="column" spacing={2}>
        <Grid item>
          <PlayerChip username={player?.username || ""} />
        </Grid>
        <Grid container item direction="column" spacing={2} alignItems="center">
          <Grid item>{props.card.word}</Grid>
          <Grid item container justify="center" spacing={2}>
            <Grid item>
              <IconButton
                color="secondary"
                onClick={() => {
                  rejectCard({
                    variables: {
                      id: props.card.id,
                    },
                  })
                }}
              >
                <CancelIcon />
              </IconButton>
            </Grid>
            <Grid item>
              <IconButton
                style={{ color: green[600] }}
                onClick={() => {
                  acceptCard({
                    variables: {
                      id: props.card.id,
                    },
                  })
                }}
              >
                <CheckCircleIcon />
              </IconButton>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </BowlCard>
  )
}

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: ({ width }: { width: number }) => ({
      backgroundColor: grey[300],
      borderRadius: 8,
      height: 24,
      width,
      display: "flex",
    }),
    chipText: {
      fontSize: 8,
      color: grey[600],
      [theme.breakpoints.between("md", "md")]: {
        fontSize: 7,
      },
    },
    circle: {
      backgroundColor: green[300],
      borderRadius: "50%",
      height: 8.4,
      width: 8.4,
      marginRight: 5,
    },
    link: {
      display: "flex",
      alignItems: "center",
      textDecoration: "none",
      color: "inherit",
      "&:hover": {
        textDecoration: "none",
        color: "inherit",
      },
    },
    sensorImage: {
      height: 18,
      width: 18,
    },
    button: {
      padding: 0,
      height: "100%",
    },
  })
)

theme = createMuiStrictTheme({
  palette: {
    type: 'dark',
    primary: {
      main: green[700],
    },
    secondary: {
      main: '#ca7300',
      dark: '#975d2e',
      light: '#ffc380',
    },
    error: {
      main: red[500],
      dark: '#7e1e1e',
    },
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          overflowY: 'hidden',
        },
        '*::-webkit-scrollbar': {
          width: '1em',
          cursor: 'pointer',
        },
        '*::-webkit-scrollbar-track': {
          background: grey[800],
          borderRadius: 0,
        },
        '*::-webkit-scrollbar-thumb': {
          background: grey[700],
          border: `2px solid ${grey[800]}`,
          borderRadius: 0,
          '&:hover': {
            background: grey[600],
          },
        },
      },
    },
    MuiTooltip: {
      tooltip: {
        fontSize: '1em',
      },
    },
  },
})

Flag = (props: IFlagProps) => {
  const classes = useStyles();


  let cardColor, cardTitle, cardDesc, fontColor, flagColor, refreshColor;

  if (props.flag) {
    cardColor = green[400];
    cardTitle = "Well Done";
    cardDesc = "Seems like you completed this challenge.";
    fontColor = "#FFF";
    flagColor = amber[500];
    refreshColor = 'white';


  }
  else {
    cardColor = grey[200];
    cardTitle = "Find The Flag";
    cardDesc = "Solve the crypto challenge to get the flag";
    fontColor = grey[400];
    flagColor = fontColor;
    refreshColor = grey[400];
  }

  const resetChallenge = () => props.resetChallenge();


  return (
    <Box className={classes.root} style={{ backgroundColor: cardColor }}>
      <FlagIcon style={{ fontSize: 150, color: flagColor }} />
      <CardContent style={{ color: fontColor }}>

        <Typography gutterBottom variant="h5" component="h2">{cardTitle}</Typography>
        <Typography variant="subtitle1">
          {cardDesc}
        </Typography>

        <Typography variant="overline" display="block" gutterBottom >
          {props.flag || "Not found yet"}
        </Typography>

        <IconButton onClick={resetChallenge} disabled={!props.flag} style={{ color: refreshColor }} aria-label="Reset Challenge" component="span">
          <ReplayIcon />
        </IconButton>
      </CardContent>
    </Box>);
}

useStyles = makeStyles({
  successButton: { color: green[500] }
})

GameController: React.FC<GameControllerProps> = ({ game, currentPlayerId }) => {
  const history = useHistory();
  const [showCopiedMessage, setShowCopiedMessage] = useState(false);
  const copyInviteLink = () => {
    const dummy = document.createElement('input');
    const url = `${window.location.origin}/join/${game.id}`;
    document.body.appendChild(dummy);
    dummy.value = url;
    dummy.select();
    document.execCommand('copy');
    document.body.removeChild(dummy);
    setShowCopiedMessage(true);
  };

  const leaveGame = () => {
    history.push(`/`);
  };

  const isModerator = (moderatorId: string, currentPlayerId: string) => {
    return moderatorId === currentPlayerId;
  };
  return (
    <Grow in={true} timeout={2000}>
      <div className='GameController'>
        <Card variant='outlined' className='GameControllerCard'>
          <CardHeader
            title={game.name}
            titleTypographyProps={{ variant: 'h6' }}
            action={
              <div className='GameControllerCardHeaderAverageContainer'>
                <Typography variant='subtitle1'>{game.gameStatus}</Typography>
                {game.gameType !== GameType.TShirt && (
                  <>
                    <Divider className='GameControllerDivider' orientation='vertical' flexItem />
                    <Typography variant='subtitle1'>Average:</Typography>
                    <Typography variant='subtitle1' className='GameControllerCardHeaderAverageValue'>
                      {game.average || 0}
                    </Typography>
                  </>
                )}
              </div>
            }
            className='GameControllerCardTitle'
          ></CardHeader>
          <CardContent className='GameControllerCardContentArea'>
            {isModerator(game.createdById, currentPlayerId) && (
              <>
                <div className='GameControllerButtonContainer'>
                  <div className='GameControllerButton'>
                    <IconButton onClick={() => finishGame(game.id)} data-testid='reveal-button' color='primary'>
                      <VisibilityIcon fontSize='large' style={{ color: green[500] }} />
                    </IconButton>
                  </div>
                  <Typography variant='caption'>Reveal</Typography>
                </div>

                <div className='GameControllerButtonContainer'>
                  <div className='GameControllerButton'>
                    <IconButton data-testid={'restart-button'} onClick={() => resetGame(game.id)}>
                      <RefreshIcon fontSize='large' color='error' />
                    </IconButton>
                  </div>
                  <Typography variant='caption'>Restart</Typography>
                </div>
              </>
            )}
            <div className='GameControllerButtonContainer'>
              <div className='GameControllerButton'>
                <IconButton data-testid='exit-button' onClick={() => leaveGame()}>
                  <ExitToApp fontSize='large' style={{ color: orange[500] }} />
                </IconButton>
              </div>
              <Typography variant='caption'>Exit</Typography>
            </div>
            <div title='Copy invite link' className='GameControllerButtonContainer'>
              <div className='GameControllerButton'>
                <IconButton data-testid='invite-button' onClick={() => copyInviteLink()}>
                  <LinkIcon fontSize='large' style={{ color: blue[500] }} />
                </IconButton>
              </div>
              <Typography variant='caption'>Invite</Typography>
            </div>
          </CardContent>
        </Card>
        <Snackbar
          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
          open={showCopiedMessage}
          autoHideDuration={5000}
          onClose={() => setShowCopiedMessage(false)}
        >
          <Alert severity='success'>Invite Link copied to clipboard!</Alert>
        </Snackbar>
      </div>
    </Grow>
  );
}

function Settings() {
  const { t } = useTranslation()
  const currentGame = React.useContext(CurrentGameContext)
  const players = currentGame.players
  const [selectedPlayerId, setSelectedPlayerId] = React.useState<
    Players["id"] | null
  >(null)
  const [copyButtonClicked, setCopyButtonClicked] = React.useState(false)

  const selectedPlayer = find(
    players,
    (player) => player.id === selectedPlayerId
  )
  const selectedPlayerUrl =
    document.URL.replace("http://", "")
      .replace("https://", "")
      .replace("settings", "play") +
    `?client_uuid=${selectedPlayer?.client_uuid}`

  React.useEffect(() => {
    let timeout: NodeJS.Timeout
    if (copyButtonClicked) {
      timeout = setTimeout(() => {
        setCopyButtonClicked(false)
      }, 1000)
    }
    return () => timeout && clearTimeout(timeout)
  }, [copyButtonClicked])

  const activeTurn = last(currentGame.turns)

  return (
    <Grid container direction="column" spacing={2}>
      <Grid item>
        <Trans t={t} i18nKey="settings.join.codeDescription">
          {"Players can rejoin the game with code "}
          <b>{{ joinCode: currentGame.join_code?.toLocaleUpperCase() }}</b>
        </Trans>
      </Grid>
      <Grid item>
        {t(
          "settings.join.link.description",
          "If that's not working, send a unique join link by selecting a player's username below."
        )}
      </Grid>
      <Grid item>
        <FormControl style={{ width: "200px" }}>
          <InputLabel htmlFor="player-name-native-simple">
            {t("settings.join.link.playerSelectLabel", "Player username")}
          </InputLabel>
          <Select
            native
            value={null}
            onChange={({ target: { value } }) => {
              setSelectedPlayerId(value)
            }}
            inputProps={{
              name: "Player name",
              id: "player-name-native-simple",
            }}
          >
            <option aria-label="None" value="" />
            {players.map((player) => {
              return (
                <option key={player.id} value={player.id || "unknown"}>
                  {player.username}
                </option>
              )
            })}
          </Select>
        </FormControl>
      </Grid>
      {selectedPlayer && (
        <>
          <Grid item container spacing={2}>
            <Grid item xs={8}>
              <TextField
                id="standard-read-only-input"
                value={selectedPlayerUrl}
                fullWidth
                InputProps={{
                  readOnly: true,
                }}
              />
            </Grid>
            <Grid item xs={4}>
              <Clipboard
                data-clipboard-text={selectedPlayerUrl}
                style={{ border: "none", background: "none" }}
              >
                <Button
                  variant="contained"
                  color="default"
                  style={
                    copyButtonClicked
                      ? { backgroundColor: green[600], color: "#fff" }
                      : {}
                  }
                  onClick={() => setCopyButtonClicked(true)}
                >
                  {copyButtonClicked
                    ? t("copied", "Copied")
                    : t("copy", "Copy")}
                </Button>
              </Clipboard>
            </Grid>
          </Grid>
          <Grid item>
            <Trans t={t} i18nKey="settings.join.link.helper">
              {"Send this to "}
              <PlayerChip>
                {{ playerUsername: selectedPlayer?.username }}
              </PlayerChip>
              {" so they can get back in the game!"}
            </Trans>
          </Grid>
        </>
      )}
      <Grid item>
        <Box py={2}>
          <Divider variant="fullWidth"></Divider>
        </Box>
      </Grid>
      <Grid item>
        <Box pb={1}>
          {t(
            "settings.playDescription",
            "As the host, you can adjust these settings before each turn or round starts."
          )}
        </Box>
      </Grid>
      <Grid item>
        <SecondsPerTurnInput
          value={String(currentGame.seconds_per_turn || "")}
          disabled={activeTurn?.started_at}
        />
      </Grid>
      <Grid item>
        <AllowCardSkipsCheckbox
          value={Boolean(currentGame.allow_card_skips)}
          disabled={activeTurn?.started_at}
        />
      </Grid>
    </Grid>
  )
}