diff --git a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx
index 5949662828..4239d3d3e5 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/notifications/components/notification_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx
index 6ba97066ce..6c9e2980de 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/notifications';
import { Avatar } from 'flavours/glitch/components/avatar';
import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -51,7 +51,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
-
+
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 5399bace34..4496179d6d 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -10593,10 +10593,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;
@@ -10604,15 +10604,12 @@ noscript {
&:active,
&:focus {
color: $secondary-text-color;
-
- .filtered-notifications-banner__badge {
- background: $secondary-text-color;
- }
}
.icon {
width: 24px;
height: 24px;
+ padding: 2px;
}
&__text {
@@ -10628,13 +10625,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;
+ }
}
}
@@ -10643,7 +10651,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;
@@ -10691,7 +10699,7 @@ noscript {
.icon-button {
border-radius: 4px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
padding: 5px;
}
}