From 98e0777d2eba83cc2ef324d0114de4426958c3c3 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 8 Nov 2023 23:52:56 +0300
Subject: [PATCH] Fixed subscribe button style

---
 src/components/Author/AuthorBadge/AuthorBadge.tsx | 11 +++++++++--
 src/components/Author/AuthorCard/AuthorCard.tsx   |  9 ++++++++-
 src/components/Topic/Card.module.scss             |  2 ++
 src/components/Topic/Card.tsx                     |  7 ++++---
 src/components/_shared/Button/Button.module.scss  | 10 ++++++++++
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 289cfa7e..79d7b506 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -1,5 +1,6 @@
 import { clsx } from 'clsx'
 import styles from './AuthorBadge.module.scss'
+import stylesButton from '../../_shared/Button/Button.module.scss'
 import { Userpic } from '../Userpic'
 import { Author, FollowingEntity } from '../../../graphql/types.gen'
 import { createMemo, createSignal, Match, Show, Switch } from 'solid-js'
@@ -131,7 +132,10 @@ export const AuthorBadge = (props: Props) => {
                   value={subscribeValue()}
                   onClick={() => handleSubscribe(true)}
                   isSubscribeButton={true}
-                  class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
+                  class={clsx(styles.actionButton, {
+                    [styles.iconed]: props.iconButtons,
+                    [stylesButton.subscribed]: subscribed()
+                  })}
                 />
               }
             >
@@ -141,7 +145,10 @@ export const AuthorBadge = (props: Props) => {
                 value={unsubscribeValue()}
                 onClick={() => handleSubscribe(false)}
                 isSubscribeButton={true}
-                class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
+                class={clsx(styles.actionButton, {
+                  [styles.iconed]: props.iconButtons,
+                  [stylesButton.subscribed]: subscribed()
+                })}
               />
             </Show>
           </Show>
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 5bac630c..07b38a28 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -211,7 +211,14 @@ export const AuthorCard = (props: Props) => {
               when={isProfileOwner()}
               fallback={
                 <div class={styles.authorActions}>
-                  <Button onClick={handleSubscribe} value={followButtonText()} isSubscribeButton={true} />
+                  <Button
+                    onClick={handleSubscribe}
+                    value={followButtonText()}
+                    isSubscribeButton={true}
+                    class={{
+                      [stylesButton.subscribed]: subscribed()
+                    }}
+                  />
                   <Button
                     variant={'secondary'}
                     value={t('Message')}
diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 50107b68..b82b3614 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -127,6 +127,7 @@
   opacity: 0.5;
 }
 
+/*
 .isSubscribed {
   background: #000;
   color: #fff;
@@ -153,6 +154,7 @@
     display: none;
   }
 }
+*/
 
 .cardMode {
   margin-bottom: 0;
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 837feafc..7dab0cf0 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -14,6 +14,7 @@ import { capitalize } from '../../utils/capitalize'
 
 import styles from './Card.module.scss'
 import { Button } from '../_shared/Button'
+import stylesButton from '../_shared/Button/Button.module.scss'
 
 interface TopicProps {
   topic: Topic
@@ -73,8 +74,8 @@ export const TopicCard = (props: TopicProps) => {
         </Show>
         <Show when={!props.iconButton}>
           <Show when={subscribed()} fallback={t('Follow')}>
-            <span class={styles.buttonUnfollowLabel}>{t('Unfollow')}</span>
-            <span class={styles.buttonSubscribedLabel}>{t('Following')}</span>
+            <span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
+            <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
           </Show>
         </Show>
       </>
@@ -150,7 +151,7 @@ export const TopicCard = (props: TopicProps) => {
                   isSubscribeButton={true}
                   class={clsx(styles.actionButton, {
                     [styles.isSubscribing]: isSubscribing(),
-                    [styles.isSubscribed]: subscribed()
+                    [stylesButton.subscribed]: subscribed()
                   })}
                   disabled={isSubscribing()}
                 />
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss
index a3a49604..44367b0f 100644
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@@ -176,4 +176,14 @@
       vertical-align: text-top;
     }
   }
+
+  &.subscribed {
+    background: #fff;
+    color: #000;
+
+    &:hover {
+      background: #000;
+      color: #fff;
+    }
+  }
 }