@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

package/src/App/Modules/Designer/Components/AddVisualElement/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Button from '@material-ui/core/Button/Button';
-import Icon from '@material-ui/core/Icon/Icon';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
+import withWidth from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import CallToAction from 'App/Shared/Components/CallToAction';

package/src/App/Modules/Designer/Components/AddVisualElement/index.test.jsx

@@ -1,7 +1,8 @@
 /* eslint-env jest */
 import React from 'react';
-import { noop } from 'lodash';
-import { render, mount } from 'enzyme';
+import noop from 'lodash/noop';
+import mount from 'enzyme/mount';
+import render from 'enzyme/render';
 import AddVisualElement from './index';
 
 jest.mock('App/Shared/Components/CallToAction', () => {

package/src/App/Modules/Designer/Components/CloseDesignEditor/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import Grid from '@material-ui/core/Grid/Grid';
-import Button from '@material-ui/core/Button/Button';
-import { Icon } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import PropTypes from 'prop-types';
 
 const styles = theme => ({

package/src/App/Modules/Designer/Components/ColorPalettes/ColorPalettesSearch.js

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import Icon from '@material-ui/core/Icon/Icon';
-import InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';
+import Icon from '@material-ui/core/Icon';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography/Typography';
+import Typography from '@material-ui/core/Typography';
 import { t } from 'Framework/i18n';
-import IconButton from '@material-ui/core/IconButton/IconButton';
-import TextField from '@material-ui/core/TextField/TextField';
-import withStyles from '@material-ui/core/styles/withStyles';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
 import { isWidthDown } from '@material-ui/core/withWidth';
 
 const styles = theme => ({

package/src/App/Modules/Designer/Components/ColorPalettes/index.js

@@ -4,20 +4,20 @@ import isFunction from 'lodash/isFunction';
 import upperFirst from 'lodash/upperFirst';
 import uniqBy from 'lodash/uniqBy';
 import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Select from '@material-ui/core/Select/Select';
-import Input from '@material-ui/core/Input/Input';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText/ListItemText';
-import FormControl from '@material-ui/core/FormControl/FormControl';
-import Typography from '@material-ui/core/Typography/Typography';
-import TextField from '@material-ui/core/TextField/TextField';
-import Icon from '@material-ui/core/Icon/Icon';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
-import Switch from '@material-ui/core/Switch/Switch';
-import CardActions from '@material-ui/core/CardActions/CardActions';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Select from '@material-ui/core/Select';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import FormControl from '@material-ui/core/FormControl';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import Icon from '@material-ui/core/Icon';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import CardActions from '@material-ui/core/CardActions';
 import SearchIcon from '@material-ui/icons/Search';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { t } from 'Framework/i18n';

package/src/App/Modules/Designer/Components/ColorPalettes/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import { mount, render } from 'enzyme';
 import ColorPalettes from './index';
 

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.js

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Typography from '@material-ui/core/Typography/Typography';
-import Grid from '@material-ui/core/Grid/Grid';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import TextField from '@material-ui/core/TextField/TextField';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import Error from '@material-ui/icons/Error';
-import Icon from '@material-ui/core/Icon/Icon';
+import Icon from '@material-ui/core/Icon';
 import Modal from '@material-ui/core/Modal';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import withWidth from '@material-ui/core/withWidth';
 import { t, translationExists } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import InformationTag from 'App/Shared/Components/InformationTag/InformationTag';

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import React from 'react';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import { mount, render } from 'enzyme';
 import DesignAreaControlbox from './index';
 import MenuItem from '@material-ui/core/MenuItem';

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/CustomFontOverlay.js

@@ -1,13 +1,13 @@
 import CustomDialog from 'Shared/Components/CustomDialog';
 import { t } from 'Framework/i18n';
-import DialogContent from '@material-ui/core/DialogContent/DialogContent';
-import TextField from '@material-ui/core/TextField/TextField';
-import Typography from '@material-ui/core/Typography/Typography';
-import DialogActions from '@material-ui/core/DialogActions/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import DialogActions from '@material-ui/core/DialogActions';
 import MainButton from 'Shared/Components/MainButton';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
     theme => {

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -2,8 +2,8 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
-import withStyles from '@material-ui/core/styles/withStyles';
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth from '@material-ui/core/withWidth';
 import SelectionToolbox from 'redhotmagma-graphics-editor/Components/SelectionToolbox/SelectionToolbox';
 import ReactComponent from 'Shared/PropTypes/ReactComponent';
 import TextControlbox from '../TextControlbox';

package/src/App/Modules/Designer/Components/Dialog/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';
-import Icon from '@material-ui/core/Icon/Icon';
+import Icon from '@material-ui/core/Icon';
 
 const styles = theme => ({
     DialogIcon: {

package/src/App/Modules/Designer/Components/EditDesignButton/index.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
-import { Button, Icon } from '@material-ui/core';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 
 import { t } from 'Framework/i18n';
 import MainButton from 'Shared/Components/MainButton';

package/src/App/Modules/Designer/Components/FeedbackNotice/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-import Grid from '@material-ui/core/Grid/Grid';
-import Typography from '@material-ui/core/Typography/Typography';
-import Icon from '@material-ui/core/Icon/Icon';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
 
 const styles = {
     FeedbackNoticeRootWrapper: {

package/src/App/Modules/Designer/Components/ImageColorize/index.js

@@ -16,7 +16,7 @@ import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
 import FormatPaint from '@material-ui/icons/FormatPaint';
 import MenuItem from '@material-ui/core/MenuItem';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { t, T } from 'Framework/i18n';
 import { createColorData, isValidHex, parseColorData } from 'App/Reducers/DesignArea/Selectors';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';

package/src/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Grid from '@material-ui/core/Grid/Grid';
-import Typography from '@material-ui/core/Typography/Typography';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import Info from '@material-ui/icons/Info';
-import Button from '@material-ui/core/Button/Button';
-import Icon from '@material-ui/core/Icon/Icon';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';

package/src/App/Modules/Designer/Components/ImageEditDialog/ImageUpload.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { t } from 'Framework/i18n';
 import FileDrop from 'react-file-drop';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography/Typography';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 import ImageIcon from '@material-ui/icons/Image';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import ErrorIcon from '@material-ui/icons/Error';
@@ -14,8 +14,9 @@ import FormGroup from '@material-ui/core/FormGroup';
 import Button from '@material-ui/core/Button';
 import MainButton from 'Shared/Components/MainButton';
 import { Services } from 'App/ServiceLocator';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { getConf } from '../../../../configuration';
+import { calculateImageBrightness } from '../../../../Services/DesignDataService';
 
 const styles = theme => ({
     imagePreview: {
@@ -157,6 +158,15 @@ const styles = theme => ({
         width: '100%',
         alignSelf: 'center',
     },
+    checkerBackground: {
+        backgroundImage:
+            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
+            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
+        backgroundSize: '20px 20px',
+        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+    },
 });
 
 class ImageEditDialog extends React.Component {
@@ -191,6 +201,10 @@ class ImageEditDialog extends React.Component {
 
     handleDrop = files => this.updateFile(files[0]);
 
+    handleUpload = async image => {
+        return await calculateImageBrightness(image);
+    };
+
     updateFile = file => {
         if (!file) {
             return;
@@ -225,8 +239,13 @@ class ImageEditDialog extends React.Component {
         const isRenderable = renderableFormats.indexOf(extension) !== -1;
         if (isRenderable && file.type && file.type.match('image.*')) {
             const reader = new FileReader();
-            reader.onload = e => {
-                this.setState({ imageData: e.target.result });
+            reader.onload = async e => {
+                let image = new Image();
+                image.onload = async () => {
+                    image = await this.handleUpload(image);
+                    this.setState({ imageData: image });
+                };
+                image.src = e.target.result;
             };
             reader.readAsDataURL(file);
         }
@@ -331,7 +350,14 @@ class ImageEditDialog extends React.Component {
                         )}
                         {selectedFile !== null && (
                             <React.Fragment>
-                                {imageData && <img className={classes.imagePreview} src={imageData} />}
+                                {imageData && (
+                                    <img
+                                        className={`${classes.imagePreview} ${
+                                            imageData.isBright ? classes.checkerBackground : ''
+                                        }`}
+                                        src={imageData.src}
+                                    />
+                                )}
                                 {error === null ? (
                                     <div className={classes.uploadTextIconContainer}>
                                         <CheckCircleIcon

package/src/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from 'Framework/i18n';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography/Typography';
-import Grid from '@material-ui/core/Grid/Grid';
-import RadioGroup from '@material-ui/core/RadioGroup/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
-import Radio from '@material-ui/core/Radio/Radio';
-import FormControl from '@material-ui/core/FormControl/FormControl';
-import Icon from '@material-ui/core/Icon/Icon';
-import DialogActions from '@material-ui/core/DialogActions/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent/DialogContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import FormControl from '@material-ui/core/FormControl';
+import Icon from '@material-ui/core/Icon';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import LoopIcon from '@material-ui/icons/Loop';
@@ -31,7 +31,6 @@ import Dialog from '../Dialog';
 import ColorPicker from '../ImageColorPicker/ImageColorPicker';
 import ImageThumbnail from './ImageThumbnail';
 import colorizeIcon from './res/baseline_colorize_black_24dp.png';
-import checkers from './res/checkers_tile.png';
 import { isOriginalVector } from '../../Utils/Transformers';
 
 const styles = theme => ({
@@ -186,7 +185,12 @@ const styles = theme => ({
     previewImageWrapper: {
         backgroundSize: '24px 24px',
         marginBottom: 82,
-        background: `#bebebe url(${checkers})`,
+        backgroundImage:
+            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
+            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
+        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
         display: 'flex',
         height: 360,
         width: 450,

package/src/App/Modules/Designer/Components/ImageLibraryFilter/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import { isFunction } from 'lodash';
-import Checkbox from '@material-ui/core/Checkbox/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
-import Icon from '@material-ui/core/Icon/Icon';
-import Button from '@material-ui/core/Button/Button';
-import Popover from '@material-ui/core/Popover/Popover';
+import isFunction from 'lodash/isFunction';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Icon from '@material-ui/core/Icon';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
 
 const styles = () => ({
     ImageLibraryCheckboxRoot: {

package/src/App/Modules/Designer/Components/ImageLibraryThumbnail/index.js

@@ -5,7 +5,7 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import { preventEventDoubling } from 'Utils/Events/preventEventDoubling';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import './Styles.scss';
-import Typography from '@material-ui/core/Typography/Typography';
+import Typography from '@material-ui/core/Typography';
 
 const styles = () => ({
     imageLibraryThumbnail: {
@@ -15,6 +15,14 @@ const styles = () => ({
         marginBottom: 10,
         marginRight: 10,
 
+        backgroundImage:
+            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
+            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
+            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
+        backgroundSize: '20px 20px',
+        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+
         '&:hover': {
             cursor: 'pointer',
         },
@@ -60,12 +68,8 @@ const ImageThumbnail = withStyles(styles, { name: 'ImageThumbnail' })(
                     }
                     src={typeof motive === 'object' ? motive.url : motive}
                     alt={typeof motive === 'object' ? motive.title : motive}
-                    onClick={() => onSelect(motive)}
-                    style={{
-                        background:
-                            motive.thumbnail && motive.thumbnail.isThumbnailBright
-                                ? '#c4c4c4'
-                                : 'transparent',
+                    onClick={() => {
+                        onSelect(motive);
                     }}
                 />
             </AnalyticsWrapper>

package/src/App/Modules/Designer/Components/ObjectTools/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
-import Button from '@material-ui/core/Button/Button';
-import Icon from '@material-ui/core/Icon/Icon';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import Tooltip from '@material-ui/core/Tooltip';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';

package/src/App/Modules/Designer/Components/Select/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-import FormControl from '@material-ui/core/FormControl/FormControl';
-import Select from '@material-ui/core/Select/Select';
-import Input from '@material-ui/core/Input/Input';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Input from '@material-ui/core/Input';
 import clsx from 'clsx';
 
 const styles = theme => ({

package/src/App/Modules/Designer/Components/TextControlbox/TextFormatIcon.js

@@ -1,4 +1,4 @@
-import SvgIcon from '@material-ui/core/SvgIcon/SvgIcon';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import React from 'react';
 import PropTypes from 'prop-types';
 

package/src/App/Modules/Designer/Components/TextControlbox/index.js

@@ -4,18 +4,18 @@ import clsx from 'clsx';
 import get from 'lodash/get';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
-import grey from '@material-ui/core/colors/grey';
-import Card from '@material-ui/core/Card/Card';
-import CardContent from '@material-ui/core/CardContent/CardContent';
-import Typography from '@material-ui/core/Typography/Typography';
-import Grid from '@material-ui/core/Grid/Grid';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import TextField from '@material-ui/core/TextField/TextField';
-import Button from '@material-ui/core/Button/Button';
-import Icon from '@material-ui/core/Icon/Icon';
+import { grey } from '@material-ui/core/colors';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import Tooltip from '@material-ui/core/Tooltip';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
-import Switch from '@material-ui/core/Switch/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 import { t, translationExists } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import InformationTag from 'App/Shared/Components/InformationTag/InformationTag';

package/src/App/Modules/Designer/Components/TextControlbox/index.test.jsx

@@ -1,7 +1,8 @@
 /* eslint-env jest */
 import React from 'react';
-import { noop } from 'lodash';
-import { mount, render } from 'enzyme';
+import noop from 'lodash/noop';
+import mount from 'enzyme/mount';
+import render from 'enzyme/render';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextControlbox from './index';
 import ServiceLocator from 'App/ServiceLocator';

package/src/App/Modules/Designer/Containers/AddGalleryImage.js

@@ -1,4 +1,4 @@
-import withWidth from '@material-ui/core/withWidth/withWidth';
+import withWidth from '@material-ui/core/withWidth';
 import { containerConnect } from 'Framework/ComponentContainer';
 import createSelector from 'Utils/Function/createSelector';
 import findIndex from 'lodash/findIndex';

package/src/App/Modules/Designer/Designer.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 import Editor from 'redhotmagma-graphics-editor/Components/Editor/Editor';
 import DefaultEditorContainer from 'redhotmagma-graphics-editor/Components/Editor/EditorContainer';

package/src/App/Modules/Designer/DesignerUI.js

@@ -9,7 +9,7 @@ import IconScale from '@material-ui/icons/UnfoldMore';
 
 import Designer from './Designer';
 import AddVisualElement from './Containers/AddVisualElement';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth/withWidth';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 
 import { getConf } from 'App/configuration';
 import PropTypes from 'prop-types';
@@ -129,11 +129,16 @@ const renderAngleLabel = angleLabel => {
     return <AngleLabel angleLabel={angleLabel} />;
 };
 
+const ChildrenOnlyFragment = ({ children }) => <>{children}</>;
+ChildrenOnlyFragment.propTypes = {
+    children: PropTypes.node,
+};
+
 const renderInlineToolbox = ({ visualizationOverlayMode }) => ({ components: { InlineToolbox } }) => (
     <InlineToolbox
         renderToolboxButton={renderInlineToolButton}
         renderAngleLabel={renderAngleLabel}
-        ContainerComponent={visualizationOverlayMode ? InlineToolboxPortal : React.Fragment}
+        ContainerComponent={visualizationOverlayMode ? InlineToolboxPortal : ChildrenOnlyFragment}
     />
 );
 

package/src/App/Modules/Designer/Layouts/Mobile/TwoSideBottomBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 
 const useStyles = makeStyles(

package/src/App/Modules/Designer/Layouts/PopupAreaProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import PropTypes from 'prop-types';
 

package/src/App/Modules/Designer/MultilayerComponents/DesignerClickAwayListener.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Services } from 'App/ServiceLocator';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = () => ({
     root: { position: 'absolute', height: '100%', width: '100%' },

package/src/App/Modules/Designer/MultilayerComponents/InlineToolboxPortal.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@material-ui/core/Portal';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     root: {

package/src/App/Modules/Designer/MultilayerComponents/StandardToolboxPortal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@material-ui/core/Portal';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
     root: {