Polish banned states and confirm

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>

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%);
+    }
   }
 }
 

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>

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 %>

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>