improve reply button style

This commit is contained in:
SrGooglo 2025-02-26 01:11:08 +00:00
parent 880b9eeff3
commit c0bb67153b
2 changed files with 65 additions and 53 deletions

View File

@ -23,6 +23,8 @@
color: var(--text-color); color: var(--text-color);
gap: 15px;
.action { .action {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@ -32,8 +34,7 @@
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
margin-right: 20px; width: 32px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -53,3 +54,7 @@
} }
} }
} }
#likes {
margin-right: 7px;
}

View File

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