@material-ui/styles#useTheme TypeScript Examples
The following examples show how to use
@material-ui/styles#useTheme.
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: Footer.tsx From gatsby-theme-pristine with Apache License 2.0 | 6 votes |
|
Footer: React.FC<IProps> = (props) => {
const theme: Theme = useTheme();
const smallQuery = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Grid container spacing={10} style={{marginTop: "10px", marginBottom: "10px", padding: smallQuery ? "" : "30px"}} direction={smallQuery ? "row" : "column"}>
{props.footerLinks.map((footerLink) => {
return (
<Link href={footerLink.link} style={{paddingRight: "15px", fontSize: "16px"}} color="textSecondary">{footerLink.name}</Link>
);
})}
</Grid>
);
}
Example #2
| Source File: UserBalancesWidget.tsx From homebase-app with MIT License | 5 votes |
|
UserBalancesWidget: React.FC = () => {
const { account } = useTezos();
const daoId = useDAOID();
const { ledger, data: dao } = useDAO(daoId);
const theme = useTheme<Theme>();
const userLedger = useMemo(() => {
const found = ledger?.find(
(l) => l.holder.address.toLowerCase() === account.toLowerCase()
);
return (
found || {
available_balance: new BigNumber(0),
pending_balance: new BigNumber(0),
staked: new BigNumber(0),
}
);
}, [account, ledger]);
return (
<Grid container justifyContent="center">
{userLedger && dao && (
<>
<BalanceBox
item
color={theme.palette.secondary.main}
radiusSide="left"
>
<Grid container alignItems="center" justifyContent="center">
<Grid item>
<TitleText align="center" color="inherit">
Available Balance
</TitleText>
<BalanceText align="center" color="textPrimary">
{userLedger.available_balance.toString()}{" "}
{dao.data.token.symbol}
</BalanceText>
</Grid>
</Grid>
</BalanceBox>
<BalanceBox item color={theme.palette.warning.main} radiusSide="none">
<Grid container alignItems="center" justifyContent="center">
<Grid item>
<TitleText align="center" color="inherit">
Pending Balance
</TitleText>
<BalanceText align="center" color="textPrimary">
{userLedger.pending_balance.toString()}{" "}
{dao.data.token.symbol}
</BalanceText>
</Grid>
</Grid>
</BalanceBox>
<BalanceBox item color={theme.palette.info.main} radiusSide="right">
<Grid container alignItems="center" justifyContent="center">
<Grid item>
<TitleText align="center" color="inherit">
Staked Balance
</TitleText>
<BalanceText align="center" color="textPrimary">
{userLedger.staked.toString()} {dao.data.token.symbol}
</BalanceText>
</Grid>
</Grid>
</BalanceBox>
</>
)}
</Grid>
);
}
Example #3
| Source File: Sidebar.tsx From gatsby-theme-pristine with Apache License 2.0 | 5 votes |
|
Sidebar: React.FC<IProps> = ({ children, open, onClose }) => {
const data = useStaticQuery(graphql`
query SidebarQuery {
site {
siteMetadata {
title
logoUrl
menuLinks {
name
link
}
}
}
}
`);
const theme: any = useTheme();
return (
<Drawer open={open} onClose={onClose}>
<Grid container style={{ paddingLeft: "20px", paddingTop: "20px" }}>
<img
alt="logo"
height="30"
style={{paddingRight: "10px"}}
src={data.site.siteMetadata.logoUrl} />
<Typography color="textSecondary" variant="h6">
{data.site.siteMetadata.title}
</Typography>
</Grid>
<List style={{ minWidth: "250px" }}>
{data.site.siteMetadata.menuLinks.map((menuLink: any) => (
<GatsbyLink
to={menuLink.link} key={menuLink.name}
style={{ color: theme.palette.text.secondary, textDecoration: "none" }}
activeStyle={{ color: theme.palette.text.secondary }}
>
<ListItem button key="foo" onClick={onClose}>
<ListItemText primary={menuLink.name} />
</ListItem>
</GatsbyLink>
))}
</List>
</Drawer>
);
}
Example #4
| Source File: ServerListItem.tsx From shadowsocks-electron with GNU General Public License v3.0 | 5 votes |
|
ServerListItem: React.FC<ServerListItemProps> = props => {
const {
item,
selectedServer,
isLast,
dragTarget,
dragSort,
setDragTarget,
setDragSource
} = props;
const styles = useStyles();
const ref = useRef<HTMLDivElement>(null);
const theme: Theme = useTheme();
const onDragStart = (e: DragEvent<HTMLDivElement>) => {
setCloneElement((e.target as HTMLDivElement).cloneNode(true) as HTMLDivElement);
(e.target as HTMLDivElement).style.opacity = "0.2";
setDragSource(item.id);
e.dataTransfer.setDragImage(img, 0, 0);
};
const onDragEnd = (e: DragEvent<HTMLDivElement>) => {
if (cloneElement) {
(e.target as HTMLDivElement).style.opacity = "1";
dragSort();
cloneElement.remove();
setCloneElement(null);
}
}
const onDragEnter = () => {
if (cloneElement) {
setDragTarget(item.id);
cloneElement.remove();
cloneElement.style.transition = 'all 0.3s linear';
cloneElement.style.border = `dashed 2px ${theme.palette.primary.main}`;
ref.current?.prepend(cloneElement);
}
};
const isInOver = dragTarget.current === item.id;
return (
<>
<div
ref={ref}
draggable={true}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
onDragEnter={onDragEnter}
className={clsx(styles.wrapper, isInOver && styles.highlight)}
>
<If
condition={item.type === 'group'}
then={<ServerListItemGroup {...props} item={(props.item as GroupConfig)} selectedServer={selectedServer} />}
else={<ServerListItemSingle {...props} item={(props.item as Config)} selected={selectedServer === item.id} />}
/>
</div>
{!isLast && <GradientDivider />}
</>
);
}
Example #5
| Source File: Main.tsx From knests with MIT License | 5 votes |
|
Main = (props) => {
const { children } = props;
const classes = useStyles();
const theme: typeof CustomTheme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
defaultMatches: true,
});
const [openSidebar, setOpenSidebar] = useState(false);
const handleSidebarOpen = () => {
setOpenSidebar(true);
};
const handleSidebarClose = () => {
setOpenSidebar(false);
};
const shouldOpenSidebar = isDesktop ? true : openSidebar;
return (
<div
className={clsx({
[classes.root]: true,
[classes.shiftContent]: isDesktop,
})}
>
<Topbar onSidebarOpen={handleSidebarOpen} />
<Sidebar
onClose={handleSidebarClose}
open={shouldOpenSidebar}
variant={isDesktop ? 'persistent' : 'temporary'}
/>
<main className={classes.content}>
{children}
<Footer />
</main>
</div>
);
}
Example #6
| Source File: index.tsx From homebase-app with MIT License | 4 votes |
|
ProposalDetails: React.FC = () => {
const {proposalId} = useParams<{
proposalId: string;
}>();
const daoId = useDAOID();
const [openVote, setOpenVote] = useState(false);
const [voteIsSupport, setVoteIsSupport] = useState(false);
const theme = useTheme<Theme>();
const {data: proposal} = useProposal(daoId, proposalId);
const {data: dao, cycleInfo} = useDAO(daoId);
const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));
const {mutate: dropProposal} = useDropProposal();
const {data: holdings} = useDAOHoldings(daoId);
const { account } = useTezos()
const canDropProposal = useCanDropProposal(daoId, proposalId);
const {data: agoraPost} = useAgoraTopic(
Number(proposal?.metadata?.agoraPostId)
);
const quorumThreshold = proposal?.quorumThreshold || new BigNumber(0);
const { mutate: mutateUnstake } = useUnstakeVotes()
const onClickVote = (support: boolean) => {
setVoteIsSupport(support);
setOpenVote(true);
}
const onCloseVote = () => {
setOpenVote(false)
}
const onDropProposal = useCallback(async () => {
await dropProposal({
dao: dao as BaseDAO,
proposalId,
});
}, [dao, dropProposal, proposalId]);
const onUnstakeVotes = useCallback(async () => {
await mutateUnstake({
dao: dao as BaseDAO,
proposalId,
});
}, [dao, mutateUnstake, proposalId]);
const proposalCycle = proposal ? proposal.period : "-";
const {votesQuorumPercentage} = useVotesStats({
upVotes: proposal?.upVotes || new BigNumber(0),
downVotes: proposal?.downVotes || new BigNumber(0),
quorumThreshold,
});
const list = useMemo(() => {
if (!proposal || !(proposal instanceof RegistryProposal)) {
return [];
}
return proposal.metadata.list;
}, [proposal]);
const transfers = useMemo(() => {
if (!holdings || !proposal) {
return [];
}
return (proposal as TreasuryProposal | RegistryProposal).metadata.transfers;
}, [holdings, proposal]);
const canVote =
cycleInfo &&
proposal?.getStatus(cycleInfo.currentLevel).status ===
ProposalStatus.ACTIVE;
const canUnstakeVotes = cycleInfo && proposal && account &&
(proposal.getStatus(cycleInfo.currentLevel).status === ProposalStatus.DROPPED ||
proposal.getStatus(cycleInfo.currentLevel).status === ProposalStatus.EXECUTED) &&
proposal.voters.some(({ address }) => address.toLowerCase() === account.toLowerCase())
return (
<>
<Grid container direction="column" style={{gap: 42}}>
<Container item>
<Grid container direction="column" style={{gap: 18}}>
<Grid item container style={{gap: 21}}>
<Grid item>
<Typography
variant="h3"
color="textPrimary"
align={isMobileSmall ? "center" : "left"}
>
{agoraPost
? agoraPost.title
: `Proposal ${toShortAddress(proposal?.id || "")}`}
</Typography>
</Grid>
<Grid>
<Button
variant="contained"
color="secondary"
disabled={!canDropProposal}
onClick={onDropProposal}
>
Drop Proposal
</Button>
<Tooltip
placement="bottom"
title="Guardian and proposer may drop proposal at anytime. Anyone may drop proposal if proposal expired"
>
<InfoIcon color="secondary"/>
</Tooltip>
</Grid>
<Grid>
<Button
variant="contained"
color="secondary"
disabled={!canUnstakeVotes}
onClick={onUnstakeVotes}
>
Unstake votes
</Button>
<Tooltip
placement="bottom"
title="Can only unstake if proposal is executed or dropped, and if you have voted and have not called this action on this proposal before"
>
<InfoIcon color="secondary"/>
</Tooltip>
</Grid>
</Grid>
<Grid item>
<Grid
container
justifyContent="space-between"
alignItems="center"
>
<Grid item>
{proposal && cycleInfo && (
<Grid container style={{gap: 20}}>
<Grid item>
<StatusBadge
status={
proposal.getStatus(cycleInfo.currentLevel).status
}
/>
</Grid>
<Grid item>
<Typography color="textPrimary" variant="subtitle2">
CREATED BY
</Typography>
</Grid>
<Grid item>
<UserBadge address={proposal.proposer} short={true}/>
</Grid>
</Grid>
)}
</Grid>
<Grid item>
<Grid container style={{gap: 28}}>
<Grid item>
<VoteButton variant="contained" favor={true} onClick={() => onClickVote(true)}
disabled={!canVote}>
Vote For
</VoteButton>
</Grid>
<Grid item>
<VoteButton variant="contained" favor={false} onClick={() => onClickVote(false)}
disabled={!canVote}>
Vote Against
</VoteButton>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
<Grid item>
<Grid container style={{gap: 45}}>
<Container item xs={12} md={7}>
<Grid container direction="column" style={{gap: 18}}>
<Grid item>
<Grid container style={{gap: 18}}>
<Grid item>
<Typography color="secondary">Votes</Typography>
</Grid>
<Grid item>
<Typography color="textPrimary">
Cycle: {proposalCycle}
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<VotersProgress
showButton={true}
daoId={daoId}
proposalId={proposalId}
/>
</Grid>
</Grid>
</Container>
<Container item xs>
<Grid
container
direction="row"
style={{height: "100%"}}
alignItems="center"
wrap="nowrap"
>
<Grid item>
<ProgressBar
progress={proposal ? votesQuorumPercentage.toNumber() : 0}
radius={50}
strokeWidth={7}
strokeColor="#3866F9"
trackStrokeWidth={4}
trackStrokeColor={theme.palette.primary.light}
>
<div className="indicator">
<ProgressText textColor="#3866F9">
{proposal
? `${formatNumber(votesQuorumPercentage)}%`
: "-"}
</ProgressText>
</div>
</ProgressBar>
</Grid>
<Grid item>
<Grid
container
direction="column"
alignItems="flex-start"
justifyContent="center"
wrap="nowrap"
style={{height: "100%"}}
>
<Grid item>
{proposal && (<Tooltip
placement="bottom"
title={`Amount of ${dao?.data.token.symbol} required to be locked through voting for a proposal to be passed/rejected. ${(proposal.upVotes.gte(proposal.downVotes) ? proposal.upVotes.toString() : proposal.downVotes.toString())}/${quorumThreshold} votes.`}
>
<InfoIcon color="secondary"/>
</Tooltip>)}
<QuorumTitle color="textPrimary">
Quorum Threshold:
</QuorumTitle>
</Grid>
<Grid item>
<Typography color="textPrimary">
{proposal ? quorumThreshold.toString() : "-"}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
</Grid>
</Grid>
<Container item>
<Grid container direction="column" style={{gap: 40}}>
{agoraPost && (
<Grid item>
<Typography
color="textPrimary"
variant="body1"
align={isMobileSmall ? "center" : "left"}
>
{ReactHtmlParser(agoraPost.post_stream.posts[0].cooked)}
</Typography>
</Grid>
)}
<Grid item container style={{gap: 25}}>
{proposal ? (
<>
{transfers.map((transfer, index) => {
return (
<Grid
key={index}
item
container
alignItems="center"
direction={isMobileSmall ? "column" : "row"}
>
{transfer.type === "XTZ" ? (
<XTZTransferBadge
amount={transfer.amount}
address={transfer.beneficiary}
/>
) : (
<TransferBadge
amount={transfer.amount}
address={transfer.beneficiary}
contract={(transfer as FA2Transfer).contractAddress}
tokenId={(transfer as FA2Transfer).tokenId}
/>
)}
</Grid>
);
})}
{proposal.metadata.config.map(({key, value}, index) => (
<Grid
key={index}
item
container
alignItems="center"
direction={isMobileSmall ? "column" : "row"}
>
<HighlightedBadge
justify="center"
alignItems="center"
direction="row"
container
>
<Grid item>
<DetailsText variant="body1" color="textPrimary">
Change <Typography
variant="body1" color="secondary"
display={"inline"}>{getReadableConfig(key as keyof Proposal["metadata"]["config"])}
</Typography> to <Typography
variant="body1" color="secondary" display={"inline"}>{value.toString()}</Typography>
</DetailsText>
</Grid>
</HighlightedBadge>
</Grid>
))}
{proposal.metadata.update_contract_delegate !== '' &&
<ProposalTransferBadge address={proposal.metadata.update_contract_delegate} label="New Delegate"/>}
{proposal.metadata.update_guardian !== '' &&
<ProposalTransferBadge address={proposal.metadata.update_guardian} label="Update Guardian"/>}
{list.map(({key, value}, index) => (
<Grid
key={index}
item
container
alignItems="center"
direction={isMobileSmall ? "column" : "row"}
>
<HighlightedBadge
justify="center"
alignItems="center"
direction="row"
container
>
<Grid item>
<DetailsText variant="body1" color="textPrimary">
Set "{key}" to "{value}"
</DetailsText>
</Grid>
</HighlightedBadge>
</Grid>
))}
</>
) : null}
</Grid>
</Grid>
</Container>
<Grid item>
<Grid container>
<Container item md={7} xs={12}>
{cycleInfo &&
proposal
?.getStatus(cycleInfo.currentLevel)
.statusHistory.map((item, index) => {
return (
<HistoryItem
container
direction="row"
key={index}
alignItems="baseline"
wrap="nowrap"
xs={12}
style={{gap: 32}}
>
<Grid item>
<StatusBadge item status={item.status}/>
</Grid>
<Grid item>
<Typography color="textPrimary" variant="subtitle2">
{item.timestamp}
</Typography>
</Grid>
</HistoryItem>
);
})}
</Container>
</Grid>
</Grid>
</Grid>
<VoteDialog open={openVote} support={voteIsSupport} onClose={onCloseVote}/>
</>
);
}
