discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Fixed couners style in the modals on the author page

Browse Source
This commit is contained in:
kvakazyambra 2023-09-07 01:55:16 +03:00
parent 25555da4cd
commit 9e87a0f55c
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Author/AuthorCard/AuthorCard.module.scss
View File

@ -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;
}

13
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -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 />