Merge branch '13764-icons-colors-unification-refactoring'

[arvados.git] / src / views-components / details-panel / details-panel.tsx

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 99c4063b00b6e7aa7682a7e2ddbb4ec03d3785c5..f2212fc528e430c55e77c3792b6db89cf06ddf59 100644 (file)
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -3,21 +3,16 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import Drawer from '@material-ui/core/Drawer';
-import IconButton from "@material-ui/core/IconButton";
+import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 import { ArvadosTheme } from '../../common/custom-theme';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
 import * as classnames from "classnames";
 import { connect, Dispatch } from 'react-redux';
 import { RootState } from '../../store/store';
 import actions from "../../store/details-panel/details-panel-action";
 import { ProjectResource } from '../../models/project';
 import { CollectionResource } from '../../models/collection';
-import IconBase, { IconTypes } from '../../components/icon/icon';
+import { CloseIcon } from '../../components/icon/icon';
 import { ProcessResource } from '../../models/process';
 import DetailsPanelFactory from '../../components/details-panel-factory/details-panel-factory';
 import AbstractItem from '../../components/details-panel-factory/items/abstract-item';
@@ -52,9 +47,9 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
             <Typography component="div" className={classnames([classes.container, { [classes.opened]: isOpened }])}>
                 <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
                     <Typography component="div" className={classes.headerContainer}>
-                        <Grid container wrap="nowrap" alignItems='center' justify='space-around'>
-                            <Grid item>
-                                <IconBase className={classes.headerIcon} icon={item.getIcon()} />
+                        <Grid container alignItems='center' justify='space-around'>
+                            <Grid item xs={2}>
+                                {item.getIcon(classes.headerIcon)}
                             </Grid>
                             <Grid item xs={8}>
                                 <Typography variant="title">
@@ -63,7 +58,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
                             </Grid>
                             <Grid item>
                                 <IconButton color="inherit" onClick={onCloseDrawer}>
-                                    <IconBase icon={IconTypes.CLOSE} />
+                                    {<CloseIcon />}
                                 </IconButton>
                             </Grid>
                         </Grid>