@geekity/cms 0.21.0 → 0.22.0

package/admin/pages/users/apps.njk

@@ -4,14 +4,18 @@
    so a screen reader moving between buttons hears which one it is on. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/alert.njk" import alert %}
+{% from "components/badge.njk" import badge %}
+{% from "components/button.njk" import button %}
+{% from "components/table.njk" import table %}
 
 {% block title %}Connected apps{% endblock %}
 
 {% block content %}
-  <h1>Connected apps</h1>
+  <h1 class="mb-6 text-2xl font-bold">Connected apps</h1>
 
   {% if connections | length %}
-    <p class="admin-hint">
+    <p class="mb-4 max-w-prose text-sm">
       These apps signed in as you and can act as you, within the permissions
       listed. An app that keeps using its connection stays connected; one left
       unused is disconnected on the date shown. A token you created works
@@ -19,8 +23,7 @@
       refused, and it has to ask you again.
     </p>
 
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">Connected apps</caption>
+    {% call table('Connected apps') %}
       <thead>
         <tr>
           <th scope="col">App</th>
@@ -36,9 +39,9 @@
           <tr>
             <td>
               {% if connection.url %}
-                <a href="{{ connection.url }}">{{ connection.name }}</a>
+                <a class="link link-hover font-medium" href="{{ connection.url }}">{{ connection.name }}</a>
               {% else %}
-                {{ connection.name }} <span class="admin-status">Token you created</span>
+                <span class="font-medium">{{ connection.name }}</span> {{ badge('Token you created') }}
               {% endif %}
             </td>
             <td>
@@ -50,29 +53,29 @@
                 {% endfor %}
               </ul>
             </td>
-            <td><time datetime="{{ connection.issued.iso }}">{{ connection.issued.text }}</time></td>
-            <td>
+            <td class="whitespace-nowrap"><time datetime="{{ connection.issued.iso }}">{{ connection.issued.text }}</time></td>
+            <td class="whitespace-nowrap">
               {% if connection.lastUsed %}
                 <time datetime="{{ connection.lastUsed.iso }}">{{ connection.lastUsed.text }}</time>
               {% else %}
-                <span class="admin-status">Not yet</span>
+                Not yet
               {% endif %}
             </td>
-            <td><time datetime="{{ connection.expires.iso }}">{{ connection.expires.text }}</time></td>
-            <td class="admin-actions">
+            <td class="whitespace-nowrap"><time datetime="{{ connection.expires.iso }}">{{ connection.expires.text }}</time></td>
+            <td>
               <form method="post" action="{{ revokeUrl }}">
                 <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
                 <input type="hidden" name="{{ connectionField }}" value="{{ connection.id }}" />
-                <button type="submit">Revoke {{ connection.name }}</button>
+                {{ button('Revoke ' + connection.name, type='submit', style='ghost', size='xs') }}
               </form>
             </td>
           </tr>
         {% endfor %}
       </tbody>
-    </table>
+    {% endcall %}
   {% else %}
     <p>No apps are connected to your account.</p>
-    <p class="admin-hint">
+    <p class="mt-2 max-w-prose text-sm">
       An app connects here when you sign in to it with your site's address and
       approve what it asks for: a Micropub app such as Quill that posts to
       your site, or an MCP client such as an AI assistant. Each one you approve
@@ -80,101 +83,110 @@
     </p>
   {% endif %}
 
-  <h2 id="create-token">Create a token</h2>
+  <section class="mt-10 max-w-2xl">
+    <h2 id="create-token" class="mb-3 text-lg font-semibold">Create a token</h2>
 
