Author page style fixes

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

@@ -90,9 +90,9 @@
 
 .authorName {
   border: none !important;
+  display: block;
   font-size: 1.6rem;
   font-weight: 500;
-  line-height: 2;
   margin-bottom: 0.8rem;
 
   .listWrapper &:before {
@@ -678,24 +678,3 @@
 .listWrapper {
   max-height: 70vh;
 }
-
-.switcherCounter {
-  align-items: center;
-  background: #f7f7f8;
-  border-radius: 0.8rem;
-  display: inline-flex;
-  font-size: 1.2rem;
-  font-weight: bold;
-  height: 2.2rem;
-  justify-content: center;
-  line-height: 2.2rem;
-  margin-left: 0.4rem;
-  min-width: 2.2rem;
-  padding: 0 0.6rem;
-  text-align: center;
-}
-
-:global(.view-switcher__item--selected) .switcherCounter {
-  background: #000;
-  color: #fff;
-}

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -401,13 +401,13 @@ export const AuthorCard = (props: Props) => {
                 <button type="button" onClick={() => setSubscriptionFilter('all')}>
                   {t('All')}
                 </button>
-                <span class={styles.switcherCounter}>{props.following.length}</span>
+                <span class="view-switcher__counter">{props.following.length}</span>
               </li>
               <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
                 <button type="button" onClick={() => setSubscriptionFilter('users')}>
                   {t('Users')}
                 </button>
-                <span class={styles.switcherCounter}>
+                <span class="view-switcher__counter">
                   {props.following.filter((s) => 'name' in s).length}
                 </span>
               </li>
@@ -415,7 +415,7 @@ export const AuthorCard = (props: Props) => {
                 <button type="button" onClick={() => setSubscriptionFilter('topics')}>
                   {t('Topics')}
                 </button>
-                <span class={styles.switcherCounter}>
+                <span class="view-switcher__counter">
                   {props.following.filter((s) => 'title' in s).length}
                 </span>
               </li>

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

@@ -17,6 +17,7 @@
   border-bottom: 2px solid #000;
   margin-bottom: 2.4rem;
   padding-bottom: 4rem;
+  padding-top: 2.6rem;
 }
 
 .ratingContainer {

src/components/Views/Author/Author.tsx

@@ -138,14 +138,14 @@ export const AuthorView = (props: Props) => {
           <div class="col-md-16">
             <ul class="view-switcher">
               <li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
-                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
+                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
-                  {t('Publications')}&nbsp;({author().stat.shouts})
+                <span class="view-switcher__counter">{author().stat.shouts}</span>
-                </a>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
                 <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
-                  {t('Comments')}&nbsp;({author().stat.commented})
+                  {t('Comments')}
                 </a>
+                <span class="view-switcher__counter">{author().stat.commented}</span>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>
                 <a

src/styles/app.scss

@@ -651,6 +651,27 @@ figure {
   }
 }
 
+.view-switcher__counter {
+  align-items: center;
+  background: #f7f7f8;
+  border-radius: 0.8rem;
+  display: inline-flex;
+  font-size: 1.2rem;
+  font-weight: bold;
+  height: 2.2rem;
+  justify-content: center;
+  line-height: 2.2rem;
+  margin-left: 0.4rem;
+  min-width: 2.2rem;
+  padding: 0 0.6rem;
+  text-align: center;
+
+  .view-switcher__item--selected & {
+    background: #000;
+    color: #fff;
+  }
+}
+
 .view-switcher__search {
   flex: 1 100%;
   text-align: right;