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 box icons and images

This commit is contained in:
Barry Gitarts 2019-11-20 11:38:33 -05:00 committed by Barry G
parent c5f8d99da6
commit dc8455f77b
6 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,24 @@ import BoxArrow from './BoxArrow'
import CheckMark from './CheckMark'
import Photo from './Photo'
import AddPerson from './AddPerson'
import Lightening from './Lightening'
import Wallet from './Wallet'
const ADD_PERSON = 'addPerson'
const CHECK = 'check'
const ONE_ON_ONE_CHAT = 'oneOnOneChat'
const BOX_ARROW = 'boxArrow'
const PHOTO = 'photo'
const LIGHTENING = 'lightening'
const WALLET = 'wallet'
const icons = {
[ADD_PERSON]: AddPerson,
[CHECK]: CheckMark,
[ONE_ON_ONE_CHAT]: OneOnOneChat,
[BOX_ARROW]: BoxArrow,
[PHOTO]: Photo
[PHOTO]: Photo,
[LIGHTENING]: Lightening,
[WALLET]: Wallet
}
const Icon = ({ name, centered, text }) => {
@ -25,7 +31,7 @@ const Icon = ({ name, centered, text }) => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: '#ECEFFC',
background: '#1AA56E1A',
borderRadius: '50%',
height: '3rem',
width: '3rem',

9
src/components/base/icons/Lightening.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
const SVG = () =>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M11.3982 0.0826934C11.8054 0.259462 12.0474 0.683531 11.9923 1.12403L11.1328 8H19C19.388 8 19.741 8.22445 19.9056 8.57584C20.0702 8.92723 20.0166 9.3421 19.7682 9.64018L9.76823 21.6402C9.48404 21.9812 9.00903 22.0941 8.60182 21.9173C8.1946 21.7405 7.95267 21.3165 8.00773 20.876L8.86723 14H1.00001C0.611995 14 0.259003 13.7755 0.0944228 13.4242C-0.070157 13.0728 -0.0166119 12.6579 0.231791 12.3598L10.2318 0.35981C10.516 0.0187764 10.991 -0.0940753 11.3982 0.0826934ZM3.13505 12H9.43362C10.3359 12 11.0339 12.7908 10.922 13.686L10.4154 17.7395L16.865 10H10.5664C9.66416 10 8.96608 9.20922 9.07799 8.31394L9.58467 4.26045L3.13505 12Z" fill="#1AA56E"/>
</svg>
export default SVG

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

@ -0,0 +1,8 @@
import React from 'react'
const SVG = () =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6.32C0 4.395 1.371 2.743 3.263 2.389L14.816 0.222C15.431 0.107 16 0.579 16 1.205V3C16 3.553 15.552 4 15 4H3.618C3.239 4 2.893 4.214 2.724 4.553L2.5 5C2.27 5.46 2.604 6 3.118 6H17C17.552 6 18 6.448 18 7V17C18 17.553 17.552 18 17 18H4C1.791 18 0 16.21 0 14V6.32ZM13 12C13 12.829 13.672 13.5 14.5 13.5C15.328 13.5 16 12.829 16 12C16 11.172 15.328 10.5 14.5 10.5C13.672 10.5 13 11.172 13 12Z" fill="#1AA56E"/>
</svg>
export default SVG

3
src/components/base/icons/lightening.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3982 0.0826934C11.8054 0.259462 12.0474 0.683531 11.9923 1.12403L11.1328 8H19C19.388 8 19.741 8.22445 19.9056 8.57584C20.0702 8.92723 20.0166 9.3421 19.7682 9.64018L9.76823 21.6402C9.48404 21.9812 9.00903 22.0941 8.60182 21.9173C8.1946 21.7405 7.95267 21.3165 8.00773 20.876L8.86723 14H1.00001C0.611995 14 0.259003 13.7755 0.0944228 13.4242C-0.070157 13.0728 -0.0166119 12.6579 0.231791 12.3598L10.2318 0.35981C10.516 0.0187764 10.991 -0.0940753 11.3982 0.0826934ZM3.13505 12H9.43362C10.3359 12 11.0339 12.7908 10.922 13.686L10.4154 17.7395L16.865 10H10.5664C9.66416 10 8.96608 9.20922 9.07799 8.31394L9.58467 4.26045L3.13505 12Z" fill="#1AA56E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 804 B

3
src/components/base/icons/wallet.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6.32C0 4.395 1.371 2.743 3.263 2.389L14.816 0.222C15.431 0.107 16 0.579 16 1.205V3C16 3.553 15.552 4 15 4H3.618C3.239 4 2.893 4.214 2.724 4.553L2.5 5C2.27 5.46 2.604 6 3.118 6H17C17.552 6 18 6.448 18 7V17C18 17.553 17.552 18 17 18H4C1.791 18 0 16.21 0 14V6.32ZM13 12C13 12.829 13.672 13.5 14.5 13.5C15.328 13.5 16 12.829 16 12C16 11.172 15.328 10.5 14.5 10.5C13.672 10.5 13 11.172 13 12Z" fill="#1AA56E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 521 B

11
src/components/projects/ProjectsHeader.jsx
View File

@ -6,6 +6,7 @@ import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import classnames from 'classnames'
import StatusButton from '../base/Button'
import Icon from '../base/icons/IconByName'
const useStyles = makeStyles(({
palette: {
@ -31,6 +32,10 @@ const useStyles = makeStyles(({
background: '#FFFFFF',
padding: '1rem'
},
cardContent: {
display: 'grid',
gridTemplateRows: '3.5rem 1.5rem auto 2rem'
},
fundersCard: {
gridColumn: '26 / 39',
boxShadow: '0px 15px 29px rgba(0, 34, 51, 0.08)',
@ -60,7 +65,8 @@ function CreatorsCard() {
return (
<Card className={classes.creatorsCard}>
<CardContent>
<CardContent className={classes.cardContent}>
<Icon name="lightening" />
<Typography className={classes.cardMainFont}>
Platform for
</Typography>
@ -88,7 +94,8 @@ function FundersCard() {
return (
<Card className={classes.fundersCard}>
<CardContent>
<CardContent className={classes.cardContent}>
<Icon name="wallet" />
<Typography className={classes.cardMainFont}>
Platform for
</Typography>