Fix component top margins

web/src/components/BlogPost/BlogPost.js

@@ -2,7 +2,7 @@ import { Link, routes } from '@redwoodjs/router'
 
 const BlogPost = ({ post }) => {
   return (
-    <article className="mt-10">
+    <article>
       <header>
         <h2 className="text-xl text-blue-700 font-semibold">
           <Link to={routes.blogPost({ id: post.id })}>{post.title}</Link>

web/src/components/BlogPost/BlogPost.stories.js

@@ -6,7 +6,8 @@ export const generated = () => {
       post={{
         id: 1,
         title: 'First Post',
-        body: 'Neutra tacos hot chicken prism raw denim...',
+        body:
+          'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.',
         createdAt: '2020-01-01T12:34:56Z',
       }}
     />

web/src/components/BlogPostCell/BlogPostCell.mock.js

@@ -2,9 +2,13 @@
 export const standard = (/* vars, { ctx, req } */) => ({
   post: {
     id: 1,
-    title: 'First post',
+    title: 'First Post',
-    body:
+    body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin
-      'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.',
+          post-ironic vape cred DIY. Street art next level umami squid. Hammock
+          hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four
+          loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing
+          hella shaman. Letterpress helvetica vaporware cronut, shaman butcher
+          YOLO poke fixie hoodie gentrify woke heirloom.`,
     createdAt: '2020-01-01T12:34:56Z',
   },
 })

web/src/components/BlogPostsCell/BlogPostsCell.js

@@ -20,9 +20,11 @@ export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ posts }) => {
   return (
-    <div className="-mt-12">
+    <div className="-mt-10">
       {posts.map((post) => (
-        <BlogPost key={post.id} post={post} />
+        <div key={post.id} className="mt-10">
+          <BlogPost post={post} />
+        </div>
       ))}
     </div>
   )

web/src/components/BlogPostsCell/BlogPostsCell.mock.js

@@ -3,16 +3,22 @@ export const standard = (/* vars, { ctx, req } */) => ({
   posts: [
     {
       id: 1,
-      title: 'First post',
+      title: 'First Post',
-      body:
+      body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin
-        'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.',
+            post-ironic vape cred DIY. Street art next level umami squid. Hammock
+            hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four
+            loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing
+            hella shaman. Letterpress helvetica vaporware cronut, shaman butcher
+            YOLO poke fixie hoodie gentrify woke heirloom.`,
       createdAt: '2020-01-01T12:34:56Z',
     },
     {
       id: 2,
-      title: 'Second post',
+      title: 'Second Post',
-      body:
+      body: `Master cleanse gentrify irony put a bird on it hexagon enamel pin.
-        'Master cleanse gentrify irony put a bird on it hexagon enamel pin. Pop-up man braid artisan pug tilde synth lo-fi. Ethical tofu portland keytar waistcoat. Pabst authentic hammock chillwave twee trust fund. Lyft humblebrag ramps irony unicorn.',
+            Pop-up man braid artisan pug tilde synth lo-fi. Ethical tofu portland
+            keytar waistcoat. Pabst authentic hammock chillwave twee trust fund.
+            Lyft humblebrag ramps irony unicorn.`,
       createdAt: '2020-01-01T12:34:56Z',
     },
   ],

web/src/pages/AboutPage/AboutPage.js

@@ -1,10 +1,10 @@
-import { Link,routes } from '@redwoodjs/router'
+import { Link, routes } from '@redwoodjs/router'
 import BlogLayout from 'src/layouts/BlogLayout'
 
 const AboutPage = () => {
   return (
     <BlogLayout>
-      <p>
+      <p className="font-light">
         This site was created to demonstrate my mastery of Redwood: Look on my
         works, ye mighty, and despair!
       </p>

web/src/pages/BlogPostPage/BlogPostPage.js

@@ -4,9 +4,7 @@ import BlogPostCell from 'src/components/BlogPostCell'
 const BlogPostPage = ({ id }) => {
   return (
     <BlogLayout>
-      <div className="-mt-12">
+      <BlogPostCell id={id} />
-        <BlogPostCell id={id} />
-      </div>
     </BlogLayout>
   )
 }