treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix background and icon on notification requests in web UI (#29706)

main-rebase-security-fix
Eugen Rochko 2024-03-25 14:39:06 +01:00 committed by GitHub
parent 29f9dc742e
commit 0cea7a623b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.jsx
View File

@ -41,7 +41,8 @@ export const FilteredNotificationsBanner = () => {
</div> </div>
<div className='filtered-notifications-banner__badge'> <div className='filtered-notifications-banner__badge'>
{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))} <div className='filtered-notifications-banner__badge__badge'>{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}</div>
<FormattedMessage id='filtered_notifications_banner.private_mentions' defaultMessage='{count, plural, one {private mention} other {private mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
</div> </div>
</Link> </Link>
); );

4
app/javascript/mastodon/features/notifications/components/notification_request.jsx
View File

@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
import DoneIcon from '@/material-icons/400-24px/done.svg?react'; import DoneIcon from '@/material-icons/400-24px/done.svg?react';
import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications'; import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
import { Avatar } from 'mastodon/components/avatar'; import { Avatar } from 'mastodon/components/avatar';
import { IconButton } from 'mastodon/components/icon_button'; import { IconButton } from 'mastodon/components/icon_button';
@ -51,7 +51,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
</Link> </Link>
<div className='notification-request__actions'> <div className='notification-request__actions'>
<IconButton iconComponent={VolumeOffIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} /> <IconButton iconComponent={DeleteIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
<IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} /> <IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} />
</div> </div>
</div> </div>

1
app/javascript/mastodon/locales/en.json
View File

@ -298,6 +298,7 @@
"filter_modal.select_filter.title": "Filter this post", "filter_modal.select_filter.title": "Filter this post",
"filter_modal.title.status": "Filter a post", "filter_modal.title.status": "Filter a post",
"filtered_notifications_banner.pending_requests": "Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know", "filtered_notifications_banner.pending_requests": "Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know",
"filtered_notifications_banner.private_mentions": "{count, plural, one {private mention} other {private mentions}}",
"filtered_notifications_banner.title": "Filtered notifications", "filtered_notifications_banner.title": "Filtered notifications",
"firehose.all": "All", "firehose.all": "All",
"firehose.local": "This server", "firehose.local": "This server",

36
app/javascript/styles/mastodon/components.scss
View File

@ -10005,10 +10005,10 @@ noscript {
.filtered-notifications-banner { .filtered-notifications-banner {
display: flex; display: flex;
align-items: center; align-items: center;
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-top: 0;
padding: 15px; padding: 24px 32px;
gap: 15px; gap: 16px;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
@ -10016,15 +10016,12 @@ noscript {
&:active, &:active,
&:focus { &:focus {
color: $secondary-text-color; color: $secondary-text-color;
.filtered-notifications-banner__badge {
background: $secondary-text-color;
}
} }
.icon { .icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
padding: 2px;
} }
&__text { &__text {
@ -10040,13 +10037,24 @@ noscript {
} }
&__badge { &__badge {
background: $darker-text-color; display: flex;
color: $ui-base-color; align-items: center;
border-radius: 100px; border-radius: 999px;
padding: 2px 8px; background: var(--background-border-color);
color: $darker-text-color;
padding: 4px;
padding-inline-end: 8px;
gap: 6px;
font-weight: 500; font-weight: 500;
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
&__badge {
background: $ui-button-background-color;
color: $white;
border-radius: 100px;
padding: 2px 8px;
}
} }
} }
@ -10055,7 +10063,7 @@ noscript {
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
&__link { &__link {
display: flex; display: flex;
@ -10103,7 +10111,7 @@ noscript {
.icon-button { .icon-button {
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 5px; padding: 5px;
} }
} }