improve reply button style

packages/app/src/components/PostCard/components/actions/index.less

@@ -1,55 +1,60 @@
 .post_actions_wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
 
-    position: relative;
+	position: relative;
 
-    width: 100%;
-    height: 40px;
+	width: 100%;
+	height: 40px;
 
-    padding: 20px;
+	padding: 20px;
 
-    transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 
-    .actions {
-        display: inline-flex;
-        flex-direction: row;
+	.actions {
+		display: inline-flex;
+		flex-direction: row;
 
-        transition: all 0.2s ease-in-out;
+		transition: all 0.2s ease-in-out;
 
-        width: 100%;
+		width: 100%;
 
-        color: var(--text-color);
+		color: var(--text-color);
 
-        .action {
-            display: inline-flex;
-            flex-direction: row;
+		gap: 15px;
 
-            align-items: center;
-            justify-content: center;
+		.action {
+			display: inline-flex;
+			flex-direction: row;
 
-            transition: all 150ms ease-in-out;
+			align-items: center;
+			justify-content: center;
 
-            margin-right: 20px;
+			transition: all 150ms ease-in-out;
 
+			width: 32px;
 
-            &:last-child {
-                margin-right: 0;
-            }
+			&:last-child {
+				margin-right: 0;
+			}
 
-            &:hover {
-                .icon {
-                    svg {
-                        color: var(--colorPrimary) !important;
-                    }
-                }
-            }
-        }
+			&:hover {
+				.icon {
+					svg {
+						color: var(--colorPrimary) !important;
+					}
+				}
+			}
+		}
 
-        svg {
-            margin: 0 !important;
-        }
-    }
-}
+		svg {
+			margin: 0 !important;
+		}
+	}
+}
+
+#likes {
+	margin-right: 7px;
+}

packages/app/src/components/PostCard/components/actions/replyButton/index.jsx

@@ -1,21 +1,28 @@
 import React from "react"
 import { Button } from "antd"
-import { Icons } from "@components/Icons"
+import { LuReply } from "react-icons/lu"
 
 import "./index.less"
 
 export default (props) => {
-    return <div
-        className="reply_button"
-    >
-        <Button
-            type="ghost"
-            shape="circle"
-            onClick={props.onClick}
-            icon={<Icons.FiRepeat />}
-        />
-        {
-            props.count > 0 && <span className="replies_count">{props.count}</span>
-        }
-    </div>
-}
+	return (
+		<div className="reply_button">
+			<Button
+				type="ghost"
+				shape="circle"
+				onClick={props.onClick}
+				icon={
+					<LuReply
+						style={{
+							fontSize: "1rem",
+							transform: "translateY(-1px)",
+						}}
+					/>
+				}
+			/>
+			{props.count > 0 && (
+				<span className="replies_count">{props.count}</span>
+			)}
+		</div>
+	)
+}