From b52dd473757d8807cbdd5c1fc77d4ad5cb6030b9 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Wed, 2 Mar 2022 21:40:44 +0100
Subject: [PATCH] moved post statistics to post header

---
 .../app/src/components/PostCard/index.jsx     | 30 ++++++++--------
 .../app/src/components/PostCard/index.less    | 35 +++++++++++++------
 2 files changed, 39 insertions(+), 26 deletions(-)

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) {
                 </div>
             </div>
         </div>
-        <div className="postHeaderActions">
-            <div className="item" onClick={props.onClickLike}>
-                {props.isLiked && <Icons.Heart id="likeIndicator" />}
+        <div className="postStadistics">
+            <div className="item">
+                <Icons.Heart className={classnames("icon", { ["filled"]: props.isLiked })} />
+                <div className="value">
+                    {props.likes}
+                </div>
             </div>
-            <div className="item" onClick={props.onClickSave}>
-                <Icons.Bookmark />
+            <div className="item">
+                <Icons.MessageSquare />
+                <div className="value">
+                    {props.comments}
+                </div>
             </div>
         </div>
     </div>
@@ -58,8 +64,8 @@ function PostHeader(props) {
 
 function PostContent({ message }) {
     return <div className="content">
-    {message}
-</div>
+        {message}
+    </div>
 }
 
 function PostActions(props) {
@@ -68,17 +74,11 @@ function PostActions(props) {
             <div className="icon">
                 <LikeButton defaultLiked={props.defaultLiked} onClick={props.onClickLike} />
             </div>
-            <div className="value">
-                {String(props.likes)}
-            </div>
         </div>
         <div className="action" id="comments" onClick={props.onClickComments}>
             <div className="icon">
                 <Icons.MessageSquare className="icon" />
             </div>
-            <div className="value">
-                {String(props.comments)}
-            </div>
         </div>
         <div className="action" id="share" onClick={props.onClickShare}>
             <div className="icon">
@@ -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}
                 />
                 <PostContent
                     message={this.props.data.message}
@@ -175,8 +177,6 @@ export default class PostCard extends React.Component {
                     onClickLike={this.onClickLike}
                     defaultLiked={hasLiked}
                     isSelf={this.isSelf()}
-                    likes={this.state.data.likes.length}
-                    comments={this.state.data.comments.length}
                 />
             </div>
         </div>
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 {