@gridsuite/commons-ui 0.34.1 → 0.35.0

package/lib/components/ReportViewer/report-viewer.js

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports["default"] = ReportViewer;
 var _react = _interopRequireWildcard(require("react"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _TreeView = _interopRequireDefault(require("@mui/lab/TreeView"));
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _ArrowRight = _interopRequireDefault(require("@mui/icons-material/ArrowRight"));
@@ -23,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 
 var MAX_SUB_REPORTS = 500;
-var useStyles = (0, _makeStyles["default"])({
+var styles = {
   treeView: {
     height: '100%',
     overflow: 'scroll'
@@ -31,12 +30,11 @@ var useStyles = (0, _makeStyles["default"])({
   treeItem: {
     whiteSpace: 'nowrap'
   }
-});
+};
 function ReportViewer(_ref) {
   var jsonReport = _ref.jsonReport,
     _ref$maxSubReports = _ref.maxSubReports,
     maxSubReports = _ref$maxSubReports === void 0 ? MAX_SUB_REPORTS : _ref$maxSubReports;
-  var classes = useStyles();
   var _useState = (0, _react.useState)(null),
     selectedNode = _useState[0],
     setSelectedNode = _useState[1];
@@ -61,12 +59,12 @@ function ReportViewer(_ref) {
       labelText: logReport.getTitle(),
       labelIconColor: logReport.getHighestSeverity().colorName,
       key: logReport.getId().toString(),
-      className: classes.treeItem,
+      sx: styles.treeItem,
       nodeId: logReport.getId().toString()
     }, logReport.getSubReports().slice(0, maxSubReports).map(function (value) {
       return createReporterItem(value);
     }));
-  }, [maxSubReports, classes.treeItem]);
+  }, [maxSubReports]);
   (0, _react.useEffect)(function () {
     rootReport.current = new _logReport["default"](jsonReport);
     var rootId = rootReport.current.getId().toString();
@@ -137,7 +135,7 @@ function ReportViewer(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_reportTreeViewContext["default"].Provider, {
     value: isHighlighted
   }, /*#__PURE__*/_react["default"].createElement(_TreeView["default"], {
-    className: classes.treeView,
+    sx: styles.treeView,
     defaultCollapseIcon: /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null),
     defaultExpandIcon: /*#__PURE__*/_react["default"].createElement(_ArrowRight["default"], null),
     defaultEndIcon: /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/ReportViewerDialog/report-viewer-dialog.js

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports["default"] = ReportViewerDialog;
 var _react = _interopRequireWildcard(require("react"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
@@ -22,16 +21,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-var useStyles = (0, _makeStyles["default"])({
+var styles = {
   fullScreenIcon: {
     cursor: 'pointer'
   },
   paperFullWidth: {
     height: '100%'
   }
-});
+};
 function ReportViewerDialog(props) {
-  var classes = useStyles();
   var title = props.title,
     open = props.open,
     onClose = props.onClose,
@@ -52,8 +50,8 @@ function ReportViewerDialog(props) {
     "aria-labelledby": "dialog-title-report",
     fullWidth: true,
     maxWidth: "lg",
-    classes: {
-      paperFullWidth: classes.paperFullWidth
+    sx: {
+      '& .MuiDialog-paperFullWidth': styles.paperFullWidth
     }
   }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, title), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, {
     dividers: true
@@ -61,10 +59,10 @@ function ReportViewerDialog(props) {
     jsonReport: jsonReport
   })), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, fullScreen ? /*#__PURE__*/_react["default"].createElement(_FullscreenExit["default"], {
     onClick: hideFullScreen,
-    className: classes.fullScreenIcon
+    sx: styles.fullScreenIcon
   }) : /*#__PURE__*/_react["default"].createElement(_Fullscreen["default"], {
     onClick: showFullScreen,
-    className: classes.fullScreenIcon
+    sx: styles.fullScreenIcon
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     onClick: function onClick() {
       return onClose();

package/lib/components/TopBar/TopBar.js

@@ -7,14 +7,14 @@ var _reactIntl = require("react-intl");
 var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
 var _ExitToApp = _interopRequireDefault(require("@mui/icons-material/ExitToApp"));
 var _styles = require("@mui/material/styles");
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _system = require("@mui/system");
 var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _Apps = _interopRequireDefault(require("@mui/icons-material/Apps"));
@@ -36,7 +36,7 @@ var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
-var _clsx3 = _interopRequireDefault(require("clsx"));
+var _styles2 = require("../../utils/styles");
 var _ElementSearchDialog = _interopRequireDefault(require("../ElementSearchDialog"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,34 +47,34 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
                                                                                                                                                                                                                                                                                                                                                      * License, v. 2.0. If a copy of the MPL was not distributed with this
                                                                                                                                                                                                                                                                                                                                                      * file, You can obtain one at http://mozilla.org/MPL/2.0/.
                                                                                                                                                                                                                                                                                                                                                      */
-var useStyles = (0, _makeStyles["default"])(function (theme) {
-  return {
-    grow: {
-      flexGrow: 1,
-      display: 'flex',
-      overflow: 'hidden'
-    },
-    logo: {
-      flexShrink: 0,
-      width: 48,
-      height: 48,
-      marginBottom: 8
-    },
-    menuIcon: {
-      width: 24,
-      height: 24
-    },
-    title: {
-      marginLeft: 18
-    },
-    clickable: {
-      cursor: 'pointer'
-    },
-    link: {
-      textDecoration: 'none',
-      color: 'inherit'
-    },
-    name: {
+var styles = {
+  grow: {
+    flexGrow: 1,
+    display: 'flex',
+    overflow: 'hidden'
+  },
+  logo: {
+    flexShrink: 0,
+    width: 48,
+    height: 48,
+    marginBottom: '8px'
+  },
+  menuIcon: {
+    width: 24,
+    height: 24
+  },
+  title: {
+    marginLeft: '18px'
+  },
+  clickable: {
+    cursor: 'pointer'
+  },
+  link: {
+    textDecoration: 'none',
+    color: 'inherit'
+  },
+  name: function name(theme) {
+    return {
       backgroundColor: (0, _styles.darken)(theme.palette.background.paper, 0.1),
       paddingTop: '10px',
       borderRadius: '100%',
@@ -82,52 +82,48 @@ var useStyles = (0, _makeStyles["default"])(function (theme) {
       textTransform: 'uppercase',
       height: '48px',
       width: '48px'
-    },
-    arrowIcon: {
-      fontSize: '40px'
-    },
-    userMail: {
-      fontSize: '14px',
-      display: 'block'
-    },
-    borderBottom: {
-      borderBottom: '1px solid #ccc'
-    },
-    borderTop: {
-      borderTop: '1px solid #ccc'
-    },
-    settingsMenu: {
-      maxWidth: '385px',
-      zIndex: 60
-    },
-    sizeLabel: {
-      fontSize: '16px'
-    },
-    showHideMenu: {
-      padding: '0',
-      borderRadius: '25px'
-    },
-    toggleButtonGroup: {
-      marginLeft: '15px',
-      pointerEvents: 'auto'
-    },
-    toggleButton: {
-      height: '30px',
-      width: '48px',
-      padding: '7px',
-      textTransform: 'capitalize'
-    },
-    languageToggleButton: {
-      height: '30px',
-      width: '48px'
-    }
-  };
-});
-var StyledMenu = (0, _withStyles["default"])({
-  paper: {
-    border: '1px solid #d3d4d5'
+    };
+  },
+  arrowIcon: {
+    fontSize: '40px'
+  },
+  userMail: {
+    fontSize: '14px',
+    display: 'block'
+  },
+  borderBottom: {
+    borderBottom: '1px solid #ccc'
+  },
+  borderTop: {
+    borderTop: '1px solid #ccc'
+  },
+  settingsMenu: {
+    maxWidth: '385px',
+    zIndex: 60
+  },
+  sizeLabel: {
+    fontSize: '16px'
+  },
+  showHideMenu: {
+    padding: '0',
+    borderRadius: '25px'
+  },
+  toggleButtonGroup: {
+    marginLeft: '15px',
+    pointerEvents: 'auto'
+  },
+  toggleButton: {
+    height: '30px',
+    width: '48px',
+    padding: '7px',
+    textTransform: 'capitalize'
+  },
+  languageToggleButton: {
+    height: '30px',
+    width: '48px'
   }
-})(function (props) {
+};
+var StyledMenu = (0, _system.styled)(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_Menu["default"], _extends({
     elevation: 0,
     anchorOrigin: {
@@ -139,28 +135,27 @@ var StyledMenu = (0, _withStyles["default"])({
       horizontal: 'center'
     }
   }, props));
+})({
+  '& .MuiMenu-paper': {
+    border: '1px solid #d3d4d5'
+  }
 });
-var StyledMenuItem = (0, _withStyles["default"])(function (theme) {
+var StyledMenuItem = (0, _system.styled)(_MenuItem["default"])(function (_ref) {
+  var theme = _ref.theme;
   return {
-    root: {
-      '&:focus': {
-        backgroundColor: theme.palette.primary.main,
-        '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-          color: theme.palette.common.white
-        }
+    '&:focus': {
+      backgroundColor: theme.palette.primary.main,
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white
       }
     }
   };
-})(_MenuItem["default"]);
-var CustomListItemIcon = (0, _withStyles["default"])(function (theme) {
-  return {
-    root: {
-      minWidth: '30px',
-      paddingRight: '15px',
-      borderRadius: '25px'
-    }
-  };
-})(_ListItemIcon["default"]);
+});
+var CustomListItemIcon = (0, _system.styled)(_ListItemIcon["default"])({
+  minWidth: '30px',
+  paddingRight: '15px',
+  borderRadius: '25px'
+});
 var DARK_THEME = 'Dark';
 exports.DARK_THEME = DARK_THEME;
 var LIGHT_THEME = 'Light';
@@ -173,34 +168,32 @@ var LANG_FRENCH = 'fr';
 exports.LANG_FRENCH = LANG_FRENCH;
 var EN = 'EN';
 var FR = 'FR';
-var TopBar = function TopBar(_ref) {
-  var _clsx, _clsx2;
-  var appName = _ref.appName,
-    appColor = _ref.appColor,
-    appLogo = _ref.appLogo,
-    onParametersClick = _ref.onParametersClick,
-    onLogoutClick = _ref.onLogoutClick,
-    onLogoClick = _ref.onLogoClick,
-    user = _ref.user,
-    children = _ref.children,
-    appsAndUrls = _ref.appsAndUrls,
-    onAboutClick = _ref.onAboutClick,
-    onThemeClick = _ref.onThemeClick,
-    theme = _ref.theme,
-    onEquipmentLabellingClick = _ref.onEquipmentLabellingClick,
-    equipmentLabelling = _ref.equipmentLabelling,
-    withElementsSearch = _ref.withElementsSearch,
-    searchDisabled = _ref.searchDisabled,
-    searchingLabel = _ref.searchingLabel,
-    onSearchTermChange = _ref.onSearchTermChange,
-    _onSelectionChange = _ref.onSelectionChange,
-    elementsFound = _ref.elementsFound,
-    renderElement = _ref.renderElement,
-    onLanguageClick = _ref.onLanguageClick,
-    language = _ref.language,
-    searchTermDisabled = _ref.searchTermDisabled,
-    initialSearchTerm = _ref.initialSearchTerm;
-  var classes = useStyles();
+var TopBar = function TopBar(_ref2) {
+  var appName = _ref2.appName,
+    appColor = _ref2.appColor,
+    appLogo = _ref2.appLogo,
+    onParametersClick = _ref2.onParametersClick,
+    onLogoutClick = _ref2.onLogoutClick,
+    onLogoClick = _ref2.onLogoClick,
+    user = _ref2.user,
+    children = _ref2.children,
+    appsAndUrls = _ref2.appsAndUrls,
+    onAboutClick = _ref2.onAboutClick,
+    onThemeClick = _ref2.onThemeClick,
+    theme = _ref2.theme,
+    onEquipmentLabellingClick = _ref2.onEquipmentLabellingClick,
+    equipmentLabelling = _ref2.equipmentLabelling,
+    withElementsSearch = _ref2.withElementsSearch,
+    searchDisabled = _ref2.searchDisabled,
+    searchingLabel = _ref2.searchingLabel,
+    onSearchTermChange = _ref2.onSearchTermChange,
+    _onSelectionChange = _ref2.onSelectionChange,
+    elementsFound = _ref2.elementsFound,
+    renderElement = _ref2.renderElement,
+    onLanguageClick = _ref2.onLanguageClick,
+    language = _ref2.language,
+    searchTermDisabled = _ref2.searchTermDisabled,
+    initialSearchTerm = _ref2.initialSearchTerm;
   var _React$useState = _react["default"].useState(null),
     anchorElSettingsMenu = _React$useState[0],
     setAnchorElSettingsMenu = _React$useState[1];
@@ -291,19 +284,19 @@ var TopBar = function TopBar(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_AppBar["default"], {
     position: "static",
     color: "default",
-    className: classes.appBar
+    sx: styles.appBar
   }, /*#__PURE__*/_react["default"].createElement(_reactRequestFullscreen["default"], {
     ref: fullScreenRef,
     onFullScreenChange: onFullScreenChange,
     onFullScreenError: function onFullScreenError(e) {
       return console.debug('full screen error : ' + e.message);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx3["default"])(classes.logo, (_clsx = {}, _clsx[classes.clickable] = onLogoClick, _clsx)),
+  }), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: (0, _styles2.mergeSx)(styles.logo, onLogoClick && styles.clickable),
     onClick: onLogoClick
   }, appLogo), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: "h4",
-    className: (0, _clsx3["default"])(classes.title, (_clsx2 = {}, _clsx2[classes.clickable] = onLogoClick, _clsx2)),
+    sx: (0, _styles2.mergeSx)(styles.title, onLogoClick && styles.clickable),
     onClick: onLogoClick
   }, /*#__PURE__*/_react["default"].createElement("span", {
     style: {
@@ -313,8 +306,8 @@ var TopBar = function TopBar(_ref) {
     style: {
       color: appColor
     }
-  }, appName)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.grow
+  }, appName)), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: styles.grow
   }, children), user && withElementsSearch && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ElementSearchDialog["default"], {
     open: isDialogSearchOpen,
     onClose: function onClose() {
@@ -348,10 +341,11 @@ var TopBar = function TopBar(_ref) {
   }, appsAndUrls && appsAndUrls.filter(function (item) {
     return !item.hiddenInAppsMenu;
   }).map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("a", {
+    return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+      component: "a",
       key: item.name,
       href: item.url,
-      className: classes.link,
+      sx: styles.link,
       target: "_blank",
       rel: "noopener noreferrer"
     }, /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
@@ -369,7 +363,7 @@ var TopBar = function TopBar(_ref) {
   }))), user && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     "aria-controls": "settings-menu",
     "aria-haspopup": "true",
-    className: classes.showHideMenu,
+    sx: styles.showHideMenu,
     onClick: handleToggleSettingsMenu,
     color: "inherit",
     style: Boolean(anchorElSettingsMenu) ? {
@@ -377,14 +371,15 @@ var TopBar = function TopBar(_ref) {
     } : {
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: classes.name
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    component: "span",
+    sx: styles.name
   }, user !== null ? abbreviationFromUserName(user.profile.name) : ''), anchorElSettingsMenu ? /*#__PURE__*/_react["default"].createElement(_ArrowDropUp["default"], {
-    className: classes.arrowIcon
+    sx: styles.arrowIcon
   }) : /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], {
-    className: classes.arrowIcon
+    sx: styles.arrowIcon
   })), /*#__PURE__*/_react["default"].createElement(_Popper["default"], {
-    className: classes.settingsMenu,
+    sx: styles.settingsMenu,
     open: Boolean(anchorElSettingsMenu),
     anchorEl: anchorElSettingsMenu
   }, /*#__PURE__*/_react["default"].createElement(_Paper["default"], null, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
@@ -392,7 +387,7 @@ var TopBar = function TopBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_MenuList["default"], {
     id: "settings-menu"
   }, /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
-    className: classes.borderBottom,
+    sx: styles.borderBottom,
     disabled: true,
     style: {
       opacity: '1'
@@ -401,10 +396,12 @@ var TopBar = function TopBar(_ref) {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
     disabled: false
-  }, user !== null && /*#__PURE__*/_react["default"].createElement("span", {
-    className: classes.sizeLabel
-  }, user.profile.name, ' ', /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
-    className: classes.userMail
+  }, user !== null && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    component: "span",
+    sx: styles.sizeLabel
+  }, user.profile.name, ' ', /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    component: "span",
+    sx: styles.userMail
   }, user.profile.email)))), /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
     disabled: true,
     style: {
@@ -414,7 +411,7 @@ var TopBar = function TopBar(_ref) {
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/displayMode",
     defaultMessage: 'Display mode'
@@ -422,18 +419,18 @@ var TopBar = function TopBar(_ref) {
     exclusive: true,
     value: theme,
     size: "large",
-    className: classes.toggleButtonGroup,
+    sx: styles.toggleButtonGroup,
     onChange: changeTheme
   }, /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: LIGHT_THEME,
     "aria-label": LIGHT_THEME,
-    className: classes.toggleButton
+    sx: styles.toggleButton
   }, /*#__PURE__*/_react["default"].createElement(_WbSunny["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: DARK_THEME,
     "aria-label": DARK_THEME,
-    className: classes.toggleButton
+    sx: styles.toggleButton
   }, /*#__PURE__*/_react["default"].createElement(_Brightness["default"], {
     fontSize: "small"
   })))), onEquipmentLabellingClick && /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
@@ -446,24 +443,24 @@ var TopBar = function TopBar(_ref) {
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/equipmentLabel",
     defaultMessage: 'Equipment label'
   }))), /*#__PURE__*/_react["default"].createElement(_ToggleButtonGroup["default"], {
     exclusive: true,
     value: equipmentLabelling,
-    className: classes.toggleButtonGroup,
+    sx: styles.toggleButtonGroup,
     onChange: changeEquipmentLabelling
   }, /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: false,
-    className: classes.toggleButton
+    sx: styles.toggleButton
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/id",
     defaultMessage: 'Id'
   })), /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: true,
-    className: classes.toggleButton
+    sx: styles.toggleButton
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/name",
     defaultMessage: 'Name'
@@ -476,40 +473,40 @@ var TopBar = function TopBar(_ref) {
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/language",
     defaultMessage: 'Language'
   }))), /*#__PURE__*/_react["default"].createElement(_ToggleButtonGroup["default"], {
     exclusive: true,
     value: language,
-    className: classes.toggleButtonGroup,
+    sx: styles.toggleButtonGroup,
     onChange: changeLanguage
   }, /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: LANG_SYSTEM,
     "aria-label": LANG_SYSTEM,
-    className: classes.languageToggleButton
+    sx: styles.languageToggleButton
   }, /*#__PURE__*/_react["default"].createElement(_Computer["default"], null)), /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: LANG_ENGLISH,
     "aria-label": LANG_ENGLISH,
