feat: increase spacing between polls

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index 6a99167..28411ec 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Poll } from 'which-types';
 import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import PollCard from '../PollCard/PollCard';
@@ -14,6 +15,12 @@ interface PropTypes {
   _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingBottom: theme.spacing(8)
+  }
+}));
+
 const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
   if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
@@ -26,6 +33,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
 const RenderItem: React.FC<PropTypes> = React.memo(({
   polls, mutate, index, style, cache, parent, _key
 }) => {
+  const classes = useStyles();
   const poll = polls[index];
   const setPoll = useCallback((newPoll: Poll) => {
     const newPolls = [...polls];
@@ -43,7 +51,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
       rowIndex={index}
       parent={parent}
     >
-      <div key={`${_key}-${poll._id}`} style={{ ...style, paddingBottom: '20px' }}>
+      <div key={`${_key}-${poll._id}`} className={classes.root} style={style}>
         <PollCard poll={poll} setPoll={setPoll} />
       </div>
     </CellMeasurer>