From 6a3e0658e561008c250277c8c498b1df3c1865c1 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Wed, 2 Mar 2022 21:53:49 +0100
Subject: [PATCH] added actions indicator notch

---
 .../app/src/components/PostCard/index.jsx     |  6 +-
 .../app/src/components/PostCard/index.less    | 58 ++++++++++++++-----
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
index 4665ad56..d3c445d3 100644
--- a/packages/app/src/components/PostCard/index.jsx
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -169,8 +169,10 @@ export default class PostCard extends React.Component {
                     message={this.props.data.message}
                 />
             </div>
-            <div className="actionsIndicator">
-                <Icons.MoreHorizontal />
+            <div className="actionsIndicatorWrapper">
+                <div className="actionsIndicator">
+                    <Icons.MoreHorizontal />
+                </div>
             </div>
             <div className="actionsWrapper">
                 <PostActions
diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
index 67dad915..4382004a 100644
--- a/packages/app/src/components/PostCard/index.less
+++ b/packages/app/src/components/PostCard/index.less
@@ -17,7 +17,7 @@
     outline-color: transparent;
 
     &.liked {
-        filter: drop-shadow(0px 0px 2px var(--primaryColor));
+        filter       : drop-shadow(0px 0px 2px var(--primaryColor));
         outline-color: var(--primaryColor);
     }
 
@@ -77,16 +77,16 @@
                 flex-direction: column;
                 font-size     : 16px;
 
-                color: var(--background-color-contrast);
+                color : var(--background-color-contrast);
                 height: fit-content;
 
                 .item {
-                    display: inline-flex;
-                    align-items: center;
+                    display        : inline-flex;
+                    align-items    : center;
                     justify-content: flex-end;
-                    height: fit-content;
+                    height         : fit-content;
 
-                    margin-left: 20px;
+                    margin-left  : 20px;
                     margin-bottom: 5px;
 
                     .icon {
@@ -98,7 +98,7 @@
 
                     .value {
                         font-family: "DM Mono", monospace;
-                        font-size: 14px;
+                        font-size  : 14px;
                     }
                 }
             }
@@ -129,19 +129,35 @@
         }
     }
 
+    .actionsIndicatorWrapper {
+        display        : flex;
+        flex-direction : row;
+        align-items    : center;
+        justify-content: center;
+
+        transition: all 0.2s ease-in-out;
+    }
+
     .actionsIndicator {
         display        : flex;
         flex-direction : row;
         align-items    : center;
         justify-content: center;
 
-        width        : 100%;
-        margin-bottom: 5px;
+        width  : 10vw;
+        padding: 2px;
+
+        border-radius   : 8px 8px 0 0;
+        background-color: var(--background-color-primary);
+        color           : var(--background-color-contrast);
 
         font-size: 18px;
-        color    : var(--background-color-contrast);
-        
-        transition   : all 0.2s ease-in-out;
+
+        transition: all 0.2s ease-in-out;
+
+        svg {
+            margin: 0 !important;
+        }
     }
 
     .actionsWrapper {
@@ -245,12 +261,12 @@
     }
 
     .actionsWrapper {
-        animation: fadeActionsIn 0.1s 0.1s linear forwards;
+        opacity: 1;
     }
 
-    .actionsIndicator {
-        opacity: 0;
-    }
+    // .actionsIndicator {
+    //     opacity: 0;
+    // }
 }
 
 @keyframes fadeActionsIn {
@@ -261,4 +277,14 @@
     to {
         opacity: 1;
     }
+}
+
+@keyframes fadeActionOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
\ No newline at end of file