migrate FundProject to mui 4

src/components/projects/FundProject.jsx

@@ -1,11 +1,11 @@
 import React, { useContext, useMemo, useEffect } from 'react'
 import { Formik } from 'formik'
+import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { useQuery } from '@apollo/react-hooks'
 import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
 import Icon from '../base/icons/IconByName'
@@ -26,6 +26,7 @@ import BreadCrumb from '../base/BreadCrumb'
 
 const { addGiverAndDonate } = LiquidPledging.methods
 
+const useStyles = makeStyles(styles)
 const getProjectId = response => {
   const { events: { ProjectAdded: { returnValues: { idProject } } } } = response
   return idProject
@@ -180,8 +181,9 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
   )
 }
 
-function FundProject({ classes, match, history }) {
+function FundProject({ match, history }) {
   const projectId = match.params.id
+  const classes = useStyles()
   const { loading, error, data, stopPolling, startPolling, client } = useQuery(getProfileById, {
     variables: { id: formatProjectId(projectId) }
   });
@@ -210,4 +212,4 @@ function FundProject({ classes, match, history }) {
   )
 }
 
-export default withStyles(styles)(FundProject)
+export default FundProject

src/components/projects/styles/FundProject.js

@@ -4,18 +4,17 @@ const styles = theme => ({
     color: '#4360DF'
   },
   amount: {
-    display: 'grid',
-    marginBottom: '1em',
-    gridTemplateColumns: 'repeat(100, [col] 1%)'
+    marginTop: '3rem',
+    display: 'grid'
   },
   amountLayout: {
     gridColumnStart: 1,
-    gridColumnEnd: 84
+    gridColumnEnd: 5
   },
   amountText: {
-    gridColumnStart: 90,
+    gridColumnStart: 6,
     alignSelf: 'center',
-    color: '#939BA1',
+    color: '#939BA1'
   },
   amountInput: {
     textAlign: 'right'
@@ -69,10 +68,10 @@ const styles = theme => ({
   },
   formButton: {
     gridColumnStart: '1',
-    gridColumnEnd: '11',
+    gridColumnEnd: '13',
     height: '50px',
-    borderRadius: '8px',
-    gridRowEnd: 9
+    marginTop: '1.5rem',
+    borderRadius: '8px'
   },
   textField: {
     gridColumnStart: '1',
@@ -114,13 +113,10 @@ const styles = theme => ({
     marginTop: '15px',
     color: '#4360DF'
   },
-  goal: {
-    placeSelf: 'end start'
-  },
   secondHalf: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
-    gridTemplateRows: '9em repeat(auto-fill, minmax(30px,1fr))',
+    gridTemplateRows: '9rem',
     gridColumnStart: '8',
     gridColumnEnd: '13',
     height: 'fit-content'
@@ -149,8 +145,7 @@ const styles = theme => ({
   },
   usdText: {
     color: '#939BA1',
-    fontSize: '12px',
-    marginBottom: '1em'
+    fontSize: '12px'
   },
   icon: {
     background: '#ECEFFC'