chore: post design adjustments

omsimos · Aug 20, 2024 · cd12cd4 · cd12cd4
1 parent 9b597aa
commit cd12cd4
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/apps/social/src/app/components/feed.tsx b/apps/social/src/app/components/feed.tsx
@@ -34,11 +34,11 @@ export const userPlaceholder = [
 
 export function Feed() {
   return (
-    <main className="container">
+    <main>
       <section className="pt-6 w-full max-w-xl mx-auto bg-background border-muted">
         <PostForm />
 
-        <div className="border-t space-y-6 pt-6">
+        <div className="border-y space-y-6 pt-6 bg-card sm:rounded-md sm:border-x">
           {userPlaceholder.map((props) => (
             <PostCard key={props.createdAt} {...props} />
           ))}

diff --git a/apps/social/src/app/components/post-card.tsx b/apps/social/src/app/components/post-card.tsx
@@ -23,7 +23,7 @@ type Props = {
 
 export function PostCard(props: Props) {
   return (
-    <div className="flex space-x-3 sm:px-0 container border-b border-muted pb-6 text-[15px]">
+    <div className="flex space-x-3 container border-b last-of-type:border-b-0 border-muted pb-6 text-[15px]">
       <Avatar>
         <AvatarImage src={props.imageUrl} alt="User avatar" />
         <AvatarFallback>

diff --git a/apps/social/src/app/post/components/post-form.tsx b/apps/social/src/app/post/components/post-form.tsx
@@ -43,7 +43,7 @@ export default function PostForm() {
             setTextAreaCount(e.target.value.length);
           }}
           placeholder="How's your day going?"
-          className="focus-visible:ring-transparent text-base lg:max-h-[400px] max-h-[250px] bg-muted/20"
+          className="focus-visible:ring-transparent text-base lg:max-h-[400px] max-h-[250px] bg-card caret-pink-300"
           autoComplete="off"
         />
         <div className="flex w-full justify-between items-center">

diff --git a/apps/social/src/app/post/components/reply-form.tsx b/apps/social/src/app/post/components/reply-form.tsx
@@ -43,7 +43,7 @@ export default function ReplyForm({ user }: { user: User | null }) {
           }}
           maxLength={500}
           placeholder="Leave a reply..."
-          className="focus-visible:ring-transparent text-sm resize-none min-h-10 max-h-20 bg-muted"
+          className="focus-visible:ring-transparent text-sm resize-none min-h-10 max-h-20 bg-muted/50 caret-pink-300"
           autoComplete="off"
         />
         <Button