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

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>
   )
 }

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>
   )
 }

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()}
       </>
     )

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>
       </>
     )
   }

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>
       </>
     )
   }