From 52d1f59de01537698be0ac40efa198e04ce47b3b Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Mon, 27 Jul 2020 15:12:03 -0700
Subject: [PATCH] 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
---
 .../components/SqueakDetailItem/SqueakDetailItem.js   |  2 +-
 .../components/SqueakThreadItem/SqueakThreadItem.js   |  2 +-
 .../squeak-node-frontend/src/pages/squeak/Squeak.js   | 11 ++++++++++-
 .../src/pages/squeakaddress/SqueakAddress.js          | 10 +++++++++-
 .../src/pages/timeline/Timeline.js                    |  5 +++++
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
index 14b5eaae..d838452d 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
+++ b/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
diff --git a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js b/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
index 319b346a..f5aa6b68 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
+++ b/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}
       >
diff --git a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js b/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js
index c4b8addf..137478bf 100644
--- a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js
+++ b/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>
diff --git a/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js b/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js
index ea1abb14..ef585498 100644
--- a/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js
+++ b/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>
       </>
diff --git a/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js b/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js
index 7e9dee61..13026516 100644
--- a/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js
+++ b/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>
       </>