mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change filtered notification banner design to take up less space 

Port 2c1e75727d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2803/head
Claire 2024-07-31 14:36:08 +02:00
parent feed816398
commit de8a31f7df
2 changed files with 6 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.tsx
View File

@ -49,21 +49,14 @@ export const FilteredNotificationsBanner: React.FC = () => {
<span> <span>
<FormattedMessage <FormattedMessage
id='filtered_notifications_banner.pending_requests' id='filtered_notifications_banner.pending_requests'
defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know' defaultMessage='From {count, plural, =0 {no one} one {one person} other {# people}} you may know'
values={{ count: policy.summary.pending_requests_count }} values={{ count: policy.summary.pending_requests_count }}
/> />
</span> </span>
</div> </div>
<div className='filtered-notifications-banner__badge'> <div className='filtered-notifications-banner__badge'>
<div className='filtered-notifications-banner__badge__badge'> {toCappedNumber(policy.summary.pending_notifications_count)}
{toCappedNumber(policy.summary.pending_notifications_count)}
</div>
<FormattedMessage
id='filtered_notifications_banner.mentions'
defaultMessage='{count, plural, one {mention} other {mentions}}'
values={{ count: policy.summary.pending_notifications_count }}
/>
</div> </div>
</Link> </Link>
); );

23
app/javascript/flavours/glitch/styles/components.scss
View File

@ -10730,25 +10730,10 @@ noscript {
} }
&__badge { &__badge {
display: flex; background: $ui-button-background-color;
align-items: center; color: $white;
border-radius: 999px; border-radius: 100px;
background: var(--background-border-color); padding: 2px 8px;
color: $darker-text-color;
padding: 4px;
padding-inline-end: 8px;
gap: 6px;
font-weight: 500;
font-size: 11px;
line-height: 16px;
word-break: keep-all;
&__badge {
background: $ui-button-background-color;
color: $white;
border-radius: 100px;
padding: 2px 8px;
}
} }
} }