Fix imports to reduce bundle size.

packages/webapp/src/components/forgot-password-page/index.tsx

@@ -12,7 +12,8 @@ import { activeInstance } from '../../redux/clientSlice'
 import Input from '../form/input'
 import GlobalError from '../form/global-error'
 import SubmitButton from '../form/submit-button'
-import { Typography } from '@material-ui/core'
+
+import Typography from '@material-ui/core/Typography'
 
 const ForgotPassword = () => {
   const [email, setEmail] = useState<string>('');
@@ -50,7 +51,7 @@ const ForgotPassword = () => {
 
       <form onSubmit={handleOnSubmit}>
         <Input type="email" name="email" label={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })}
-          autoComplete="email" onChange={e => setEmail(e.target.value)} error={error}/>
+          autoComplete="email" onChange={e => setEmail(e.target.value)} error={error} />
 
         <SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
       </form>

packages/webapp/src/components/form/global-error/styled.ts

@@ -1,4 +1,4 @@
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
 import { Alert } from "@material-ui/lab";
 
 

packages/webapp/src/components/form/input/index.tsx

@@ -1,4 +1,4 @@
-import { TextField } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
 import React, { ChangeEvent } from "react";
 import { ErrorInfo } from "../../../classes/client";
 

packages/webapp/src/components/form/submit-button/index.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useIntl } from 'react-intl'
 
 type SubmitButton = {
@@ -18,7 +18,7 @@ const SubmitButton = (props: SubmitButton) => {
     return (
         <Button color="primary" size="medium" variant="contained" type="submit"
             disableElevation={true} disabled={disabled}
-            style={{width: '350px', height: '53px', padding: '0px 20px', margin: '7px 0px',fontSize: '18px' }} >
+            style={{ width: '350px', height: '53px', padding: '0px 20px', margin: '7px 0px', fontSize: '18px' }} >
             {value}
         </Button>
     );

packages/webapp/src/components/layout/form-container/index.tsx

@@ -1,4 +1,5 @@
-import { Container, withStyles } from "@material-ui/core";
+import Container from "@material-ui/core/Container";
+import withStyles from "@material-ui/core/styles/withStyles";
 
 const FormContainer = withStyles({
     root: {

packages/webapp/src/components/layout/header/index.tsx

@@ -3,7 +3,7 @@ import { StyledNav, StyledDiv, Logo } from './styled';
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 
 const logo = require('../../../images/logo-small.svg')
 

packages/webapp/src/components/login-page/index.tsx

@@ -6,8 +6,10 @@ import Footer from '../layout/footer';
 import SubmitButton from '../form/submit-button';
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
-import { FormControl, Link, Typography } from '@material-ui/core';
 import FormContainer from '../layout/form-container';
+import Typography from '@material-ui/core/Typography';
+import FormControl from '@material-ui/core/FormControl';
+import Link from '@material-ui/core/Link';
 
 
 const ConfigStatusMessage = (props: any) => {

packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx

@@ -1,4 +1,3 @@
-import { FormControl, FormControlLabel, FormGroup, Switch } from "@material-ui/core";
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
@@ -7,7 +6,12 @@ import Input from "../../../form/input";
 import BaseDialog from "../../action-dispatcher/base-dialog";
 import { useSelector } from 'react-redux';
 import { activeInstance, fetchAccount } from "../../../../redux/clientSlice";
-import { Alert } from "@material-ui/lab";
+
+import Alert from "@material-ui/lab/Alert";
+import FormControl from "@material-ui/core/FormControl";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormGroup from "@material-ui/core/FormGroup";
+import Switch from "@material-ui/core/Switch";
 
 
 type AccountInfoDialogProps = {

packages/webapp/src/components/maps-page/account-menu/change-password-dialog/index.tsx

@@ -1,4 +1,4 @@
-import { FormControl } from "@material-ui/core";
+import FormControl from "@material-ui/core/FormControl";
 import React from "react";
 import { useIntl } from "react-intl";
 import { useMutation } from "react-query";

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -1,10 +1,18 @@
-import { IconButton, Link, ListItemIcon, Menu, MenuItem, Tooltip } from '@material-ui/core';
+import IconButton from "@material-ui/core/IconButton";
-import { AccountCircle, ExitToAppOutlined, LockOpenOutlined, SettingsApplicationsOutlined } from '@material-ui/icons';
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Tooltip from "@material-ui/core/Tooltip";
+import SettingsApplicationsOutlined from "@material-ui/icons/SettingsApplicationsOutlined";
+import AccountCircle from "@material-ui/icons/AccountCircle";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { fetchAccount } from '../../../redux/clientSlice';
 import AccountInfoDialog from './account-info-dialog';
 import ChangePasswordDialog from './change-password-dialog';
+import LockOpenOutlined from "@material-ui/icons/LockOpenOutlined";
+import Link from "@material-ui/core/Link";
+import ExitToAppOutlined from "@material-ui/icons/ExitToAppOutlined";
 
 type ActionType = 'change-password' | 'account-info' | undefined;
 const AccountMenu = () => {

packages/webapp/src/components/maps-page/action-chooser/index.tsx

@@ -1,4 +1,3 @@
-import { Divider, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
 import React from 'react';
 import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
@@ -9,10 +8,14 @@ import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined';
 import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
 import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
-import { FormattedMessage } from 'react-intl';
+import LabelOutlined from '@material-ui/icons/LabelOutlined';
-import { LabelOutlined } from '@material-ui/icons';
-import { fetchMapById } from '../../../redux/clientSlice';
 
+import { FormattedMessage } from 'react-intl';
+import { fetchMapById } from '../../../redux/clientSlice';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Divider from '@material-ui/core/Divider';
 export type ActionType = 'open' | 'share' | 'import' | 'delete' | 'info' | 'create' | 'duplicate' | 'export' | 'label' | 'rename' | 'print' | 'info' | 'publish' | 'history' | undefined;
 
 interface ActionProps {

packages/webapp/src/components/maps-page/action-chooser/styled.ts

@@ -1,4 +1,5 @@
-import { MenuItem, withStyles } from "@material-ui/core";
+import MenuItem from "@material-ui/core/MenuItem";
+import withStyles from "@material-ui/core/styles/withStyles";
 
 export const StyledMenuItem = withStyles({
     root: {

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Button, DialogContentText } from "@material-ui/core";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../../classes/client";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import Button from "@material-ui/core/Button";
 
 export type DialogProps = {
     onClose: () => void;

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/style.ts

@@ -1,4 +1,8 @@
-import { Dialog, DialogActions, DialogContent, DialogTitle, withStyles } from "@material-ui/core";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import withStyles from "@material-ui/core/styles/withStyles";
 
 export const StyledDialogContent = withStyles({
     root: {

packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
-import { FormControl } from '@material-ui/core';
+import FormControl  from '@material-ui/core/FormControl';
-
 
 import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';

packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation } from "react-query";
-import { FormControl } from "@material-ui/core";
+import  FormControl  from "@material-ui/core/FormControl";
 import { useSelector } from "react-redux";
 
 import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/index.tsx

@@ -1,10 +1,15 @@
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import BaseDialog from "../base-dialog";
-import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select } from "@material-ui/core";
 import { useStyles } from './style';
-import { Alert } from "@material-ui/lab";
+import Alert from "@material-ui/lab/Alert";
 import { fetchMapById } from "../../../../redux/clientSlice";
+import FormControl from "@material-ui/core/FormControl";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
 
 type ExportFormat = 'pdf' | 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'txt';
 type ExportGroup = 'image' | 'document' | 'mindmap-tool';

packages/webapp/src/components/maps-page/action-dispatcher/export-dialog/style.ts

@@ -1,4 +1,6 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core";
+import { Theme } from "@material-ui/core/styles/createMuiTheme";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 export const useStyles = makeStyles((theme: Theme) =>
     createStyles({

packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx

@@ -6,9 +6,18 @@ import Client, { ChangeHistory } from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { SimpleDialogProps } from "..";
 import BaseDialog from "../base-dialog";
-import { Link, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip } from "@material-ui/core";
 import moment from "moment";
 
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableBody from "@material-ui/core/TableBody";
+import Tooltip from "@material-ui/core/Tooltip";
+import Link from "@material-ui/core/Link";
+import Paper from "@material-ui/core/Paper";
+
 
 const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
   const intl = useIntl();

packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx

@@ -1,10 +1,10 @@
+import Button from '@material-ui/core/Button';
+import FormControl from '@material-ui/core/FormControl';
 import React from 'react';
+
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Button, FormControl } from '@material-ui/core';
-
-
 import Client, { ErrorInfo } from '../../../../classes/client';
 import { activeInstance } from '../../../../redux/clientSlice';
 import Input from '../../../form/input';

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Card, List, ListItem, Paper, Typography } from '@material-ui/core';
-
 
 import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
@@ -9,6 +7,11 @@ import {  SimpleDialogProps } from '..';
 import { useStyles } from './style';
 import moment from 'moment';
 import { fetchMapById } from '../../../../redux/clientSlice';
+import Paper from '@material-ui/core/Paper';
+import Card from '@material-ui/core/Card';
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
 
 const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
     const { map } = fetchMapById(mapId);

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts

@@ -1,4 +1,6 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core";
+import { Theme } from "@material-ui/core/styles/createMuiTheme";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 export const useStyles = makeStyles((theme: Theme) =>
     createStyles({

packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx

@@ -2,15 +2,21 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
-import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, TextareaAutosize, Typography } from '@material-ui/core';
-
-
 import Client, { ErrorInfo } from '../../../../classes/client';
 import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
 import BaseDialog from '../base-dialog';
-import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 import { handleOnMutationSuccess, SimpleDialogProps } from '..';
 import { useStyles } from './style';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import TabContext from '@material-ui/lab/TabContext';
+import AppBar from '@material-ui/core/AppBar';
+import TabList from '@material-ui/lab/TabList';
+import Tab from '@material-ui/core/Tab';
+import TabPanel from '@material-ui/lab/TabPanel';
+import Typography from '@material-ui/core/Typography';
+import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 
 
 const PublishDialog = ({ mapId, onClose }: SimpleDialogProps) => {

packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts

@@ -1,4 +1,6 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core";
+import { Theme } from "@material-ui/core/styles/createMuiTheme";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 export const useStyles = makeStyles((theme: Theme) =>
     createStyles({

packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx

@@ -6,8 +6,8 @@ import Client, { BasicMapInfo, ErrorInfo } from "../../../../classes/client";
 import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
 import { SimpleDialogProps, handleOnMutationSuccess } from "..";
 import Input from "../../../form/input";
-import { FormControl } from "@material-ui/core";
 import BaseDialog from "../base-dialog";
+import FormControl from "@material-ui/core/FormControl";
 
 export type RenameModel = {
     id: number;

packages/webapp/src/components/maps-page/help-menu/index.tsx

@@ -1,8 +1,17 @@
-import { IconButton, Link, ListItemIcon, Menu, MenuItem } from "@material-ui/core";
-import { Help, PolicyOutlined, EmailOutlined, FeedbackOutlined, EmojiPeopleOutlined } from "@material-ui/icons";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import Help from "@material-ui/icons/Help";
+import PolicyOutlined from "@material-ui/icons/PolicyOutlined";
+import FeedbackOutlined from "@material-ui/icons/FeedbackOutlined";
+import EmojiPeopleOutlined from "@material-ui/icons/EmailOutlined";
+import EmailOutlined from "@material-ui/icons/EmailOutlined";
+import IconButton from "@material-ui/core/IconButton";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Link from "@material-ui/core/Link";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+
 const HelpMenu = () => {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);

packages/webapp/src/components/maps-page/index.tsx

@@ -8,7 +8,6 @@ import IconButton from '@material-ui/core/IconButton';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { useStyles } from './style';
-import {  AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ScatterPlotTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
 import { Button, Link, ListItemSecondaryAction, ListItemText, Tooltip } from '@material-ui/core';
 import { MapsList } from './maps-list';
 import { FormattedMessage, IntlProvider, useIntl } from 'react-intl';
@@ -24,6 +23,19 @@ import HelpMenu from './help-menu';
 import LanguageMenu from './language-menu';
 import AppI18n, { Locales } from '../../classes/app-i18n';
 
+
+
+import AddCircleTwoTone from '@material-ui/icons/AddCircleTwoTone';
+import CloudUploadTwoTone from '@material-ui/icons/CloudUploadTwoTone';
+import DeleteOutlineTwoTone from '@material-ui/icons/DeleteOutlineTwoTone';
+import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
+import PersonOutlineTwoTone from '@material-ui/icons/PersonOutlineTwoTone';
+import PublicTwoTone from '@material-ui/icons/PublicTwoTone';
+import ScatterPlotTwoTone from '@material-ui/icons/ScatterPlotTwoTone';
+import ShareTwoTone from '@material-ui/icons/ShareTwoTone';
+import StarTwoTone from '@material-ui/icons/StarTwoTone';
+
+
 const logoIcon = require('../../images/logo-small.svg');
 const poweredByIcon = require('../../images/pwrdby-white.svg');
 

packages/webapp/src/components/maps-page/language-menu/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Menu, MenuItem, Tooltip } from '@material-ui/core';
-import { TranslateTwoTone } from '@material-ui/icons';
+import TranslateTwoTone from '@material-ui/icons/TranslateTwoTone';
 import React from "react";
 import { useMutation, useQueryClient } from "react-query";
 import Client from "../../../classes/client";

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect,CSSProperties } from 'react';
+import React, { useEffect, CSSProperties } from 'react';
-import { useStyles } from './styled';
 
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -14,8 +13,17 @@ import Paper from '@material-ui/core/Paper';
 import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
-import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
+import Button from '@material-ui/core/Button';
+import InputBase from '@material-ui/core/InputBase';
+import Link from '@material-ui/core/Link';
+
+import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
+import SearchIcon from '@material-ui/icons/Search';
+
+import { useStyles } from './styled';
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../redux/clientSlice';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -23,12 +31,11 @@ import { ErrorInfo, MapInfo } from '../../../classes/client';
 import Client from '../../../classes/client';
 import ActionChooser, { ActionType } from '../action-chooser';
 import ActionDispatcher from '../action-dispatcher';
-import { Button, InputBase, Link } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
 import moment from 'moment'
 import { Filter, LabelFilter } from '..';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { DeleteOutlined, LabelTwoTone } from '@material-ui/icons';
+
+
 
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {

packages/webapp/src/components/maps-page/maps-list/styled.ts

@@ -1,4 +1,7 @@
-import { createStyles, fade, makeStyles, Theme } from '@material-ui/core/styles';
+import { fade } from "@material-ui/core/styles";
+import { Theme } from "@material-ui/core/styles/createMuiTheme";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 export const useStyles = makeStyles((theme: Theme) =>
   createStyles({

packages/webapp/src/components/maps-page/style.ts

@@ -1,5 +1,6 @@
-import { createStyles, ListItemText, Theme, withStyles } from "@material-ui/core";
+import { Theme } from "@material-ui/core/styles/createMuiTheme";
-import { makeStyles } from "@material-ui/core";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 const drawerWidth = 300;
 

packages/webapp/src/components/registration-page/index.tsx

@@ -2,19 +2,20 @@ import React, { useState, useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { useHistory } from 'react-router-dom';
-import Client , { ErrorInfo} from '../../classes/client';
+import Client, { ErrorInfo } from '../../classes/client';
 import FormContainer from '../layout/form-container';
 
 import Header from '../layout/header';
 import Footer from '../layout/footer';
 
-import { FormControl, Typography } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import { useMutation } from 'react-query';
 import { activeInstance } from '../../redux/clientSlice';
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
 import SubmitButton from '../form/submit-button';
+import Typography from '@material-ui/core/Typography';
+import FormControl from '@material-ui/core/FormControl';
 
 export type Model = {
   email: string;
@@ -72,16 +73,16 @@ const RegistrationForm = () => {
           <GlobalError error={error} />
 
           <Input name="email" type="email" onChange={handleOnChange} label={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })}
-            autoComplete="email" error={error}/>
+            autoComplete="email" error={error} />
 
           <Input name="firstname" type="text" onChange={handleOnChange} label={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })}
-            autoComplete="given-name" error={error}/>
+            autoComplete="given-name" error={error} />
 
           <Input name="lastname" type="text" onChange={handleOnChange} label={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })}
-            autoComplete="family-name" error={error}/>
+            autoComplete="family-name" error={error} />
 
           <Input name="password" type="password" onChange={handleOnChange} label={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })}
-            autoComplete="new-password" error={error}/>
+            autoComplete="new-password" error={error} />
 
           <div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
             <ReCAPTCHA

packages/webapp/src/components/registration-success-page/index.tsx

@@ -3,8 +3,9 @@ import { FormattedMessage } from 'react-intl';
 import FormContainer from '../layout/form-container';
 import Header from '../layout/header';
 import Footer from '../layout/footer';
-import { Button, Typography } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 
 
 const RegistrationSuccessPage = () => {