@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

package/src/App/Modules/Creator/Components/FastConfiguration/index.js

@@ -9,7 +9,8 @@ import FastConfigurationRow from '../FastConfigurationRow';
 import FastConfigurationSelect from '../FastConfigurationSelect';
 import { T } from 'Framework/i18n';
 import './Styles.scss';
-import _ from 'lodash';
+import isArray from 'lodash/isArray';
+import merge from 'lodash/merge';
 
 const FastConfiguration = ({
     optionclassifications,
@@ -56,14 +57,14 @@ const FastConfiguration = ({
 
         for (let option of options) {
             let uo = option;
-            if (_.isArray(optionClassification.selectedoptions)) {
+            if (isArray(optionClassification.selectedoptions)) {
                 for (let selectedOption of optionClassification.selectedoptions) {
                     if (selectedOption.identifier === option.identifier) {
-                        uo = _.merge({}, option, selectedOption);
-                    } else if (option.option_group && _.isArray(option.option_group.children)) {
+                        uo = merge({}, option, selectedOption);
+                    } else if (option.option_group && isArray(option.option_group.children)) {
                         for (let item of option.option_group.children) {
                             if (selectedOption.identifier === item.identifier) {
-                                uo = _.merge({}, option, selectedOption);
+                                uo = merge({}, option, selectedOption);
                                 break;
                             }
                         }

package/src/App/Modules/Creator/Components/FastConfigurationSelect/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isArray from 'lodash/isArray';
 import Typography from '@material-ui/core/Typography';
 import OptionlistitemSelect from '../OptionGroup';
 
@@ -25,11 +27,11 @@ class FastConfigurationSelect extends React.Component {
     isOptionSelected(option) {
         const { optionclassification } = this.props;
         let selected = false;
-        if (_.isArray(optionclassification.selectedoptions)) {
+        if (isArray(optionclassification.selectedoptions)) {
             for (let selectedOption of optionclassification.selectedoptions) {
                 if (selectedOption.identifier === option.identifier) {
                     selected = true;
-                } else if (option.option_group && _.isArray(option.option_group.children)) {
+                } else if (option.option_group && isArray(option.option_group.children)) {
                     for (let item of option.option_group.children) {
                         if (selectedOption.identifier === item.identifier) {
                             selected = true;
@@ -57,7 +59,7 @@ class FastConfigurationSelect extends React.Component {
     }
 
     isOptionEnabled(option) {
-        return _.get(option, 'stock.traffic_light', false) !== 'red';
+        return get(option, 'stock.traffic_light', false) !== 'red';
     }
 
     renderOptionGroupSelect(option) {
@@ -68,8 +70,8 @@ class FastConfigurationSelect extends React.Component {
         const { optionClassification } = this.props;
 
         if (
-            _.has(option, 'option_group.children') &&
-            _.isArray(option.option_group.children) &&
+            has(option, 'option_group.children') &&
+            isArray(option.option_group.children) &&
             option.option_group.children.length > 0
         ) {
             return (

package/src/App/Modules/Creator/Components/FullScreenView/FullScreenView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import FullScreenView, { PreviewButton } from 'App/Screens/Configurator/Components/FullScreenView';
-import { makeStyles, useTheme, useMediaQuery } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { combineMediaQueriesWithAnd } from '../../../../../Utils/Styles/combineMediaQueries';
 
 export const useStyles = makeStyles(

package/src/App/Modules/Creator/Components/Incompatibility/OptionExclusionRule/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import isArray from 'lodash/isArray';
 import get from 'lodash/get';
 import { T } from 'Framework/i18n';
-import Typography from '@material-ui/core/Typography/Typography';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import { RuleComponent } from '../RuleComponent';
 import memoize from 'Utils/Function/memoize';
 

package/src/App/Modules/Creator/Components/Incompatibility/OptionRule/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import isArray from 'lodash/isArray';
 import { T } from 'Framework/i18n';
-import Typography from '@material-ui/core/Typography/Typography';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import { RuleComponent } from '../RuleComponent';
 import memoize from 'Utils/Function/memoize';
 

package/src/App/Modules/Creator/Components/Incompatibility/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import isArray from 'lodash/isArray';
 import PropTypes from 'prop-types';
 import DialogContent from '@material-ui/core/DialogContent';
-import Button from '@material-ui/core/Button/Button';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
 
 import { T } from 'Framework/i18n';
 import CustomDialog from 'Shared/Components/CustomDialog';

package/src/App/Modules/Creator/Components/InvalidConfigurationNotice/index.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import useTheme from '@material-ui/core/styles/useTheme';
+import { useTheme } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';

package/src/App/Modules/Creator/Components/Option/__snapshots__/index.test.js.snap

@@ -281,19 +281,6 @@ exports[`Option renders with Option Group button 1`] = `
                       <p
                         class="MuiTypography-root MuiTypography-body1"
                       />
-                      <p
-                        class="MuiTypography-root dialogselect-option MuiTypography-body1"
-                        data-option="1"
-                      >
-                        Child 1
-                      </p>
-                      <p
-                        class="MuiTypography-root dialogselect-option MuiTypography-body1"
-                        data-option="2"
-                      >
-                        Child 2
-                      </p>
-                      <p />
                     </div>
                   </div>
                 </div>

package/src/App/Modules/Creator/Components/Option/index.js

@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { get, has, isArray, find } from 'lodash';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isArray from 'lodash/isArray';
+import find from 'lodash/find';
 import clsx from 'clsx';
-import Grid from '@material-ui/core/Grid/Grid';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import BlockRoundedIcon from '@material-ui/icons/BlockRounded';
 import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
 import RestoreRoundedIcon from '@material-ui/icons/RestoreRounded';
 import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Markdown from 'Framework/Components/Markdown';
 import { t } from 'Framework/i18n';
 import customClassName from 'App/Utils/customClassName';
@@ -254,7 +257,7 @@ const Option = ({ children, render, ...props }) => {
     };
 
     const onAbstractClicked = event => {
-        event.stopPropagation();
+        event.target.tagName.toLowerCase() === 'a' && event.stopPropagation();
     };
 
     const onDetailsClicked = event => {

package/src/App/Modules/Creator/Components/Option/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createStore } from 'redux';
 import { mount, render } from 'enzyme';
 import { Provider } from 'react-redux';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
 import Option from './index';
 

package/src/App/Modules/Creator/Components/OptionAmount/index.js

@@ -2,7 +2,8 @@ import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import { makeStyles, TextField } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
 

package/src/App/Modules/Creator/Components/OptionAmount/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import OptionAmount from './index';
 import { mount, render } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { TextField } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
 
 describe('OptionAmount', () => {
     it('renders correctly', () => {

package/src/App/Modules/Creator/Components/Optiondetail/ZoomImage/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import CloseIcon from '@material-ui/icons/Close';
 import PropTypes from 'prop-types';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
 import getImageUrl from '../../../../../Utils/getImageUrl';
 

package/src/App/Modules/Creator/Components/Optiondetail/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import _ from 'lodash';
+import find from 'lodash/find';
+import findIndex from 'lodash/findIndex';
+import isArray from 'lodash/isArray';
 import { Swipeable } from 'react-swipeable';
 import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
@@ -126,7 +128,7 @@ class Optiondetail extends React.Component {
         const { details, options } = props;
 
         this.state = {
-            currentOption: _.find(options, { identifier: details.identifier }),
+            currentOption: find(options, { identifier: details.identifier }),
             loading: false,
             zoomImage: false,
             hasZoomSet: false,
@@ -143,7 +145,7 @@ class Optiondetail extends React.Component {
         const { details, options } = this.props;
         if (details.identifier !== prevProps.details.identifier) {
             this.setState({
-                currentOption: _.find(options, { identifier: details.identifier }),
+                currentOption: find(options, { identifier: details.identifier }),
                 loading: false,
             });
         }
@@ -156,13 +158,13 @@ class Optiondetail extends React.Component {
         const { optionclassification } = this.props;
         const { currentOption } = this.state;
         const { identifier } = currentOption;
-        return _.find(optionclassification.selectedoptions, { identifier }) || currentOption;
+        return find(optionclassification.selectedoptions, { identifier }) || currentOption;
     }
 
     prev = () => {
         const { details, options, viewDetails } = this.props;
         if (options.length) {
-            const optionIndex = _.findIndex(options, { identifier: details.identifier });
+            const optionIndex = findIndex(options, { identifier: details.identifier });
             const prevIndex = optionIndex === 0 ? options.length - 1 : optionIndex - 1;
             const prev = options[prevIndex];
             viewDetails(prev);
@@ -177,7 +179,7 @@ class Optiondetail extends React.Component {
     next = () => {
         const { details, options, viewDetails } = this.props;
         if (options.length) {
-            const optionIndex = _.findIndex(options, { identifier: details.identifier });
+            const optionIndex = findIndex(options, { identifier: details.identifier });
             const nextIndex = optionIndex === options.length - 1 ? 0 : optionIndex + 1;
             const next = options[nextIndex];
             viewDetails(next);
@@ -265,7 +267,7 @@ class Optiondetail extends React.Component {
     render() {
         const { LoadingComponent, options, show, onClose, details, classes, width } = this.props;
         const { loading, loadingContainerHeight } = this.state;
-        const showNav = _.isArray(options) && options.length > 1;
+        const showNav = isArray(options) && options.length > 1;
         const detailImage = details.detailImage;
         const query = new URLSearchParams(location.search);
         const hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';

package/src/App/Modules/Creator/Components/Optiondetail/index.story.js

@@ -4,54 +4,7 @@ import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
 import OptionDetail from './index';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
-
-export const optionData = {
-    abstract: 'Das sind schwarze Reissverschlüsse',
-    amount: null,
-    amount_is_selectable: null,
-    attributes: [],
-    description:
-        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ',
-    detailImageExists: false,
-    identifier: 'reissverschluesse_black',
-    imageIdentifier: 'reissverschluesse_black',
-    netPrice: null,
-    price: 0,
-    priceFormatted: '0,00 €',
-    stock: null,
-    title: 'Reissverschlüsse schwarz',
-};
-
-export const mockedProps = {
-    channelSettings: { currencySymbol: '€', channel: '_default' },
-    details: optionData,
-    isTabletDevice: false,
-    languageSettings: {
-        currencysymbolposition: 'right',
-        dateformat: 'd.m.Y',
-        decimalpoint: ',',
-        id: '2',
-        iso: 'de_DE',
-        pricedecimals: 2,
-        thousandsseparator: '.',
-        user_created_id: '0',
-    },
-    optionclassification: {
-        attributes: [],
-        description: '',
-        identifier: 'reissverschluss',
-        is_mandatory: true,
-        is_multiselect: false,
-        optionsCount: '2',
-        selectedoptions: [optionData],
-        title: 'Reissverschluss',
-    },
-    options: [optionData],
-    show: true,
-    title: 'Reissverschluss',
-    viewDetails: () => {},
-    OptionlistitemAmount: React.Fragment,
-};
+import { mockedProps } from './index.test.mocks';
 
 storiesOf('OptionDetail', module)
     .add('renders as fullscreen on small screens', () => (

package/src/App/Modules/Creator/Components/Optiondetail/index.test.js

@@ -1,7 +1,7 @@
 import { render, mount } from 'enzyme';
 import React from 'react';
 import OptionDetail from './index';
-import { mockedProps, optionData } from './index.story';
+import { mockedProps, optionData } from './index.test.mocks';
 import Button from '@material-ui/core/Button';
 
 jest.mock('Shared/Components/CustomDialog', () => {

package/src/App/Modules/Creator/Components/Optiondetail/index.test.mocks.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export const optionData = {
+    abstract: 'Das sind schwarze Reissverschlüsse',
+    amount: null,
+    amount_is_selectable: null,
+    attributes: [],
+    description:
+        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ',
+    detailImageExists: false,
+    identifier: 'reissverschluesse_black',
+    imageIdentifier: 'reissverschluesse_black',
+    netPrice: null,
+    price: 0,
+    priceFormatted: '0,00 €',
+    stock: null,
+    title: 'Reissverschlüsse schwarz',
+};
+
+export const mockedProps = {
+    channelSettings: { currencySymbol: '€', channel: '_default' },
+    details: optionData,
+    isTabletDevice: false,
+    languageSettings: {
+        currencysymbolposition: 'right',
+        dateformat: 'd.m.Y',
+        decimalpoint: ',',
+        id: '2',
+        iso: 'de_DE',
+        pricedecimals: 2,
+        thousandsseparator: '.',
+        user_created_id: '0',
+    },
+    optionclassification: {
+        attributes: [],
+        description: '',
+        identifier: 'reissverschluss',
+        is_mandatory: true,
+        is_multiselect: false,
+        optionsCount: '2',
+        selectedoptions: [optionData],
+        title: 'Reissverschluss',
+    },
+    options: [optionData],
+    show: true,
+    title: 'Reissverschluss',
+    viewDetails: () => {},
+    OptionlistitemAmount: React.Fragment,
+};

package/src/App/Modules/Creator/Components/OptionsList/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findIndex, get } from 'lodash';
+import findIndex from 'lodash/findIndex';
+import get from 'lodash/get';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import DialogContent from '@material-ui/core/DialogContent';
 import LoadingOverlay from 'Framework/Components/LoadingOverlay';
 import CustomDialog from 'Shared/Components/CustomDialog';

package/src/App/Modules/Creator/Components/ProductPart/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import { mount, render } from 'enzyme';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
 import ProductPart from './index';
 

package/src/App/Modules/Creator/Components/ProductPartsList/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
-import { withWidth } from '@material-ui/core';
+import withWidth from '@material-ui/core/withWidth';
 import { T } from 'Framework/i18n';
 import Carousel from 'Framework/Components/Carousel';
 import customClassName from 'App/Utils/customClassName';

package/src/App/Modules/Creator/Components/SavedConfiguration/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './Styles.scss';
-import _ from 'lodash';
+import get from 'lodash/get';
 
 import { T } from 'Framework/i18n';
 import PropTypes from 'prop-types';
@@ -13,8 +13,8 @@ class SavedConfiguration extends React.Component {
     render() {
         const { savedconfiguration } = this.props;
 
-        const code = _.get(savedconfiguration, 'code', false);
-        const link = _.get(savedconfiguration, 'shareLink', false);
+        const code = get(savedconfiguration, 'code', false);
+        const link = get(savedconfiguration, 'shareLink', false);
 
         return (
             <div className="savedconfiguration">

package/src/App/Modules/Creator/Components/StoreConfigurationForm/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { translateComponent } from 'Framework/i18n';
-import _ from 'lodash';
+import get from 'lodash/get';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
@@ -27,7 +27,7 @@ export class StoreConfigurationForm extends React.Component {
     onSubmit(e) {
         e.preventDefault();
         this.props.onStore(this.nameInput.value).then(action => {
-            this.setState({ isSaved: !_.get(action, 'data.error') });
+            this.setState({ isSaved: !get(action, 'data.error') });
         });
     }
 

package/src/App/Modules/Creator/Containers/CustomTitleEditor/index.js

@@ -1,7 +1,7 @@
 import containerConnect from 'Framework/ComponentContainer';
 import { setVisible } from 'App/Reducers/UI/Actions';
 import { setCustomTitle } from 'App/Reducers/Configurator/Actions';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { Services } from 'App/ServiceLocator';
 import CustomTitleEditor from '../../Components/CustomTitleEditor';
 import Dialog from 'Framework/Components/Dialog';

package/src/App/Modules/Creator/Containers/FastConfiguration/index.js

@@ -1,6 +1,6 @@
 import containerConnect from 'Framework/ComponentContainer';
 import { setVisible } from 'App/Reducers/UI/Actions';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { Services } from 'App/ServiceLocator';
 
 import FastConfiguration from '../../Components/FastConfiguration';

package/src/App/Modules/Creator/Containers/FormattedPrice/index.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 import containerConnect from 'Framework/ComponentContainer';
 import { getComponent } from 'App/configuration';
 

package/src/App/Modules/Creator/Containers/InvalidConfigurationNotice/index.js

@@ -18,7 +18,7 @@ const getValidationErrors = configuratorState => {
         validation,
         optionclassifications && optionclassifications.length
     ).use(() => {
-        const errors = validation.validationErrors || validation.errors || {};
+        const errors = validation?.validationErrors || validation?.errors || {};
         return !optionclassifications
             ? []
             : Object.entries(errors).map(([key, error]) => ({

package/src/App/Modules/Creator/Containers/Optiondetail/index.js

@@ -1,7 +1,7 @@
 import containerConnect from 'Framework/ComponentContainer';
 import { setVisible } from 'App/Reducers/UI/Actions';
 import { clearOptionDetails } from 'App/Reducers/Configurator/Actions';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import OptionDetail from '../../Components/Optiondetail';
 
 const mapStateToProps = ({ ui, configurator, device }) => {

package/src/App/Modules/Designer/Components/AddGalleryImage/__snapshots__/index.test.jsx.snap

@@ -51,7 +51,6 @@ exports[`renders correctly 1`] = `
             alt="Symbole"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Kreis.jpg"
-            style="background:#c4c4c4"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -68,7 +67,6 @@ exports[`renders correctly 1`] = `
             alt="Branchen"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Kreis.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -85,7 +83,6 @@ exports[`renders correctly 1`] = `
             alt="Männer"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Rechteck.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -102,7 +99,6 @@ exports[`renders correctly 1`] = `
             alt="Frauen"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Rechteck.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -119,7 +115,6 @@ exports[`renders correctly 1`] = `
             alt="Figuren"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Kreis.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -136,7 +131,6 @@ exports[`renders correctly 1`] = `
             alt="Geometrisch1"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Kreis.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -153,7 +147,6 @@ exports[`renders correctly 1`] = `
             alt="Figuren1"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Stern.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"
@@ -170,7 +163,6 @@ exports[`renders correctly 1`] = `
             alt="Geometrisch"
             class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
             src="./res/Stern.jpg"
-            style="background:transparent"
           />
           <div
             class="ImageThumbnail-priceLabel-14"

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import { isEmpty } from 'lodash';
-import Icon from '@material-ui/core/Icon/Icon';
+import isEmpty from 'lodash/isEmpty';
+import Icon from '@material-ui/core/Icon';
 import MainButton from 'Shared/Components/MainButton';
 import { t } from 'Framework/i18n';
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
-import Typography from '@material-ui/core/Typography/Typography';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
 import ImageLibraryFilter from '../ImageLibraryFilter';
 import ImageLibraryThumbnail from '../ImageLibraryThumbnail';
 import Dialog from '@material-ui/core/Dialog';

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

@@ -146,30 +146,3 @@ it('calls the onSelectImage callback when the user uploads an own image in the C
     button.simulate('click');
     expect(onChangeHandler).toHaveBeenCalled();
 });
-
-it('sets the background to grey if the image is too bright', () => {
-    const tree = mount(
-        <AddGalleryImage
-            tags={tags}
-            images={images}
-            onClose={() => {}}
-            onSelectImage={() => {}}
-            onSelectTag={() => {}}
-            open={true}
-            width={'lg'}
-        />
-    );
-
-    const renderedImages = tree
-        .find('ImageLibraryThumbnail')
-        .at(0)
-        .find('img');
-
-    const firstImageBackground = renderedImages.at(0).props('motive').style.background;
-    const secondImageBackground = renderedImages.at(1).props('motive').style.background;
-    const thirdImageBackground = renderedImages.at(2).props('motive').style.background;
-
-    expect(firstImageBackground).toEqual('#c4c4c4');
-    expect(secondImageBackground).toEqual('transparent');
-    expect(thirdImageBackground).toEqual('transparent');
-});