Fixed buttons style

src/components/Author/AuthorCard.module.scss

@@ -168,8 +168,12 @@
   display: none;
 }
 
+.buttonLabelVisible {
+  display: block;
+}
+
 .buttonWrite {
-  @include font-size(1.5rem);
+  //@include font-size(1.5rem);
 
   color: #000;
   display: inline-flex;

src/components/Author/AuthorCard.tsx

@@ -27,6 +27,7 @@ interface AuthorCardProps {
   isAuthorsList?: boolean
   truncateBio?: boolean
   liteButtons?: boolean
+  isTextButton?: boolean
   isComments?: boolean
   isFeedMode?: boolean
   isNowrap?: boolean
@@ -132,18 +133,22 @@ export const AuthorCard = (props: AuthorCardProps) => {
                       onClick={() => subscribe(true)}
                       class={clsx('button', styles.button)}
                       classList={{
-                        [styles.buttonSubscribe]: !props.isAuthorsList,
+                        [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
                         'button--subscribe': !props.isAuthorsList,
-                        'button--subscribe-topic': props.isAuthorsList,
+                        'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
-                        [styles.buttonWrite]: props.isAuthorsList,
+                        [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
                         [styles.isSubscribing]: isSubscribing()
                       }}
                       disabled={isSubscribing()}
                     >
-                      <Show when={!props.isAuthorsList}>
+                      <Show when={!props.isAuthorsList && !props.isTextButton}>
                         <Icon name="author-subscribe" class={styles.icon} />
                       </Show>
-                      <span class={styles.buttonLabel}>{t('Follow')}</span>
+                      <Show when={props.isTextButton}>
+                        <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                          {t('Follow')}
+                        </span>
+                      </Show>
                     </button>
                   }
                 >
@@ -151,18 +156,22 @@ export const AuthorCard = (props: AuthorCardProps) => {
                     onClick={() => subscribe(false)}
                     class={clsx('button', styles.button)}
                     classList={{
-                      [styles.buttonSubscribe]: !props.isAuthorsList,
+                      [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
                       'button--subscribe': !props.isAuthorsList,
-                      'button--subscribe-topic': props.isAuthorsList,
+                      'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
-                      [styles.buttonWrite]: props.isAuthorsList,
+                      [styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
                       [styles.isSubscribing]: isSubscribing()
                     }}
                     disabled={isSubscribing()}
                   >
-                    <Show when={!props.isAuthorsList}>
+                    <Show when={!props.isAuthorsList && !props.isTextButton}>
                       <Icon name="author-unsubscribe" class={styles.icon} />
                     </Show>
-                    <span class={styles.buttonLabel}>{t('Unfollow')}</span>
+                    <Show when={props.isTextButton}>
+                      <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
+                        {t('Unfollow')}
+                      </span>
+                    </Show>
                   </button>
                 </Show>
 
@@ -177,8 +186,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
                     }}
                     onClick={initChat}
                   >
+                    <Show when={!props.isTextButton}>
                       <Icon name="comment" class={styles.icon} />
-                    <Show when={!props.liteButtons}>{t('Write')}</Show>
+                    </Show>
+                    <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
                   </button>
 
                   <Show when={!props.noSocialButtons}>

src/components/Topic/Card.module.scss

@@ -18,14 +18,15 @@
     margin-top: 0;
   }
 
-  .topicTitle {
+  @include media-breakpoint-up(sm) {
+    .topicDescription {
       margin-bottom: 0;
     }
+  }
 }
 
 .topicTitle {
   @include font-size(2.2rem);
-
   font-weight: bold;
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
@@ -50,9 +51,8 @@
 
 .topicDescription {
   @include font-size(1.6rem);
-
   color: #696969;
-  margin: 0 0 1.6rem;
+  margin: 0.5em 0 1.6rem;
 
   &.compact {
     font-size: medium;
@@ -102,7 +102,7 @@
 }
 
 .controlContainer {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
     text-align: right;
   }
 }
@@ -124,4 +124,10 @@
 .isSubscribed {
   background: #000;
   color: #fff;
+  transition: background-color 0.3s, color 0.3s;
+
+  &:hover {
+    background: #fff;
+    color: #000;
+  }
 }

src/components/Topic/Card.tsx

@@ -21,6 +21,7 @@ interface TopicProps {
   isTopicInRow?: boolean
   iconButton?: boolean
   showPublications?: boolean
+  showDescription?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -56,12 +57,12 @@ export const TopicCard = (props: TopicProps) => {
     <div
       class={styles.topic}
       classList={{
-        row: !props.compact && !props.subscribeButtonBottom,
+        row: !props.subscribeButtonBottom,
         [styles.topicCompact]: props.compact,
         [styles.topicInRow]: props.isTopicInRow
       }}
     >
-      <div classList={{ 'col-md-18 col-lg-14 col-xl-12': !props.compact && !props.subscribeButtonBottom }}>
+      <div classList={{ 'col-sm-18 col-lg-14 col-xl-12': !props.subscribeButtonBottom }}>
         <Show when={props.topic.title}>
           <h3 class={styles.topicTitle}>
             <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
@@ -75,7 +76,7 @@ export const TopicCard = (props: TopicProps) => {
           </div>
         </Show>
 
-        <Show when={!props.compact && props.topic?.body}>
+        <Show when={props.showDescription && props.topic?.body}>
           <div
             class={clsx(styles.topicDescription, 'text-truncate')}
             classList={{ 'topic-description--short': props.shortDescription }}
@@ -86,7 +87,7 @@ export const TopicCard = (props: TopicProps) => {
       </div>
       <div
         class={styles.controlContainer}
-        classList={{ 'col-md-6': !props.compact && !props.subscribeButtonBottom }}
+        classList={{ 'col-sm-6 col-lg-10 col-xl-12': !props.subscribeButtonBottom }}
       >
         <ShowOnlyOnClient>
           <Show when={isSessionLoaded()}>

src/components/Views/AllAuthors.tsx

@@ -188,6 +188,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
                       noSocialButtons={true}
                       isAuthorsList={true}
                       truncateBio={true}
+                      isTextButton={true}
                     />
                   </div>
                 </div>

src/components/Views/AllTopics.tsx

@@ -176,6 +176,8 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
             </Show>
 
             <Show when={searchParams().by && searchParams().by !== 'title'}>
+              <div class="row">
+                <div className="col-lg-20 col-xl-18">
                   <For each={filteredResults().slice(0, limit())}>
                     {(topic) => (
                       <>
@@ -184,11 +186,14 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                           compact={false}
                           subscribed={subscribed(topic.slug)}
                           showPublications={true}
+                          showDescription={true}
                         />
                         <StatMetrics fields={['shouts', 'authors', 'followers']} stat={topic.stat} />
                       </>
                     )}
                   </For>
+                </div>
+              </div>
             </Show>
 
             <Show when={filteredResults().length > limit() && searchParams().by !== 'title'}>

src/components/Views/Author/Author.module.scss

@@ -79,3 +79,11 @@
   align-items: center;
   justify-content: center;
 }
+
+.subscriptions {
+  margin-top: -2em;
+}
+
+.authorContainer {
+  margin-top: 3.2rem;
+}

src/components/Views/Author/Author.tsx

@@ -242,7 +242,7 @@ export const AuthorView = (props: AuthorProps) => {
           </div>
         </Match>
         <Match when={searchParams().by === 'subscriptions'}>
-          <div class="wide-container">
+          <div class={clsx('wide-container', styles.subscriptions)}>
             <div class="row position-relative">
               <Show
                 when={isLoaded()}
@@ -254,11 +254,18 @@ export const AuthorView = (props: AuthorProps) => {
               >
                 <For each={subscriptions()}>
                   {(subscription: Author | Topic) => (
-                    <div class="col-md-24">
+                    <div class="col-md-20 col-lg-18">
                       {isAuthor(subscription) ? (
-                        <AuthorCard author={subscription} hideWriteButton={true} hasLink={true} />
+                        <div class={styles.authorContainer}>
+                          <AuthorCard
+                            author={subscription}
+                            hideWriteButton={true}
+                            hasLink={true}
+                            isTextButton={true}
+                          />
+                        </div>
                       ) : (
-                        <TopicCard compact iconButton isTopicInRow topic={subscription} />
+                        <TopicCard compact isTopicInRow showDescription topic={subscription} />
                       )}
                     </div>
                   )}

src/components/_shared/Stat.module.scss

@@ -1,13 +1,16 @@
 .statMetrics {
   @include font-size(1.7rem);
-
   color: #9fa1a7;
   display: flex;
-  margin: 0.5em 0 1em;
+  margin: 0 0 1em;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
   }
+
+  @include media-breakpoint-down(sm) {
+    margin-top: 0.5em;
+  }
 }
 
 .statMetricsItem {