Fix background and icon on notification requests in web UI (#29706)
This commit is contained in:
parent
29f9dc742e
commit
0cea7a623b
4 changed files with 27 additions and 17 deletions
|
@ -41,7 +41,8 @@ export const FilteredNotificationsBanner = () => {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
</Link>
|
||||
);
|
||||
|
|
|
@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
|
|||
|
||||
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 VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
|
||||
import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
|
||||
import { Avatar } from 'mastodon/components/avatar';
|
||||
import { IconButton } from 'mastodon/components/icon_button';
|
||||
|
@ -51,7 +51,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
|
|||
</Link>
|
||||
|
||||
<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)} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -298,6 +298,7 @@
|
|||
"filter_modal.select_filter.title": "Filter this 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.private_mentions": "{count, plural, one {private mention} other {private mentions}}",
|
||||
"filtered_notifications_banner.title": "Filtered notifications",
|
||||
"firehose.all": "All",
|
||||
"firehose.local": "This server",
|
||||
|
|
|
@ -10005,10 +10005,10 @@ noscript {
|
|||
.filtered-notifications-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
padding: 24px 32px;
|
||||
gap: 16px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
|
@ -10016,15 +10016,12 @@ noscript {
|
|||
&:active,
|
||||
&:focus {
|
||||
color: $secondary-text-color;
|
||||
|
||||
.filtered-notifications-banner__badge {
|
||||
background: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
@ -10040,13 +10037,24 @@ noscript {
|
|||
}
|
||||
|
||||
&__badge {
|
||||
background: $darker-text-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 100px;
|
||||
padding: 2px 8px;
|
||||
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;
|
||||
|
||||
&__badge {
|
||||
background: $ui-button-background-color;
|
||||
color: $white;
|
||||
border-radius: 100px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -10055,7 +10063,7 @@ noscript {
|
|||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
|
@ -10103,7 +10111,7 @@ noscript {
|
|||
|
||||
.icon-button {
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue