Show and fix alignment of help icon

metadatacenter-attic · Jan 29, 2021 · 2bd3403 · 2bd3403
1 parent 918547b
commit 2bd3403
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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',