Fixed buttons style on the author page

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -76,6 +76,39 @@
   @include media-breakpoint-down(lg) {
     flex-wrap: wrap;
   }
+
+  .buttonSubscribe {
+    aspect-ratio: auto;
+    background-color: #000;
+    border: 1px solid #000;
+    border-radius: 0.8rem;
+    color: #fff;
+    float: none;
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+    width: 10em;
+
+    .icon {
+      margin-right: 0.5em;
+
+      img {
+        filter: invert(1);
+      }
+    }
+
+    &:hover {
+      background: #fff;
+      color: #000;
+
+      .icon img {
+        filter: invert(0);
+      }
+    }
+
+    img {
+      vertical-align: text-top;
+    }
+  }
 }
 
 .authorDetails {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -202,8 +202,17 @@ export const AuthorCard = (props: Props) => {
               when={isProfileOwner()}
               fallback={
                 <div class={styles.authorActions}>
-                  <Button onClick={handleSubscribe} value={followButtonText()} />
-                  <Button variant={'secondary'} value={t('Message')} onClick={initChat} />
+                  <Button
+                    onClick={handleSubscribe}
+                    value={followButtonText()}
+                    class={styles.buttonSubscribe}
+                  />
+                  <Button
+                    variant={'secondary'}
+                    value={t('Message')}
+                    onClick={initChat}
+                    class={styles.buttonSubscribe}
+                  />
                 </div>
               }
             >