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 |
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 |
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 |
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 |
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 |
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>
);
}