Nicer blank slates

app/assets/stylesheets/card-columns.css

@@ -402,27 +402,44 @@
     }
   }
 
-  .blank-slate--card {
+  .blank-slate--drag {
     box-shadow: none !important;
     color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas));
 
+    p {
+      font-size: var(--text-small);
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .cards--considering & {
       background-color: var(--card-bg-color) !important;
     }
 
-    p {
-      font-size: var(--text-small);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .cards--grid & {
+      display: none;
+    }
+  }
 
-      &.blank-slate-for-grid {
-        display: none;
+  .blank-slate--empty {
+    border: 2px dashed var(--color-ink-light);
+    border-radius: 1ch;
+    color: var(--color-ink-dark);
+    margin-block-start: 5dvh;
+    padding: 1ch 2ch;
+    rotate: -3deg;
+    font-weight: 500;
 
-        .cards--grid & {
-          display: initial;
-        }
-      }
+    .cards:not(.cards--grid) & {
+      display: none;
+    }
+  }
+
+  .blank-slate--filters {
+    .cards--grid:has(.card) & {
+      display: none;
     }
   }
 

app/views/boards/columns/closeds/show.html.erb

@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>

app/views/boards/columns/not_nows/show.html.erb

@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>

app/views/boards/columns/show.html.erb

@@ -18,10 +18,10 @@
       <% end %>
     <% else %>
       <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        <div class="blank-slate blank-slate--drag card">
+          <p>Drag cards here</p>
         </div>
+        <div class="blank-slate blank-slate--empty">No cards here</div>
       </div>
     <% end %>
   <% end %>

app/views/boards/columns/streams/show.html.erb

@@ -17,9 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>

app/views/boards/show/_filtered_cards.html.erb

@@ -2,4 +2,5 @@
   <%= with_automatic_pagination :filtered_cards_paginated_container, page do %>
     <%= render "cards/display/previews", cards: page.records, draggable: true %>
   <% end %>
+  <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
 </section>

app/views/cards/index.html.erb

@@ -22,5 +22,6 @@
     <%= with_automatic_pagination :cards_paginated_container, @page do %>
       <%= render "cards/display/previews", cards: @page.records, draggable: true %>
     <% end %>
+    <div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
   </section>
 <% end %>

app/views/public/boards/columns/closeds/show.html.erb

@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>

app/views/public/boards/columns/not_nows/show.html.erb

@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>

app/views/public/boards/columns/show.html.erb

@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>

app/views/public/boards/columns/streams/show.html.erb

@@ -17,9 +17,7 @@
         <%= render "public/boards/columns/list", cards: @page.records %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center txt-normal">No cards here</p>
-      </div>
+      <div class="blank-slate blank-slate--empty">No cards here</div>
     <% end %>
   <% end %>
 </section>