RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve reply button style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/app/src/components/PostCard/components/actions/index.less
View File

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

35
packages/app/src/components/PostCard/components/actions/replyButton/index.jsx
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={
icon={<Icons.FiRepeat />} <LuReply
/> style={{
{ fontSize: "1rem",
props.count > 0 && <span className="replies_count">{props.count}</span> transform: "translateY(-1px)",
} }}
</div> />
}
/>
{props.count > 0 && (
<span className="replies_count">{props.count}</span>
)}
</div>
)
} }