From 2e30aaa59438c6f94ef5d2021355751034fcb4c5 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 8 Nov 2023 23:42:13 +0300
Subject: [PATCH] Subscribe buttons refactoring

---
 .../Author/AuthorBadge/AuthorBadge.tsx        |  2 +
 .../Author/AuthorCard/AuthorCard.module.scss  | 45 -------------------
 .../Author/AuthorCard/AuthorCard.tsx          | 11 ++---
 src/components/Topic/Card.tsx                 |  1 +
 .../_shared/Button/Button.module.scss         | 45 +++++++++++++++++++
 src/components/_shared/Button/Button.tsx      |  4 +-
 6 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 47ba693b..289cfa7e 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -130,6 +130,7 @@ export const AuthorBadge = (props: Props) => {
                   size="M"
                   value={subscribeValue()}
                   onClick={() => handleSubscribe(true)}
+                  isSubscribeButton={true}
                   class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
                 />
               }
@@ -139,6 +140,7 @@ export const AuthorBadge = (props: Props) => {
                 size="M"
                 value={unsubscribeValue()}
                 onClick={() => handleSubscribe(false)}
+                isSubscribeButton={true}
                 class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
               />
             </Show>
diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 7c121bf7..7853160b 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -77,51 +77,6 @@
     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);
-      }
-
-      .buttonSubscribeLabel {
-        display: none;
-      }
-
-      .buttonSubscribeLabelHovered {
-        display: block;
-      }
-    }
-
-    img {
-      vertical-align: text-top;
-    }
-  }
-
-  .buttonSubscribeLabelHovered {
-    display: none;
-  }
-
   .buttonWriteMessage {
     border-radius: 0.8rem;
     padding-bottom: 0.6rem;
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 662aa1a9..5bac630c 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -18,6 +18,7 @@ import { TopicBadge } from '../../Topic/TopicBadge'
 import { Button } from '../../_shared/Button'
 import { getShareUrl, SharePopup } from '../../Article/SharePopup'
 import styles from './AuthorCard.module.scss'
+import stylesButton from '../../_shared/Button/Button.module.scss'
 
 type Props = {
   author: Author
@@ -102,8 +103,8 @@ export const AuthorCard = (props: Props) => {
     } else if (subscribed()) {
       return (
         <>
-          <span class={styles.buttonSubscribeLabel}>{t('Following')}</span>
-          <span class={styles.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
+          <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
+          <span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
         </>
       )
     } else {
@@ -210,11 +211,7 @@ export const AuthorCard = (props: Props) => {
               when={isProfileOwner()}
               fallback={
                 <div class={styles.authorActions}>
-                  <Button
-                    onClick={handleSubscribe}
-                    value={followButtonText()}
-                    class={styles.buttonSubscribe}
-                  />
+                  <Button onClick={handleSubscribe} value={followButtonText()} isSubscribeButton={true} />
                   <Button
                     variant={'secondary'}
                     value={t('Message')}
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 84b0562e..837feafc 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -147,6 +147,7 @@ export const TopicCard = (props: TopicProps) => {
                   size="M"
                   value={subscribeValue()}
                   onClick={handleSubscribe}
+                  isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
                     [styles.isSubscribing]: isSubscribing(),
                     [styles.isSubscribed]: subscribed()
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss
index 6f9ca1af..a3a49604 100644
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@@ -131,4 +131,49 @@
     font-size: 15px;
     padding: 1rem 1.2rem;
   }
+
+  &.subscribeButton {
+    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);
+      }
+
+      .buttonSubscribeLabel {
+        display: none;
+      }
+
+      .buttonSubscribeLabelHovered {
+        display: block;
+      }
+    }
+
+    .buttonSubscribeLabelHovered {
+      display: none;
+    }
+
+    img {
+      vertical-align: text-top;
+    }
+  }
 }
diff --git a/src/components/_shared/Button/Button.tsx b/src/components/_shared/Button/Button.tsx
index e892ef5e..c44eb7f9 100644
--- a/src/components/_shared/Button/Button.tsx
+++ b/src/components/_shared/Button/Button.tsx
@@ -13,6 +13,7 @@ type Props = {
   onClick?: (event?: MouseEvent) => void
   class?: string
   ref?: HTMLButtonElement | ((el: HTMLButtonElement) => void)
+  isSubscribeButton?: boolean
 }
 
 export const Button = (props: Props) => {
@@ -33,7 +34,8 @@ export const Button = (props: Props) => {
         styles[props.size ?? 'M'],
         styles[props.variant ?? 'primary'],
         {
-          [styles.loading]: props.loading
+          [styles.loading]: props.loading,
+          [styles.subscribeButton]: props.isSubscribeButton
         },
         props.class
       )}