diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 2591332d9..19ab9740c 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -464,43 +464,31 @@
}
.card__notification-unread-indicator {
- --btn-background: var(--color-canvas);
+ --btn-background: var(--color-marker);
--btn-border-color: var(--color-canvas);
- --btn-icon-size: 0.75em;
+ --btn-color: var(--color-ink-inverted);
+ --btn-icon-size: 0.5em;
--btn-padding: 0;
- --btn-size: 1.25em;
+ --btn-size: 1.6em;
+ font-size: var(--text-xx-small);
+ font-weight: 600;
+ margin: 2px;
position: relative;
z-index: 1;
- &:before,
- .icon {
- transition: opacity 150ms ease;
- }
-
- /* The red dot */
- &:before {
- aspect-ratio: 1;
- background-color: var(--color-marker);
- border-radius: 50%;
- content: "";
- inline-size: 50%;
- inset: 50% auto auto 50%;
- position: absolute;
- translate: -50% -50%;
- }
-
- /* The X */
.icon {
opacity: 0;
+ transition: opacity 150ms ease;
}
@media (hover: hover) {
.card:hover & {
- --btn-background: transparent;
+ --btn-background: var(--color-ink-lightest);
+ --btn-color: var(--color-ink);
- &:before { opacity: 0; }
- .icon { opacity: 1; }
+ .badge-count { opacity: 0; }
+ .icon { opacity: 1; }
}
}
}
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index b50e35a2c..0cf434da8 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -29,10 +29,6 @@
column-gap: var(--inline-space-half);
}
- .card__notification-unread-indicator {
- font-size: var(--text-small);
- }
-
&:has(.card--notification) {
.notifications-list__empty-message {
display: none;
@@ -40,13 +36,6 @@
}
}
- /* Grouped notifications
- /* ------------------------------------------------------------------------ */
-
- .notification--grouped {
- border: 3px solid red;
- }
-
/* Read items
/* ------------------------------------------------------------------------ */
@@ -61,12 +50,14 @@
.card__notification-unread-indicator {
--btn-background: transparent;
+ --btn-size: 1.8em;
- &:before {
- opacity: 0;
- }
+ margin: 2px;
.icon {
+ block-size: 1.7em;
+ color: var(--color-ink);
+ inline-size: 1.7em;
opacity: 1;
}
}
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 2352cb2b4..bb2538a7f 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -550,11 +550,6 @@
}
}
- .card__notification-unread-indicator {
- --btn-icon-size: 1.25em;
- --btn-size: 2em;
- }
-
/* On mobile… */
@media (max-width: 799px) {
/* …add a border */
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index dda94684d..29348493a 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -43,7 +43,6 @@ module NotificationsHelper
data: { action: "form#submit:stop badge#update:stop", form_target: "submit" },
form: { data: { controller: "form" } } do
concat(icon_tag("unseen"))
- concat(tag.span("Mark as unread", class: "for-screen-reader"))
end
else
button_to notification_reading_path(notification),
@@ -52,7 +51,7 @@ module NotificationsHelper
data: { action: "form#submit:stop badge#update:stop", form_target: "submit" },
form: { data: { controller: "form" } } do
concat(icon_tag("remove"))
- concat(tag.span("Mark as read", class: "for-screen-reader"))
+ concat(tag.span("1", class: "badge-count", data: { group_count: "" }))
end
end
end
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index 49abafcb6..b945960b8 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -3,7 +3,6 @@