Merge branch '15256-removing-files-during-upload'

[arvados-workbench2.git] / src / components / list-item-text-icon / list-item-text-icon.tsx

diff --git a/src/components/list-item-text-icon/list-item-text-icon.tsx b/src/components/list-item-text-icon/list-item-text-icon.tsx
index 8f9d4744dd3145364d0aea2350e5e995c51af25b..375538d56a2f753203b94f55ad4f1633750c4777 100644 (file)
--- a/src/components/list-item-text-icon/list-item-text-icon.tsx
+++ b/src/components/list-item-text-icon/list-item-text-icon.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
 import { ListItemIcon, ListItemText, Typography } from '@material-ui/core';
 import { IconType } from '../icon/icon';
 import * as classnames from "classnames";
@@ -17,14 +17,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignItems: 'center'
     },
     listItemText: {
-        fontWeight: 700
+        fontWeight: 400
     },
     active: {
         color: theme.palette.primary.main,
     },
     hasMargin: {
-        marginLeft: '18px',
-    },
+        marginLeft: `${theme.spacing.unit}px`,
+    }
 });
 
 export interface ListItemTextIconDataProps {
@@ -32,6 +32,8 @@ export interface ListItemTextIconDataProps {
     name: string;
     isActive?: boolean;
     hasMargin?: boolean;
+    iconSize?: number;
+    nameDecorator?: JSX.Element;
 }
 
 type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
@@ -39,17 +41,19 @@ type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
 export const ListItemTextIcon = withStyles(styles)(
     class extends React.Component<ListItemTextIconProps, {}> {
         render() {
-            const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
+            const { classes, isActive, hasMargin, name, icon: Icon, iconSize, nameDecorator } = this.props;
             return (
                 <Typography component='span' className={classes.root}>
                     <ListItemIcon className={classnames({
                             [classes.hasMargin]: hasMargin,
                             [classes.active]: isActive
                         })}>
-                        <Icon />
+
+                        <Icon style={{ fontSize: `${iconSize}rem` }} />
                     </ListItemIcon>
+                    {nameDecorator || null}
                     <ListItemText primary={
-                        <Typography variant='body1' className={classnames(classes.listItemText, {
+                        <Typography className={classnames(classes.listItemText, {
                                 [classes.active]: isActive
                             })}>
                             {name}