Subscribe buttons refactoring

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>

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;

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')}

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()

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;
+    }
+  }
 }

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
       )}