From e6a90e18e4d443348b239e39d936ed26de3181a7 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 12 Oct 2022 11:59:27 -0500
Subject: [PATCH] Add more padding and improve layout of post card

---
 web/components/post-card.tsx | 51 ++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/web/components/post-card.tsx b/web/components/post-card.tsx
index 700f8301..7c268734 100644
--- a/web/components/post-card.tsx
+++ b/web/components/post-card.tsx
@@ -8,6 +8,7 @@ import { fromNow } from 'web/lib/util/time'
 import { Avatar } from './avatar'
 import { Card } from './card'
 import { CardHighlightOptions } from './contract/contracts-grid'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { UserLink } from './user-link'
 
@@ -22,39 +23,39 @@ export function PostCard(props: {
   return (
     <Card
       className={clsx(
-        'group relative flex gap-3 py-2 px-3',
+        'group relative flex gap-3 py-4 px-6',
         itemIds?.includes(post.id) && highlightClassName
       )}
     >
-      <Row className="flex grow  justify-between">
-        <div className="">
-          <Row className="items-center text-sm ">
-            <Avatar
-              className="mx-1 h-7 w-7"
-              username={post.creatorUsername}
-              avatarUrl={post.creatorAvatarUrl}
-            />
-            <UserLink
-              className=" text-gray-400"
-              name={post.creatorName}
-              username={post.creatorUsername}
-            />
-            <span className="mx-1 text-gray-400">•</span>
-            <span className="text-gray-400">{fromNow(post.createdTime)}</span>
+      <Row className="flex grow justify-between">
+        <Col className="gap-2">
+          <Row className="items-center justify-between">
+            <Row className="items-center text-sm">
+              <Avatar
+                className="mx-1 h-7 w-7"
+                username={post.creatorUsername}
+                avatarUrl={post.creatorAvatarUrl}
+              />
+              <UserLink
+                className="text-gray-400"
+                name={post.creatorName}
+                username={post.creatorUsername}
+              />
+              <span className="mx-1 text-gray-400">•</span>
+              <span className="text-gray-400">{fromNow(post.createdTime)}</span>
+            </Row>
+            <div className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
+              <DocumentIcon className={'h3 w-3'} />
+              Post
+            </div>
           </Row>
-          <div className=" break-words text-lg font-semibold  text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
+          <div className="break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
             {post.title}
           </div>
-          <div className="font-small  text-md  break-words text-gray-500">
+          <div className="font-small text-md break-words text-gray-500">
             {post.subtitle}
           </div>
-        </div>
-        <div>
-          <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
-            <DocumentIcon className={'h3 w-3'} />
-            Post
-          </span>
-        </div>
+        </Col>
       </Row>
       {onPostClick ? (
         <a