update create project layout

src/components/projects/CreateProject.jsx

@@ -4,7 +4,6 @@ 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'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Switch from '@material-ui/core/Switch'
 import Button from '@material-ui/core/Button'
@@ -56,7 +55,7 @@ const styles = theme => ({
     gridColumnStart: '6'
   },
   formButton: {
-    gridColumnStart: '1',
+    gridColumnStart: '6',
     gridColumnEnd: '13',
     height: '50px'
   },
@@ -65,12 +64,21 @@ const styles = theme => ({
     gridColumnEnd: '13'
   },
   firstHalf: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, [col] 1fr)',
+    gridTemplateRows: '7rem',
+    gridRowGap: '2rem',
     gridColumnStart: '1',
-    gridColumnEnd: '7',
+    gridColumnEnd: '8',
   },
   secondHalf: {
-    gridColumnStart: '7',
-    gridColumnEnd: '13'
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, [col] 1fr)',
+    gridTemplateRows: '7rem',
+    gridRowGap: '2rem',
+    gridColumnStart: '8',
+    gridColumnEnd: '13',
+    height: 'fit-content'
   },
   markdown: {
     borderStyle: 'solid',
@@ -81,6 +89,13 @@ const styles = theme => ({
   },
   textInput: {
     fontSize: '2rem'
+  },
+  fullWidth: {
+    gridColumnStart: '1',
+    gridColumnEnd: '13'
+  },
+  breadCrumb: {
+    color: '#939BA1'
   }
 })
 
@@ -117,13 +132,6 @@ const createJSON = values => {
   return JSON.stringify(manifest, null, 2)
 }
 
-const Title = ({ className }) => (
-  <div className={className}>
-    <div style={{ alignSelf: 'center' }}>Create Project</div>
-    <Divider />
-  </div>
-)
-
 let uploadInput = createRef()
 const getProjectId = response => {
   const { events: { ProjectAdded: { returnValues: { idProject } } } } = response
@@ -188,219 +196,228 @@ const SubmissionSection = ({ classes, history }) => {
         status,
         isSubmitting
       }) => {
+        const { firstHalf, secondHalf, fullWidth } = classes
         return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
-            <input
-              ref={(input) => {
-                uploadInput = input
-              }}
-              type="file"
-              multiple
-              onChange={
-                (e) => {
-                  const file = e.target.files
-                  const {activeField} = status
-                  setFieldValue(activeField, file[0]['name'])
-                  setUploads({...uploads, [activeField]: file})
-                  setStatus({
-                    ...status,
-                    activeField: null
-                  })
+            <div className={firstHalf}>
+              <div className={classnames(classes.breadCrumb, fullWidth)}>
+                {'All projects and delegates > Create new'}
+              </div>
+              <TextField
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="title"
+                name="title"
+                label="Enter Project Name"
+                placeholder="Enter Project Name"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.title || ''}
+              />
+              <TextField
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="subtitle"
+                name="subtitle"
+                label="Short description"
+                placeholder="Enter a sub heading description for your project"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.subtitle || ''}
+              />
+              <TextField
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="creator"
+                name="creator"
+                label="Enter the project creator"
+                placeholder="Enter the project creator"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.creator || ''}
+              />
+              <TextField
+                className={classes.textField}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <CloudUpload
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          const activeField = 'avatar'
+                          setStatus({ ...status, activeField })
+                          uploadInput.click()
+                        }
+                        }
+                      />
+                    </InputAdornment>
+                  ),
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="avatar"
+                name="avatar"
+                label="Upload or enter link to creator avatar"
+                placeholder="upload or enter link to creator avatar"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.avatar || ''}
+              />
+
+              <TextField
+                className={classes.textField}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <CloudUpload
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          const activeField = 'video'
+                          setStatus({ ...status, activeField })
+                          uploadInput.click()
+                        }
+                        }
+                      />
+                    </InputAdornment>
+                  ),
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="video"
+                name="video"
+                label="Upload video or enter url"
+                placeholder="Upload video or enter url"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.video || ''}
+              />
+              <FormControlLabel
+                className={classes.formControl}
+                control={
+                  <Switch
+                    id="isPlaying"
+                    checked={values.isPlaying}
+                    onChange={handleChange}
+                    value={values.isPlaying}
+                  />
                 }
