added indication that a given notification is read or not (full inbox page)

Author: Oaphi

app/assets/stylesheets/_variables.scss

@@ -11,13 +11,15 @@ $key: #335;
 $muted-text: #666;
 $muted-graphic: #DDD;
 $primary: #4B68FF;
+$primary-graphic: #2980b9;
 $secondary: #EA7317;
 $warning: #FDD835;
 $danger: #EB5959;
 $success: #2ECC71;
 $info: #58A09A;
 $brand: #4B68FF;
 
+
 $data: (
   #4B68FF,
   #A23B72,
@@ -31,6 +33,7 @@ $data: (
   --muted-text: #{$muted-text};
   --muted-graphic: #{$muted-graphic};
   --primary: #{$primary};
+  --primary-graphic: #{$primary-graphic};
   --secondary: #{$secondary};
   --warning: #{$warning};
   --danger: #{$danger};

app/assets/stylesheets/notifications.scss

@@ -7,20 +7,33 @@
 
 .notification {
   border-top: 1px solid $muted-graphic;
+  display: grid;
+  gap: 0.75em;
+  grid-template-columns: max-content auto;
+  align-items: center;
   padding: 0.5em;
 
   @media screen and (min-width: $screen-md) {
     flex-direction: row;
   }
 
-  & > * {
-    margin: 0 0.2em;
-  }
-
   &:last-of-type {
     border-bottom: 1px solid $muted-graphic;
   }
 
+  .notification-icon {
+    color: $primary-graphic;
+  }
+
+  .notification-content {
+    display: flex;
+    flex-direction: column;
+
+    .form-caption {
+      margin: 0;
+    }
+  }
+
   .notification--timestamp {
     line-break: strict;
   }

app/views/notifications/index.html.erb

@@ -24,8 +24,13 @@
 
 <% @notifications.each do |notif| %>
   <div class="notification">
-    <div class="form-caption"><%= CGI.unescape_html(notif.created_at.strftime('%b&nbsp;%-d,&nbsp;%Y&nbsp;at&nbsp;%H:%M')).html_safe %></div>
-    <a href="<%= notif.link %>"><%= render_pings_text(notif.content) %></a>
+    <i class="notification-icon fas <%= notif.read? ? 'fa-envelope' : 'fa-envelope-open' %>"></i>
+    <div class="notification-content">
+      <div class="form-caption">
+        <%= CGI.unescape_html(notif.created_at.strftime('%b&nbsp;%-d,&nbsp;%Y&nbsp;at&nbsp;%H:%M')).html_safe %>
+      </div>
+      <a href="<%= notif.link %>"><%= render_pings_text(notif.content) %></a>
+    </div>
   </div>
 <% end %>