status-im
/
liquid-funding
mirror of https://github.com/status-im/liquid-funding.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add IconTextField 

add boxarrow icon
add code repo field
This commit is contained in:
Barry Gitarts 2019-07-19 11:03:10 -04:00 committed by Barry G
parent 39e1f4be7e
commit c89f26e6fb
6 changed files with 65 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/base/IconTextField.jsx Normal file
View File

@ -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)

4
src/components/base/TextField.jsx
View File

@ -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,

8
src/components/base/icons/BoxArrow.jsx Normal file
View File

@ -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

8
src/components/base/icons/IconByName.jsx
View File

@ -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>

3
src/components/base/icons/Vector.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

12
src/components/projects/CreateProject.jsx
View File

@ -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={{