From 9e87a0f55c84c0f7698263b16f66fb7aa1c9ed4e Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 7 Sep 2023 01:55:16 +0300
Subject: [PATCH] Fixed couners style in the modals on the author page

---
 .../Author/AuthorCard/AuthorCard.module.scss     | 16 ++++++++++++++++
 src/components/Author/AuthorCard/AuthorCard.tsx  | 13 ++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index fa6574c4..fe8c8d07 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/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;
+}
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 3975b566..9ee3c6b4 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/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 />