added FollowButton

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

@@ -0,0 +1,15 @@
+import React from "react"
+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>
+}

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

@@ -0,0 +1,59 @@
+.followButton {
+    user-select: none;
+
+    width  : fit-content;
+    height : 30px;
+    padding: 5px 15px;
+
+    text-decoration: none;
+    text-align     : center;
+    vertical-align : middle;
+    letter-spacing : 1px;
+
+    transition: all 150ms ease-in-out;
+
+    border-radius: 8px;
+
+    span {
+        transition: all 150ms ease-in-out;
+        color     : #ffffff85 !important;
+    }
+
+    opacity: 0.9;
+
+    background         : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
+    background-size    : 400% 400%;
+    background-position: 14% 0%;
+
+    &:hover {
+        opacity: 1;
+
+        span {
+            color: white !important;
+        }
+
+        animation : gradientMove 2s forwards ease-in-out infinite;
+    }
+
+    &.followed {
+        background: none;
+
+        span {
+            color: #7e7e7e !important;
+        }
+    }
+}
+
+@keyframes gradientMove {
+    0% {
+        background-position: 14% 0%;
+    }
+
+    50% {
+        background-position: 87% 100%;
+    }
+
+    100% {
+        background-position: 14% 0%;
+    }
+}

packages/app/src/components/index.js

@@ -1,3 +1,4 @@
+// COMPLEX COMPONENTS
 export { default as FormGenerator } from "./FormGenerator"
 export { default as Settings } from "./Settings"
 export { default as NotFound } from "./NotFound"
@@ -22,11 +23,16 @@ export { default as Navigation } from "./Navigation"
 export { default as ImageUploader } from "./ImageUploader"
 export { default as ImageViewer } from "./ImageViewer"
 
-export { default as PostsFeed } from "./PostsFeed"
+// BUTTONS
 export { default as LikeButton } from "./LikeButton"
+export { default as FollowButton } from "./FollowButton"
+
+// POSTS
+export { default as PostsFeed } from "./PostsFeed"
 export { default as PostCard } from "./PostCard"
 export { default as PostCreator } from "./PostCreator"
 
+// OTHERS
 export * as AdminTools from "./AdminTools"
 export * as AboutApp from "./AboutApp"
 export * as Window from "./RenderWindow"