-    className: classes.languageToggleButton
+    sx: styles.languageToggleButton
   }, EN), /*#__PURE__*/_react["default"].createElement(_ToggleButton["default"], {
     value: LANG_FRENCH,
     "aria-label": LANG_FRENCH,
-    className: classes.toggleButton
+    sx: styles.toggleButton
   }, FR))), /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
     disabled: !onParametersClick,
     onClick: onParametersClicked,
-    className: classes.borderTop
+    sx: styles.borderTop
   }, /*#__PURE__*/_react["default"].createElement(CustomListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/settings",
     defaultMessage: 'Settings'
   })))), /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
-    className: classes.borderBottom,
+    sx: styles.borderBottom,
     disabled: true,
     style: {
       opacity: '1'
@@ -518,7 +515,7 @@ var TopBar = function TopBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(CustomListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_HelpOutline["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/about",
     defaultMessage: 'About'
@@ -527,14 +524,14 @@ var TopBar = function TopBar(_ref) {
   }, isFullScreen ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CustomListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_FullscreenExit["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/exitFullScreen",
     defaultMessage: 'Exit full screen mode'
   })))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CustomListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_Fullscreen["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/goFullScreen",
     defaultMessage: 'Full screen'
@@ -543,7 +540,7 @@ var TopBar = function TopBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(CustomListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_ExitToApp["default"], {
     fontSize: "small"
   })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.sizeLabel
+    sx: styles.sizeLabel
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "top-bar/logout",
     defaultMessage: 'Logout'