diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
index e5a19026..4665ad56 100644
--- a/packages/app/src/components/PostCard/index.jsx
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -45,12 +45,18 @@ function PostHeader(props) {
-
-
- {props.isLiked &&
}
+
@@ -58,8 +64,8 @@ function PostHeader(props) {
function PostContent({ message }) {
return
- {message}
-
+ {message}
+
}
function PostActions(props) {
@@ -68,17 +74,11 @@ function PostActions(props) {
-
- {String(props.likes)}
-
@@ -162,6 +162,8 @@ export default class PostCard extends React.Component {
isLiked={hasLiked}
onClickLike={() => this.onClickLike(false)}
onClickSave={this.onClickSave}
+ likes={this.state.data.likes.length}
+ comments={this.state.data.comments.length}
/>
diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
index 84c89b47..67dad915 100644
--- a/packages/app/src/components/PostCard/index.less
+++ b/packages/app/src/components/PostCard/index.less
@@ -72,20 +72,34 @@
}
}
- .postHeaderActions {
+ .postStadistics {
display : inline-flex;
- flex-direction: row;
+ flex-direction: column;
font-size : 16px;
color: var(--background-color-contrast);
+ height: fit-content;
.item {
- cursor: pointer;
- }
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ height: fit-content;
- #likeIndicator {
- color: var(--primaryColor);
- fill : var(--primaryColor);
+ margin-left: 20px;
+ margin-bottom: 5px;
+
+ .icon {
+ &.filled {
+ color: var(--primaryColor);
+ fill : var(--primaryColor);
+ }
+ }
+
+ .value {
+ font-family: "DM Mono", monospace;
+ font-size: 14px;
+ }
}
}
}
@@ -143,7 +157,7 @@
opacity: 0;
width : 100%;
- height: 50px;
+ height: 40px;
margin-top: 15px;
padding : 10px;
@@ -152,7 +166,6 @@
transition : all 0.2s ease-in-out;
background-color: var(--background-color-primary);
- filter : drop-shadow(3px 3px 2px var(--shadow-color));
}
.actions {
@@ -228,11 +241,11 @@
.postCard:hover {
.wrapper {
- margin-bottom: 55px;
+ margin-bottom: 25px;
}
.actionsWrapper {
- animation: fadeActionsIn 0.2s 0.2s linear forwards;
+ animation: fadeActionsIn 0.1s 0.1s linear forwards;
}
.actionsIndicator {