From e738ccef480b347a164e26f7d5187e3aae412a19 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Tue, 1 Oct 2019 12:54:02 -0400
Subject: [PATCH] adjust checkbox style

---
 src/components/Pledges.jsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Pledges.jsx b/src/components/Pledges.jsx
index d682d62..25edf1b 100644
--- a/src/components/Pledges.jsx
+++ b/src/components/Pledges.jsx
@@ -46,14 +46,24 @@ const styles = () => ({
     gridColumn: '24 / 30'
   },
   headerSelect: {
-    gridColumn: '31 / 35'
+    gridColumn: '31 / 34'
   },
   select: {
-    gridColumn: '35 / 37'
+    gridColumn: '34 / 36'
   },
   checkBox: {
+    paddingTop: 0,
+    alignItems: 'normal',
     '&:hover': {
       backgroundColor: 'transparent'
+    },
+    '& svg': {
+      background: 'radial-gradient(#EEF2F5, transparent)'
+    }
+  },
+  checked: {
+    '&&:hover': {
+      backgroundColor: 'transparent'
     }
   }
 })
@@ -70,7 +80,7 @@ function TableHeader() {
       <Typography className={classnames(tableHeader, classes.headerId)}>Pledge ID</Typography>
       <Typography className={classnames(tableHeader, classes.headerFunded)}>Funded on</Typography>
       <Typography className={classnames(tableHeader, classes.headerSelect)}>Select all</Typography>
-      <Checkbox className={classnames(classes.select, classes.checkBox)} color="primary" disableRipple labelPlacement="start" label="start" />
+      <Checkbox classes={{ root: classnames(classes.select, classes.checkBox), checked: classes.checked }} color="primary" disableRipple labelPlacement="start" label="start" />
     </Fragment>
   )
 }
@@ -84,7 +94,7 @@ function TableRow({ pledge, amtFormatter, tokenLabel }) {
       <Typography className={classes.rowAmount}>{amtFormatter(amount)} {tokenLabel}</Typography>
       <Typography className={classes.rowId}>{toDecimal(id)}</Typography>
       <Typography className={classes.rowFunded}>{getDateFromTimestamp(creationTime, true)}</Typography>
-      <Checkbox className={classnames(classes.select, classes.checkBox)} color="primary" disableRipple />
+      <Checkbox classes={{ root: classnames(classes.select, classes.checkBox), checked: classes.checked }} color="primary" disableRipple />
     </Fragment>
   )
 }