improve values for subprocesses card

Feature #13860

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index fe73aeadbef7c9a74ba4544aef936a9a1ca009a0..1fd5817c264ee570e81b2aa3b6866dcd805ca7bc 100644 (file)
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
 
-type CssRules = 'root' | 'label' | 'value' | 'switch' | 'grid';
+type CssRules = 'root' | 'label' | 'value' | 'middleValue' | 'switch' | 'grid';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -19,6 +19,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     value: {
         marginBottom: theme.spacing.unit
     },
+    middleValue: {
+        marginBottom: theme.spacing.unit - 2
+    },
     switch: {
         '& span:first-child': {
             height: '18px'
@@ -62,7 +65,7 @@ export const SubprocessesCard = withStyles(styles)(
                             <Grid item>
                                 <Grid container direction="column" alignItems="flex-start" spacing={8}>
                                     <Grid item className={classes.value}>1</Grid>
-                                    <Grid item className={classes.value}>
+                                    <Grid item className={classes.middleValue}>
                                         2
                                         <Switch classes={{ root: classes.switch }}
                                             checked={this.state.queued}
@@ -90,7 +93,7 @@ export const SubprocessesCard = withStyles(styles)(
                             <Grid item>
                                 <Grid container direction="column" alignItems="flex-end" spacing={8}>
                                     <Grid item className={classes.value}>&nbsp;</Grid>
-                                    <Grid item className={classes.value}>
+                                    <Grid item className={classes.middleValue}>
                                         2
                                         <Switch classes={{ root: classes.switch }}
                                             checked={this.state.completed}