From 71f3445226b00c68bb98e4b5bc00301b474b0189 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot powered by AIPR <pull-request@aipr.com>
Date: Sat, 30 Dec 2023 19:37:14 +0000
Subject: [PATCH] [create-pull-request] automated change

---
 frontend/src/components/welcome/welcome.js | 486 ++++++++++-----------
 1 file changed, 235 insertions(+), 251 deletions(-)

diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 87eeb5ac1..f46e7f8e3 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,6 +1,6 @@
-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 {
   withStyles,
   Grid,
@@ -10,276 +10,260 @@ import {
   ListItemText,
   ListItemIcon,
   Avatar,
-  Container
-} from '@material-ui/core'
-
-import {
-  AccountBalanceWallet,
-  Work,
-  Apps,
-  Assignment,
-  GroupWork
-} from '@material-ui/icons'
-
-import './mailchimp.css'
-
-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'
-
-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')
+  Container,
+} from "@material-ui/core";
+import { AccountBalanceWallet, Work, Apps, Assignment, GroupWork } from "@material-ui/icons";
+import "./mailchimp.css";
+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";
+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'
+} from './components/CommonStyles';
 
-const styles = theme => mainStyles(theme)
+const styles = theme => mainStyles(theme);
 
-class Welcome extends Component {
-  constructor (props) {
-    super(props)
+const Welcome = () => {
+  const [value, setValue] = React.useState(0);
 
-    this.state = {
-      value: 0
-    }
-  }
+  React.useEffect(() => {
+    // componentDidMount() equivalent
+  }, []);
 
-  componentDidMount () {
+  React.useEffect(() => {
+    // componentWillUnmount() equivalent
+    return () => {
+      // Clean up code
+    };
+  }, []);
 
-  }
+  const { classes } = props;
 
-  componentWillUnmount () {
-
-  }
-
-  render () {
-    const { classes } = this.props
-
-    return (
-      <div className={ classes.root }>
-        <TopBarContainer ref='intro' hide />
-        <Container>
-          <Section ref='contrib'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.forfreelancers'
-                      defaultMessage='For contributors and freelancers'
+  return (
+    <div className={classes.root}>
+      <TopBarContainer ref="intro" hide />
+      <Container>
+        <Section ref="contrib">
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.headline.forfreelancers"
+                    defaultMessage="For contributors and freelancers"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Apps />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOneSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
+                  </ListItem>
 
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Work />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoSecondary
+                      )}
+                    />
+                  </ListItem>
 
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='800' src={ freelancerImage } />
-              </Grid>
-            </Grid>
-          </Section>
-        </Container>
-        <Section ref='companies' alternative className={ classes.bgContrast }>
-          <Container>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.tagline.companies.main.headline'
-                      defaultMessage='For maintainers and organizations'
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreeSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Assignment />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <GroupWork />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ companiesImage } />
-              </Grid>
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="800" src={freelancerImage} />
             </Grid>
-          </Container>
+          </Grid>
         </Section>
+      </Container>
+      <Section ref="companies" alternative className={classes.bgContrast}>
         <Container>
-          <Section ref='collab'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.collab'
-                      defaultMessage='Working in development communities'
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.tagline.companies.main.headline"
+                    defaultMessage="For maintainers and organizations"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Assignment />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOneSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <GroupWork />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemTwoSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ teamImage } />
-              </Grid>
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemThreeSecondary
+                      )}
+                    />
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="600" src={companiesImage} />
             </Grid>
-          </Section>
+          </Grid>
         </Container>
-        <Bottom />
-      </div>
-    )
-  }
-}
+      </Section>
+      <Container>
+        <Section ref="collab">
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.headline.collab"
+                    defaultMessage="Working in development communities"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Apps />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemOneSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Work />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemTwoSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemThreeSecondary
+                      )}
+                    />
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="600" src={teamImage} />
+            </Grid>
+          </Grid>
+        </Section>
+      </Container>
+      <Bottom />
+    </div>
+  );
+};
 
 Welcome.propTypes = {
-  classes: PropTypes.object.isRequired
-}
+  classes: PropTypes.object.isRequired,
+};
 
-export default injectIntl(withStyles(styles)(Welcome))
+export default injectIntl(withStyles(styles)(Welcome));