From 14f2d5e27a781c6680a4e1ba940140aca32390d3 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Mon, 3 Jun 2019 13:32:54 -0400
Subject: [PATCH] add markdown extended to create delegate

---
 src/components/projects/CreateDelegate.jsx | 29 +++++++++++++++++++---
 src/components/projects/CreateProject.jsx  |  7 ++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/projects/CreateDelegate.jsx b/src/components/projects/CreateDelegate.jsx
index b33bec2..7292cd8 100644
--- a/src/components/projects/CreateDelegate.jsx
+++ b/src/components/projects/CreateDelegate.jsx
@@ -1,6 +1,8 @@
 /*global Buffer*/
 import React, { createRef, useState, useContext } from 'react'
 import { Formik } from 'formik'
+import classnames from 'classnames'
+import ReactMarkdown from 'react-markdown'
 import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
 import TextField from '@material-ui/core/TextField'
 import Divider from '@material-ui/core/Divider'
@@ -63,6 +65,21 @@ const styles = theme => ({
     gridColumnStart: '1',
     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: {
     fontSize: '2rem'
   }
@@ -371,18 +388,24 @@ const SubmissionSection = ({ classes, history }) => {
               label="Autoplay video?"
             />
             <TextField
-              className={classes.textField}
+              className={classes.firstHalf}
+              InputProps={{
+                style: { height: '100%' }
+              }}
               id="description"
               name="description"
               multiline
-              label="Enter extended description here"
-              placeholder="Enter extended description here"
+              label="Enter extended description (markdown)"
+              placeholder="Enter extended description (markdown)"
               margin="normal"
               variant="outlined"
               onChange={handleChange}
               onBlur={handleBlur}
               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>
           </form>
         )
diff --git a/src/components/projects/CreateProject.jsx b/src/components/projects/CreateProject.jsx
index 0c4e6df..e0fe63c 100644
--- a/src/components/projects/CreateProject.jsx
+++ b/src/components/projects/CreateProject.jsx
@@ -67,7 +67,7 @@ const styles = theme => ({
   },
   firstHalf: {
     gridColumnStart: '1',
-    gridColumnEnd: '7'
+    gridColumnEnd: '7',
   },
   secondHalf: {
     gridColumnStart: '7',
@@ -77,7 +77,7 @@ const styles = theme => ({
     borderStyle: 'solid',
     borderWidth: 'thin',
     borderColor: 'darkgray',
-    margin: '16px 0 0 0',
+    margin: '16px 0 8px 0',
     padding: '10%'
   },
   textInput: {
@@ -389,6 +389,9 @@ const SubmissionSection = ({ classes, history }) => {
             />
             <TextField
               className={classes.firstHalf}
+              InputProps={{
+                style: { height: '100%' }
+              }}
               id="description"
               name="description"
               multiline