-  {% if createToken.created %}
-    <div class="admin-flash" role="status">
-      {{ field.text('created-token', 'created-token', 'Token for ' ~ createToken.created.name, createToken.created.token,
-           readonly=true, spellcheck='false',
-           hint='Copy it now. It will not be shown again: the site keeps only a fingerprint of it.') }}
-    </div>
-  {% endif %}
+    {% if createToken.created %}
+      <div class="mb-4">
+        {% call alert(color='success', style='soft', polite=true) %}
+          <div class="w-full">
+            {{ field.text('created-token', 'created-token', 'Token for ' ~ createToken.created.name, createToken.created.token,
+                 readonly=true, spellcheck='false',
+                 hint='Copy it now. It will not be shown again: the site keeps only a fingerprint of it.') }}
+          </div>
+        {% endcall %}
+      </div>
+    {% endif %}
 
-  {% if createToken.problems.name or createToken.problems.scopes or createToken.problems.expires %}
-    {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
-      {{ field.problem('create-token-name', createToken.problems.name) }}
-      {{ field.problem('create-token-scope-profile', createToken.problems.scopes) }}
-      {{ field.problem('create-token-expires', createToken.problems.expires) }}
-    {% endcall %}
-  {% endif %}
+    {% if createToken.problems.name or createToken.problems.scopes or createToken.problems.expires %}
+      {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
+        {{ field.problem('create-token-name', createToken.problems.name) }}
+        {{ field.problem('create-token-scope-profile', createToken.problems.scopes) }}
+        {{ field.problem('create-token-expires', createToken.problems.expires) }}
+      {% endcall %}
+    {% endif %}
 
-  <p class="admin-hint">
-    Some tools and scripts cannot sign in, but accept a token you paste in,
-    such as the Manual tab of micropub.rocks. A token acts as you on this
-    site's Micropub endpoint, with only the permissions you tick, until it
-    expires or you revoke it above.
-  </p>
+    <p class="mb-2 max-w-prose text-sm">
+      Some tools and scripts cannot sign in, but accept a token you paste in,
+      such as the Manual tab of micropub.rocks. A token acts as you on this
+      site's Micropub endpoint, with only the permissions you tick, until it
+      expires or you revoke it above.
+    </p>
 
-  <form method="post" action="{{ createToken.url }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    {{ field.text('create-token-name', 'name', 'Name', createToken.name,
-         error=createToken.problems.name, required=true,
-         hint='What will use it, such as Publishing script.') }}
-    <fieldset>
-      <legend>It may</legend>
-      {% for scope in createToken.scopes %}
-        {{ field.checkbox('create-token-scope-' ~ scope.name, 'scope', scope.label, checked=scope.checked, value=scope.name,
-             error=(createToken.problems.scopes if loop.first else '')) }}
-      {% endfor %}
-    </fieldset>
-    {% call field.select('create-token-expires', 'expires', 'Expires after', error=createToken.problems.expires) %}
-      {% for expiry in createToken.expiries %}
-        <option value="{{ expiry.days }}"{% if expiry.selected %} selected{% endif %}>{% if expiry.days == 365 %}1 year{% else %}{{ expiry.days }} days{% endif %}</option>
-      {% endfor %}
-    {% endcall %}
-    <button type="submit">Create token</button>
-  </form>
+    <form method="post" action="{{ createToken.url }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      {{ field.text('create-token-name', 'name', 'Name', createToken.name,
+           error=createToken.problems.name, required=true,
+           hint='What will use it, such as Publishing script.') }}
+      <fieldset class="fieldset">
+        <legend class="fieldset-legend">It may</legend>
+        {% for scope in createToken.scopes %}
+          {{ field.checkbox('create-token-scope-' ~ scope.name, 'scope', scope.label, checked=scope.checked, value=scope.name,
+               error=(createToken.problems.scopes if loop.first else '')) }}
+        {% endfor %}
+      </fieldset>
+      {% call field.select('create-token-expires', 'expires', 'Expires after', error=createToken.problems.expires) %}
+        {% for expiry in createToken.expiries %}
+          <option value="{{ expiry.days }}"{% if expiry.selected %} selected{% endif %}>{% if expiry.days == 365 %}1 year{% else %}{{ expiry.days }} days{% endif %}</option>
+        {% endfor %}
+      {% endcall %}
+      <div class="mt-4">{{ button('Create token', type='submit', color='primary') }}</div>
+    </form>
+  </section>
 
