djsundog/tootlab-mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2024-11-30 12:00:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Port 2c1e75727d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
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>
<FormattedMessage
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 }}
/>
</span>
</div>
<div className='filtered-notifications-banner__badge'>
<div className='filtered-notifications-banner__badge__badge'>
{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 }}
/>
{toCappedNumber(policy.summary.pending_notifications_count)}
</div>
</Link>
);

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

@ -10730,25 +10730,10 @@ noscript {
}
&__badge {
display: flex;
align-items: center;
border-radius: 999px;
background: var(--background-border-color);
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;
}
background: $ui-button-background-color;
color: $white;
border-radius: 100px;
padding: 2px 8px;
}
}