Fixed couners style in the modals on the author page

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

@@ -479,3 +479,19 @@
   overflow: auto;
   padding-right: 2rem;
 }
+
+.switcherCounter {
+  background: #f7f7f8;
+  border-radius: 0.8rem;
+  display: inline-block;
+  font-size: 1.2rem;
+  font-weight: bold;
+  line-height: 1.2;
+  margin-left: 0.4rem;
+  padding: 0.4rem 0.6rem;
+}
+
+:global(.view-switcher__item--selected) .switcherCounter {
+  background: #000;
+  color: #fff;
+}

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -372,18 +372,25 @@ export const AuthorCard = (props: AuthorCardProps) => {
             <ul class="view-switcher">
               <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
                 <button type="button" onClick={() => setSubscriptionFilter('all')}>
-                  {t('All')} {props.subscriptions.length}
+                  {t('All')}
                 </button>
+                <span class={styles.switcherCounter}>{props.subscriptions.length}</span>
               </li>
               <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
                 <button type="button" onClick={() => setSubscriptionFilter('users')}>
-                  {t('Users')} {props.subscriptions.filter((s) => 'name' in s).length}
+                  {t('Users')}
                 </button>
+                <span class={styles.switcherCounter}>
+                  {props.subscriptions.filter((s) => 'name' in s).length}
+                </span>
               </li>
               <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
                 <button type="button" onClick={() => setSubscriptionFilter('topics')}>
-                  {t('Topics')} {props.subscriptions.filter((s) => 'title' in s).length}
+                  {t('Topics')}
                 </button>
+                <span class={styles.switcherCounter}>
+                  {props.subscriptions.filter((s) => 'title' in s).length}
+                </span>
               </li>
             </ul>
             <br />