Change text on hover in author follow button

src/components/Author/AuthorCard.module.scss

@@ -143,12 +143,27 @@
     }
   }
 
-  button {
+  .button {
     margin-right: 0.5em;
+    width: 9em;
 
     &:last-child {
       margin-right: 0;
     }
+
+    &:hover {
+      .buttonUnfollowLabel {
+        display: block;
+      }
+
+      .buttonSubscribedLabel {
+        display: none;
+      }
+    }
+
+    .buttonUnfollowLabel {
+      display: none;
+    }
   }
 }
 
@@ -184,8 +199,6 @@
 }
 
 .buttonWrite {
-  //@include font-size(1.5rem);
-
   color: #000;
   display: inline-flex;
   transition: background-color 0.3s, color 0.3s;

src/components/Author/AuthorCard.tsx

@@ -181,9 +181,24 @@ export const AuthorCard = (props: AuthorCardProps) => {
                       <Icon name="author-unsubscribe" class={styles.icon} />
                     </Show>
                     <Show when={props.isTextButton}>
-                      <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                      <span
+                        class={clsx(
+                          styles.buttonLabel,
+                          styles.buttonLabelVisible,
+                          styles.buttonUnfollowLabel
+                        )}
+                      >
                         {t('Unfollow')}
                       </span>
+                      <span
+                        class={clsx(
+                          styles.buttonLabel,
+                          styles.buttonLabelVisible,
+                          styles.buttonSubscribedLabel
+                        )}
+                      >
+                        {t('You are subscribed')}
+                      </span>
                     </Show>
                   </button>
                 </Show>