diff --git a/src/components/base/icons/AnimateCheck.jsx b/src/components/base/icons/AnimateCheck.jsx new file mode 100644 index 0000000..cfeef2b --- /dev/null +++ b/src/components/base/icons/AnimateCheck.jsx @@ -0,0 +1,33 @@ +import React from 'react' +import classnames from 'classnames' +import { makeStyles } from '@material-ui/core/styles' + +const styles = () => ({ + check: { + fill: 'none', + stroke: 'green', + strokeWidth: 20, + strokeLinecap: 'round', + strokeDasharray: 180, + strokeDashoffset: 180, + animation: '$draw 2s infinite ease', + }, + '@keyframes draw': { + to: { + strokeDashoffset: 0, + } + } +}) +const useStyles = makeStyles(styles) + +const SVG = () => { + const classes = useStyles() + + return ( + + + + ) +} + +export default SVG diff --git a/src/components/projects/FundProject.jsx b/src/components/projects/FundProject.jsx index 241487d..3eaa8f1 100644 --- a/src/components/projects/FundProject.jsx +++ b/src/components/projects/FundProject.jsx @@ -10,6 +10,7 @@ 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' @@ -53,7 +54,7 @@ const addProjectSucessMsg = response => { return `Project created with ID of ${idProject}, will redirect to your new project page in a few seconds` } const STEPS = ['Connect', 'Authorize Amount', 'Fund', 'Confirm'] -const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Awaiting Confirmation', 'Confirmed'] +const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Submitted', 'Confirmed'] function stepperProgress(values, projectData, submissionState) { if (submissionState === CONFIRMED) return IS_CONFIRMED if (submissionState === SUBMITTED) return IS_SUBMITTED @@ -111,7 +112,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start throw errors }) }} - onSubmit={async (values, { resetForm }) => { + onSubmit={async (values) => { const activeStep = stepperProgress(values, projectData, submissionState) if (!activeStep) return enableEthereum() const { amount } = values @@ -151,10 +152,9 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start }) .finally(() => { client.resetStore() - resetForm() }) - console.log({amount, resetForm, getProjectId, addProjectSucessMsg, account, openSnackBar}) + console.log({amount, getProjectId, addProjectSucessMsg, account, openSnackBar}) }} > {({ @@ -241,9 +241,10 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start />
{getTokenLabel(manifest.goalToken)}
} - diff --git a/src/components/projects/styles/FundProject.js b/src/components/projects/styles/FundProject.js index c5095d2..ac659f8 100644 --- a/src/components/projects/styles/FundProject.js +++ b/src/components/projects/styles/FundProject.js @@ -19,6 +19,9 @@ const styles = theme => ({ amountInput: { textAlign: 'right' }, + check: { + color: theme.palette.primary[500] + }, root: { display: 'grid', gridTemplateColumns: 'repeat(12, [col] 1fr)', @@ -50,7 +53,7 @@ const styles = theme => ({ gridColumnEnd: 13 }, progress: { - color: 'white', + color: theme.palette.primary[500], animationDuration: '350ms' }, submissionRoot: { @@ -78,7 +81,15 @@ const styles = theme => ({ gridColumnEnd: '13', height: '50px', marginTop: '1.5rem', - borderRadius: '8px' + borderRadius: '8px', + backgroundColor: theme.palette.primary[500], + color: 'white', + '&:hover': { + backgroundColor: "#34489f", + } + }, + disabledButton: { + backgroundColor: 'none' }, buttonContent: { display: 'flex', diff --git a/src/index.js b/src/index.js index 7e4c5c5..cbd4840 100644 --- a/src/index.js +++ b/src/index.js @@ -25,6 +25,9 @@ const theme = createMuiTheme({ }, text: { grey: '#939BA1' + }, + action: { + disabledBackground: '#FAFAFA' } } });