From c03f961d10943b8846a1129bc4a19edb5a1beda5 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 15 Jun 2023 23:44:49 +0300
Subject: [PATCH] Change text on hover in author follow button

---
 src/components/Author/AuthorCard.module.scss | 19 ++++++++++++++++---
 src/components/Author/AuthorCard.tsx         | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/Author/AuthorCard.module.scss b/src/components/Author/AuthorCard.module.scss
index 8e4be847..7c735b7f 100644
--- a/src/components/Author/AuthorCard.module.scss
+++ b/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;
diff --git a/src/components/Author/AuthorCard.tsx b/src/components/Author/AuthorCard.tsx
index ed4133fa..6db661a5 100644
--- a/src/components/Author/AuthorCard.tsx
+++ b/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>