Add helper text placeholder

package.json

@@ -4,6 +4,7 @@
   "homepage": "https://dapplion.github.io/augmented-tbc-design",
   "dependencies": {
     "@material-ui/core": "^4.3.0",
+    "@material-ui/icons": "^4.2.1",
     "@types/lodash": "^4.14.136",
     "@types/react": "^16.8.24",
     "@types/react-dom": "^16.8.5",

src/App.tsx

@@ -14,6 +14,7 @@ import InputParams from "./InputParams";
 import SupplyVsDemandChart from "./SupplyVsDemandChart";
 import ResultParams from "./ResultParams";
 import PriceSimulationChart from "./PriceSimulationChart";
+import HelpText from "./HelpText";
 // Utils
 import { getLast, getAvg, pause } from "./utils";
 import { throttle } from "lodash";
@@ -250,6 +251,18 @@ export default function App() {
             <Paper className={classes.paper}>
               <Box className={classes.boxHeader}>
                 <Typography variant="h6">Curve Design</Typography>
+                <HelpText
+                  text={
+                    <span>
+                      Description of the different parameters <br />
+                      Initial raise: Lorem ipsum <br />
+                      Allocation to project: Lorem ipsum <br />
+                      Initial token price: Lorem ipsum <br />
+                      Return factor: Lorem ipsum <br />
+                      Withdrawl fee: Lorem ipsum
+                    </span>
+                  }
+                />
               </Box>
 
               <Box className={classes.box}>
@@ -262,6 +275,9 @@ export default function App() {
             <Paper className={classes.paper}>
               <Box className={classes.boxHeader}>
                 <Typography variant="h6">Preview</Typography>
+                <HelpText
+                  text={<span>Preview of the token bonding curve</span>}
+                />
               </Box>
 
               <Box className={classes.boxChart}>
@@ -305,7 +321,10 @@ export default function App() {
             <Grid item xs={12} sm={12} md={6} lg={8}>
               <Paper className={classes.paper}>
                 <Box className={classes.boxHeader}>
-                  <Typography variant="h6">Price walk</Typography>
+                  <Typography variant="h6">Simulation</Typography>
+                  <HelpText
+                    text={<span>Some context about this simulation</span>}
+                  />
                 </Box>
 
                 <Box className={classes.boxChart}>
@@ -322,6 +341,9 @@ export default function App() {
               <Paper className={classes.paper}>
                 <Box className={classes.boxHeader}>
                   <Typography variant="h6">Results</Typography>
+                  <HelpText
+                    text={<span>Explanation of what do this results mean</span>}
+                  />
                 </Box>
 
                 <Box className={classes.box}>

src/HelpText.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Popover from "@material-ui/core/Popover";
+import Typography from "@material-ui/core/Typography";
+import Fab from "@material-ui/core/Fab";
+import HelpIcon from "@material-ui/icons/HelpOutline";
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    display: "flex",
+    marginLeft: "6px",
+    fontSize: "0.9rem",
+    cursor: "pointer",
+    transition: "opacity ease 150ms",
+    opacity: 0.2,
+    "&:hover": {
+      opacity: 0.85
+    }
+  },
+  typography: {
+    padding: theme.spacing(2)
+  },
+  paper: {
+    backgroundColor: "#384b59"
+  }
+}));
+
+export default function SimplePopover({ text }: { text: any }) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  function handleClick(e: any) {
+    setAnchorEl(e.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  return (
+    <div className={classes.container}>
+      <HelpIcon onClick={handleClick} />
+
+      <Popover
+        PaperProps={{
+          className: classes.paper
+        }}
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center"
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center"
+        }}
+      >
+        <Typography className={classes.typography}>{text}</Typography>
+      </Popover>
+    </div>
+  );
+}

yarn.lock

@@ -1149,6 +1149,13 @@
     react-transition-group "^4.0.0"
     warning "^4.0.1"
 
+"@material-ui/icons@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.2.1.tgz#fe2f1c4f60c24256d244a69d86d0c00e8ed4037e"
+  integrity sha512-FvSD5lUBJ66frI4l4AYAPy2CH14Zs2Dgm0o3oOMr33BdQtOAjCgbdOcvPBeaD1w6OQl31uNW3CKOE8xfPNxvUQ==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+
 "@material-ui/styles@^4.2.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.3.0.tgz#27f11fbf061d8a20ad5703acb0dbb0e69cc00345"