conflicts

[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 3980e5690a078dad8d3d7b1437557a6e96375544..26604228fc21ac9fbfb79ba21a96a8372324655c 100644 (file)
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -3,9 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { MenuItem, Typography } from "@material-ui/core";
+import { MenuItem, Typography, ListSubheader } from "@material-ui/core";
 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
-import { HelpIcon } from "~/components/icon/icon";
+import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
 import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 
@@ -14,52 +14,41 @@ 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,
-        marginBottom: theme.spacing.unit * 0.5,
+        paddingBottom: theme.spacing.unit * 0.5,
+        paddingLeft: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 0.5,
         outline: 'none',
     },
     linkTitle: {
         marginLeft: theme.spacing.unit
-    }
+    },
 });
 
-enum helpMenuLinks {
-    PIPELINES_DATASETS = "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
-    TUTORIALS = "http://doc.arvados.org/user/",
-    API_REFERENCE = "http://doc.arvados.org/api/",
-    SDK_REFERENCE = "http://doc.arvados.org/sdk/"
-}
-
-enum helpMenuTitles {
-    PIPELINES_DATASETS = "Public Pipelines and Data sets",
-    TUTORIALS = "Tutorials and User guide",
-    API_REFERENCE = "API Reference",
-    SDK_REFERENCE = "SDK Reference"
-}
-
 const links = [
     {
-        title: helpMenuTitles.PIPELINES_DATASETS,
-        link: helpMenuLinks.PIPELINES_DATASETS
+        title: "Public Pipelines and Data sets",
+        link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
     },
     {
-        title: helpMenuTitles.TUTORIALS,
-        link: helpMenuLinks.TUTORIALS
+        title: "Tutorials and User guide",
+        link: "http://doc.arvados.org/user/",
     },
     {
-        title: helpMenuTitles.API_REFERENCE,
-        link: helpMenuLinks.API_REFERENCE
+        title: "API Reference",
+        link: "http://doc.arvados.org/api/",
     },
     {
-        title: helpMenuTitles.SDK_REFERENCE,
-        link: helpMenuLinks.SDK_REFERENCE
+        title: "SDK Reference",
+        link: "http://doc.arvados.org/sdk/"
     },
 ];
 
@@ -69,15 +58,16 @@ export const HelpMenu = withStyles(styles)(
             icon={<HelpIcon />}
             id="help-menu"
             title="Help">
-            <Typography variant="body1" className={classes.title}>Help</Typography>
+            <MenuItem disabled>Help</MenuItem>
             {
                 links.map(link =>
-                <a key={link.title} href={link.link} target="_blank" className={classes.link}>
-                    <MenuItem>
-                        <HelpIcon className={classes.icon} />
-                        <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                    <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>
-                </a>)
+                )
             }
         </DropdownMenu>
 );