From ac09ac30678fb9ab34b4a6edbe598c3117f52a16 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 12 Jun 2023 22:59:25 +0300
Subject: [PATCH] Change texts on hover in the subscribe buttons

---
 src/components/Topic/Card.module.scss | 14 ++++++++++++++
 src/components/Topic/Card.tsx         |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 96706481..4e37e4a6 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -127,10 +127,24 @@
   background: #000;
   color: #fff;
   transition: background-color 0.3s, color 0.3s;
+  white-space: nowrap;
+  width: 9em;
 
   &:hover {
     background: #fff;
     color: #000;
+
+    .buttonUnfollowLabel {
+      display: block;
+    }
+
+    .buttonSubscribedLabel {
+      display: none;
+    }
+  }
+
+  .buttonUnfollowLabel {
+    display: none;
   }
 }
 
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index e6d11c02..ed5d190f 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -115,7 +115,8 @@ export const TopicCard = (props: TopicProps) => {
                 </Show>
                 <Show when={!props.iconButton}>
                   <Show when={subscribed()} fallback={t('Follow')}>
-                    {t('Unfollow')}
+                    <span class={styles.buttonUnfollowLabel}>{t('Unfollow')}</span>
+                    <span class={styles.buttonSubscribedLabel}>{t('You are subscribed')}</span>
                   </Show>
                 </Show>
               </button>