From 82900a6619bc32e24b7d0bd2efba5c7944e4ac83 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Mon, 11 Sep 2023 14:03:55 -0500
Subject: [PATCH] style: styling on users posts and posts. chore: add todos

---
 src/components/Post.tsx        | 6 +++++-
 src/components/UserPosts.tsx   | 8 +++++---
 src/components/UserProfile.tsx | 7 +++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index b364b83..b4f1bd3 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -17,8 +17,12 @@ export default function Post({ post }: { post: PostWithUserDto }) {
   // and we should display a 'more' link to load the post
   // in an individual page
 
+  // TODO: Add menu button
+
+  // TODO: Add reply and like buttons
+
   return (
-    <div className='flex w-full h-full gap-4 p-8 bg-white dark:bg-secondary-gray border border-gray-600'>
+    <div className='flex w-full h-full gap-4 p-8 bg-white dark:bg-secondary-gray'>
       <div>
         <Image
           alt='user profile image'
diff --git a/src/components/UserPosts.tsx b/src/components/UserPosts.tsx
index 1d73f12..9ee43c9 100644
--- a/src/components/UserPosts.tsx
+++ b/src/components/UserPosts.tsx
@@ -21,10 +21,12 @@ export default function UserPosts({ user }: { user: UserDto }) {
   return (
     <div className='flex flex-col items-center w-full h-full'>
       {postsWithUser.map(post => (
-        <Post
+        <div
           key={post._id}
-          post={post}
-        />
+          className='w-full h-full border border-b-0 border-gray-600 last:border-b'
+        >
+          <Post post={post} />
+        </div>
       ))}
       {pager.isLoading ? (
         <div className='flex items-center gap-2 p-5'>
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 17226af..23413fe 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -1,7 +1,6 @@
+import { UserDto } from '@/app/types';
 import Image from 'next/image';
 import { AiFillCalendar } from 'react-icons/ai';
-import { Doc, Id } from '../../convex/_generated/dataModel';
-import { UserDto } from '@/app/types';
 
 export default function UserProfile({ user }: { user: UserDto }) {
   const username = user.clerkUsername ?? user._id;
@@ -24,7 +23,7 @@ export default function UserProfile({ user }: { user: UserDto }) {
               className='rounded-full object-cover border-4 border-primary-accent'
             />
           </div>
-          <div>
+          <div className='text-white'>
             <h1 className='font-bold'>{username}</h1>
             <div className='flex gap-2 items-center text-sm'>
               <AiFillCalendar className='w-4 h-4' />
@@ -33,7 +32,7 @@ export default function UserProfile({ user }: { user: UserDto }) {
           </div>
         </div>
       </div>
-      <div className='h-[50px] bg-white dark:bg-primary-gray pl-5 pr-40 border border-gray-600'></div>
+      <div className='h-[50px] bg-white dark:bg-primary-gray pl-5 pr-40 border border-gray-600 border-b-0'></div>
     </div>
   );
 }