-              }
-              style={{display: 'none'}}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="title"
-              name="title"
-              label="Enter Project Name"
-              placeholder="Enter Project Name"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.title || ''}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="subtitle"
-              name="subtitle"
-              label="Enter a sub heading description for your project"
-              placeholder="Enter a sub heading description for your project"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.subtitle || ''}
-            />
-            <TextField
-              id="commitTime"
-              name="commitTime"
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              label="Commit time in hours"
-              placeholder="Commit time in hours"
-              margin="normal"
-              variant="outlined"
-              helperText={helperText}
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.commitTime || ''}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="creator"
-              name="creator"
-              label="Enter the project creator"
-              placeholder="Enter the project creator"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.creator || ''}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <CloudUpload
-                      style={{ cursor: 'pointer' }}
-                      onClick={() => {
-                        const activeField = 'avatar'
-                        setStatus({ ...status, activeField })
-                        uploadInput.click()
-                      }
-                      }
-                    />
-                  </InputAdornment>
-                ),
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="avatar"
-              name="avatar"
-              label="Upload or enter link to creator avatar"
-              placeholder="upload or enter link to creator avatar"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.avatar || ''}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="goal"
-              name="goal"
-              label="Enter your funding goal"
-              placeholder="Enter your funding goal"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.goal || ''}
-            />
-            <CurrencySelect
-              className={classes.textField}
-              InputProps={{
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="goalToken"
-              label="Select Token"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.goalToken}
-            />
-            <TextField
-              className={classes.textField}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <CloudUpload
-                      style={{ cursor: 'pointer' }}
-                      onClick={() => {
-                        const activeField = 'video'
-                        setStatus({ ...status, activeField })
-                        uploadInput.click()
-                      }
-                      }
-                    />
-                  </InputAdornment>
-                ),
-                classes: {
-                  input: classes.textInput
-                }
-              }}
-              id="video"
-              name="video"
-              label="Upload video or enter url"
-              placeholder="Upload video or enter url"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.video || ''}
-            />
-            <FormControlLabel
-              className={classes.formControl}
-              control={
-                <Switch
-                  id="isPlaying"
-                  checked={values.isPlaying}
-                  onChange={handleChange}
-                  value={values.isPlaying}
-                />
-              }
-              label="Autoplay video?"
-            />
-            <TextField
-              className={classes.firstHalf}
-              InputProps={{
-                style: { height: '100%' }
-              }}
-              id="description"
-              name="description"
-              multiline
-              label="Enter extended description (markdown)"
-              placeholder="Enter extended description here (markdown)"
-              margin="normal"
-              variant="outlined"
-              onChange={handleChange}
-              onBlur={handleBlur}
-              value={values.description || ''}
-            />
-            <div className={classnames(classes.secondHalf, classes.markdown)}>
-              <ReactMarkdown source={values.description} />
+                label="Autoplay video?"
+              />
+              <TextField
+                className={classes.firstHalf}
+                InputProps={{
+                  style: { height: '100%' }
+                }}
+                id="description"
+                name="description"
+                multiline
+                label="Enter extended description (markdown)"
+                placeholder="Enter extended description here (markdown)"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.description || ''}
+              />
+              <div className={classnames(secondHalf, classes.markdown)}>
+                <ReactMarkdown source={values.description} />
+              </div>
+              <TextField
+                id="commitTime"
+                name="commitTime"
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                label="Commit time in hours"
+                placeholder="Commit time in hours"
+                margin="normal"
+                variant="outlined"
+                helperText={helperText}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.commitTime || ''}
+              />
+            </div>
+            <div className={secondHalf}>
+              <Button type="submit" color="primary" variant="contained" className={classnames(classes.formButton)}>{isSubmitting ? 'Ethereum Submission In Progress' : 'Create Project'}</Button>
+              <CurrencySelect
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="goalToken"
+                label="Select Token"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.goalToken}
+              />
+              <TextField
+                className={fullWidth}
+                InputProps={{
+                  classes: {
+                    input: classes.textInput
+                  }
+                }}
+                id="goal"
+                name="goal"
+                label="Enter your funding goal"
+                placeholder="Enter your funding goal"
+                margin="normal"
+                variant="outlined"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.goal || ''}
+              />
+              <input
+                ref={(input) => {
+                  uploadInput = input
+                }}
+                type="file"
+                multiple
+                onChange={
+                  (e) => {
+                    const file = e.target.files
+                    const {activeField} = status
+                    setFieldValue(activeField, file[0]['name'])
+                    setUploads({...uploads, [activeField]: file})
+                    setStatus({
+                      ...status,
+                      activeField: null
+                    })
+                  }
+                }
+                style={{display: 'none'}}
+              />
             </div>
-            <Button type="submit" color="primary" variant="contained" className={classes.formButton}>{isSubmitting ? 'Ethereum Submission In Progress' : 'Create Project'}</Button>
           </form>
         )
       }
@@ -412,7 +429,6 @@ const SubmissionSection = ({ classes, history }) => {
 function CreateProject({ classes, history }) {
   return (
     <div className={classes.root}>
-      <Title className={classes.title} />
       <SubmissionSection classes={classes} history={history} />
     </div>
   )