From 0cea7a623be470c51d7a162265f44f5a3e149275 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 25 Mar 2024 14:39:06 +0100 Subject: [PATCH] Fix background and icon on notification requests in web UI (#29706) --- .../filtered_notifications_banner.jsx | 3 +- .../components/notification_request.jsx | 4 +-- app/javascript/mastodon/locales/en.json | 1 + .../styles/mastodon/components.scss | 36 +++++++++++-------- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.jsx b/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.jsx index adf58afbf0..ecf4b74e80 100644 --- a/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.jsx +++ b/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.jsx @@ -41,7 +41,8 @@ export const FilteredNotificationsBanner = () => {
- {toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))} +
{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}
+
); diff --git a/app/javascript/mastodon/features/notifications/components/notification_request.jsx b/app/javascript/mastodon/features/notifications/components/notification_request.jsx index e24124ca6a..3a77ef4e2e 100644 --- a/app/javascript/mastodon/features/notifications/components/notification_request.jsx +++ b/app/javascript/mastodon/features/notifications/components/notification_request.jsx @@ -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 }) => {
- +
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 5aa3b5c90b..881ed19e0e 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -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", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e5cfe235da..3704751eff 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -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; } }