added icon

[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 a4779fad40b8c4ef335d9ce33c77d8b7405a20c1..00fa08cce7a686474f31a6b80406c50e14f7fd23 100644 (file)
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -5,7 +5,7 @@
 import * as React from "react";
 import { MenuItem, Typography } from "@material-ui/core";
 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
-import { HelpIcon } from "~/components/icon/icon";
+import { ImportContacts } from "~/components/icon/icon";
 import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 
@@ -22,7 +22,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     title: {
         marginLeft: theme.spacing.unit * 2,
-        marginBottom: theme.spacing.unit * 0.5,
+        paddingBottom: theme.spacing.unit * 0.5,
         outline: 'none',
     },
     linkTitle: {
@@ -30,12 +30,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-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/"
-}
+const links = [
+    {
+        title: "Public Pipelines and Data sets",
+        link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
+    },
+    {
+        title: "Tutorials and User guide",
+        link: "http://doc.arvados.org/user/",
+    },
+    {
+        title: "API Reference",
+        link: "http://doc.arvados.org/api/",
+    },
+    {
+        title: "SDK Reference",
+        link: "http://doc.arvados.org/sdk/"
+    },
+];
 
 export const HelpMenu = withStyles(styles)(
     ({ classes }: WithStyles<CssRules>) =>
@@ -44,18 +56,14 @@ export const HelpMenu = withStyles(styles)(
             id="help-menu"
             title="Help">
             <Typography variant="body1" className={classes.title}>Help</Typography>
-            {menuItem("Public Pipelines and Data sets", helpMenuLinks.PIPELINES_DATASETS, classes)}
-            {menuItem("Tutorials and User guide", helpMenuLinks.TUTORIALS, classes)}
-            {menuItem("API Reference", helpMenuLinks.API_REFERENCE, classes)}
-            {menuItem("SDK Reference", helpMenuLinks.SDK_REFERENCE, classes)}
+            {
+                links.map(link =>
+                    <a key={link.title} href={link.link} target="_blank" className={classes.link}>
+                        <MenuItem>
+                            <ImportContacts className={classes.icon} />
+                            <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                        </MenuItem>
+                    </a>)
+            }
         </DropdownMenu>
 );
-
-    // Todo: change help icon
-const menuItem = (title: string, link: string, classes: Record<CssRules, string>) =>
-    <a href={link} target="_blank" className={classes.link}>
-        <MenuItem>
-            <HelpIcon className={classes.icon} />
-            <Typography variant="body1" className={classes.linkTitle}>{title}</Typography>
-        </MenuItem>
-    </a>;