theme-ui#IconButton JavaScript Examples

The following examples show how to use theme-ui#IconButton. 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: help-popup.js    From proof-of-humanity-web with MIT License 5 votes vote down vote up
export default function HelpPopup({ ...rest }) {
  return (
    <Popup
      contentStyle={{ width: 248 }}
      trigger={
        <IconButton aria-label="Help Menu">
          <Help size="auto" />
        </IconButton>
      }
      position="bottom right"
      {...rest}
    >
      <Box
        sx={{
          color: "text",
          paddingX: 1,
          paddingY: 2,
        }}
      >
        <List
          sx={{
            fontSize: 16,
            listStyle: "none",
            padding: 0,
          }}
        >
          {items.map(({ key, text, url, Icon }) => (
            <ListItem
              key={key}
              sx={{
                ":not(:last-child)": {
                  mb: 2,
                },
              }}
            >
              <Link
                href={url}
                target="_blank"
                rel="noreferrer noopener"
                sx={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                  color: "text",
                  textDecoration: "none",
                  ":hover, :focus": {
                    textDecoration: "underline",
                  },
                }}
              >
                <Icon
                  sx={{
                    fill: "primary",
                  }}
                  color="var(--theme-ui-colors-primary,#ff9900)"
                />
                {text}
              </Link>
            </ListItem>
          ))}
        </List>
      </Box>
    </Popup>
  );
}
Example #2
Source File: EmailSignup.js    From developer-portal with Apache License 2.0 5 votes vote down vote up
EmailSignup = ({ placeholder, disabled, ...props }) => {
  const { inputEl, subscribe, loading, success, errorMessage } = useEmailSubscribe();
  return success ? (
    <Flex sx={{ alignItems: 'center' }}>
      <Text color="primary">Thank you for signing up.</Text>
      <Flex
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          bg: 'primary',
          size: '25px',
          borderRadius: 'round',
          mx: 2,
        }}
      >
        <Icon name="checkmark" size="3" />
      </Flex>
    </Flex>
  ) : (
    <Flex sx={{ flexDirection: 'column' }}>
      <Flex>
        <Input
          {...props}
          aria-label="Email for newsletter"
          ref={inputEl}
          type="email"
          placeholder={placeholder}
          disabled={loading || disabled}
          sx={{
            ...props.sx,
            fontFamily: 'body',
            width: '350px',
            borderColor: (theme) => `transparent transparent ${theme.colors.muted} transparent`,
            '&:focus': {
              borderColor: (theme) => `transparent transparent ${theme.colors.muted} transparent`,
              color: 'text',
            },
          }}
        ></Input>
        <IconButton disabled={loading || disabled} onClick={subscribe} sx={{ m: 'auto' }}>
          <Icon name="arrow_right" color="primary" />
        </IconButton>
      </Flex>
      {errorMessage && (
        <Text variant="plainText" sx={{ fontSize: 1, color: 'primary' }}>
          {errorMessage}
        </Text>
      )}
    </Flex>
  );
}
Example #3
Source File: Header.js    From developer-portal with Apache License 2.0 5 votes vote down vote up
MobileMenu = ({ close, query, bannerData }) => {
  const [{ linkText, url, text }] = bannerData;
  return (
    <Container
      sx={{
        bg: 'background',
        height: '100%',
        position: 'fixed',
        zIndex: 1,
      }}
    >
      <Flex sx={{ justifyContent: 'space-between', mb: 6, py: 2 }}>
        <Link href="/" passHref>
          <ThemeLink>
            <Icon name="maker" color="text" size={4} />
          </ThemeLink>
        </Link>
        <IconButton sx={{ cursor: 'pointer', pt: 3 }}>
          <Icon
            name="dp_close"
            size="auto"
            color="text"
            sx={{
              cursor: 'pointer',
              height: 20,
              width: 20,
            }}
            onClick={close}
          />
        </IconButton>
      </Flex>
      <Flex as="nav" sx={{ flexDirection: 'column', px: 2 }}>
        <ThemeLink href={url} target="_blank">
          <Flex sx={{ alignItems: 'center', px: 2 }}>
            <Icon color="primary" name="increase"></Icon>
            <Text sx={{ px: 2, fontSize: 5, color: 'text' }}>{linkText}</Text>
          </Flex>
        </ThemeLink>
        <Text sx={{ px: 2, fontSize: 2, color: 'onBackgroundMuted' }}>{text}</Text>
        {LINKS.map(({ name, url }) => (
          <Link href={{ pathname: url, query }} passHref key={name}>
            <NavLink
              key={name}
              sx={{
                py: 4,
                fontSize: 7,
              }}
              variant="links.mobileNav"
            >
              {name}
            </NavLink>
          </Link>
        ))}
      </Flex>
    </Container>
  );
}
Example #4
Source File: Header.js    From developer-portal with Apache License 2.0 5 votes vote down vote up
Header = ({ query, subnav, mobile, router }) => {
  const [mobileOpened, setMobileOpened] = useState(false);

  useEffect(() => {
    setMobileOpened(false);
  }, [router?.asPath]);
  return (
    <Box
      sx={{ width: '100%', zIndex: 1, position: [mobileOpened ? 'fixed' : undefined, undefined] }}
    >
      {mobileOpened ? (
        <MobileMenu close={() => setMobileOpened(false)} bannerData={bannerData} />
      ) : (
        <>
          {!mobile && <Banners bannerData={bannerData} />}
          <Container as="header" mt={[0, 2]} sx={{ bg: 'background' }}>
            <Flex
              sx={{
                alignItems: 'center',
                justifyContent: 'space-between',
                mb: [0, 3],
                py: [2, 0],
              }}
            >
              <Link href="/" passHref>
                <ThemeLink>
                  <Icon name="maker" color="text" size={4} />
                </ThemeLink>
              </Link>
              <Flex sx={{ alignItems: 'center' }}>
                <Flex
                  as="nav"
                  sx={{
                    alignItems: 'center',
                  }}
                >
                  {LINKS.map(({ name, url }) => (
                    <Link href={{ pathname: url, query }} passHref key={name}>
                      <NavLink
                        key={name}
                        sx={{
                          display: ['none', 'none', 'block'],
                          pr: 4,
                          '&:last-child': { pr: [null, 0] },
                        }}
                        variant="links.nav"
                      >
                        {name}
                      </NavLink>
                    </Link>
                  ))}
                </Flex>
                <IconButton sx={{ display: ['block', 'block', 'none'], cursor: 'pointer' }}>
                  <Icon
                    name="dp_menu"
                    size="auto"
                    color="text"
                    sx={{
                      height: 24,
                      width: 19,
                    }}
                    onClick={() => setMobileOpened(!mobileOpened)}
                  />
                </IconButton>
              </Flex>
            </Flex>
          </Container>
        </>
      )}
      {subnav ?? null}
    </Box>
  );
}
Example #5
Source File: account-settings-popup.js    From proof-of-humanity-web with MIT License 4 votes vote down vote up
export default function AccountSettingsPopup({
  name,
  photo,
  userSettingsURL,
  settings,
  parseSettings,
  normalizeSettings,
}) {
  const [accounts] = useWeb3("eth", "getAccounts");
  const { connect, web3 } = useWeb3();
  const { props } = useQuery(appQuery, {
    contributor: accounts?.[0] || zeroAddress,
    id: accounts?.[0] || zeroAddress,
  });
  const changeWallet = useCallback(() => {
    // Delete walletconnect connection, if any.
    // Otherwise users can get stuck with a buggy connection.
    localStorage.removeItem("WEB3_CONNECT_CACHED_PROVIDER");
    localStorage.removeItem("walletconnect");
    connect();
  }, [connect]);

  const { contributions: withdrawableContributions } = props ?? {};
  const { send: batchSend } = useContract("transactionBatcher", "batchSend");
  const pohInstance = useMemo(() => {
    if (!ProofOfHumanityAbi || !pohAddress) return;
    return new web3.eth.Contract(ProofOfHumanityAbi, pohAddress);
  }, [web3.eth.Contract]);

  const withdrawFeesAndRewards = useCallback(() => {
    if (!batchSend || withdrawableContributions?.length === 0) return;
    const withdrawCalls = withdrawableContributions.map(
      (withdrawableContribution) => {
        const { requestIndex, roundIndex, round } = withdrawableContribution;
        const { challenge } = round;
        const { request, challengeID } = challenge;
        const { submission } = request;
        const { id } = submission;
        return pohInstance.methods
          .withdrawFeesAndRewards(
            accounts[0],
            id,
            requestIndex,
            challengeID,
            roundIndex
          )
          .encodeABI();
      }
    );
    batchSend(
      [...new Array(withdrawCalls.length).fill(pohAddress)],
      [...new Array(withdrawCalls.length).fill(web3.utils.toBN(0))],
      withdrawCalls
    );
  }, [
    accounts,
    batchSend,
    pohInstance.methods,
    web3.utils,
    withdrawableContributions,
  ]);

  return (
    <Popup
      contentStyle={{ width: 490 }}
      trigger={
        <IconButton>
          <Settings size="auto" />
        </IconButton>
      }
      position="bottom right"
    >
      <Box
        sx={{
          color: "text",
          paddingX: 1,
          paddingY: 2,
        }}
      >
        <Text
          sx={{
            fontWeight: "bold",
            textAlign: "center",
          }}
        >
          Settings
        </Text>
        <Tabs>
          <TabList>
            <Tab>Account</Tab>
            <Tab>Notifications</Tab>
          </TabList>
          <TabPanel>
            <Text
              sx={{
                fontSize: 10,
                marginBottom: 3,
              }}
            >
              {accounts &&
                (accounts.length === 0 ? (
                  "Connected to Infura"
                ) : (
                  <Flex sx={{ alignItems: "center" }}>
                    {photo ? (
                      <Image
                        sx={{
                          objectFit: "contain",
                          width: 32,
                          height: 32,
                        }}
                        variant="avatar"
                        src={photo}
                      />
                    ) : (
                      <Identicon address={accounts[0]} />
                    )}
                    <Box sx={{ marginLeft: 1 }}>
                      {name && (
                        <Text sx={{ fontSize: 0, marginBottom: "4px" }}>
                          {name}
                        </Text>
                      )}
                      <NextETHLink address={accounts[0]}>
                        {accounts[0]}
                      </NextETHLink>
                    </Box>
                  </Flex>
                ))}
            </Text>
            <NetworkTag sx={{ mb: 1 }} />
            <Divider />
            <Button
              sx={{
                display: "block",
                marginTop: -2,
                marginX: "auto",
              }}
              onClick={changeWallet}
            >
              {accounts &&
                `${accounts.length === 0 ? "Connect" : "Change"} Wallet`}
            </Button>
            {withdrawableContributions?.length > 0 && (
              <Button
                sx={{
                  display: "block",
                  marginTop: 2,
                  marginX: "auto",
                }}
                onClick={withdrawFeesAndRewards}
              >
                Withdraw Fees and Rewards
              </Button>
            )}
          </TabPanel>
          <TabPanel>
            <UserSettings
              userSettingsURL={userSettingsURL}
              settings={settings}
              parseSettings={parseSettings}
              normalizeSettings={normalizeSettings}
            />
          </TabPanel>
        </Tabs>
      </Box>
    </Popup>
  );
}