X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/1bd016d1f30c72353e5e3b086dd9778b74efb516..3367b1ff2a1d1050bb435f7bc8230c03435b2529:/src/components/collection-panel-files/collection-panel-files.tsx

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index f9c18219..c3cb4acc 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,8 +6,9 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '../tree/tree';
 import { FileTreeData } from '../file-tree/file-tree-data';
 import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
 import { CustomizeTableIcon } from '../icon/icon';
+import { DownloadIcon } from '~/components/icon/icon';
 
 export interface CollectionPanelFilesProps {
     items: Array<TreeItem<FileTreeData>>;
@@ -18,7 +19,7 @@ export interface CollectionPanelFilesProps {
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
 }
 
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     root: {
@@ -33,6 +34,13 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
     fileSizeHeader: {
         marginRight: '65px'
+    },
+    uploadIcon: {
+        transform: 'rotate(180deg)'
+    },
+    button: {
+        marginRight: -theme.spacing.unit,
+        marginTop: '0px'
     }
 });
 
@@ -42,20 +50,24 @@ export const CollectionPanelFiles =
             <Card className={classes.root}>
                 <CardHeader
                     title="Files"
+                    classes={{ action: classes.button }}
                     action={
                         <Button onClick={onUploadDataClick}
                             variant='raised'
                             color='primary'
                             size='small'>
+                            <DownloadIcon className={classes.uploadIcon} />
                             Upload data
                     </Button>
                     } />
                 <CardHeader
                     className={classes.cardSubheader}
                     action={
-                        <IconButton onClick={onOptionsMenuOpen}>
-                            <CustomizeTableIcon />
-                        </IconButton>
+                        <Tooltip title="More options">
+                            <IconButton onClick={onOptionsMenuOpen}>
+                                <CustomizeTableIcon />
+                            </IconButton>
+                        </Tooltip>
                     } />
                 <Grid container justify="space-between">
                     <Typography variant="caption" className={classes.nameHeader}>