From 2bd3403752034fa8b78d44d6dd60c94b71879768 Mon Sep 17 00:00:00 2001
From: marcosmro <marcos.martinez.romero@gmail.com>
Date: Fri, 29 Jan 2021 11:35:03 -0800
Subject: [PATCH] Show and fix alignment of help icon

---
 .../src/components/content/SettingsPopOver.js         | 11 +++++++----
 phs-gdc-dashboard/src/components/content/Step3.js     |  3 ---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/phs-gdc-dashboard/src/components/content/SettingsPopOver.js b/phs-gdc-dashboard/src/components/content/SettingsPopOver.js
index f89ed4f..45a7e15 100644
--- a/phs-gdc-dashboard/src/components/content/SettingsPopOver.js
+++ b/phs-gdc-dashboard/src/components/content/SettingsPopOver.js
@@ -4,7 +4,7 @@ import FormControl from "@material-ui/core/FormControl";
 import FormGroup from "@material-ui/core/FormGroup/FormGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel/FormControlLabel";
 import Tooltip from "@material-ui/core/Tooltip/Tooltip";
-import HelpOutline from "@material-ui/core/SvgIcon/SvgIcon";
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import makeStyles from "@material-ui/core/styles/makeStyles";
 
 export default function SettingsPopOver(props) {
@@ -16,6 +16,9 @@ export default function SettingsPopOver(props) {
       paddingLeft: theme.spacing(4),
       paddingRight: theme.spacing(4),
     },
+    item: {
+      alignItems: "center",
+    },
   }));
 
   const classes = useStyles();
@@ -28,7 +31,7 @@ export default function SettingsPopOver(props) {
     <div className={classes.settings}>
       <h4>Settings</h4>
       <FormControl component="fieldset" fullWidth>
-        <FormGroup row flex className={classes.item}>
+        <FormGroup row className={classes.item}>
           <FormControlLabel
             control={
               <Checkbox
@@ -40,9 +43,9 @@ export default function SettingsPopOver(props) {
             }
             label="Include temporal information"
           />
-          <Tooltip
+          <Tooltip flex
             title="For each selected variable, it includes an additional column with the date (e.g., year) the data was collected.">
-            <HelpOutline/>
+            <HelpOutlineIcon/>
           </Tooltip>
         </FormGroup>
       </FormControl>
diff --git a/phs-gdc-dashboard/src/components/content/Step3.js b/phs-gdc-dashboard/src/components/content/Step3.js
index 951bf2f..6054ea3 100644
--- a/phs-gdc-dashboard/src/components/content/Step3.js
+++ b/phs-gdc-dashboard/src/components/content/Step3.js
@@ -30,9 +30,6 @@ import SettingsPopOver from "./SettingsPopOver";
 export default function Step3(props) {
 
   const useStyles = makeStyles((theme) => ({
-    item: {
-      alignItems: "center",
-    },
     buttons: {
       marginTop: '2vh',
       marginBottom: '3vh',