update home ui

Author: BasharElmetwaliahmed

src/Components/Home/HomeContent/HomeContent.jsx

@@ -8,7 +8,7 @@ function HomeContent() {
 
   return (
     <div className="w-1/2 h-full  shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)] bg-[rgba(252,250,248,1)]">  
-    <div className="w-[700px]  mx-auto">
+    <div className="w-full  2xl:w-[700px] 2xl:mx-auto !2xl:px-0 px-9">
       <CreatePost/>    
       <Posts/>
     </div>

src/Components/Posts/Post/Post.jsx

@@ -48,9 +48,12 @@ function Post({ post }) {
   return (
     <div className='py-[30px] border-t-[6px] border-t-[rgba(235,235,235,1)] font-medium'>
       <PostHeader post={post} />
+      <div className='px-5'>
       <PostContent post={post} />
       <PostDetails post={post} />
       <PostActions post={post} usersLikesThisPost={usersLikesThisPost} />
+      </div>
+
      {/* {usersCommentsOnPost.length>0&& <CommentSection fetchedComments={usersCommentsOnPost}  /> } */}
     </div>
   );

src/Components/Posts/Post/PostActions/LikeButton.jsx

@@ -21,7 +21,7 @@ function LikeButton({post,usersLikesThisPost}) {
    }
   }
   return (
-    <button onClick={likePostHandler} className='flex flex-row-reverse items-center gap-2 '  ><img src={likeIcon} alt='like icon' className={`${userLikedPost?'invert-[0.5]':''} w-4`}/>Like</button>
+    <button onClick={likePostHandler} className='flex flex-row-reverse items-center gap-2 '  ><img src={likeIcon} alt='like icon' className={`${userLikedPost?'invert-[0.5]':''} w-5`}/>Like</button>
   )
 }
 

src/Components/Posts/Post/PostActions/PostActions.jsx

@@ -4,9 +4,9 @@ import LikeButton from './LikeButton'
 function PostActions({post,usersLikesThisPost}) {
 
   return (
-    <div className='flex justify-between text-base    py-3'>
+    <div className='flex justify-between text-base font-medium    py-4'>
       <LikeButton post={post} usersLikesThisPost={usersLikesThisPost}/>
-   {actions.map((action,index)=><button className='flex flex-row-reverse items-center gap-2' key={index}><img className="w-4" src={action.icon}/><span>{action.text}</span></button>
+   {actions.map((action,index)=><button className='flex flex-row-reverse items-center gap-3' key={index}><img className="w-5" src={action.icon}/><span>{action.text}</span></button>
    )}
     </div>
   )

src/Components/Posts/Post/PostDetails.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 // Import your icons here
 import commentIcon from '../../../assets/images/posts/image 79.svg';
@@ -15,8 +14,8 @@ function PostDetails({ post }) {
   return (
     <div className='flex justify-between  py-4 border-b border-b-gray-300 border-b-opacity-100 border-b-solid border-b-[1.5px]'>
       {icons.map(({ count, icon, alt }, index) => (
-        <p key={index} className='flex items-center gap-3 text-sm'>
-          {count} <img src={icon} alt={alt} className='w-4'/>
+        <p key={index} className='flex items-center gap-3 text-sm font-medium'>
+          {count} <img src={icon} alt={alt} className='w-5'/>
         </p>
       ))}
     </div>

src/Components/Posts/Posts.jsx

@@ -4,7 +4,7 @@ import {useSelector} from 'react-redux'
 function Posts() {
   const posts=useSelector(state=>state.posts).posts
   return (
-    <div >
+    <div  >
    {posts.map(post=><Post post={post} key={post.id}/>)}
 
     </div>