add markdown extended to create delegate

This commit is contained in:
Barry Gitarts 2019-06-03 13:32:54 -04:00 committed by Barry G
parent 8a3391be9f
commit 14f2d5e27a
2 changed files with 31 additions and 5 deletions

View File

@ -1,6 +1,8 @@
/*global Buffer*/ /*global Buffer*/
import React, { createRef, useState, useContext } from 'react' import React, { createRef, useState, useContext } from 'react'
import { Formik } from 'formik' import { Formik } from 'formik'
import classnames from 'classnames'
import ReactMarkdown from 'react-markdown'
import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging' import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
import TextField from '@material-ui/core/TextField' import TextField from '@material-ui/core/TextField'
import Divider from '@material-ui/core/Divider' import Divider from '@material-ui/core/Divider'
@ -63,6 +65,21 @@ const styles = theme => ({
gridColumnStart: '1', gridColumnStart: '1',
gridColumnEnd: '13' gridColumnEnd: '13'
}, },
firstHalf: {
gridColumnStart: '1',
gridColumnEnd: '7'
},
secondHalf: {
gridColumnStart: '7',
gridColumnEnd: '13'
},
markdown: {
borderStyle: 'solid',
borderWidth: 'thin',
borderColor: 'darkgray',
margin: '16px 0 8px 0',
padding: '10%'
},
textInput: { textInput: {
fontSize: '2rem' fontSize: '2rem'
} }
@ -371,18 +388,24 @@ const SubmissionSection = ({ classes, history }) => {
label="Autoplay video?" label="Autoplay video?"
/> />
<TextField <TextField
className={classes.textField} className={classes.firstHalf}
InputProps={{
style: { height: '100%' }
}}
id="description" id="description"
name="description" name="description"
multiline multiline
label="Enter extended description here" label="Enter extended description (markdown)"
placeholder="Enter extended description here" placeholder="Enter extended description (markdown)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.description || ''} value={values.description || ''}
/> />
<div className={classnames(classes.secondHalf, classes.markdown)}>
<ReactMarkdown source={values.description} />
</div>
<Button type="submit" color="primary" variant="contained" className={classes.formButton}>{isSubmitting ? 'Ethereum Submission In Progress' : 'Create Delegate'}</Button> <Button type="submit" color="primary" variant="contained" className={classes.formButton}>{isSubmitting ? 'Ethereum Submission In Progress' : 'Create Delegate'}</Button>
</form> </form>
) )

View File

@ -67,7 +67,7 @@ const styles = theme => ({
}, },
firstHalf: { firstHalf: {
gridColumnStart: '1', gridColumnStart: '1',
gridColumnEnd: '7' gridColumnEnd: '7',
}, },
secondHalf: { secondHalf: {
gridColumnStart: '7', gridColumnStart: '7',
@ -77,7 +77,7 @@ const styles = theme => ({
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: 'thin', borderWidth: 'thin',
borderColor: 'darkgray', borderColor: 'darkgray',
margin: '16px 0 0 0', margin: '16px 0 8px 0',
padding: '10%' padding: '10%'
}, },
textInput: { textInput: {
@ -389,6 +389,9 @@ const SubmissionSection = ({ classes, history }) => {
/> />
<TextField <TextField
className={classes.firstHalf} className={classes.firstHalf}
InputProps={{
style: { height: '100%' }
}}
id="description" id="description"
name="description" name="description"
multiline multiline