add list projects component

add initial list projects layout

src/components/MainCointainer.jsx

@@ -32,6 +32,7 @@ import BackProject from './projects/BackProject'
 import ProjectPledges from './projects/ProjectPledges'
 import CreateProject from './projects/CreateProject'
 import CreateDelegate from './projects/CreateDelegate'
+import ListProjects from './projects/ListProjects'
 
 const drawerWidth = 240
 const formatAccount = account => {
@@ -225,7 +226,8 @@ class PersistentDrawerLeft extends React.Component {
           <div className={classes.drawerHeader} />
           <div className={classNames(classes.appBar)}>
             <Switch>
-              <Route path="/(|dashboard)" component={Dashboard} />
+              <Route path="/(|list-projects)" component={ListProjects} />
+              <Route path="/dashboard" component={Dashboard} />
               <Route path="/admin" component={ContractAdmin} />
               <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
               <Route path="/insights" component={TransferGraph} />

src/components/projects/ListProjects.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import classnames from 'classnames'
+import styles from './styles/ListProjects'
+
+function ListProjects({ classes }) {
+  console.log({classes})
+  return (
+    <div className={classes.main}>
+      <Typography className={classnames(classes.title, classes.fullWidth)}>
+        Liquid Funding
+      </Typography>
+      <Typography className={classnames(classes.subTitle, classes.fullWidth)}>
+        Fund. Build. Together.
+      </Typography>
+      <Typography className={classes.tableTitle}>
+        All Projects
+      </Typography>
+      <Typography className={classnames(classes.tableHeader, classes.headerName)}>Name</Typography>
+      <Typography className={classnames(classes.tableHeader, classes.headerDescription)}>Description</Typography>
+      <Typography className={classnames(classes.tableHeader, classes.headerDetails)}>Funding details</Typography>
+      <Typography className={classnames(classes.tableHeader, classes.headerContact)}>Contact person</Typography>
+      <Typography className={classnames(classes.tableHeader, classes.dateCreated)}>Date created</Typography>
+    </div>
+  )
+}
+
+export default withStyles(styles)(ListProjects)

src/components/projects/styles/ListProjects.js

@@ -0,0 +1,50 @@
+const styles = theme => ({
+  theme,
+  main: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(48, [col] 1fr)',
+    gridTemplateRows: '1fr 1fr 1fr'
+  },
+  title: {
+    fontSize: '2.5rem',
+    textAlign: 'center'
+
+  },
+  subTitle: {
+    color: '#4360DF',
+    fontSize: '1.5rem',
+    textAlign: 'center'
+  },
+  fullWidth: {
+    gridColumn: '1 / 49'
+  },
+  tableTitle: {
+    color: '#939BA1',
+    fontSize: '1.2rem',
+    gridColumn: '3 / 49'
+  },
+  tableHeader: {
+    color: 'rgba(147, 155, 161, 0.4)',
+    fontSize: '0.9rem',
+    gridRow: '4 / 5'
+  },
+  headerName: {
+    gridColumn: '3 / 13'
+  },
+  headerDescription: {
+    gridColumn: '13 / 23'
+  },
+  headerDetails: {
+    gridColumn: '23 / 28'
+  },
+  headerContact: {
+    gridColumn: '30 / 35'
+  },
+  dateCreated: {
+    gridColumn: '37 / 42'
+  },
+  readMore: {
+    gridColumn: '43 / 46'
+  }
+})
+export default styles