diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 87eeb5ac1..ae7ad18df 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import 'typeface-roboto'
+import React from 'react';
+import PropTypes from 'prop-types';
+import 'typeface-roboto';
+import { makeStyles } from '@material-ui/core/styles';
import {
- withStyles,
Grid,
Typography,
List,
@@ -10,276 +10,258 @@ import {
ListItemText,
ListItemIcon,
Avatar,
- Container
-} from '@material-ui/core'
+ Container,
+} from '@material-ui/core';
import {
AccountBalanceWallet,
Work,
Apps,
Assignment,
- GroupWork
-} from '@material-ui/icons'
+ GroupWork,
+} from '@material-ui/icons';
-import './mailchimp.css'
+import './mailchimp.css';
-import { injectIntl, FormattedMessage } from 'react-intl'
+import { injectIntl, FormattedMessage } from 'react-intl';
-import TopBarContainer from '../../containers/topbar'
-import Bottom from '../../components/bottom/bottom'
-import messages from './messages'
-import mainStyles from '../styles/style'
+import TopBarContainer from '../../containers/topbar';
+import Bottom from '../../components/bottom/bottom';
+import messages from './messages';
+import mainStyles from '../styles/style';
-const freelancerImage = require('../../images/collections/collection-flat-community.svg')
-const companiesImage = require('../../images/collections/collection-flat-companies.svg')
-const teamImage = require('../../images/welcome-teamwork.png')
+const freelancerImage = require('../../images/collections/collection-flat-community.svg');
+const companiesImage = require('../../images/collections/collection-flat-companies.svg');
+const teamImage = require('../../images/welcome-teamwork.png');
import {
MainTitle,
MainList,
ResponsiveImage,
- Section
-} from './components/CommonStyles'
+ Section,
+} from './components/CommonStyles';
-const styles = theme => mainStyles(theme)
+const useStyles = makeStyles((theme) => mainStyles(theme));
-class Welcome extends Component {
- constructor (props) {
- super(props)
+const Welcome = (props) => {
+ const classes = useStyles();
- this.state = {
- value: 0
- }
- }
-
- componentDidMount () {
-
- }
-
- componentWillUnmount () {
-
- }
-
- render () {
- const { classes } = this.props
-
- return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
Welcome.propTypes = {
- classes: PropTypes.object.isRequired
-}
+ classes: PropTypes.object.isRequired,
+};
-export default injectIntl(withStyles(styles)(Welcome))
+export default injectIntl(Welcome);