fixed comment icon

app/postlist/PostCard.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
-import { MessageCircle } from "lucide-react";
+// import { MessageCircle } from "lucide-react";
+import { BiSolidMessageRounded } from "react-icons/bi";
+
 import Image from "next/image";
 
 import { UserAvatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -88,15 +90,16 @@ const PostCard: React.FC<PostCardProps> = ({ post, comments, bookmarks, onToggle
             <span className="flex items-center text-gray-600 bg-transparent">
               <PostLikeButton postId={post.id} />
             </span>
-            <span className="flex items-center text-gray-600">
-              <MessageCircle className="w-5 h-5 mr-1" />
+            <span className="flex items-center text-gray-300">
+              <BiSolidMessageRounded  className="w-5 h-5 mr-1 fill-gray-300" />
               {comments[post.id]?.length || 0}
             </span>
             <div className="relative">
               <BookmarkButton
                 postId={post.id}
                 isBookmarked={bookmarks[post.id] || post.isBookmarked}
                 onToggleBookmark={onToggleBookmark}
+
               />
             </div>
           </div>

components/BookmarkButton.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Button } from "@/components/ui/button";
-import { FaBookmark, FaRegBookmark } from 'react-icons/fa'; // Import bookmark icons
+import { FaBookmark, FaRegBookmark } from 'react-icons/fa'; 
+
+
 import { toast } from 'react-toastify';
 import { createClient } from "@/utils/supabase/client";
 
@@ -65,12 +67,12 @@ const BookmarkButton: React.FC<BookmarkButtonProps> = ({
     variant='ghost'
       size="sm"
       className={`flex items-center justify-center gap-2 transition-colors ${
-        bookmarked ? 'text-blue-600 hover:text-blue-700' : 'text-gray-600 hover:text-blue-500'
+        bookmarked ? 'text-blue-600 hover:text-blue-700' : 'text-gray-300   hover:text-blue-500'
       }`}
       onClick={() => handleToggleBookmark(postId)} // Corrected prop name from onToggleBookmark to onClick
       disabled={loading}
     >
-      {bookmarked ? <FaBookmark /> : <FaRegBookmark />}
+      {bookmarked ? <FaBookmark /> : <FaBookmark />}
       {loading ? 'Loading...' : bookmarked ? 'Bookmarked' : ''}
     </Button>
   );

components/CommentsLikeButton.tsx

@@ -79,14 +79,14 @@ const CommentsLikeButton = ({ commentId }: CommentsLikeButtonProps) => {
   return (
     <button
       onClick={handleLike}
-      className={`group relative transition-all duration-300 ease-out bg-transparent hover:bg-transparent text-gray-700 ${
+      className={`group relative transition-all duration-300 ease-out bg-transparent hover:bg-transparent text-gray-300 ${
         isLiking ? 'cursor-not-allowed opacity-70' : ''
       }`}
       disabled={isLiking}
     >
       <span className="relative z-10 flex items-center justify-center">
         <MdFavorite className={`w-6 h-6 transition-colors duration-300 ${
-          isLiked ? 'text-red-500' : 'text-gray-400 hover:text-red-500'
+          isLiked ? 'text-red-500' : 'text-gray-300 hover:text-red-500'
           }`}/>
         <span className="ml-2 font-medium text-gray-700">
           {likesCount} 

components/PostLikeButton.tsx

@@ -67,7 +67,7 @@ const PostLikeButton = ({ postId }: LikeButtonProps) => {
     <button
       data-testid="Like-Post"
       onClick={handleLike}
-      className={`group relative transition-all duration-300 ease-out bg-transparent hover:bg-transparent text-gray-700 ${
+      className={`group relative transition-all duration-300 ease-out bg-transparent hover:bg-transparent text-gray-300 ${
         isLiking ? 'cursor-not-allowed opacity-70' : ''
       }`}
       disabled={isLiking} // Disable while the like is being processed