-  <h2 id="without-pkce">Apps allowed without PKCE</h2>
+  <section class="mt-10">
+    <h2 id="without-pkce" class="mb-3 text-lg font-semibold">Apps allowed without PKCE</h2>
 
-  {% if withoutPkce.problem %}
-    {% call field.summary('Nothing was saved. Fix the field marked below and try again.') %}
-      {{ field.problem('without-pkce-client', withoutPkce.problem) }}
-    {% endcall %}
-  {% endif %}
+    {% if withoutPkce.problem %}
+      <div class="max-w-2xl">
+        {% call field.summary('Nothing was saved. Fix the field marked below and try again.') %}
+          {{ field.problem('without-pkce-client', withoutPkce.problem) }}
+        {% endcall %}
+      </div>
+    {% endif %}
 
-  <p class="admin-hint">
-    PKCE protects a sign-in when somebody intercepts the one-time code an app
-    is handed: without the secret the app kept, the code is useless. Every app
-    must use it, unless you list it here. List only an app you trust that
-    cannot sign in otherwise, such as iA Writer. A listed app is let in without
-    PKCE only when it sends you back to an https address on its own host, and
-    the consent screen tells you when it is.
-  </p>
+    <p class="mb-4 max-w-prose text-sm">
+      PKCE protects a sign-in when somebody intercepts the one-time code an app
+      is handed: without the secret the app kept, the code is useless. Every app
+      must use it, unless you list it here. List only an app you trust that
+      cannot sign in otherwise, such as iA Writer. A listed app is let in without
+      PKCE only when it sends you back to an https address on its own host, and
+      the consent screen tells you when it is.
+    </p>
 
-  {% if withoutPkce.clients | length %}
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">Apps allowed without PKCE</caption>
-      <thead>
-        <tr>
-          <th scope="col">client_id</th>
-          <th scope="col">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for client in withoutPkce.clients %}
+    {% if withoutPkce.clients | length %}
+      {% call table('Apps allowed without PKCE') %}
+        <thead>
           <tr>
-            <td><code>{{ client }}</code></td>
-            <td class="admin-actions">
-              <form method="post" action="{{ withoutPkce.removeUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="{{ withoutPkce.field }}" value="{{ client }}" />
-                <button type="submit">Remove {{ client }}</button>
-              </form>
-            </td>
+            <th scope="col">client_id</th>
+            <th scope="col">Actions</th>
           </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  {% else %}
-    <p>No apps are listed. Every app must use PKCE to sign in.</p>
-  {% endif %}
+        </thead>
+        <tbody>
+          {% for client in withoutPkce.clients %}
+            <tr>
+              <td><code>{{ client }}</code></td>
+              <td>
+                <form method="post" action="{{ withoutPkce.removeUrl }}">
+                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                  <input type="hidden" name="{{ withoutPkce.field }}" value="{{ client }}" />
+                  {{ button('Remove ' + client, type='submit', style='ghost', size='xs') }}
+                </form>
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      {% endcall %}
+    {% else %}
+      <p>No apps are listed. Every app must use PKCE to sign in.</p>
+    {% endif %}
 
-  <form method="post" action="{{ withoutPkce.addUrl }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    {{ field.text('without-pkce-client', withoutPkce.field, 'App&rsquo;s client_id', withoutPkce.value,
-         error=withoutPkce.problem, inputmode='url', spellcheck='false', required=true,
-         hint='The URL the app names itself by when it signs in, as App activity shows it, such as <code>https://ia.net/writer</code>.') }}
-    <button type="submit">Allow without PKCE</button>
-  </form>
+    <form class="mt-4 max-w-2xl" method="post" action="{{ withoutPkce.addUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      {{ field.text('without-pkce-client', withoutPkce.field, 'App&rsquo;s client_id', withoutPkce.value,
+           error=withoutPkce.problem, inputmode='url', spellcheck='false', required=true,
+           hint='The URL the app names itself by when it signs in, as App activity shows it, such as <code>https://ia.net/writer</code>.') }}
+      <div class="mt-4">{{ button('Allow without PKCE', type='submit', color='primary') }}</div>
+    </form>
+  </section>
 {% endblock %}

