add IconTextField

add boxarrow icon
add code repo field

src/components/base/IconTextField.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Icon from './icons/IconByName'
+import StatusTextField from './TextField'
+
+const styles = () => ({
+  iconRoot: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, [col] 1fr)',
+    gridColumnStart: 1,
+    gridColumnEnd: 13,
+    alignItems: 'center'
+  },
+  icon: {
+    gridColumnStart: 1,
+    gridColumnEnd: 2
+  },
+  textField: {
+    gridColumnStart: 2,
+    gridColumnEnd: 13
+  }
+})
+
+function IconTextField(props) {
+  const { iconName, classes } = props
+  return (
+    <div className={classes.iconRoot}>
+      <Icon name={iconName} className={classes.icon} />
+      <StatusTextField {...props} className={classes.textField} />
+    </div>
+  )
+}
+
+export default withStyles(styles)(IconTextField)

src/components/base/TextField.jsx

@@ -11,12 +11,14 @@ const styles = theme => ({
   container: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
-    gridTemplateRows: 'auto auto 5px'
+    gridTemplateRows: 'auto auto 5px',
   },
   margin: {
     margin: theme.spacing.unit,
   },
   root: {
+    gridColumnStart: 1,
+    gridColumnEnd: 13,
     'label + &': {
       gridRowStart: 2,
       gridColumnStart: 1,

src/components/base/icons/BoxArrow.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const SVG = () =>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.25 1V0.75H19H11.6364H11.3864V1V2.09091V2.34091H11.6364H16.5343L7.5285 11.3467L7.35172 11.5235L7.5285 11.7002L8.29977 12.4715L8.47655 12.6483L8.65332 12.4715L17.6591 3.46574V8.36364V8.61364H17.9091H19H19.25V8.36364V1ZM11.0909 4.52273H11.3409V4.27273V3.18182V2.93182H11.0909H2.36364C1.47366 2.93182 0.75 3.65548 0.75 4.54546V17.6364C0.75 18.5263 1.47366 19.25 2.36364 19.25H15.4545C16.3445 19.25 17.0682 18.5263 17.0682 17.6364V8.90909V8.65909H16.8182H15.7273H15.4773V8.90909V17.6364C15.4773 17.6388 15.4762 17.6448 15.4696 17.6514C15.463 17.658 15.457 17.6591 15.4545 17.6591H2.36364C2.36121 17.6591 2.35523 17.658 2.34862 17.6514C2.34201 17.6448 2.34091 17.6388 2.34091 17.6364V4.54546C2.34091 4.54302 2.34201 4.53705 2.34862 4.53044C2.35523 4.52383 2.3612 4.52273 2.36364 4.52273H11.0909Z" fill="#939BA1" stroke="#939BA1" strokeWidth="0.5"/>
+  </svg>
+
+export default SVG

src/components/base/icons/IconByName.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import OneOnOneChat from './OneOnOneChat'
+import BoxArrow from './BoxArrow'
 
 const ONE_ON_ONE_CHAT = 'oneOnOneChat'
+const BOX_ARROW = 'boxArrow'
 const icons = {
-  [ONE_ON_ONE_CHAT]: OneOnOneChat
+  [ONE_ON_ONE_CHAT]: OneOnOneChat,
+  [BOX_ARROW]: BoxArrow
 }
 
 const Icon = ({ name }) => {
@@ -13,7 +16,8 @@ const Icon = ({ name }) => {
       background: '#ECEFFC',
       borderRadius: '50%',
       padding: '10px',
-      maxHeight: '45px'
+      maxHeight: '45px',
+      justifySelf: 'center'
     }}>
       <Component />
     </div>

src/components/base/icons/Vector.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.25 1V0.75H19H11.6364H11.3864V1V2.09091V2.34091H11.6364H16.5343L7.5285 11.3467L7.35172 11.5235L7.5285 11.7002L8.29977 12.4715L8.47655 12.6483L8.65332 12.4715L17.6591 3.46574V8.36364V8.61364H17.9091H19H19.25V8.36364V1ZM11.0909 4.52273H11.3409V4.27273V3.18182V2.93182H11.0909H2.36364C1.47366 2.93182 0.75 3.65548 0.75 4.54546V17.6364C0.75 18.5263 1.47366 19.25 2.36364 19.25H15.4545C16.3445 19.25 17.0682 18.5263 17.0682 17.6364V8.90909V8.65909H16.8182H15.7273H15.4773V8.90909V17.6364C15.4773 17.6388 15.4762 17.6448 15.4696 17.6514C15.463 17.658 15.457 17.6591 15.4545 17.6591H2.36364C2.36121 17.6591 2.35523 17.658 2.34862 17.6514C2.34201 17.6448 2.34091 17.6388 2.34091 17.6364V4.54546C2.34091 4.54302 2.34201 4.53705 2.34862 4.53044C2.35523 4.52383 2.3612 4.52273 2.36364 4.52273H11.0909Z" fill="#939BA1" stroke="#939BA1" stroke-width="0.5"/>
+</svg>

src/components/projects/CreateProject.jsx

@@ -15,6 +15,7 @@ import { FundingContext } from '../../context'
 import {ZERO_ADDRESS} from '../../utils/address'
 import CurrencySelect from '../base/CurrencySelect'
 import StatusTextField from '../base/TextField'
+import IconTextField from '../base/IconTextField'
 import Icon from '../base/icons/IconByName'
 
 const { addProject } = LiquidPledging.methods
@@ -250,7 +251,7 @@ const SubmissionSection = ({ classes, history }) => {
                 name="creator"
                 label="Contact Person"
                 bottomLeftLabel="Name of the primary contact"
-                placeholder="Short Description"
+                placeholder="Contract Person"
                 onChange={handleChange}
                 onBlur={handleBlur}
                 value={values.creator || ''}
@@ -259,6 +260,15 @@ const SubmissionSection = ({ classes, history }) => {
                 <Icon name="oneOnOneChat" />
                 <div className={classes.chatText}>{`Join #status-${values.title.replace(/\s/g, '')}`}</div>
               </div>
+              <IconTextField
+                iconName="boxArrow"
+                idFor="repo"
+                name="repo"
+                placeholder="Code Repo"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                value={values.repo || ''}
+              />
               <TextField
                 className={classes.textField}
                 InputProps={{