added counter

packages/app/src/components/FollowButton/index.jsx

@@ -4,12 +4,17 @@ import classnames from "classnames"
 import "./index.less"
 
 export default (props) => {
-    return <a
+    return <div className="followButton">
+        <div className="counter">
+            {props.count}
+        </div>
+        <div
             onClick={props.onClick}
             className={classnames(
-            "followButton",
+                "btn",
                 { ["followed"]: props.followed }
             )}>
             <span>{props.followed ? "Following" : "Follow"}</span>
-    </a>
+        </div>
+    </div>
 }

packages/app/src/components/FollowButton/index.less

@@ -1,18 +1,31 @@
+@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;
+
+    .counter {
+        padding: 5px 15px;
+    }
+
+    .btn {
+        width  : 100px;
+        padding: 5px 15px;
+
+        cursor    : pointer;
+        transition: all 150ms ease-in-out;
+
+        border-radius: @borderRadius;
+        border-left  : 1.5px solid var(--border-color);
+
+        text-align    : center;
+        letter-spacing: 1px;
 
         span {
             transition: all 150ms ease-in-out;
@@ -43,6 +56,7 @@
             }
         }
     }
+}
 
 @keyframes gradientMove {
     0% {