@material-ui/core#fade TypeScript Examples
The following examples show how to use
@material-ui/core#fade.
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: PlanDetails.tsx From SeeQR with MIT License | 6 votes |
|
PlanDetails = ({ plan, open, handleClose }: PlanDetailsProps) => (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<TableContainer component={LightPaper}>
<Table size="small">
<TableBody>{detailRows(plan)}</TableBody>
</Table>
</TableContainer>
</Fade>
</StyledModal>
)
Example #2
| Source File: Dashboard.tsx From clearflask with Apache License 2.0 | 6 votes |
|
renderPreviewEmpty(msg: string, size?: LayoutSize): Section {
return {
name: 'preview',
breakAction: 'drawer',
size: size || { breakWidth: 350, flexGrow: 100, maxWidth: 1024 },
content: (
<Fade key={msg} in appear>
<div className={this.props.classes.previewEmptyMessage}>
<Typography component='div' variant='h5'>
{msg}
</Typography>
<EmptyIcon
fontSize='inherit'
className={this.props.classes.previewEmptyIcon}
/>
</div>
</Fade>
),
};
}
Example #3
| Source File: index.tsx From uno-game with MIT License | 6 votes |
|
LoadingComponent: React.FC<LoadingComponentProps> = (props) => {
const { children, loading, customLoadingElement } = props
const classes = useStyles()
let component
if (loading) {
if (customLoadingElement) {
component = customLoadingElement
} else {
component = (
<Grid
container
justify="center"
alignItems="center"
className={classes.defaultLoadingContainer}
>
<CircularProgress color="primary" />
</Grid>
)
}
} else {
component = (
<Fade in={!loading}>
{children}
</Fade>
)
}
return component
}
Example #4
| Source File: CustomModal.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
CustomModal: React.FC<CustomModalProps> = ({
open,
onClose,
children,
background,
overflow,
}) => {
const classes = useStyles({ background, overflow });
return (
<Modal
open={open}
onClose={onClose}
BackdropComponent={Backdrop}
BackdropProps={{ timeout: 500 }}
>
<Fade in={open}>
<Box className={classes.wrapper}>{children}</Box>
</Fade>
</Modal>
);
}
Example #5
| Source File: index.tsx From lobis-frontend with MIT License | 6 votes |
|
function Airdrop({ merkleIndex }: any) {
return (
<Grid className="airdrop-view">
<Backdrop open={true}>
<Fade in={true}>
<div className="bond-card">
<AirdropHeader />
<AirdropClaim merkleIndex={merkleIndex} />
</div>
</Fade>
</Backdrop>
</Grid>
);
}
Example #6
| Source File: TableCell.tsx From firetable with Apache License 2.0 | 6 votes |
|
export default function RichText({ column, value }: IHeavyCellProps) {
const { tableState } = useFiretableContext();
const classes = useStyles({
width: column.width,
rowHeight: tableState?.config?.rowHeight ?? 44,
});
return (
<Tooltip
title={<RenderedHtml html={value} className={classes.renderedHtml} />}
enterDelay={1000}
placement="bottom-start"
PopperProps={{
modifiers: {
flip: { enabled: false },
preventOverflow: {
enabled: false,
boundariesElement: "scrollParent",
},
hide: { enabled: false },
},
}}
TransitionComponent={Fade}
classes={{ tooltip: classes.tooltip }}
>
<div className={classes.root}>
<RenderedHtml html={value} className={classes.renderedHtml} />
</div>
</Tooltip>
);
}
Example #7
| Source File: StorageDrawer.tsx From parity-bridges-ui with GNU General Public License v3.0 | 6 votes |
|
StorageDrawer = () => {
const classes = useStyles();
const { drawer, setDrawer } = useGUIContext();
const handleDrawerOpen = useCallback(() => setDrawer(`${drawer === 'open' ? '' : 'open'}`), [drawer, setDrawer]);
const handleDrawerClose = useCallback(() => setDrawer(''), [setDrawer]);
return (
<Box mt={4}>
<ButtonDrawerMenu
startIcon={<HistoryIcon />}
onClick={handleDrawerOpen}
color={drawer === 'open' ? 'primary' : 'secondary'}
>
History
</ButtonDrawerMenu>
<Fade in={drawer === 'open'} timeout={{ enter: 300, exit: 0 }}>
<div className={classes.drawer}>
<IconButton onClick={handleDrawerClose} color="secondary" className={classes.closeDrawerIcon}>
<CloseIcon />
</IconButton>
{/* <Transactions type={ }/> */}
</div>
</Fade>
</Box>
);
}
Example #8
| Source File: SearchBar.tsx From log4brains with Apache License 2.0 | 6 votes |
|
export function SearchBar(props: SearchBarProps) {
const { InputProps, InputLabelProps, open, onClear, ...params } = props;
const classes = useStyles(props);
return (
<InputBase
placeholder="Search..."
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
startAdornment={
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
}
endAdornment={
// eslint-disable-next-line react/destructuring-assignment
<Fade in={open && props.inputProps.value !== ""}>
<InputAdornment position="end">
<IconButton
onClick={(event) => onClear(event)}
size="small"
title="Clear"
className={classes.clearIcon}
>
<ClearIcon />
</IconButton>
</InputAdornment>
</Fade>
}
ref={InputProps.ref}
{...params}
/>
);
}
Example #9
| Source File: Spinner.tsx From knboard with MIT License | 6 votes |
|
Spinner = ({ loading }: Props) => (
<Fade
in={loading}
style={{
transitionDelay: loading ? "800ms" : "0ms",
}}
unmountOnExit
css={css`
padding: 0.5rem;
`}
>
<CircularProgress />
</Fade>
)
Example #10
| Source File: SideDrawerField.tsx From firetable with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
dropzoneButton: {
justifyContent: "flex-start",
color: theme.palette.text.secondary,
"& svg": { marginRight: theme.spacing(2) },
},
dropzoneDragActive: {
backgroundColor: fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity * 2
),
color: theme.palette.primary.main,
},
chipList: { marginTop: theme.spacing(1) },
chipGridItem: { maxWidth: "100%" },
chip: { width: "100%" },
})
)
Example #11
| Source File: MyButton.tsx From clearflask with Apache License 2.0 | 6 votes |
|
styles = (theme: Theme) => createStyles({
button: {
textTransform: 'unset',
},
icon: {
},
buttonPost: {
padding: theme.spacing(0.5, 1),
color: theme.palette.text.secondary,
minWidth: 'unset',
whiteSpace: 'nowrap',
lineHeight: '24px',
'&:not(:hover)': {
borderColor: 'rgba(0,0,0,0)',
},
},
iconPost: {
fontSize: '1.3em',
},
color: {
color: (props: Props) => props.color ? props.color : undefined,
'&:hover': {
backgroundColor: (props: Props) => props.color ? fade(props.color, 0.04) : undefined,
}
},
})
Example #12
| Source File: OrderList.tsx From ra-enterprise-demo with MIT License | 6 votes |
|
orderRowStyle =
(batchLevel, theme) =>
(record): any => {
let backgroundColor;
switch (record.batch) {
case batchLevel:
backgroundColor =
theme.palette.type === 'light'
? lighten(fade(theme.palette.info.light, 1), 0.68)
: darken(fade(theme.palette.info.dark, 1), 0.88);
break;
case 1:
if (batchLevel > 0) {
backgroundColor =
theme.palette.type === 'light'
? lighten(fade(theme.palette.info.light, 1), 0.78)
: darken(fade(theme.palette.info.dark, 1), 0.78);
}
break;
default:
backgroundColor = theme.palette.background.paper;
}
return {
backgroundColor,
};
}
Example #13
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function Bond({ bond }: IBondProps) {
const { address } = useWeb3Context();
const [slippage, setSlippage] = useState(0.5);
const [view, setView] = useState(0);
const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
const onSlippageChange = (value: any) => {
return setSlippage(value);
};
const changeView = (newView: number) => () => {
setView(newView);
};
return (
<Fade in={true} mountOnEnter unmountOnExit>
<Grid className="bond-view">
<Backdrop open={true}>
<Fade in={true}>
<div className="bond-card">
<BondHeader bond={bond} slippage={slippage} onSlippageChange={onSlippageChange} />
{/* @ts-ignore */}
<Box direction="row" className="bond-price-data-row">
<div className="bond-price-data">
<p className="bond-price-data-title">Mint Price</p>
<p className="bond-price-data-value">
{isBondLoading ? <Skeleton /> : bond.isLP || bond.name === "wavax" ? `$${trim(bond.bondPrice, 2)}` : `${trim(bond.bondPrice, 2)} MIM`}
</p>
</div>
<div className="bond-price-data">
<p className="bond-price-data-title">TIME Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
</div>
</Box>
<div className="bond-one-table">
<div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
<p>Mint</p>
</div>
<div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
<p>Redeem</p>
</div>
</div>
<TabPanel value={view} index={0}>
<BondPurchase bond={bond} slippage={slippage} />
</TabPanel>
<TabPanel value={view} index={1}>
<BondRedeem bond={bond} />
</TabPanel>
</div>
</Fade>
</Backdrop>
</Grid>
</Fade>
);
}
Example #14
| Source File: index.tsx From firetable with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
root: {
position: "fixed",
bottom: theme.spacing(2),
left: "50%",
transform: "translateX(-50%)",
},
paper: {
height: 64,
borderRadius: 32,
padding: theme.spacing(0, 1),
[theme.breakpoints.up("lg")]: { paddingRight: theme.spacing(2) },
zIndex: theme.zIndex.modal,
backgroundColor:
theme.palette.type === "light"
? theme.palette.background.default
: theme.palette.background.elevation?.[12] ??
theme.palette.background.default,
width: 470,
maxWidth: "100vw",
overflowX: "auto",
},
grid: {
height: "100%",
marginTop: 0,
marginBottom: 0,
},
spacer: { width: theme.spacing(2) },
selectedContainer: {
flexBasis: 206,
flexShrink: 0,
},
selected: {
color: theme.palette.text.disabled,
fontFeatureSettings: '"tnum"',
userSelect: "none",
display: "inline-block",
marginRight: theme.spacing(1),
minWidth: 150,
},
dropdown: {
minWidth: 120,
margin: 0,
},
inputBaseRoot: {
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.type === "dark"
? fade(theme.palette.text.primary, 0.06)
: undefined,
},
dropdownLabel: {
left: theme.spacing(1.5),
top: "50%",
transform: "translateY(-50%) !important",
...theme.typography.body1,
},
dropdownLabelFocused: {
"$dropdownLabel&": { color: theme.palette.text.primary },
},
select: {
paddingTop: "6px !important",
paddingBottom: "7px !important",
},
dropdownMenu: { marginTop: theme.spacing(-3) },
})
)
Example #15
| Source File: Dashboard.tsx From clearflask with Apache License 2.0 | 5 votes |
|
renderPreviewPostCreate(
stateKey: string,
project?: AdminProject,
draftId?: string,
mandatoryCategoryIds?: string[],
allowDrafts?: boolean,
defaultStatusId?: string,
externalControlRef?: MutableRef<ExternalControl>,
): Section {
if (!project) {
return this.renderPreviewEmpty('No project selected');
}
return {
name: 'preview',
breakAction: 'drawer',
size: PostPreviewSize,
content: (
<Provider key={project.projectId} store={project.server.getStore()}>
<Fade key='post-create' in appear>
<div>
<PostCreateForm
key={draftId || 'new'}
server={project.server}
type='post'
mandatoryCategoryIds={mandatoryCategoryIds}
adminControlsDefaultVisibility='expanded'
logInAndGetUserId={() => new Promise<string>(resolve => this.setState({ postCreateOnLoggedIn: resolve }))}
draftId={draftId}
defaultStatusId={defaultStatusId}
defaultConnectSearch={(stateKey === 'changelogPreview' && this.state.roadmap) ? {
filterCategoryIds: [this.state.roadmap.categoryAndIndex.category.categoryId],
filterStatusIds: this.state.roadmap.statusIdCompleted ? [this.state.roadmap.statusIdCompleted] : undefined,
} : undefined}
onCreated={postId => {
this.setState({ [stateKey]: { type: 'post', id: postId } as PreviewState } as any);
}}
onDraftCreated={allowDrafts ? draft => {
this.setState({ [stateKey]: { type: 'create-post', draftId: draft.draftId } as PreviewState } as any);
} : undefined}
onDiscarded={() => {
this.setState({ [stateKey]: undefined } as any);
}}
externalControlRef={externalControlRef}
/>
<LogIn
actionTitle='Get notified of replies'
server={project.server}
open={!!this.state.postCreateOnLoggedIn}
onClose={() => this.setState({ postCreateOnLoggedIn: undefined })}
onLoggedInAndClose={userId => {
if (this.state.postCreateOnLoggedIn) {
this.state.postCreateOnLoggedIn(userId);
this.setState({ postCreateOnLoggedIn: undefined });
}
}}
/>
</div>
</Fade>
</Provider>
),
};
}
Example #16
| Source File: SideDrawerField.tsx From firetable with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) =>
createStyles({
dropzoneButton: {
justifyContent: "flex-start",
color: theme.palette.text.secondary,
"& svg": { marginRight: theme.spacing(2) },
},
dropzoneDragActive: {
backgroundColor: fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity * 2
),
color: theme.palette.primary.main,
},
imagesContainer: {
marginTop: theme.spacing(1),
},
img: {
position: "relative",
width: 80,
height: 80,
borderRadius: theme.shape.borderRadius,
// boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
backgroundSize: "contain",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
},
thumbnail: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
},
overlay: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
backgroundColor: fade(theme.palette.background.paper, 0.8),
color: theme.palette.text.secondary,
boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
borderRadius: theme.shape.borderRadius,
},
deleteImgHover: {
transition: theme.transitions.create("background-color", {
duration: theme.transitions.duration.shortest,
}),
backgroundColor: "transparent",
"$img:hover &": {
backgroundColor: fade(theme.palette.background.paper, 0.8),
"& *": { opacity: 1 },
},
"& *": {
opacity: 0,
transition: theme.transitions.create("opacity", {
duration: theme.transitions.duration.shortest,
}),
},
},
})
)
Example #17
| Source File: EnterAsGuest.tsx From knboard with MIT License | 5 votes |
|
EnterAsGuest = () => {
const dispatch = useDispatch();
const history = useHistory();
const [allowGuest, setAllowGuest] = useState(false);
useEffect(() => {
const source = api.CancelToken.source();
const fetchData = async () => {
try {
const response: AxiosResponse<AuthSetup> = await api(
`${API_AUTH_SETUP}`,
{
cancelToken: source.token,
}
);
setAllowGuest(response.data.ALLOW_GUEST_ACCESS);
} catch (err) {
if (!api.isCancel(err)) {
console.error(err);
}
}
};
fetchData();
return () => source.cancel();
}, []);
const handleClick = () => {
dispatch(guestRegister());
history.push("/");
};
if (!allowGuest) {
return null;
}
return (
<Fade in={allowGuest}>
<Container>
<Separator>or</Separator>
<Button
css={css`
text-transform: initial;
`}
onClick={handleClick}
>
Enter as a guest
</Button>
</Container>
</Fade>
);
}
Example #18
| Source File: Panel.tsx From clearflask with Apache License 2.0 | 5 votes |
|
PanelTitle = (props: {
className?: string;
text?: React.ReactNode;
color?: string;
iconAction?: {
icon: React.ReactNode;
onClick: () => void;
transparent?: boolean;
tourAnchorProps?: React.ComponentProps<typeof TourAnchor>;
};
} & Omit<Partial<React.ComponentPropsWithoutRef<typeof Typography>>, 'color'>) => {
const { text, color, ...TypographyProps } = props;
const { t } = useTranslation('app');
const theme = useTheme();
if (!props.text) return null;
const iconAction = props.iconAction ? (
<TourAnchor {...props.iconAction.tourAnchorProps} {...{ transparent: props.iconAction?.transparent as any }}>
{(next, isActive, anchorRef) => (
<Fade in={!props.iconAction?.transparent || isActive}>
<IconButton ref={anchorRef} onClick={() => {
props.iconAction?.onClick();
next();
}}>
{props.iconAction?.icon}
</IconButton>
</Fade>
)}
</TourAnchor>
) : undefined;
return (
<Typography
className={props.className}
variant='h4'
component='div'
style={{ color: color !== undefined ? color : theme.palette.text.secondary }}
{...TypographyProps}
>
{t(text as any)}
{iconAction}
</Typography>
);
}
Example #19
| Source File: ExperimentsTableAgGrid.tsx From abacus with GNU General Public License v2.0 | 5 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
flexDirection: 'column',
flex: 1,
'& .ag-header-cell-label .ag-header-icon.ag-sort-order': {
display: 'none',
},
},
toolbar: {
margin: theme.spacing(3, 0, 2),
display: 'flex',
justifyContent: 'space-between',
},
controls: {
display: 'flex',
},
gridContainer: {
display: 'flex',
flex: 1,
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.9),
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '20ch',
},
},
}),
)
Example #20
| Source File: index.tsx From uno-game with MIT License | 5 votes |
|
LoadingScene: LoadingSceneType & React.FC<LoadingSceneProps> = (props) => {
const { onFinish, onStart, loading, children, duration } = props
const [visible, setVisible] = useState(true)
const classes = useStyles()
const handleScene = () => {
if (onStart) {
onStart()
}
setTimeout(() => {
setVisible(false)
if (onFinish) {
onFinish()
}
}, duration)
}
useDidMount(() => {
handleScene()
})
return (
<ThemeProvider theme={theme}>
<Zoom in={loading ?? visible}>
<Grid
container
direction="column"
alignItems="center"
justify="center"
className={classes.container}
>
<img
className={classes.logo}
src={logoImg}
alt="logo"
/>
</Grid>
</Zoom>
{children && (
<>
{!loading && <Fade in={!loading} children={children as React.ReactElement} />}
</>
)}
</ThemeProvider>
)
}
Example #21
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function Header() {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event: any) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
return (
<div className="landing-header">
<SvgIcon color="primary" component={WonderlandIcon} viewBox="0 0 174 40" style={{ minWidth: 174, minHeight: 40 }} />
<div className="landing-header-nav-wrap">
<Box component="div" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
<p className="landing-header-nav-text">Social</p>
<Popper className="landing-header-poper" open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={200}>
<div className="tooltip">
<Link className="tooltip-item" href="https://github.com/Wonderland-Money/wonderland-frontend" target="_blank">
<SvgIcon color="primary" component={GitHub} />
<p>GitHub</p>
</Link>
<Link className="tooltip-item" href="https://twitter.com/wonderland_fi?s=21" target="_blank">
<SvgIcon color="primary" component={Twitter} />
<p>Twitter</p>
</Link>
<Link className="tooltip-item" href="https://t.me/joinchat/6UybL5rJMEhjN2Y5" target="_blank">
<SvgIcon viewBox="0 0 32 32" color="primary" component={Telegram} />
<p>Telegram</p>
</Link>
<Link className="tooltip-item" href="https://discord.gg/thDHseaHUt" target="_blank">
<SvgIcon color="primary" component={Discord} />
<p>Discord</p>
</Link>
</div>
</Fade>
)}
</Popper>
</Box>
</div>
</div>
);
}
Example #22
| Source File: index.tsx From rugenerous-frontend with MIT License | 5 votes |
|
function TimeMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const isEthereumAPIAvailable = window.ethereum;
const networkID = useSelector<IReduxState, number>(state => {
return (state.app && state.app.networkID) || DEFAULD_NETWORK;
});
const addresses = getAddresses(networkID);
const SRUG_ADDRESS = addresses.SRUG_ADDRESS;
const RUG_ADDRESS = addresses.RUG_ADDRESS;
const handleClick = (event: any) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
return (
<div className="rug-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
<div className="rug-menu-btn">
<p>BUY RUG</p>
</div>
<Popper className="rug-menu-popper" open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={200}>
<div className="tooltip">
<Link component={NavLink} to="/buy/tjDex" className="tooltip-item">
<p>Buy on TradeJoe</p>
</Link>
{isEthereumAPIAvailable && (
<div className="add-tokens">
<div className="divider" />
<p className="add-tokens-title">ADD TOKEN TO WALLET</p>
<div className="divider" />
<div className="tooltip-item" onClick={addTokenToWallet("RUG", RUG_ADDRESS)}>
<p>RUG</p>
</div>
<div className="tooltip-item" onClick={addTokenToWallet("SRUG", SRUG_ADDRESS)}>
<p>SRUG</p>
</div>
</div>
)}
</div>
</Fade>
)}
</Popper>
</div>
);
}
Example #23
| Source File: actionbar-search-field.tsx From mtcute with GNU Lesser General Public License v3.0 | 5 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: '40ch',
},
},
})
)
Example #24
| Source File: FullPageSpinner.tsx From knboard with MIT License | 5 votes |
|
FullPageSpinner = () => (
<Fade style={{ transitionDelay: "800ms" }} unmountOnExit>
<CircularProgress />
</Fade>
)
Example #25
| Source File: index.tsx From lobis-frontend with MIT License | 5 votes |
|
function LobiMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const isEthereumAPIAvailable = window.ethereum;
const LOBI_ADDRESS = addresses.lobi;
const SLOBI_ADDRESS = addresses.sLobi;
const handleClick = (event: any) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
return (
<div className="lobi-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
<div className="lobi-menu-btn">
<p>{TOKEN_NAME}</p>
</div>
<Popper className="lobi-menu-popper" open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={200}>
<div className="tooltip">
<Link className="tooltip-item" href={`https://app.sushi.com/swap?outputCurrency=0xDEc41Db0c33F3F6f3cb615449C311ba22D418A8d`} target="_blank">
<p>Buy on Sushiswap</p>
</Link>
{isEthereumAPIAvailable && (
<div className="add-tokens">
<div className="tooltip-item" onClick={addTokenToWallet(`${TOKEN_NAME}`, LOBI_ADDRESS)}>
<p>{TOKEN_NAME}</p>
</div>
<div className="tooltip-item" onClick={addTokenToWallet(`${STAKING_TOKEN_NAME}`, SLOBI_ADDRESS)}>
<p>{STAKING_TOKEN_NAME}</p>
</div>
</div>
)}
</div>
</Fade>
)}
</Popper>
</div>
);
}
Example #26
| Source File: PostEdit.tsx From clearflask with Apache License 2.0 | 5 votes |
|
styles = (theme: Theme) => createStyles({
row: {
padding: theme.spacing(2),
},
grow: {
flexGrow: 1,
},
saveButtonActions: {
display: 'flex',
width: '100%',
alignItems: 'baseline',
margin: theme.spacing(1),
flexWrap: 'wrap-reverse',
},
saveButtonAction: {
margin: theme.spacing(1),
},
clickToEditContainer: {
position: 'relative', // For clickToEditIcon
transition: theme.transitions.create(['background-color', 'box-shadow']),
backgroundColor: 'transparent',
cursor: 'pointer',
borderRadius: 10,
'&:hover': {
backgroundColor: fade(theme.palette.primary.light, 0.05),
boxShadow: `0px 0px 3px 3px ${fade(theme.palette.primary.light, 0.05)}`,
},
},
clickToEditIcon: {
position: 'absolute',
top: 0,
right: 0,
transform: 'translate(100%, -50%)',
transition: theme.transitions.create(['color']),
color: 'transparent',
},
clickToEditIconHoverDisabled: {
color: fade(theme.palette.text.hint, 0.05),
},
clickToEditIconHover: {
color: theme.palette.primary.main,
},
})
Example #27
| Source File: index.tsx From lobis-frontend with MIT License | 5 votes |
|
function Bond({ bond }: IBondProps) {
const { provider, address } = useWeb3Context();
const [slippage, setSlippage] = useState(0.5);
const [recipientAddress, setRecipientAddress] = useState(address);
const [view, setView] = useState(0);
const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
const onRecipientAddressChange = (e: any) => {
return setRecipientAddress(e.target.value);
};
const onSlippageChange = (e: any) => {
return setSlippage(e.target.value);
};
useEffect(() => {
if (address) setRecipientAddress(address);
}, [provider, address]);
const changeView = (newView: number) => () => {
setView(newView);
};
return (
<Grid className="bond-view">
<Backdrop open={true}>
<Fade in={true}>
<div className="bond-card">
<BondHeader
bond={bond}
slippage={slippage}
recipientAddress={recipientAddress}
onSlippageChange={onSlippageChange}
onRecipientAddressChange={onRecipientAddressChange}
/>
{/* @ts-ignore */}
<Box direction="row" className="bond-price-data-row">
<div className="bond-price-data">
<p className="bond-price-data-title">Mint Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.bondPrice, 2)}`}</p>
</div>
<div className="bond-price-data">
<p className="bond-price-data-title">{TOKEN_NAME} Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
</div>
</Box>
<div className="bond-one-table">
<div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
<p>Mint</p>
</div>
<div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
<p>Redeem</p>
</div>
</div>
<TabPanel value={view} index={0}>
<BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
</TabPanel>
<TabPanel value={view} index={1}>
<BondRedeem bond={bond} />
</TabPanel>
</div>
</Fade>
</Backdrop>
</Grid>
);
}
Example #28
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function TimeMenu() {
const [anchorEl, setAnchorEl] = useState(null);
const isEthereumAPIAvailable = window.ethereum;
const networkID = useSelector<IReduxState, number>(state => {
return (state.app && state.app.networkID) || DEFAULD_NETWORK;
});
const addresses = getAddresses(networkID);
const MEMO_ADDRESS = addresses.MEMO_ADDRESS;
const TIME_ADDRESS = addresses.TIME_ADDRESS;
const handleClick = (event: any) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
return (
<div className="time-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
<div className="time-menu-btn">
<p>TIME</p>
</div>
<Popper className="time-menu-popper" open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={200}>
<div className="tooltip">
<Link className="tooltip-item" href={`https://www.traderjoexyz.com/#/trade?inputCurrency=&outputCurrency=${TIME_ADDRESS}`} target="_blank">
<p>Buy on Trader Joe</p>
</Link>
{isEthereumAPIAvailable && (
<div className="add-tokens">
<div className="divider" />
<p className="add-tokens-title">ADD TOKEN TO WALLET</p>
<div className="divider" />
<div className="tooltip-item" onClick={addTokenToWallet("TIME", TIME_ADDRESS)}>
<p>TIME</p>
</div>
<div className="tooltip-item" onClick={addTokenToWallet("MEMO", MEMO_ADDRESS)}>
<p>MEMO</p>
</div>
</div>
)}
</div>
</Fade>
)}
</Popper>
</div>
);
}
Example #29
| Source File: index.tsx From rugenerous-frontend with MIT License | 5 votes |
|
function Header() {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event: any) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
return (
<div className="landing-header">
<SvgIcon
color="primary"
component={RugenerousIcon}
viewBox="0 0 400 40"
style={{ minWidth: 174, minHeight: 40 }}
/>
<div className="landing-header-nav-wrap">
<Box component="div" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
<p className="landing-header-nav-text">Social</p>
<Popper className="landing-header-poper" open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={200}>
<div className="tooltip">
<Link className="tooltip-item" href="https://github.com/Rugenerous" target="_blank">
<SvgIcon color="primary" component={GitHub} />
<p>GitHub</p>
</Link>
<Link className="tooltip-item" href="https://twitter.com/RUGenerous" target="_blank">
<SvgIcon color="primary" component={Twitter} />
<p>Twitter</p>
</Link>
<Link className="tooltip-item" href="https://discord.gg/JHeKjn5F2q" target="_blank">
<SvgIcon color="primary" component={Discord} />
<p>Discord</p>
</Link>
</div>
</Fade>
)}
</Popper>
</Box>
</div>
</div>
);
}
