import React from 'react'; import { Box } from '@material-ui/core'; import { HelpCircle as Question, PlusCircle } from 'react-feather'; import { makeStyles } from '@material-ui/core/styles'; import { CustomTooltip } from 'components'; const useStyles = makeStyles(({ palette }) => ({ questionWrapper: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0.2, border: 'none', background: 'none', outline: 'none', borderRadius: 36, color: (props: any) => (props.color ? props.color : palette.text.primary), '&:hover, &:focus': { opacity: 0.7, }, }, lightQuestionWrapper: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0.2, border: 'none', background: 'none', outline: 'none', cursor: 'default', borderRadius: 36, width: 24, height: 24, color: (props: any) => (props.color ? props.color : 'white'), '&:hover, &:focus': { opacity: 0.7, }, }, questionMark: { fontSize: '1rem', }, })); const QuestionHelper: React.FC<{ text: string; size?: number; color?: string; }> = ({ text, size = 16, color }) => { const classes = useStyles({ color }); return ( <CustomTooltip title={text}> <Box className={classes.questionWrapper}> <Question size={size} /> </Box> </CustomTooltip> ); }; export default QuestionHelper; export const PlusHelper: React.FC<{ text: string; color?: string }> = ({ text, color, }) => { const classes = useStyles({ color }); return ( <CustomTooltip title={text}> <Box className={classes.questionWrapper}> <PlusCircle size={16} /> </Box> </CustomTooltip> ); }; export const LightQuestionHelper: React.FC<{ text: string; color: string }> = ({ text, color, }) => { const classes = useStyles({ color }); return ( <CustomTooltip title={text}> <Box className={classes.lightQuestionWrapper}> <span className={classes.questionMark}>?</span> </Box> </CustomTooltip> ); };