Fixed subscribe button style

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>

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

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;

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

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