From f3ccb4464fd1932074a0e893444cb82002573248 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Fri, 24 Feb 2023 14:33:00 +0000 Subject: [PATCH] restyle `PostCard` --- .../PostCard/components/actions/index.jsx | 72 +++-- .../PostCard/components/actions/index.less | 101 ++----- .../components/actions/likeButton/index.jsx | 53 ++-- .../components/actions/likeButton/index.less | 217 ++++++++------ .../components/actions/saveButton/index.jsx | 2 +- .../components/actions/saveButton/index.less | 15 +- .../PostCard/components/attachments/index.jsx | 3 +- .../components/attachments/index.less | 10 +- .../PostCard/components/content/index.less | 8 +- .../PostCard/components/header/index.jsx | 33 +-- .../PostCard/components/header/index.less | 56 ++-- .../app/src/components/PostCard/index.jsx | 270 +++++++++--------- .../app/src/components/PostCard/index.less | 139 ++------- 13 files changed, 429 insertions(+), 550 deletions(-) diff --git a/packages/app/src/components/PostCard/components/actions/index.jsx b/packages/app/src/components/PostCard/components/actions/index.jsx index 421c3cf9..517e5e14 100755 --- a/packages/app/src/components/PostCard/components/actions/index.jsx +++ b/packages/app/src/components/PostCard/components/actions/index.jsx @@ -1,5 +1,5 @@ import React from "react" - +import { Dropdown, Button } from "antd" import { Icons } from "components/Icons" import SaveButton from "./saveButton" @@ -7,28 +7,68 @@ import LikeButton from "./likeButton" import "./index.less" +const MoreActionsItems = [ + { + key: "repost", + label: <> + + Repost + , + }, + { + key: "share", + label: <> + + Share + , + }, + { + type: "divider", + }, + { + key: "report", + label: <> + + Report + , + }, +] + export default (props) => { - return
+ return
-
- -
+
-
- -
+
-
-
- -
+
+
-
-
- -
+
+ +
+ +
+
diff --git a/packages/app/src/components/PostCard/components/actions/index.less b/packages/app/src/components/PostCard/components/actions/index.less index eec0677d..8d5e3e7b 100755 --- a/packages/app/src/components/PostCard/components/actions/index.less +++ b/packages/app/src/components/PostCard/components/actions/index.less @@ -1,93 +1,47 @@ -.post_actionsIndicator { +.post_actions_wrapper { display: flex; flex-direction: row; align-items: center; - justify-content: center; + justify-content: flex-start; - width: 10vw; - padding: 2px; - - margin: auto; - - border-radius: 8px 8px 0 0; - background-color: var(--background-color-primary); - color: var(--background-color-contrast); - - font-size: 18px; - - transition: all 0.2s ease-in-out; - - svg { - margin: 0 !important; - } -} - -.post_actionsWrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - position: absolute; - bottom: 0; - left: 0; - - opacity: 0; + position: relative; width: 100%; height: 40px; - margin-top: 15px; - padding: 10px; + padding: 20px; - border-radius: 8px; transition: all 0.2s ease-in-out; - background-color: var(--background-color-primary); - .actions { display: inline-flex; flex-direction: row; - align-items: center; - justify-content: space-between; - - width: 80%; transition: all 0.2s ease-in-out; - color: var(--background-color-contrast); + width: 100%; .action { display: inline-flex; - flex-direction: column; + flex-direction: row; - transition: all 0.2s ease-in-out; + align-items: center; + justify-content: center; - .icon { - cursor: pointer; - transition: all 0.2s ease-in-out; + transition: all 150ms ease-in-out; - svg { - transition: all 0.2s ease-in-out; - } + margin-right: 20px; + + + &:last-child { + margin-right: 0; } - .value { - position: absolute; - bottom: 0; - - font-size: 14px; - font-family: "DM Mono", monospace; - - transform: translate(0, 50%); - transition: all 0.2s ease-in-out; - } - } - - .action:hover { - .icon { - svg { - color: var(--primaryColor) !important; + &:hover { + .icon { + svg { + color: var(--colorPrimary) !important; + } } } } @@ -95,22 +49,5 @@ svg { margin: 0 !important; } - - >div { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - border-radius: 360px; - width: 55px; - height: 55px; - - font-size: 20px; - padding: 2px; - - background-color: var(--background-color-primary); - transform: translate(0, -15px); - } } } \ No newline at end of file diff --git a/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx b/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx index 79a0146c..cb7cc217 100755 --- a/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx +++ b/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx @@ -1,5 +1,6 @@ import React from "react" import classnames from "classnames" +import CountUp from "react-countup" import "./index.less" @@ -22,27 +23,37 @@ export default (props) => { setLiked(to) } - return + + +
} \ No newline at end of file diff --git a/packages/app/src/components/PostCard/components/actions/likeButton/index.less b/packages/app/src/components/PostCard/components/actions/likeButton/index.less index fa9f9e08..9c44f12e 100755 --- a/packages/app/src/components/PostCard/components/actions/likeButton/index.less +++ b/packages/app/src/components/PostCard/components/actions/likeButton/index.less @@ -1,118 +1,161 @@ -@color-heart : #EA442B; +@color-heart : #EA442B; @likeAnimationDuration : .5s; -@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1); +@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1); -.likeButton { - display : flex; - align-items : center; - justify-content: center; +.like_btn_wrapper { + display: flex; + flex-direction: row; + align-items: center; - .ripple, - .ripple:before, - .ripple:after { - position : relative; - box-sizing: border-box; + font-size: 1rem; + + .count { + display: flex; + flex-direction: row; + + align-items: center; + + margin-left: 7px; + font-size: 0.8rem; + + color: var(--text-color); } - font-size : 40px; - border : none; - border-radius: 50%; - width : 1em; - height : 1em; - padding : 0; - margin : 0; - outline : none; - z-index : 2; - transition : transform @likeAnimationDuration @likeAnimationEasing; - cursor : pointer; + //padding: 10px; + //border-radius: 8px; - background-color: transparent; + transition: all @likeAnimationDuration @likeAnimationEasing; - &:before { - z-index : -1; - content : ''; - position : absolute; - top : 0; - left : 0; - width : 100%; - height : 100%; - border-radius: inherit; - transition : inherit; - } + &.liked { + .like_btn { + .heart { + >path { + stroke: var(--colorPrimary); + fill: var(--colorPrimary); + } - &:after { - content : ''; - position : absolute; - top : 0; - left : 0; - width : 100%; - height : 100%; - border-radius: inherit; - z-index : -1; - } - - .heart { - position: relative; - - >path { - stroke-width: 2; - transition : fill @likeAnimationDuration @likeAnimationEasing; - stroke : currentColor; - fill : transparent; - } - - &.liked { - >path { - stroke: var(--primaryColor); - fill : var(--primaryColor); + filter: drop-shadow(0px 0px 2px var(--colorPrimary)); } } - &.clicked { - animation: heart-bounce @likeAnimationDuration @likeAnimationEasing; + //outline: 1px solid var(--colorPrimary); + } - @keyframes heart-bounce { - 40% { - transform: scale(0.7); + &.clicked { + .like_btn { + .heart { + animation: heart-bounce @likeAnimationDuration @likeAnimationEasing; + + @keyframes heart-bounce { + 40% { + transform: scale(0.7); + } + + 0%, + 80%, + 100% { + transform: scale(1); + } } + } - 0%, - 80%, - 100% { - transform: scale(1); + .ripple { + &:before { + animation: ripple-out @likeAnimationDuration @likeAnimationEasing; } } } - - animation: none; } - .ripple { - position : absolute; - height : 1em; - width : 1em; + .like_btn { + display: flex; + + align-items: center; + justify-content: center; + + .ripple, + .ripple:before, + .ripple:after { + position: relative; + box-sizing: border-box; + } + + border: none; border-radius: 50%; - overflow : hidden; - z-index : 1; + + width: 1rem; + height: 1rem; + + padding: 0; + margin: 0; + + z-index: 2; + + transition: transform @likeAnimationDuration @likeAnimationEasing; + + background-color: transparent; &:before { - content : ''; - position : absolute; - top : 0; - left : 0; - width : 100%; - height : 100%; - border : .4em solid var(--primaryColor); + z-index: -1; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 1rem; + height: 1rem; border-radius: inherit; - transform : scale(0); + transition: inherit; } - &.clicked { + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 1rem; + height: 1rem; + border-radius: inherit; + z-index: -1; + } + + .heart { + position: relative; + + cursor: pointer; + + >path { + stroke-width: 2; + transition: fill @likeAnimationDuration @likeAnimationEasing; + stroke: currentColor; + fill: transparent; + } + + animation: none; + } + + .ripple { + position: absolute; + + height: 1rem; + width: 1rem; + + border-radius: 50%; + overflow: hidden; + + z-index: 1; + &:before { - animation: ripple-out @likeAnimationDuration @likeAnimationEasing; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: .4em solid var(--colorPrimary); + border-radius: inherit; + transform: scale(0); } } - } } diff --git a/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx b/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx index 05f3161c..e3035ea1 100755 --- a/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx +++ b/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx @@ -20,9 +20,9 @@ export default (props) => { className={classnames("saveButton", { ["active"]: saved })} + type="ghost" shape="circle" onClick={onClick} icon={saved ? : } - size="large" /> } \ No newline at end of file diff --git a/packages/app/src/components/PostCard/components/actions/saveButton/index.less b/packages/app/src/components/PostCard/components/actions/saveButton/index.less index 6f1e215f..60b67d71 100755 --- a/packages/app/src/components/PostCard/components/actions/saveButton/index.less +++ b/packages/app/src/components/PostCard/components/actions/saveButton/index.less @@ -1,22 +1,21 @@ .saveButton { - border: 0 !important; - transition: all 150ms ease-in-out; - background: transparent !important; - background-color: transparent !important; + background-color: transparent!important; + border: 0!important; + box-shadow: none!important; &.active { - color: var(--primaryColor); + color: var(--colorPrimary); svg { - color: var(--primaryColor); + color: var(--colorPrimary); } } svg { - width: 20px; - height: 20px; + width: 1rem; + height: 1rem; transition: all 150ms ease-in-out; } diff --git a/packages/app/src/components/PostCard/components/attachments/index.jsx b/packages/app/src/components/PostCard/components/attachments/index.jsx index df56fda7..3faa708e 100755 --- a/packages/app/src/components/PostCard/components/attachments/index.jsx +++ b/packages/app/src/components/PostCard/components/attachments/index.jsx @@ -3,7 +3,6 @@ import { Skeleton } from "antd" import { Carousel } from "react-responsive-carousel" import { ImageViewer } from "components" import Plyr from "plyr-react" -import ModalImage from "react-modal-image" import ContentFailed from "../contentFailed" @@ -43,7 +42,7 @@ const Attachment = React.memo((props) => { e.preventDefault() e.stopPropagation() - app.openFullImageViewer(url) + app.controls.openFullImageViewer(url) } } diff --git a/packages/app/src/components/PostCard/components/attachments/index.less b/packages/app/src/components/PostCard/components/attachments/index.less index 016f7112..4774079a 100755 --- a/packages/app/src/components/PostCard/components/attachments/index.less +++ b/packages/app/src/components/PostCard/components/attachments/index.less @@ -88,6 +88,12 @@ } .attachment { + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + width: 100%; height: 100%; @@ -136,7 +142,7 @@ .plyr__control { &:hover { - background-color: var(--primaryColor); + background-color: var(--colorPrimary); } svg { @@ -149,7 +155,7 @@ .plyr__progress, .plyr__volume { input { - color: var(--primaryColor); + color: var(--colorPrimary); } } } \ No newline at end of file diff --git a/packages/app/src/components/PostCard/components/content/index.less b/packages/app/src/components/PostCard/components/content/index.less index 09557ba8..a5fd5ad0 100755 --- a/packages/app/src/components/PostCard/components/content/index.less +++ b/packages/app/src/components/PostCard/components/content/index.less @@ -66,13 +66,13 @@ .message { width: 100%; - font-size: 14px; - font-family: "Poppins", sans-serif; + font-size: 0.9rem; + font-weight: 400; + + color: var(--background-color-contrast); word-break: break-all; user-select: text; - - color: var(--background-color-contrast) } >div { diff --git a/packages/app/src/components/PostCard/components/header/index.jsx b/packages/app/src/components/PostCard/components/header/index.jsx index 0b1ff554..c344a001 100755 --- a/packages/app/src/components/PostCard/components/header/index.jsx +++ b/packages/app/src/components/PostCard/components/header/index.jsx @@ -1,5 +1,4 @@ import React from "react" -import classnames from "classnames" import { DateTime } from "luxon" import { Image } from "components" @@ -11,13 +10,13 @@ export default (props) => { const [timeAgo, setTimeAgo] = React.useState(0) const goToProfile = () => { - window.app.goToAccount(props.postData.user?.username) + app.navigation.goToAccount(props.postData.user?.username) } const updateTimeAgo = () => { let createdAt = props.postData.timestamp ?? props.postData.created_at ?? "" - const timeAgo = DateTime.fromISO(createdAt).toRelative() + const timeAgo = DateTime.fromISO(createdAt, { locale: app.cores.settings.get("language") }).toRelative() setTimeAgo(timeAgo) } @@ -43,30 +42,14 @@ export default (props) => { />
-
-

- {props.postData.user?.fullName ?? `@${props.postData.user?.username}`} - {props.postData.user?.verified && } -

-
+

+ {props.postData.user?.fullName ?? `@${props.postData.user?.username}`} + {props.postData.user?.verified && } +

-
+ {timeAgo} -
-
-
-
-
- -
- {props.likes} -
-
-
- -
- {props.comments} -
+
diff --git a/packages/app/src/components/PostCard/components/header/index.less b/packages/app/src/components/PostCard/components/header/index.less index b95e579c..a4a4fdde 100755 --- a/packages/app/src/components/PostCard/components/header/index.less +++ b/packages/app/src/components/PostCard/components/header/index.less @@ -15,7 +15,7 @@ } svg { - fill: var(--appColor); + fill: var(--app-color); margin-left: 6px; } @@ -35,22 +35,29 @@ .info { display: inline-flex; flex-direction: column; - align-items: center; - justify-content: start; - text-align: start; + align-items: flex-start; width: fit-content; - color: var(--background-color-contrast); - h1 { - color: var(--background-color-contrast); - margin: 0; - font-family: "DM Mono", monospace; + margin: 0 0 4px 0; + align-self: start; + + font-weight: 500; font-size: 1rem; + cursor: pointer; + + color: var(--background-color-contrast); + } + + .timeago { + font-weight: 400; + font-size: 0.7rem; + + color: rgb(var(--bg_color_4)); } >div { @@ -58,35 +65,4 @@ } } } - - .statistics { - display: inline-flex; - flex-direction: column; - font-size: 16px; - - color: var(--background-color-contrast); - height: fit-content; - - .item { - display: inline-flex; - align-items: center; - justify-content: flex-end; - height: fit-content; - - margin-left: 20px; - margin-bottom: 5px; - - .icon { - &.filled { - color: var(--primaryColor); - fill: var(--primaryColor); - } - } - - .value { - font-family: "DM Mono", monospace; - font-size: 14px; - } - } - } } \ No newline at end of file diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx index c9ce8f01..cc0a410b 100755 --- a/packages/app/src/components/PostCard/index.jsx +++ b/packages/app/src/components/PostCard/index.jsx @@ -2,6 +2,7 @@ import React from "react" import * as antd from "antd" import classnames from "classnames" +import { CommentsCard } from "components" import { Icons } from "components/Icons" import PostHeader from "./components/header" @@ -11,184 +12,116 @@ import PostAttachments from "./components/attachments" import "./index.less" -export default ({ - expansibleActions = window.app.settings.get("postCard_expansible_actions"), - autoCarrousel = window.app.settings.get("postCard_carrusel_auto"), - data = {}, - events = {}, - fullmode -}) => { - const isSelf = app.permissions.checkUserIdIsSelf(data.user_id) +export default class PostCard extends React.Component { + state = { + loading: true, + data: this.props.data ?? {}, - const [loading, setLoading] = React.useState(true) + countLikes: this.props.data.countLikes ?? 0, + countComments: this.props.data.countComments ?? 0, - const [likes, setLikes] = React.useState(data.likes ?? []) - const [comments, setComments] = React.useState(data.comments ?? []) + hasLiked: this.props.data.isLiked ?? false, + hasSaved: this.props.data.isSaved ?? false, - const [hasLiked, setHasLiked] = React.useState(false) - const [hasSaved, setHasSaved] = React.useState(false) + open: this.props.defaultOpened ?? false, + } - const onClickDelete = async () => { - if (typeof events.onClickDelete !== "function") { + onClickDelete = async () => { + if (typeof this.props.events.onClickDelete !== "function") { console.warn("onClickDelete event is not a function") return } - return await events.onClickDelete(data) + return await this.props.events.onClickDelete(this.state.data) } - const onClickLike = async () => { - if (typeof events.onClickLike !== "function") { + onClickLike = async () => { + if (typeof this.props.events.onClickLike !== "function") { console.warn("onClickLike event is not a function") return } - return await events.onClickLike(data) + return await this.props.events.onClickLike(this.state.data) } - const onClickSave = async () => { - if (typeof events.onClickSave !== "function") { + onClickSave = async () => { + if (typeof this.props.events.onClickSave !== "function") { console.warn("onClickSave event is not a function") return } - return await events.onClickSave(data) + return await this.props.events.onClickSave(this.state.data) } - const onClickOpen = async () => { - if (typeof events.onClickOpen !== "function") { - console.warn("onClickOpen event is not a function, performing default action") - return window.app.goToPost(data._id) - } - - return await events.onClickOpen(data) - } - - const onClickEdit = async () => { - if (typeof events.onClickEdit !== "function") { + onClickEdit = async () => { + if (typeof this.props.events.onClickEdit !== "function") { console.warn("onClickEdit event is not a function") return } - return await events.onClickEdit(data) + return await this.props.events.onClickEdit(this.state.data) } - const onDataUpdate = (data) => { - console.log("onDataUpdate", data) - - setLikes(data.likes) - setComments(data.comments) + onDoubleClick = async () => { + this.handleOpen() } - const onDoubleClick = () => { - if (typeof events.onDoubleClick !== "function") { - console.warn("onDoubleClick event is not a function") - return + onClickComments = async () => { + this.handleOpen() + } + + handleOpen = (to) => { + if (typeof to === "undefined") { + to = !this.state.open } - return events.onDoubleClick(data) - } - - React.useEffect(() => { - if (fullmode) { - app.eventBus.emit("style.compactMode", true) + if (typeof this.props.events?.onToogleOpen === "function") { + this.props.events?.onToogleOpen(to, this.state.data) } - app.eventBus.on(`post.${data._id}.delete`, onClickDelete) - app.eventBus.on(`post.${data._id}.update`, onClickEdit) + this.setState({ + open: to, + }) + + //app.controls.openPostViewer(this.state.data) + } + + onLikesUpdate = (data) => { + if (data.to) { + this.setState({ + countLikes: this.state.countLikes + 1, + }) + } else { + this.setState({ + countLikes: this.state.countLikes - 1, + }) + } + } + + componentDidMount = async () => { + app.eventBus.on(`post.${this.state.data._id}.delete`, this.onClickDelete) + app.eventBus.on(`post.${this.state.data._id}.update`, this.onClickEdit) // first listen to post changes - window.app.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate) + //window.app.cores.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate) + window.app.cores.api.namespaces["main"].listenEvent(`post.${this.state.data._id}.likes.update`, this.onLikesUpdate) - // then load - setLoading(false) - - return () => { - if (fullmode) { - app.eventBus.emit("style.compactMode", false) - } - - app.eventBus.off(`post.${data._id}.delete`, onClickDelete) - app.eventBus.off(`post.${data._id}.update`, onClickEdit) - - // remove the listener - window.app.api.namespaces["main"].unlistenEvent(`post.dataUpdate.${data._id}`, onDataUpdate) - } - }, []) - - React.useEffect(() => { - if (!app.userData) { - return - } - - // check if the post has liked by you - const hasLiked = likes.includes(app.userData._id) - const hasSaved = data.isSaved - - setHasLiked(hasLiked) - setHasSaved(hasSaved) - }) - - if (loading) { - return + this.setState({ + isSelf: app.cores.permissions.checkUserIdIsSelf(this.state.data.user_id), + loading: false, + }) } - try { - return
-
- - - {data.attachments && data.attachments.length > 0 && } - -
- {!fullmode && -
- -
- } - {!fullmode && - - } -
- } catch (error) { + componentWillUnmount = () => { + app.eventBus.off(`post.${this.state.data._id}.delete`, this.onClickDelete) + app.eventBus.off(`post.${this.state.data._id}.update`, this.onClickEdit) + + // remove the listener + //window.app.cores.api.namespaces["main"].unlistenEvent(`post.dataUpdate.${data._id}`, onDataUpdate) + window.app.cores.api.namespaces["main"].listenEvent(`post.${this.state.data._id}.likes.update`, this.onLikesUpdate) + } + + componentDidCatch = (error, info) => { console.error(error) return
@@ -201,4 +134,63 @@ export default ({
} + + render = () => { + if (this.state.loading) { + return
+ +
+ } + + return
+
+ + + {this.state.data.attachments && this.state.data.attachments.length > 0 && } + +
+ + + { + this.state.open && + } +
+ } } \ No newline at end of file diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less index 2422b735..098c1bec 100755 --- a/packages/app/src/components/PostCard/index.less +++ b/packages/app/src/components/PostCard/index.less @@ -5,127 +5,14 @@ width: 100%; max-width: 600px; - filter: drop-shadow(3px 3px 2px var(--shadow-color)); - background-color: var(--background-color-accent); - border-radius: 8px; transition: all 0.2s ease-in-out; - outline-width: 1px; - outline-style: solid; - outline-color: transparent; + padding: 17px; - &.playlist { - .wrapper { - .post_content { - flex-direction: row; - background-color: var(--background-color-primary); - padding: 20px; - - .playlistCover { - width: 200px; - height: 200px; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - border-radius: 8px; - - margin-right: 25px; - } - - .playlistTitle { - h1 { - font-size: 1.5rem; - font-family: "Space Grotesk", sans-serif; - margin: 0; - } - - h3 { - font-size: 0.9rem; - // make italic - font-style: italic; - } - - .actions { - width: 100%; - - margin-top: 20px; - - display: inline-flex; - flex-direction: column; - - align-items: center; - justify-content: center; - } - } - } - } - } - - &.liked { - filter: drop-shadow(0px 0px 2px var(--primaryColor)); - outline-color: var(--primaryColor); - } - - &.noHide { - .wrapper { - margin-bottom: 25px; - } - - .post_actionsWrapper { - opacity: 1; - } - } - - &.fullmode { - max-width: none; + &.open { height: 100%; - - background-color: transparent; - - filter: none!important; - outline: none!important; - - .post_actionsIndicator { - opacity: 0; - } - - .post_actionsWrapper { - opacity: 1; - } - - .wrapper { - height: 100%; - - .post_content { - height: 100%; - - .post_attachments { - .carousel-root { - .carousel { - height: 100%; - min-height: 70vh; - - .addition { - height: 100%; - min-height: 70vh; - - .plyr { - height: 100%; - } - - img, - video { - height: 100%; - object-fit: contain; - } - } - } - } - } - } - } } .wrapper { @@ -134,7 +21,6 @@ align-items: center; width: 100%; - padding: 17px; transition: all 0.2s ease-in-out; @@ -143,13 +29,20 @@ } } - &:hover { - .wrapper { - margin-bottom: 25px; - } + border-bottom: 2px solid var(--border-color); - .post_actionsWrapper { - opacity: 1; - } + padding-bottom: 10px; + + &:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + &:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + border-bottom: none; + padding-bottom: 0; } } \ No newline at end of file