Account for different notification types

app/assets/stylesheets/notifications.css

@@ -50,11 +50,11 @@
     align-items: flex-start;
     background-color: var(--color-canvas);
     border: 1px solid var(--color-ink-lighter);
-    border-radius: 0.5em;
+    border-radius: 0.2em;
     box-shadow: var(--shadow);
     color: var(--color-ink);
     display: block;
-    font-size: 10px;
+    font-size: var(--text-normal);
     inline-size: 100%;
     max-inline-size: 100%;
     padding: var(--notification-padding-block) var(--notification-padding-inline);
@@ -76,7 +76,7 @@
     align-items: center;
     display: flex;
     gap: var(--inline-space);
-    margin-block-end: var(--notification-padding-block);
+    margin-block-end: 1ch;
     margin-block-start: calc(-1 * var(--notification-padding-block));
     margin-inline-start: calc(-1 * var(--notification-padding-inline));
     min-inline-size: 0;
@@ -86,10 +86,15 @@
     background-color: var(--card-color);
     border-radius: 0.2em 0 0.2em 0;
     color: var(--color-ink-inverted);
+    font-size: 0.6em;
     font-weight: 800;
     inline-size: fit-content;
     padding: 0.25ch var(--inline-space) 0.25ch var(--inline-space-double);
     text-transform: uppercase;
+
+    .tray & {
+      font-size: 10px;
+    }
   }
 
   .notification__id {

app/assets/stylesheets/trays.css

@@ -118,6 +118,7 @@
   .tray__item-meta {
     font-size: var(--text-x-small);
     font-weight: 500;
+    opacity: 0.66;
   }
 
   .tray__overflow {

app/views/notifications/_notification.html.erb

@@ -2,15 +2,7 @@
   <%= notification_tag notification do %>
 
     <header class="notification__header">
-      <div class="notification__collection">
-        <span class="notification__id"><%= notification.source.id %></span>
-        <span class="notification__collection-name overflow-ellipsis">
-          <%= notification.source.collection.name %>
-        </span>
-      </div>
-      <span class="notification__time">
-        <%= local_datetime_tag(notification.created_at, style: :ago) %>
-      </span>
+      <%= render "notifications/notification/#{notification.source_type.underscore}/header", notification: notification %>
     </header>
 
     <div class="notification__body">
@@ -19,7 +11,7 @@
       </div>
 
       <div class="flex flex-column min-width flex-item-grow">
-        <%= render "notifications/notification/#{notification.source_type.underscore}", notification: notification %>
+        <%= render "notifications/notification/#{notification.source_type.underscore}/body", notification: notification %>
       </div>
     </div>
   <% end %>

app/views/notifications/notification/event/_body.html.erb

@@ -4,3 +4,4 @@
 <div class="overflow-ellipsis txt-small txt-tight-lines">
   <%= event_notification_body(event) %>
 </div>
+<div class="tray__item-meta overflow-ellipsis"> <%= local_datetime_tag(notification.created_at, style: :ago) %></div>

app/views/notifications/notification/event/_header.html.erb

@@ -0,0 +1,6 @@
+<div class="notification__collection">
+  <span class="notification__id"><%= notification.source.id %></span>
+  <span class="notification__collection-name overflow-ellipsis">
+    <%= notification.source.collection.name %>
+  </span>
+</div>

app/views/notifications/notification/mention/_header.html.erb

@@ -0,0 +1,3 @@
+<div class="notification__collection">
+  <span class="notification__id"><%= notification.source.id %></span>
+</div>