From c8ac87835378df557a24292c16bc15eeeac0b183 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 26 Nov 2025 13:08:35 -0600
Subject: [PATCH] Polish banned states and confirm

---
 app/assets/images/cancel.svg            |  1 +
 app/assets/stylesheets/avatars.css      | 20 ++++++++++++++++++++
 app/views/accounts/users/_user.html.erb |  2 +-
 app/views/users/_ban_button.html.erb    | 12 +++++++-----
 app/views/users/show.html.erb           |  2 +-
 5 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/images/cancel.svg

diff --git a/app/assets/images/cancel.svg b/app/assets/images/cancel.svg
new file mode 100644
index 0000000..3327c05
--- /dev/null
+++ b/app/assets/images/cancel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z" /></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index 4407272..9c3b520 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -7,6 +7,7 @@
   inline-size: var(--avatar-size, 5ch);
   margin: 0;
   place-items: center;
+  position: relative;
 
   img {
     aspect-ratio: 1;
@@ -16,6 +17,25 @@
     inline-size: var(--avatar-size, 5ch);
     max-inline-size: 100%;
     object-fit: cover;
+
+    .banned & {
+      opacity: 0.5;
+    }
+  }
+
+  .banned &:after {
+    background: url(cancel.svg) no-repeat center center;
+    block-size: auto;
+    content: "";
+    filter: invert(0%);
+    inline-size: var(--avatar-size, 5ch);
+    inset: 0;
+    max-inline-size: 100%;
+    position: absolute;
+
+    @media (prefers-color-scheme: dark) {
+      filter: invert(100%);
+    }
   }
 }
 
diff --git a/app/views/accounts/users/_user.html.erb b/app/views/accounts/users/_user.html.erb
index 4f5f952..470e7f8 100644
--- a/app/views/accounts/users/_user.html.erb
+++ b/app/views/accounts/users/_user.html.erb
@@ -1,4 +1,4 @@
-<li class="flex align-center gap margin-none <%= "translucent" if user.banned? %>">
+<li class="flex align-center gap margin-none <%= "banned" if user.banned? %>">
   <figure class="avatar flex-item-no-shrink" style="--avatar-size: 3.75ch;">
     <%= avatar_tag user, loading: :lazy %>
   </figure>
diff --git a/app/views/users/_ban_button.html.erb b/app/views/users/_ban_button.html.erb
index 398b738..3cfab48 100644
--- a/app/views/users/_ban_button.html.erb
+++ b/app/views/users/_ban_button.html.erb
@@ -1,13 +1,15 @@
 <% if user.active? %>
   <%= button_to user_ban_path(user), method: :post,
-        class: "btn btn--negative full-width",
-        data: { turbo_confirm: "Are you sure you want to ban this user?" } do %>
-    Ban user
+        class: "btn full-width",
+        data: { turbo_confirm: "Are you sure you want to ban this user? This will log them out, delete their messages, and block their IP addresses." } do %>
+    <%= image_tag "cancel.svg", aria: { hidden: "true", label: "Ban #{@user.name}" } %>
+    <span>Ban <%= user.name %></span>
   <% end %>
 <% else %>
   <%= button_to user_ban_path(user), method: :delete,
-        class: "btn full-width",
+        class: "btn btn--negative full-width",
         data: { turbo_confirm: "Are you sure you want to remove the ban on this user?" } do %>
-    Remove ban
+    <%= image_tag "cancel.svg", aria: { hidden: "true", label: "Ban #{@user.name}" } %>
+    <span>Remove ban</span>
   <% end %>
 <% end %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 94872e6..8fb4a28 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -16,7 +16,7 @@
 <% end %>
 
 <section class="panel txt-align-center">
-  <div class="flex flex-column gap">
+  <div class="flex flex-column gap <%= "banned" if @user.banned? %>">
     <div class="avatar txt-xx-large center" style="background: white">
       <%= image_tag fresh_user_avatar_path(@user), alt: "Profile avatar", class: "avatar" %>
     </div>