abstract away status button

src/components/base/Button.jsx

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react'
+import { makeStyles } from '@material-ui/styles'
+import Button from '@material-ui/core/Button'
+import Check from '@material-ui/icons/Check'
+import CircularProgress from '@material-ui/core/CircularProgress'
+
+const useStyles = makeStyles(theme => ({
+  check: {
+    color: theme.palette.primary[500]
+  },
+  formButton: {
+    gridColumnStart: '1',
+    gridColumnEnd: '13',
+    height: '50px',
+    marginTop: '1.5rem',
+    borderRadius: '8px',
+    backgroundColor: theme.palette.primary[500],
+    color: 'white',
+    '&:hover': {
+      backgroundColor: "#34489f",
+    }
+  },
+  disabledButton: {
+    backgroundColor: 'none'
+  },
+  buttonContent: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    width: '50%'
+  },
+  progress: {
+    color: theme.palette.primary[500],
+    animationDuration: '350ms'
+  }
+}))
+
+function StatusButton(props) {
+  const { disabled, buttonText, confirmed, loading } = props
+  const classes = useStyles()
+  const { check, formButton, disabledButton, buttonContent, progress } = classes
+  return (
+    <Fragment>
+      <Button disabled={disabled} type="submit" variant="contained" className={formButton} classes={{ disabled: disabledButton }}>
+        <div className={buttonContent}>
+          {confirmed && <Check className={check} />}
+          {loading && <CircularProgress className={progress} size={24} disableShrink />}
+          {buttonText || ''}
+        </div>
+      </Button>
+    </Fragment>
+  )
+}
+
+export default StatusButton

src/components/projects/FundProject.jsx

@@ -4,13 +4,10 @@ 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 CircularProgress from '@material-ui/core/CircularProgress'
 import Typography from '@material-ui/core/Typography'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
 import Icon from '../base/icons/IconByName'
-import Check from '@material-ui/icons/Check'
 import * as Yup from 'yup'
 import { convertTokenAmountUsd, formatPercent } from '../../utils/prices'
 import { getAmountFromPledgesInfo } from '../../utils/pledges'
@@ -26,6 +23,7 @@ import styles from './styles/FundProject'
 import Loading from '../base/Loading'
 import BreadCrumb from '../base/BreadCrumb'
 import FundStepper from './FundStepper'
+import StatusButton from '../base/Button'
 import { errorStrings } from '../../constants/errors'
 
 const { REQUIRED, NOT_NUMBER } = errorStrings
@@ -246,13 +244,12 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                 />
                 <div className={classes.amountText}>{getTokenLabel(manifest.goalToken)}</div>
               </div>}
-              <Button disabled={disableButton} type="submit" variant="contained" className={classnames(classes.formButton)} classes={{ disabled: classes.disabledButton }}>
+              <StatusButton
-                <div className={classes.buttonContent}>
+                disabled={disableButton}
-                  {activeStep === IS_CONFIRMED && <Check className={classes.check} />}
+                buttonText={buttonText[activeStep]}
-                  {showSpinner && <CircularProgress className={classes.progress} size={24} disableShrink />}
+                confirmed={activeStep === IS_CONFIRMED}
-                  {buttonText[activeStep]}
+                loading={showSpinner}
-                </div>
+              />
-              </Button>
               <FundStepper steps={STEPS} activeStep={activeStep} />
             </div>}
           </form>