From 6c8aa098607a89a7108688b4c5741eca0a67c96a Mon Sep 17 00:00:00 2001
From: Rob Cameron <rob.cameron@fastmail.com>
Date: Mon, 19 Oct 2020 16:35:19 -0700
Subject: [PATCH] Fix component top margins

---
 web/src/components/BlogPost/BlogPost.js        |  2 +-
 .../components/BlogPost/BlogPost.stories.js    |  3 ++-
 .../BlogPostCell/BlogPostCell.mock.js          | 10 +++++++---
 .../components/BlogPostsCell/BlogPostsCell.js  |  6 ++++--
 .../BlogPostsCell/BlogPostsCell.mock.js        | 18 ++++++++++++------
 web/src/pages/AboutPage/AboutPage.js           |  4 ++--
 web/src/pages/BlogPostPage/BlogPostPage.js     |  4 +---
 7 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/web/src/components/BlogPost/BlogPost.js b/web/src/components/BlogPost/BlogPost.js
index 746c4b7..9c48463 100644
--- a/web/src/components/BlogPost/BlogPost.js
+++ b/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>
diff --git a/web/src/components/BlogPost/BlogPost.stories.js b/web/src/components/BlogPost/BlogPost.stories.js
index 3e9af9e..8da5013 100644
--- a/web/src/components/BlogPost/BlogPost.stories.js
+++ b/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',
       }}
     />
diff --git a/web/src/components/BlogPostCell/BlogPostCell.mock.js b/web/src/components/BlogPostCell/BlogPostCell.mock.js
index c4511f9..94f5956 100644
--- a/web/src/components/BlogPostCell/BlogPostCell.mock.js
+++ b/web/src/components/BlogPostCell/BlogPostCell.mock.js
@@ -2,9 +2,13 @@
 export const standard = (/* vars, { ctx, req } */) => ({
   post: {
     id: 1,
-    title: 'First post',
-    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.',
+    title: 'First Post',
+    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',
   },
 })
diff --git a/web/src/components/BlogPostsCell/BlogPostsCell.js b/web/src/components/BlogPostsCell/BlogPostsCell.js
index 4fb5570..2830f32 100644
--- a/web/src/components/BlogPostsCell/BlogPostsCell.js
+++ b/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>
   )
diff --git a/web/src/components/BlogPostsCell/BlogPostsCell.mock.js b/web/src/components/BlogPostsCell/BlogPostsCell.mock.js
index b4f5b2d..ddc4573 100644
--- a/web/src/components/BlogPostsCell/BlogPostsCell.mock.js
+++ b/web/src/components/BlogPostsCell/BlogPostsCell.mock.js
@@ -3,16 +3,22 @@ export const standard = (/* vars, { ctx, req } */) => ({
   posts: [
     {
       id: 1,
-      title: 'First post',
-      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.',
+      title: 'First Post',
+      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',
     },
     {
       id: 2,
-      title: 'Second post',
-      body:
-        '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.',
+      title: 'Second Post',
+      body: `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.`,
       createdAt: '2020-01-01T12:34:56Z',
     },
   ],
diff --git a/web/src/pages/AboutPage/AboutPage.js b/web/src/pages/AboutPage/AboutPage.js
index 59c059a..64fa0db 100644
--- a/web/src/pages/AboutPage/AboutPage.js
+++ b/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>
diff --git a/web/src/pages/BlogPostPage/BlogPostPage.js b/web/src/pages/BlogPostPage/BlogPostPage.js
index e6cb9dd..d297e20 100644
--- a/web/src/pages/BlogPostPage/BlogPostPage.js
+++ b/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} />
-      </div>
+      <BlogPostCell id={id} />
     </BlogLayout>
   )
 }