2 files changed, 70 insertions, 47 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
index fbf6d5774..da0ffa048 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
@@ -16,17 +16,21 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
 
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import InfoIcon from '@material-ui/icons/Info';
-import StartIcon from '@material-ui/icons/PlayArrow';
-import StopIcon from '@material-ui/icons/Stop';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
-import CircularProgress from '@material-ui/core/CircularProgress'
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import InfoIcon from '@mui/icons-material/Info';
+import StartIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
@@ -130,23 +134,34 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo
     const renderActions = (rowData: MediatorConfigResponse) => (
       <>
         <div className={classes.spacer}>
-          <Tooltip title={"Start"} >
-            <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+          <Tooltip disableInteractive title={"Start"} >
+            <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
               <StartIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.startMediator(rowData.Name); }} />
             </IconButton>
           </Tooltip>
-          <Tooltip title={"Stop"} >
-            <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+          <Tooltip disableInteractive title={"Stop"} >
+            <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
               <StopIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.stopMediator(rowData.Name); }} />
             </IconButton>
           </Tooltip>
         </div>
         <div className={classes.spacer}>
-          <Tooltip title={"Info"} ><IconButton className={classes.button} onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}><InfoIcon /></IconButton></Tooltip>
+          <Tooltip disableInteractive title={"Info"} ><IconButton
+            className={classes.button}
+            onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}
+            size="large"><InfoIcon /></IconButton></Tooltip>
         </div>
         <div className={classes.spacer}>
-          {process.env.NODE_ENV === "development" ? <Tooltip title={"Edit"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}><EditIcon /></IconButton></Tooltip> : null}
-          <Tooltip title={"Remove"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}><DeleteIcon /></IconButton></Tooltip>
+          {process.env.NODE_ENV === "development" ? <Tooltip disableInteractive title={"Edit"} ><IconButton
+            disabled={rowData[BusySymbol]}
+            className={classes.button}
+            onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}
+            size="large"><EditIcon /></IconButton></Tooltip> : null}
+          <Tooltip disableInteractive title={"Remove"} ><IconButton
+            disabled={rowData[BusySymbol]}
+            className={classes.button}
+            onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}
+            size="large"><DeleteIcon /></IconButton></Tooltip>
         </div>
       </>
     );
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
index be1ecc718..c44e2ccc1 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
@@ -16,13 +16,17 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
 
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import Refresh from '@material-ui/icons/Refresh';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Refresh from '@mui/icons-material/Refresh';
 
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
@@ -105,31 +109,35 @@ class MediatorServerSelectionComponent extends React.Component<MediatorServerSel
         });
       }
     };
-    return (
-      <>
-        <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
-          {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
-            { property: "name", title: "Name", type: ColumnType.text },
-            { property: "url", title: "Url", type: ColumnType.text },
-            {
-              property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
-                <div className={classes.spacer}>
-                  <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={event => { this.onEditMediatorServer(event, rowData); }}><EditIcon /></IconButton></Tooltip>
-                  <Tooltip title={"Remove"} ><IconButton className={classes.button} onClick={event => { this.onRemoveMediatorServer(event, rowData); }}><DeleteIcon /></IconButton></Tooltip>
-                </div>
-              )
-            }
-          ]} onHandleClick={this.onSelectMediatorServer} />
-        <EditMediatorServerDialog
-          mediatorServer={this.state.mediatorServerToEdit}
-          mode={this.state.mediatorServerEditorMode}
-          onClose={this.onCloseEditMediatorServerDialog} />
-        <RefreshMediatorDialog
-          mode={this.state.refreshMediatorEditorMode}
-          onClose={this.onCloseRefreshMediatorDialog}
-        />
-      </>
-    );
+    return <>
+      <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
+        {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
+          { property: "name", title: "Name", type: ColumnType.text },
+          { property: "url", title: "Url", type: ColumnType.text },
+          {
+            property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
+              <div className={classes.spacer}>
+                <Tooltip disableInteractive title={"Edit"} ><IconButton
+                  className={classes.button}
+                  onClick={event => { this.onEditMediatorServer(event, rowData); }}
+                  size="large"><EditIcon /></IconButton></Tooltip>
+                <Tooltip disableInteractive title={"Remove"} ><IconButton
+                  className={classes.button}
+                  onClick={event => { this.onRemoveMediatorServer(event, rowData); }}
+                  size="large"><DeleteIcon /></IconButton></Tooltip>
+              </div>
+            )
+          }
+        ]} onHandleClick={this.onSelectMediatorServer} />
+      <EditMediatorServerDialog
+        mediatorServer={this.state.mediatorServerToEdit}
+        mode={this.state.mediatorServerEditorMode}
+        onClose={this.onCloseEditMediatorServerDialog} />
+      <RefreshMediatorDialog
+        mode={this.state.refreshMediatorEditorMode}
+        onClose={this.onCloseRefreshMediatorDialog}
+      />
+    </>;
   }
 
   public componentDidMount() {