hearts update

src/features/posts/ArticleHeartIcon.jsx

@@ -1,4 +1,13 @@
+import HeartIconBlack from "../../assets/heart-icons/heart-icon-black.svg";
+import HeartIconWhite from "../../assets/heart-icons/heart-icon-white.svg";
+import HeartIconRed from "../../assets/heart-icons/heart-icon-red.svg";
+import { useState } from "react";
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+
 const ArticleHeartIcon = ({ number, click, isLiked, addedLikes, hasChangedLikes }) => {
+    const theme = useSelector(state => state.global.theme);
+
     const likedStyle = {
         color: "var(--heartColor)"
     }
@@ -10,7 +19,8 @@ const ArticleHeartIcon = ({ number, click, isLiked, addedLikes, hasChangedLikes
 
     return(
         <div style={{ WebkitUserSelect: "none", msUserSelect: "none", userSelect: "none" }} className="ArticleHeartIcon" onClick={click}>
-            <span style={isLiked ? hasChangedLikes ? defaultStyle : likedStyle : hasChangedLikes ? likedStyle : defaultStyle}>❤</span>
+            {/* <span style={isLiked ? hasChangedLikes ? defaultStyle : likedStyle : hasChangedLikes ? likedStyle : defaultStyle}>❤</span> */}
+            <img src={isLiked ? hasChangedLikes ? theme === "dark" ? HeartIconWhite : HeartIconBlack : HeartIconRed : hasChangedLikes ? HeartIconRed : theme === "dark" ? HeartIconWhite : HeartIconBlack} alt="heart icon" />
             <p style={{ pointerEvents: "none" }}>{number !== undefined ? number + addedLikes : "NaN"}</p>
         </div>
     );

src/features/posts/postsSlice.js

@@ -61,6 +61,9 @@ const postsSlice = createSlice({
             tempPosts[postIndex].addedLikes = action.payload.number;
 
             state.posts = tempPosts;
+        },
+        unlikePosts: (state) => {
+
         }
     },
     extraReducers(builder) {

src/features/profile/profileSlice.js

@@ -102,6 +102,9 @@ const profileSlice = createSlice({
             tempPosts[postIndex].addedLikes = action.payload.number;
 
             state.posts = tempPosts;
+        },
+        unlikePosts: (state) => {
+
         }
     },
     extraReducers(builder) {

src/index.css

@@ -596,12 +596,20 @@ input, textarea {
 	padding: 1px 5px;
 	border-radius: 5px;
 	cursor: pointer;
+	align-items: center;
+}
+
+.ArticleHeartIcon > img {
+	height: 14px;
+	opacity: 0.6;
+	/* mix-blend-mode: color-dodge; */
 }
 
 .CommentsIcon {
 	color: var(--black);
 	margin-top: 15px;
 	display: flex;
+	align-items: center;
 	gap: 10px;
 	/* background: var(--lightGray); */
 	padding: 1px 5px;