feat: adapt search part to new theme in Scenario Manager

Author: COSMO-EMI

src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js

@@ -4,7 +4,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Button, Paper, TextField, Tooltip } from '@material-ui/core';
+import { IconButton, Paper, TextField, Tooltip } from '@material-ui/core';
 import {
   UnfoldMore as UnfoldMoreIcon,
   UnfoldLess as UnfoldLessIcon,
@@ -182,34 +182,23 @@ export const ScenarioManagerTreeList = (props) => {
           className={classes.searchField}
           value={searchText}
           onChange={onSearchTextChange}
+          color="primary"
         />
         <div className={classes.toolbar}>
           <Tooltip title={labels?.toolbar?.collapseAll || 'Collapse all'}>
-            <Button
-              variant="contained"
-              color="primary"
-              className={classes.toolbarPrimaryAction}
-              startIcon={<UnfoldLessIcon />}
-              onClick={collapseAll}
-            />
+            <IconButton className={classes.toolbarPrimaryAction} onClick={collapseAll}>
+              <UnfoldLessIcon color="primary" />
+            </IconButton>
           </Tooltip>
           <Tooltip title={labels?.toolbar?.expandAll || 'Expand all'}>
-            <Button
-              variant="contained"
-              color="primary"
-              className={classes.toolbarPrimaryAction}
-              startIcon={<UnfoldMoreIcon />}
-              onClick={expandAll}
-            />
+            <IconButton className={classes.toolbarPrimaryAction} onClick={expandAll}>
+              <UnfoldMoreIcon color="primary" />
+            </IconButton>
           </Tooltip>
           <Tooltip title={labels?.toolbar?.expandTree || 'Expand tree'}>
-            <Button
-              variant="contained"
-              color="primary"
-              className={classes.toolbarPrimaryAction}
-              startIcon={<AccountTreeIcon />}
-              onClick={expandTree}
-            />
+            <IconButton className={classes.toolbarPrimaryAction} onClick={expandTree}>
+              <AccountTreeIcon color="primary" />
+            </IconButton>
           </Tooltip>
         </div>
       </div>

src/charts/ScenarioManagerTreeList/style.js

@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
   },
   treesContainer: {
     height: `calc(100% - ${TREES_CONTAINER_OFFSET}px)`, // Offset by header height + search bar height