merge conflict

Feature #13859

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --combined src/views/process-panel/process-information-card.tsx
index db0ee605fd7a412c1b967fddfe527270d027ed4f,f3a804d70f45f7a27f4560d11d60ae0eea1cd11e..f2379ed8dd697af03cd227f84d55c1a80e28e3f4
--- 1/src/views/process-panel/process-information-card.tsx
--- 2/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@@ -10,11 -10,10 +10,11 @@@ import 
  import { ArvadosTheme } from '~/common/custom-theme';
  import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 -import { Process } from '~/store/processes/process';
 -import { getProcessStatus } from '../../store/processes/process';
 +import { Process, getProcessStatusColor } from '~/store/processes/process';
 +import { getProcessStatus } from '~/store/processes/process';
  
 -type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar';
 +
 +type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar';
  
  const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
      card: {
@@@ -25,8 -24,7 +25,8 @@@
          color: theme.customs.colors.green700,
      },
      avatar: {
 -        alignSelf: 'flex-start'
 +        alignSelf: 'flex-start',
 +        paddingTop: theme.spacing.unit * 0.5
      },
      label: {
          display: 'flex',
@@@ -49,10 -47,15 +49,10 @@@
      chip: {
          height: theme.spacing.unit * 3,
          width: theme.spacing.unit * 12,
 -        backgroundColor: theme.customs.colors.green700,
          color: theme.palette.common.white,
          fontSize: '0.875rem',
          borderRadius: theme.spacing.unit * 0.625,
      },
 -    headerText: {
 -        fontSize: '0.875rem',
 -        marginLeft: theme.spacing.unit * 3,
 -    },
      content: {
          '&:last-child': {
              paddingBottom: theme.spacing.unit * 2,
@@@ -60,8 -63,7 +60,8 @@@
          }
      },
      title: {
 -        overflow: 'hidden'
 +        overflow: 'hidden',
 +        paddingTop: theme.spacing.unit * 0.5
      }
  });
  
@@@ -72,8 -74,8 +72,8 @@@ export interface ProcessInformationCard
  
  type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
  
 -export const ProcessInformationCard = withStyles(styles)(
 -    ({ classes, process, onContextMenu }: ProcessInformationCardProps) =>
 +export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
 +    ({ classes, process, onContextMenu, theme }: ProcessInformationCardProps) =>
          <Card className={classes.card}>
              <CardHeader
                  classes={{
@@@ -83,9 -85,7 +83,9 @@@
                  avatar={<ProcessIcon className={classes.iconHeader} />}
                  action={
                      <div>
 -                        <Chip label={getProcessStatus(process)} className={classes.chip} />
 +                        <Chip label={getProcessStatus(process)}
 +                            className={classes.chip} 
 +                            style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }}/>
                          <IconButton
                              aria-label="More options"
                              onClick={event => onContextMenu(event)}>
@@@ -94,8 -94,8 +94,8 @@@
                      </div>
                  }
                  title={
-                     <Tooltip title={process.containerRequest.name}>
-                         <Typography noWrap variant="title" color='inherit'>
 -                    <Tooltip title={process.containerRequest.name} placement="bottom-start">
++                    <Tooltip title={process.containerRequest.name} placement="bottom-start" color='inherit'>
+                         <Typography noWrap variant="title">
                             {process.containerRequest.name}
                          </Typography>
                      </Tooltip>