Fixed subscribe buttons style

public/locales/en/translation.json

@@ -1,5 +1,5 @@
 {
-  "...subscribing": "...subscribing",
+  "subscribing...": "subscribing...",
   "About": "About",
   "About the project": "About the project",
   "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title",

public/locales/ru/translation.json

@@ -1,5 +1,5 @@
 {
-  "...subscribing": "...подписываем",
+  "subscribing...": "Подписка...",
   "A short introduction to keep the reader interested": "Добавьте вступление, чтобы заинтересовать читателя",
   "About": "О себе",
   "About the project": "О проекте",

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -81,9 +81,24 @@
       padding: 6px !important;
       min-width: 32px;
       width: unset;
+
       &:hover img {
         filter: invert(1);
       }
     }
+
+    &:hover {
+      .actionButtonLabel {
+        display: none;
+      }
+
+      .actionButtonLabelHovered {
+        display: block;
+      }
+    }
+  }
+
+  .actionButtonLabelHovered {
+    display: none;
   }
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -60,9 +60,22 @@ export const AuthorBadge = (props: Props) => {
     if (props.iconButtons) {
       return <Icon name="author-subscribe" />
     }
-    return isSubscribing() ? t('...subscribing') : t('Subscribe')
+    return isSubscribing() ? t('subscribing...') : t('Subscribe')
   })
 
+  const unsubscribeValue = () => {
+    if (props.iconButtons) {
+      return <Icon name="author-unsubscribe" />
+    }
+
+    return (
+      <>
+        <span class={styles.actionButtonLabel}>{t('Following')}</span>
+        <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
+      </>
+    )
+  }
+
   return (
     <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
       <Userpic
@@ -112,7 +125,7 @@ export const AuthorBadge = (props: Props) => {
               fallback={
                 <Button
                   variant={props.iconButtons ? 'secondary' : 'bordered'}
-                  size="S"
+                  size="M"
                   value={subscribeValue()}
                   onClick={() => handleSubscribe(true)}
                   class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
@@ -121,8 +134,8 @@ export const AuthorBadge = (props: Props) => {
             >
               <Button
                 variant={props.iconButtons ? 'secondary' : 'bordered'}
-                size="S"
-                value={props.iconButtons ? <Icon name="author-unsubscribe" /> : t('Following')}
+                size="M"
+                value={() => unsubscribeValue()}
                 onClick={() => handleSubscribe(false)}
                 class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
               />
@@ -131,7 +144,7 @@ export const AuthorBadge = (props: Props) => {
           <Show when={props.showMessageButton}>
             <Button
               variant={props.iconButtons ? 'secondary' : 'bordered'}
-              size="S"
+              size="M"
               value={props.iconButtons ? <Icon name="inbox-white" /> : t('Message')}
               onClick={initChat}
               class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -109,6 +109,12 @@
       vertical-align: text-top;
     }
   }
+
+  .buttonWriteMessage {
+    border-radius: 0.8rem;
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+  }
 }
 
 .authorDetails {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -98,7 +98,7 @@ export const AuthorCard = (props: Props) => {
 
   const followButtonText = () => {
     if (isSubscribing()) {
-      return t('...subscribing')
+      return t('subscribing...')
     }
     return t(subscribed() ? 'Unfollow' : 'Follow')
   }
@@ -211,7 +211,7 @@ export const AuthorCard = (props: Props) => {
                     variant={'secondary'}
                     value={t('Message')}
                     onClick={initChat}
-                    class={styles.buttonSubscribe}
+                    class={styles.buttonWriteMessage}
                   />
                 </div>
               }

src/components/Topic/Card.module.scss

@@ -115,6 +115,12 @@
   }
 }
 
+.actionButton {
+  border-radius: 0.8rem !important;
+  margin-right: 0 !important;
+  width: 9em;
+}
+
 .isSubscribing {
   opacity: 0.5;
 }

src/components/Topic/Card.tsx

@@ -13,6 +13,7 @@ import { CheckButton } from '../_shared/CheckButton'
 import { capitalize } from '../../utils/capitalize'
 
 import styles from './Card.module.scss'
+import { Button } from '../_shared/Button'
 
 interface TopicProps {
   topic: Topic
@@ -62,6 +63,24 @@ export const TopicCard = (props: TopicProps) => {
     }, 'subscribe')
   }
 
+  const subscribeValue = () => {
+    return (
+      <>
+        <Show when={props.iconButton}>
+          <Show when={subscribed()} fallback="+">
+            <Icon name="check-subscribed" />
+          </Show>
+        </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>
+          </Show>
+        </Show>
+      </>
+    )
+  }
+
   return (
     <div class={styles.topicContainer}>
       <div
@@ -123,27 +142,17 @@ export const TopicCard = (props: TopicProps) => {
                   <CheckButton text={t('Follow')} checked={subscribed()} onClick={handleSubscribe} />
                 }
               >
-                <button
+                <Button
+                  variant="bordered"
+                  size="M"
+                  value={subscribeValue()}
                   onClick={handleSubscribe}
-                  class="button--light button--subscribe-topic"
-                  classList={{
+                  class={clsx(styles.actionButton, {
                     [styles.isSubscribing]: isSubscribing(),
                     [styles.isSubscribed]: subscribed()
-                  }}
+                  })}
                   disabled={isSubscribing()}
-                >
-                  <Show when={props.iconButton}>
-                    <Show when={subscribed()} fallback="+">
-                      <Icon name="check-subscribed" />
-                    </Show>
-                  </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>
-                    </Show>
-                  </Show>
-                </button>
+                />
               </Show>
             </Show>
           </ShowOnlyOnClient>

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -80,7 +80,7 @@ export const TopicBadge = (props: Props) => {
                 <Button
                   variant="primary"
                   size="S"
-                  value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
+                  value={isSubscribing() ? t('subscribing...') : t('Subscribe')}
                   onClick={() => subscribe(true)}
                   class={styles.subscribeButton}
                 />

src/components/_shared/Subscribe/Subscribe.tsx

@@ -44,7 +44,7 @@ export const Subscribe = (props: Props) => {
 
     if (!validate()) return
 
-    setTitle(t('...subscribing'))
+    setTitle(t('subscribing...'))
 
     const requestOptions = {
       method: 'POST',
@@ -106,7 +106,7 @@ export const Subscribe = (props: Props) => {
               <Icon name="arrow-right" />
             </button>
           </div>
-          <div class="description">Подпишитесь на рассылку лучших публикаций</div>
+          <div class="description">Подпишитесь на&nbsp;рассылку лучших публикаций</div>
         </Show>
         <Show when={emailError()}>
           <div class={styles.error}>{emailError()}</div>

src/styles/app.scss

@@ -1036,3 +1036,7 @@ iframe {
 .cursorPointer {
   cursor: pointer;
 }
+
+.img-align-column {
+  clear: both;
+}