21224: added injectedStyles to ms toolbar Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[arvados.git] / services / workbench2 / src / components / data-explorer / data-explorer.tsx

diff --git a/services/workbench2/src/components/data-explorer/data-explorer.tsx b/services/workbench2/src/components/data-explorer/data-explorer.tsx
index e522bf6410d7de48a3590a76822d2f81e3f59f2b..604856a85224d7a619f6bde2490bbd4513a961f1 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -17,13 +17,16 @@ import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreVerticalIcon } f
 import { PaperProps } from "@material-ui/core/Paper";
 import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
 
-type CssRules = "titleWrapper" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | "titleToolbar" | 'subProcessTitle' | "dataTable" | "container";
+type CssRules = "titleWrapper" | "msToolbarStyles" | "searchBox" | "headerMenu" | "toolbar" | "footer" | "root" | "moreOptionsButton" | "title" | 'subProcessTitle' | "dataTable" | "container";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     titleWrapper: {
         display: "flex",
         justifyContent: "space-between",
     },
+    msToolbarStyles: {
+        paddingTop: "0.6rem",
+    },
     searchBox: {
         paddingBottom: 0,
     },
@@ -50,9 +53,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: "18px",
         paddingRight: "10px",
     },
-    titleToolbar: {
-        marginTop: '-1rem',
-    },
     subProcessTitle: {
         display: "inline-block",
         paddingLeft: theme.spacing.unit * 2,
@@ -245,9 +245,7 @@ export const DataExplorer = withStyles(styles)(
                                 </Grid>
                             )}
                             {!!progressBar && progressBar}
-                            <section className={classes.titleToolbar}>
-                                {this.multiSelectToolbarInTitle && !this.state.msToolbarInDetailsCard && <MultiselectToolbar />}
-                            </section>
+                            {this.multiSelectToolbarInTitle && !this.state.msToolbarInDetailsCard && <MultiselectToolbar injectedStyles={classes.msToolbarStyles} />}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid
                                     className={classes.headerMenu}