Fix squeak list item padding (#158)

* Fix padding and margin for squeak list item

* Fix padding and margin for squeak detail page and ancestor thread

frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -58,7 +58,7 @@ export default function SqueakDetailItem({
   return (
     <Box
       p={1}
-      m={1}
+      m={0}
       bgcolor="background.paper"
       >
           <Grid

frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js

@@ -52,7 +52,7 @@ export default function SqueakThreadItem({
   return (
     <Box
       p={1}
-      m={1}
+      m={0}
       bgcolor="background.paper"
       onClick={onSqueakClick}
       >

frontend/squeak-node-frontend/src/pages/squeak/Squeak.js

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {useHistory} from "react-router-dom";
-import { Grid, Button } from "@material-ui/core";
+import {
+  Grid,
+  Button,
+  Divider,
+  Box,
+} from "@material-ui/core";
 
 // styles
 import useStyles from "./styles";
@@ -100,12 +105,16 @@ export default function SqueakPage() {
           {ancestorSqueaks.slice(0, -1)
             //.reverse()
             .map(ancestorSqueak =>
+            <Box
+              >
             <SqueakThreadItem
               key={ancestorSqueak.getSqueakHash()}
               handleAddressClick={() => goToSqueakAddressPage(ancestorSqueak.getAuthorAddress())}
               handleSqueakClick={() => goToSqueakPage(ancestorSqueak.getSqueakHash())}
               squeak={ancestorSqueak}>
             </SqueakThreadItem>
+            <Divider />
+            </Box>
           )}
         </div>
         <div>

frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {useHistory} from "react-router-dom";
-import { Grid, Button } from "@material-ui/core";
+import {
+   Grid,
+   Button,
+   Box,
+} from "@material-ui/core";
 
 // styles
 import useStyles from "./styles";
@@ -95,11 +99,15 @@ export default function SqueakAddressPage() {
       <>
         <div>
           {squeaks.map(squeak =>
+            <Box
+              p={1}
+              >
             <SqueakThreadItem
               key={squeak.getSqueakHash()}
               handleSqueakClick={() => goToSqueakPage(squeak.getSqueakHash())}
               squeak={squeak}>
             </SqueakThreadItem>
+            </Box>
           )}
         </div>
       </>

frontend/squeak-node-frontend/src/pages/timeline/Timeline.js

@@ -5,6 +5,7 @@ import {
   Grid,
   Button,
   Fab,
+  Box,
 } from "@material-ui/core";
 import { useTheme } from "@material-ui/styles";
 import {
@@ -98,12 +99,16 @@ export default function TimelinePage() {
       <>
         <div>
         {squeaks.map(squeak =>
+          <Box
+            p={1}
+            >
           <SqueakThreadItem
             key={squeak.getSqueakHash()}
             handleAddressClick={() => goToSqueakAddressPage(squeak.getAuthorAddress())}
             handleSqueakClick={() => goToSqueakPage(squeak.getSqueakHash())}
             squeak={squeak}>
           </SqueakThreadItem>
+          </Box>
         )}
         </div>
       </>