From 3e52ff169954a272f2ce8c9084b6d9eccc43a3bf Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Tue, 15 Mar 2022 03:10:37 +0100
Subject: [PATCH] added counter

---
 .../app/src/components/FollowButton/index.jsx | 21 +++---
 .../src/components/FollowButton/index.less    | 68 +++++++++++--------
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/packages/app/src/components/FollowButton/index.jsx b/packages/app/src/components/FollowButton/index.jsx
index 32d5b75e..3cdcd1cd 100644
--- a/packages/app/src/components/FollowButton/index.jsx
+++ b/packages/app/src/components/FollowButton/index.jsx
@@ -4,12 +4,17 @@ import classnames from "classnames"
 import "./index.less"
 
 export default (props) => {
-    return <a
-        onClick={props.onClick}
-        className={classnames(
-            "followButton",
-            { ["followed"]: props.followed }
-        )}>
-        <span>{props.followed ? "Following" : "Follow"}</span>
-    </a>
+    return <div className="followButton">
+        <div className="counter">
+            {props.count}
+        </div>
+        <div
+            onClick={props.onClick}
+            className={classnames(
+                "btn",
+                { ["followed"]: props.followed }
+            )}>
+            <span>{props.followed ? "Following" : "Follow"}</span>
+        </div>
+    </div>
 }
diff --git a/packages/app/src/components/FollowButton/index.less b/packages/app/src/components/FollowButton/index.less
index f38540ea..53d1c444 100644
--- a/packages/app/src/components/FollowButton/index.less
+++ b/packages/app/src/components/FollowButton/index.less
@@ -1,45 +1,59 @@
+@borderRadius: 8px;
+
 .followButton {
-    user-select: none;
-
-    width  : fit-content;
-    height : 30px;
-    padding: 5px 15px;
-
-    text-decoration: none;
-    text-align     : center;
-    vertical-align : middle;
-    letter-spacing : 1px;
+    display       : inline-flex;
+    flex-direction: row;
+    align-items   : center;
 
     transition: all 150ms ease-in-out;
+    outline   : 1px solid var(--border-color);
 
-    border-radius: 8px;
+    border-radius: @borderRadius;
 
-    span {
-        transition: all 150ms ease-in-out;
-        color     : #ffffff85 !important;
+    .counter {
+        padding: 5px 15px;
     }
 
-    opacity: 0.9;
+    .btn {
+        width  : 100px;
+        padding: 5px 15px;
 
-    background         : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
-    background-size    : 400% 400%;
-    background-position: 14% 0%;
+        cursor    : pointer;
+        transition: all 150ms ease-in-out;
 
-    &:hover {
-        opacity: 1;
+        border-radius: @borderRadius;
+        border-left  : 1.5px solid var(--border-color);
+
+        text-align    : center;
+        letter-spacing: 1px;
 
         span {
-            color: white !important;
+            transition: all 150ms ease-in-out;
+            color     : #ffffff85 !important;
         }
 
-        animation : gradientMove 2s forwards ease-in-out infinite;
-    }
+        opacity: 0.9;
 
-    &.followed {
-        background: none;
+        background         : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
+        background-size    : 400% 400%;
+        background-position: 14% 0%;
 
-        span {
-            color: #7e7e7e !important;
+        &:hover {
+            opacity: 1;
+
+            span {
+                color: white !important;
+            }
+
+            animation : gradientMove 2s forwards ease-in-out infinite;
+        }
+
+        &.followed {
+            background: none;
+
+            span {
+                color: #7e7e7e !important;
+            }
         }
     }
 }