From c22674f3a79db4563830f6572c795bfcdea2597f Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Mon, 27 Jul 2020 02:14:48 -0700
Subject: [PATCH] Fix spacing of timeline squeak items (#154)

* Use box instead of widget for squeak components

* Use box instead of widget for squeak detail item component
---
 .../SqueakDetailItem/SqueakDetailItem.js         | 15 ++++++---------
 .../SqueakThreadItem/SqueakThreadItem.js         | 16 ++++++----------
 .../src/pages/squeak/Squeak.js                   |  4 ++--
 .../src/pages/squeakaddress/SqueakAddress.js     |  4 ++--
 .../src/pages/timeline/Timeline.js               |  4 ++--
 5 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
index acb66d82..32f01a36 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
+++ b/frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
@@ -56,13 +56,11 @@ export default function SqueakDetailItem({
   }
 
   return (
-    <Grid item xs={12}>
-        <Widget
-          disableWidgetMenu
-          upperTitle
-          bodyClass={classes.fullHeightBody}
-          className={classes.card}
-        >
+    <Box
+      p={1}
+      m={1}
+      bgcolor="background.paper"
+      >
           <Grid
             container
             direction="row"
@@ -129,7 +127,6 @@ export default function SqueakDetailItem({
                 </Box>
             </Grid>
           </Grid>
-        </Widget>
-    </Grid>
+    </Box>
   )
 }
diff --git a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js b/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
index a56296da..319b346a 100644
--- a/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
+++ b/frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
@@ -50,15 +50,12 @@ export default function SqueakThreadItem({
   }
 
   return (
-    <Grid item xs={12}
+    <Box
+      p={1}
+      m={1}
+      bgcolor="background.paper"
       onClick={onSqueakClick}
-    >
-        <Widget
-          disableWidgetMenu
-          upperTitle
-          bodyClass={classes.fullHeightBody}
-          className={classes.card}
-        >
+      >
           <Grid
             container
             direction="row"
@@ -100,7 +97,6 @@ export default function SqueakThreadItem({
                 </Box>
             </Grid>
           </Grid>
-        </Widget>
-    </Grid>
+    </Box>
   )
 }
diff --git a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js b/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js
index 9dfb36b5..75c9eeb2 100644
--- a/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js
+++ b/frontend/squeak-node-frontend/src/pages/squeak/Squeak.js
@@ -68,14 +68,14 @@ export default function SqueakPage() {
   function SqueakContent() {
     return (
       <>
-        <Grid container spacing={4} >
+        <div>
           <SqueakDetailItem
             key={squeak.getSqueakHash()}
             handleAddressClick={() => goToSqueakAddressPage(squeak.getAuthorAddress())}
             handleReplyClick={handleClickOpen}
             squeak={squeak}>
           </SqueakDetailItem>
-        </Grid>
+        </div>
         {MakeSqueakDialogContent()}
       </>
     )
diff --git a/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js b/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js
index 545342f3..ea1abb14 100644
--- a/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js
+++ b/frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js
@@ -93,7 +93,7 @@ export default function SqueakAddressPage() {
   function SqueaksContent() {
     return (
       <>
-        <Grid container spacing={4} >
+        <div>
           {squeaks.map(squeak =>
             <SqueakThreadItem
               key={squeak.getSqueakHash()}
@@ -101,7 +101,7 @@ export default function SqueakAddressPage() {
               squeak={squeak}>
             </SqueakThreadItem>
           )}
-          </Grid>
+        </div>
       </>
     )
   }
diff --git a/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js b/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js
index 34fd06f7..7e9dee61 100644
--- a/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js
+++ b/frontend/squeak-node-frontend/src/pages/timeline/Timeline.js
@@ -96,7 +96,7 @@ export default function TimelinePage() {
   function SqueaksContent() {
     return (
       <>
-        <Grid container spacing={4} >
+        <div>
         {squeaks.map(squeak =>
           <SqueakThreadItem
             key={squeak.getSqueakHash()}
@@ -105,7 +105,7 @@ export default function TimelinePage() {
             squeak={squeak}>
           </SqueakThreadItem>
         )}
-        </Grid>
+        </div>
       </>
     )
   }