From dc8455f77baa1d4490a4a6cdfc5215a23508902b Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Wed, 20 Nov 2019 11:38:33 -0500
Subject: [PATCH] add box icons and images

---
 src/components/base/icons/IconByName.jsx   | 10 ++++++++--
 src/components/base/icons/Lightening.jsx   |  9 +++++++++
 src/components/base/icons/Wallet.jsx       |  8 ++++++++
 src/components/base/icons/lightening.svg   |  3 +++
 src/components/base/icons/wallet.svg       |  3 +++
 src/components/projects/ProjectsHeader.jsx | 11 +++++++++--
 6 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/components/base/icons/Lightening.jsx
 create mode 100644 src/components/base/icons/Wallet.jsx
 create mode 100644 src/components/base/icons/lightening.svg
 create mode 100644 src/components/base/icons/wallet.svg

diff --git a/src/components/base/icons/IconByName.jsx b/src/components/base/icons/IconByName.jsx
index 40956d1..6770a07 100644
--- a/src/components/base/icons/IconByName.jsx
+++ b/src/components/base/icons/IconByName.jsx
@@ -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',
diff --git a/src/components/base/icons/Lightening.jsx b/src/components/base/icons/Lightening.jsx
new file mode 100644
index 0000000..73cee60
--- /dev/null
+++ b/src/components/base/icons/Lightening.jsx
@@ -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
diff --git a/src/components/base/icons/Wallet.jsx b/src/components/base/icons/Wallet.jsx
new file mode 100644
index 0000000..42cee80
--- /dev/null
+++ b/src/components/base/icons/Wallet.jsx
@@ -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
diff --git a/src/components/base/icons/lightening.svg b/src/components/base/icons/lightening.svg
new file mode 100644
index 0000000..aabea44
--- /dev/null
+++ b/src/components/base/icons/lightening.svg
@@ -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>
diff --git a/src/components/base/icons/wallet.svg b/src/components/base/icons/wallet.svg
new file mode 100644
index 0000000..2521bc2
--- /dev/null
+++ b/src/components/base/icons/wallet.svg
@@ -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>
diff --git a/src/components/projects/ProjectsHeader.jsx b/src/components/projects/ProjectsHeader.jsx
index 0677d7d..bbc2fb2 100644
--- a/src/components/projects/ProjectsHeader.jsx
+++ b/src/components/projects/ProjectsHeader.jsx
@@ -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>