package/admin/pages/users/edit.njk

@@ -12,25 +12,29 @@
    lands back here, so a Save always shows its own result. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import badge, status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block title %}Edit {{ account.username }}{% endblock %}
 
 {% block content %}
-  <h1>Edit {{ account.username }}{% if account.you %} <span class="admin-status">(you)</span>{% endif %}</h1>
+  <h1 class="mb-2 flex flex-wrap items-center gap-2 text-2xl font-bold">Edit {{ account.username }}{% if account.you %} {{ badge('(you)', style='outline', size='md') }}{% endif %}</h1>
 
-  <p class="admin-hint"><a href="{{ usersUrl }}">Back to all users</a></p>
+  <p class="mb-6 text-sm"><a class="link" href="{{ usersUrl }}">Back to all users</a></p>
 
-  <form class="admin-settings" method="post" action="{{ userEmailUrl }}">
+  <div class="flex max-w-2xl flex-col gap-6">
+
+  {% call card(title='Account') %}
+  <form method="post" action="{{ userEmailUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
     <input type="hidden" name="{{ fields.userId }}" value="{{ account.id }}" />
 
-    <h2>Account</h2>
-
-    <p class="admin-field-static">
+    <p>
       Signs in as <strong>{{ account.username }}</strong>, and writes at
-      <a href="{{ account.archiveUrl }}">{{ account.archiveUrl }}</a>.
+      <a class="link break-all" href="{{ account.archiveUrl }}">{{ account.archiveUrl }}</a>.
     </p>
-    <p class="admin-hint">
+    <p class="text-sm">
       A username is not editable: it is the login, the author URL above, and
       the actor a follower holds. Somebody who needs a different one is a new
       account.
@@ -39,7 +43,7 @@
        purpose: it is what the fediverse already holds, and changing it would
        orphan every follow. #}
     {% if account.storedActorId %}
-      <p class="admin-hint">
+      <p class="text-sm">
         Also <code>{{ account.storedActorId }}</code> — what the fediverse knows
         this user by. Set by the import or by hand in
         <code>data/users.json</code>, never here.
@@ -50,16 +54,15 @@
       {% if mailConfigured %}
         Optional, and never shown on the public site. It is what a forgotten password is recovered through and where the notices below go. Empty it to stop the site writing to this person at all.
       {% else %}
-        Optional, and this site sends no mail yet, so nothing will be sent to one. Choose a provider on <a href="{{ adminUrl }}/settings/email">Settings &rsaquo; Email</a> to turn password recovery on.
+        Optional, and this site sends no mail yet, so nothing will be sent to one. Choose a provider on <a class="link" href="{{ adminUrl }}/settings/email">Settings &rsaquo; Email</a> to turn password recovery on.
       {% endif %}
     {% endset %}
     {{ field.text('user-email', fields.email, 'Email address', account.email,
          type='email', autocomplete='email', hint=emailHint) }}
 
-    <p class="admin-settings-buttons">
-      <button type="submit">Save email address</button>
-    </p>
+    <div class="mt-2">{{ button('Save email address', type='submit', color='primary') }}</div>
   </form>
