X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/fef17c665b0d6acb4be97c9dcf4a6cb7a92ee6ef..59b24ea9a90ba60563316a5c2ad4c7ce8a8c423d:/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 f140d86063..e7f63eafc0 100644
--- 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,59 +4,59 @@
 
 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";
 
-export interface ListItemTextIconDataProps {
-    icon: IconType;
-    name: string;
-    isActive?: boolean;
-    hasMargin?: boolean;
-}
-
-type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
-
-class ListItemTextIcon extends React.Component<ListItemTextIconProps, {}> {
-    render() {
-        const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
-        return (
-            <Typography component='span' className={classes.root}>
-                <ListItemIcon className={classnames({
-                        [classes.hasMargin]: hasMargin,
-                        [classes.active]: isActive
-                    })}>
-                    <Icon />
-                </ListItemIcon>
-                <ListItemText primary={
-                    <Typography variant='body1' className={classnames(classes.listItemText, {
-                            [classes.active]: isActive
-                        })}>
-                        {name}
-                    </Typography>
-                } />
-            </Typography>
-        );
-    }
-}
-        
 type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
-        
+
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         display: 'flex',
         alignItems: 'center'
     },
     listItemText: {
-        fontWeight: 700
+        fontWeight: 400
     },
     active: {
         color: theme.palette.primary.main,
     },
     hasMargin: {
-        marginLeft: '18px',
+        marginLeft: `${theme.spacing.unit}px`,
     },
 });
 
-export default withStyles(styles)(ListItemTextIcon);
\ No newline at end of file
+export interface ListItemTextIconDataProps {
+    icon: IconType;
+    name: string;
+    isActive?: boolean;
+    hasMargin?: boolean;
+}
+
+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;
+            return (
+                <Typography component='span' className={classes.root}>
+                    <ListItemIcon className={classnames({
+                            [classes.hasMargin]: hasMargin,
+                            [classes.active]: isActive
+                        })}>
+                        <Icon />
+                    </ListItemIcon>
+                    <ListItemText primary={
+                        <Typography variant='body1' className={classnames(classes.listItemText, {
+                                [classes.active]: isActive
+                            })}>
+                            {name}
+                        </Typography>
+                    } />
+                </Typography>
+            );
+        }
+    }
+);