From 00e905dd288952a3c4e727ccd01e1811c803285a Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 17 Jan 2025 15:37:43 -0600
Subject: [PATCH] `New for you` empty state

---
 app/assets/stylesheets/utilities.css   |  4 ++--
 app/views/notifications/index.html.erb | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 761a24b5d..17d5747dd 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -168,8 +168,8 @@
 .translucent { opacity: var(--opacity, 0.5); }
 
 /* Borders */
-.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-subtle)); }
-.border-top { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-subtle)); }
+.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
+.border-top { border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
 .borderless { border: 0; }
 
 /* Border radius */
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index aed1aa3b7..efbb8c4e9 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -18,12 +18,16 @@
   </nav>
 <% end %>
 
-<% if @unread.any? %>
-  <section class="panel center borderless unpad flex flex-column gap-half">
+<section class="panel center borderless unpad flex flex-column gap-half">
+  <% if @unread.any? %>
     <h2 class="txt-small margin-block-start-double margin-block-end-half txt-uppercase">New for you</h2>
     <%= render @unread %>
-  </section>
-<% end %>
+  <% else %>
+    <div class="pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink);">
+      <strong>Nothing new for you.</strong>
+    </div>
+  <% end %>
+</section>
 
 <% if @read.any? %>
   <section class="notificiations-list--read panel center borderless unpad flex flex-column gap-half margin-block-start-double">