add read more link

add fine grained spacing

src/components/projects/ListProjects.jsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useContext } from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import { Link } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
 import classnames from 'classnames'
 import { useQuery } from '@apollo/react-hooks'
@@ -31,9 +32,18 @@ function FundingDetail({ classes, pledgesInfos, goal, goalToken }) {
   )
 }
 
+function Cell({ spacerClass, textClass, text }) {
+  return (
+    <Fragment>
+      <div className={spacerClass} />
+      <Typography className={textClass}>{text}</Typography>
+    </Fragment>
+  )
+}
+
 function ListProjects({ classes }) {
-  const { tableHeader, cellText } = classes
-  const { loading, error, data } = useQuery(getProjects);
+  const { tableHeader, cellText, cellColor, nameSpacer } = classes
+  const { loading, error, data } = useQuery(getProjects)
   if (loading) return <Loading />
   if (error) return <div>{`Error! ${error.message}`}</div>
   console.log({classes, loading, error, data})
@@ -49,22 +59,25 @@ function ListProjects({ classes }) {
       <Typography className={classes.tableTitle}>
         All Projects
       </Typography>
-      <Typography className={classnames(tableHeader, classes.headerName)}>Name</Typography>
+      <Cell spacerClass={nameSpacer} textClass={classnames(tableHeader, classes.headerName)} text="Name" />
       <Typography className={classnames(tableHeader, classes.headerDescription)}>Description</Typography>
       <Typography className={classnames(tableHeader, classes.headerDetails)}>Funding details</Typography>
       <Typography className={classnames(tableHeader, classes.headerContact)}>Contact person</Typography>
       <Typography className={classnames(tableHeader, classes.dateCreated)}>Date created</Typography>
       {profiles.map((profile, i) => {
-        const { id, projectInfo: { title, subtitle, goal, goalToken, creator, creationTime }, pledgesInfos } = profile
+        const { id, profileId, projectInfo: { title, subtitle, goal, goalToken, creator, creationTime }, pledgesInfos } = profile
         console.log({i, profile})
         const creationDate = getDateFromTimestamp(creationTime)
         return (
           <Fragment key={id}>
-            <Typography className={classnames(classes.headerName, cellText)}>{title}</Typography>
+            <Cell spacerClass={classnames(nameSpacer, cellColor)} textClass={classnames(classes.headerName, cellText)} text={title} />
             <Typography className={classnames(classes.headerDescription, cellText, classes.cellDescription)}>{subtitle}</Typography>
             <FundingDetail classes={classes} pledgesInfos={pledgesInfos} goal={goal} goalToken={goalToken} />
             <Typography className={classnames(classes.headerContact, cellText, classes.cellDescription)}>{creator}</Typography>
             <Typography className={classnames(classes.dateCreated, cellText, classes.cellDescription)}>{creationDate}</Typography>
+            <Link to={`/fund-project/${profileId}`} className={classnames(classes.readMore, cellText)}>
+              <Typography className={classnames(classes.blue, classes.px15)}>Read more</Typography>
+            </Link>
           </Fragment>
         )
       })}

src/components/projects/styles/ListProjects.js

@@ -1,5 +1,11 @@
 const styles = theme => ({
   theme,
+  blue: {
+    color: '#4360DF'
+  },
+  px15: {
+    fontSize: '0.9375rem'
+  },
   main: {
     display: 'grid',
     gridTemplateColumns: 'repeat(48, [col] 1fr)',
@@ -18,11 +24,10 @@ const styles = theme => ({
   cellText: {
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center',
-    fontSize: '1.2rem',
+    fontSize: '1rem',
     background: '#F5F7F8',
     flexFlow: 'column',
-    padding: '1rem'
+    padding: '1rem 1rem 1rem 0'
   },
   centerText: {
     textAlign: 'center'
@@ -30,6 +35,9 @@ const styles = theme => ({
   cellDescription: {
     fontSize: '1rem'
   },
+  cellColor: {
+    background: '#F5F7F8'
+  },
   fullWidth: {
     gridColumn: '1 / 49'
   },
@@ -44,6 +52,12 @@ const styles = theme => ({
     gridRow: '4 / 5'
   },
   headerName: {
+    gridColumn: '3 / 12'
+  },
+  nameSpacer: {
+    gridColumn: '2 / 3'
+  },
+  cellName: {
     gridColumn: '2 / 12'
   },
   headerDescription: {
@@ -56,10 +70,12 @@ const styles = theme => ({
     gridColumn: '35 / 40'
   },
   dateCreated: {
-    gridColumn: '40 / 45'
+    gridColumn: '40 / 44'
   },
   readMore: {
-    gridColumn: '45 / 48'
+    gridColumn: '44 / 48',
+    fontSize: '0.94rem',
+    textDecoration: 'none'
   },
   usdValue: {
     color: '#939BA1'