+  {% endcall %}
 
   {# The public face of this person (TASK-67). Anybody's, not only your own:
      there is one role, so an admin who has just added a colleague can put a
@@ -67,13 +70,12 @@
      sign in. After decision-14 these same fields are what their ActivityPub
      actor carries, which is why they live beside the account rather than in
      the site settings — and why saving them tells their followers. #}
-  <form class="admin-settings" method="post" action="{{ userProfileUrl }}">
+  {% call card(title='Profile') %}
+  <form method="post" action="{{ userProfileUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
     <input type="hidden" name="{{ fields.userId }}" value="{{ account.id }}" />
 
-    <h2>Profile</h2>
-
-    <p class="admin-hint">
+    <p class="text-sm">
       A profile is public. Nothing in it is required — a user with no profile
       still has an archive under their username — and a box left empty is a
       field they do not have.
@@ -116,7 +118,7 @@
       <code>Mastodon | https://example.social/@me | me</code>,
       <code>Their post | https://example.com/post | me nofollow author</code>.
       It is the same line the menu boxes on
-      <a href="{{ adminUrl }}/navigation">Navigation</a> take.
+      <a class="link" href="{{ adminUrl }}/navigation">Navigation</a> take.
       Every link here is published with <code>rel="me"</code> whether or not
       you type it: it is how Mastodon verifies a profile field that points back
       at this site, and how IndieAuth knows these are yours. Nothing else in
@@ -125,10 +127,9 @@
     {{ field.textarea('profile-links', fields.links, 'Links', account.profile.links, rows='4',
          hint=linksHint, error=profileProblems.links) }}
 
-    <p class="admin-settings-buttons">
-      <button type="submit">Save profile</button>
-    </p>
+    <div class="mt-2">{{ button('Save profile', type='submit', color='primary') }}</div>
   </form>
+  {% endcall %}
 
   {# Only once there is both somewhere to write to and something to write
      with. These switches decide what is sent to the address above, so without
@@ -137,10 +138,9 @@
      lines below say which is missing where the panel would have been, rather
      than letting it vanish without explanation. #}
   {% if account.email and mailConfigured %}
-  <section class="admin-settings">
-    <h2>Email {{ account.username }} about</h2>
+  {% call card(title='Email ' + account.username + ' about') %}
 
-    <p class="admin-hint">
+    <p class="text-sm">
       What this site writes to {{ account.username }} at <code>{{ account.email }}</code>.
     </p>
 
@@ -149,17 +149,22 @@
        this off" from "left it alone". Adding a notice is one entry in the
        registry and no change here. #}
     {% for notice in account.notifications %}
-      <div class="admin-notice">
-        <h3>{{ notice.label }}</h3>
-        <p class="admin-hint">{{ notice.description }}</p>
+      <div class="flex flex-col gap-2 border-t border-base-300 pt-4">
+        <h3 class="font-semibold">{{ notice.label }}</h3>
+        <p class="text-sm">{{ notice.description }}</p>
 
-        <form class="admin-inline" method="post" action="{{ userNotificationsUrl }}">
+        <form class="flex flex-wrap items-center gap-2" method="post" action="{{ userNotificationsUrl }}">
           <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
           <input type="hidden" name="{{ fields.userId }}" value="{{ account.id }}" />
           <input type="hidden" name="{{ fields.event }}" value="{{ notice.name }}" />
           <input type="hidden" name="{{ fields.on }}" value="{% if notice.on %}{% else %}1{% endif %}" />
-          <span class="admin-status">{% if notice.on %}On{% else %}Off{% endif %}</span>
-          <button type="submit">{% if notice.on %}Turn off{% else %}Turn on{% endif %}</button>
+          {% if notice.on %}
+            {{ status('active', 'On') }}
+            {{ button('Turn off', type='submit', style='outline', size='xs') }}
+          {% else %}
+            {{ status('hidden', 'Off') }}
+            {{ button('Turn on', type='submit', style='outline', size='xs') }}
+          {% endif %}
         </form>
 
         {# And, for a notice the registry says can be batched, how often it
@@ -167,7 +172,7 @@
            it and the switch above is a button; the registry decides which
            notices get one. #}
         {% if notice.batched %}
-          <form class="admin-inline" method="post" action="{{ userNotificationModeUrl }}">
+          <form class="flex flex-wrap items-end gap-2" method="post" action="{{ userNotificationModeUrl }}">
             <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
             <input type="hidden" name="{{ fields.userId }}" value="{{ account.id }}" />
             <input type="hidden" name="{{ fields.event }}" value="{{ notice.name }}" />
@@ -176,9 +181,9 @@
                 <option value="{{ choice.value }}"{% if choice.chosen %} selected{% endif %}>{{ choice.label }}</option>
               {% endfor %}
             {% endcall %}
-            <button type="submit">Save</button>
+            <div class="pb-1">{{ button('Save', type='submit') }}</div>
           </form>
-          <p class="admin-hint">
+          <p class="text-sm">
             On an hourly or a daily digest nothing is sent as they arrive;
             instead one message a window lists everything still waiting, and
             no message goes at all when nothing is.
@@ -186,25 +191,24 @@
         {% endif %}
       </div>
     {% endfor %}
-  </section>
+  {% endcall %}
   {% else %}
-  <section class="admin-settings">
-    <h2>Email {{ account.username }} about</h2>
+  {% call card(title='Email ' + account.username + ' about') %}
 
     {% if not mailConfigured %}
-      <p class="admin-hint">
+      <p class="text-sm">
         Nothing, while this site has no mail provider: there is nothing to send
-        with. Choose one on <a href="{{ adminUrl }}/settings/email">Settings
+        with. Choose one on <a class="link" href="{{ adminUrl }}/settings/email">Settings
         &rsaquo; Email</a> and what to send comes back here.
       </p>
     {% else %}
-      <p class="admin-hint">
+      <p class="text-sm">
         Nothing, while the box above is empty: there is nowhere to write to.
         Give {% if account.you %}yourself{% else %}this account{% endif %} an
         address and what to send comes back here.
       </p>
     {% endif %}
-  </section>
+  {% endcall %}
   {% endif %}
 
   {# Only on your own page: it asks for the current password, so it is about
@@ -214,20 +218,22 @@
   {# Only on your own page, as the screen it links to only ever lists your
      own connections (TASK-162). #}
   {% if account.you %}
-    <section class="admin-settings">
-      <h2>Connected apps</h2>
-      <p class="admin-hint">
+    {% call card(title='Connected apps') %}
+      <p class="text-sm">
         Apps you signed in to with your site's address can act as you.
-        <a href="{{ connectedAppsUrl }}">Review or revoke them</a>.
+        <a class="link" href="{{ connectedAppsUrl }}">Review or revoke them</a>.
       </p>
-    </section>
+    {% endcall %}
   {% endif %}
 
   {% if account.you %}
-    <form class="admin-settings" id="change-password" method="post" action="{{ changePasswordUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    {% include "components/theme-choice.njk" %}
+  {% endif %}
 
-      <h2>Change your password</h2>
+  {% if account.you %}
+    {% call card(title='Change your password') %}
+    <form id="change-password" method="post" action="{{ changePasswordUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
       {% if passwordProblems.currentPassword or passwordProblems.newPassword %}
         {% call field.summary('Your password was not changed. Fix the fields marked below and try again.') %}
@@ -246,31 +252,32 @@
       {{ field.password('new-password-confirmation', fields.newPasswordConfirmation,
            'New password again', autocomplete='new-password', required=true) }}
 
-      <p class="admin-hint">Every other browser signed in as you is signed out. This one stays.</p>
+      <p class="text-sm">Every other browser signed in as you is signed out. This one stays.</p>
 
-      <p class="admin-settings-buttons">
-        <button type="submit">Change password</button>
-      </p>
+      <div class="mt-2">{{ button('Change password', type='submit', color='primary') }}</div>
     </form>
+    {% endcall %}
   {% endif %}
 
-  <section class="admin-settings">
-    <h2>Delete</h2>
+  {% call card(title='Delete') %}
 
     {# Either the button or the reason there is none, never both: the screen
        does not offer an action it is about to refuse. #}
     {% if deleteRefusal %}
-      <p class="admin-hint">{{ deleteRefusal }}</p>
+      <p class="text-sm">{{ deleteRefusal }}</p>
     {% else %}
-      <p class="admin-hint">
+      <p class="text-sm">
         Deleting {{ account.username }} signs out every browser they are in and
         cannot be undone. What they have written stays where it is.
       </p>
       <form method="post" action="{{ deleteUserUrl }}">
         <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
         <input type="hidden" name="{{ fields.userId }}" value="{{ account.id }}" />
-        <button type="submit">Delete {{ account.username }}</button>
+        {% call cardActions() %}
+          {{ button('Delete ' + account.username, type='submit', color='error') }}
+        {% endcall %}
       </form>
     {% endif %}
-  </section>
+  {% endcall %}
+  </div>
 {% endblock %}

package/admin/pages/users/list.njk

@@ -3,17 +3,21 @@
    A listing and nothing else (TASK-97). Every field a user has is edited on
    that user's own screen, which the Edit link in each row goes to, so no box
    in this table can be mistaken for another one. Adding somebody is its own
-   screen next door, `new.njk`, because Users > Add new is its own menu entry.
- #}
+   screen next door, `new.njk`, because Users > Add new is its own menu entry. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import badge %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/table.njk" import table %}
 
 {% block title %}Users{% endblock %}
 
 {% block content %}
-  <h1>Users <a class="admin-button admin-button-small" href="{{ addUserUrl }}">Add new</a></h1>
+  <div class="mb-6 flex flex-wrap items-center gap-4">
+    <h1 class="text-2xl font-bold">Users</h1>
+    {{ buttonLink('Add new', addUserUrl, color='primary') }}
+  </div>
 
-  <table class="admin-list">
-    <caption class="admin-visually-hidden">Users</caption>
+  {% call table('Users') %}
     <thead>
       <tr>
         <th scope="col">Username</th>
@@ -25,28 +29,26 @@
     <tbody>
       {% for entry in users %}
         <tr>
-          <td>
-            <a href="{{ entry.editUrl }}">{{ entry.username }}</a>{% if entry.you %} <span class="admin-status">(you)</span>{% endif %}
-          </td>
-          <td>{% if entry.email %}{{ entry.email }}{% else %}<span class="admin-status">None</span>{% endif %}</td>
-          <td>{{ entry.createdAt | date('html') }}</td>
+          <td><a class="link link-hover font-medium" href="{{ entry.editUrl }}">{{ entry.username }}</a>{% if entry.you %} {{ badge('You') }}{% endif %}</td>
+          <td>{{ entry.email or 'None' }}</td>
+          <td class="whitespace-nowrap">{{ entry.createdAt | date('html') }}</td>
           {# Edit, then what can be done, then View: the order and the shape
-             `pages/documents/list.njk` uses, down to Edit being a plain link
-             rather than a button. A row here is a row there. #}
-          <td class="admin-actions">
-            <a href="{{ entry.editUrl }}">Edit</a>
-            {% if entry.deletable %}
-              <form method="post" action="{{ deleteUserUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="{{ fields.userId }}" value="{{ entry.id }}" />
-                <button type="submit">Delete</button>
-              </form>
-            {% endif %}
-            <a href="{{ entry.archiveUrl }}">View</a>
+             `pages/documents/list.njk` uses. A row here is a row there. #}
+          <td>
+            <div class="flex items-center gap-1 whitespace-nowrap">
+              {{ buttonLink('Edit', entry.editUrl, style='ghost', size='xs') }}
+              {% if entry.deletable %}
+                <form method="post" action="{{ deleteUserUrl }}">
+                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                  <input type="hidden" name="{{ fields.userId }}" value="{{ entry.id }}" />
+                  {{ button('Delete', type='submit', style='ghost', size='xs') }}
+                </form>
+              {% endif %}
+              {{ buttonLink('View', entry.archiveUrl, style='ghost', size='xs') }}
+            </div>
           </td>
         </tr>
       {% endfor %}
     </tbody>
-  </table>
-
+  {% endcall %}
 {% endblock %}