merge master

[arvados-workbench2.git] / src / views-components / main-app-bar / help-menu.tsx

diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
index 8128b7f4d3f0e47acff71ca1df24afb385b5502a..de3ed3b8e275a8ad11ccc4983c648c8b2b69d9a1 100644 (file)
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -14,20 +14,23 @@ type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     link: {
         textDecoration: 'none',
-        color: 'inherit'
+        color: 'inherit',
+        width: '100%',
+        display: 'flex'
     },
     icon: {
         width: '16px',
         height: '16px'
     },
     title: {
-        marginLeft: theme.spacing.unit * 2,
         paddingBottom: theme.spacing.unit * 0.5,
+        paddingLeft: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 0.5,
         outline: 'none',
     },
     linkTitle: {
         marginLeft: theme.spacing.unit
-    }
+    },
 });
 
 const links = [
@@ -55,15 +58,18 @@ export const HelpMenu = withStyles(styles)(
             icon={<HelpIcon />}
             id="help-menu"
             title="Help">
-            <Typography variant="body1" className={classes.title}>Help</Typography>
+            <li className={classes.title}>
+                <Typography variant="body1">Help</Typography>
+            </li>
             {
                 links.map(link =>
-                    <a key={link.title} href={link.link} target="_blank" className={classes.link}>
-                        <MenuItem>
-                            <ImportContactsIcon className={classes.icon} />
-                            <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
-                        </MenuItem>
-                    </a>)
+                    <MenuItem key={link.title}>
+                        <a href={link.link} target="_blank" className={classes.link}>
+                                <ImportContactsIcon className={classes.icon} />
+                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                        </a>
+                    </MenuItem>
+                )
             }
         </DropdownMenu>
 );