style the invite-list page

web/i18n/defaults/active.en.toml

@@ -1,6 +1,7 @@
 GenericConfirm = "Yes"
 GenericGoBack = "Back"
 GenericSave = "Save"
+GenericCreate = "Create"
 GenericPreview = "Preview"
 GenericLanguage = "Language"
 
@@ -25,8 +26,9 @@ AdminAllowListRemoveConfirmWelcome = "Are you sure you want to remove this membe
 AdminAllowListRemoveConfirmTitle = "Confirm member removal"
 
 AdminInvitesTitle = "Invites"
-AdminInvitesWelcome = "Create invite tokens for people who are not yet members of this room."
-AdminInvitesAliasSuggestion = "Suggested alias (optional)"
+AdminInvitesWelcome = "Create invite tokens for people who are not yet members of this room. At the same as you create an invite, you can also (optionally) attach an alias to it so that the person who receives the invite can automatically use that claim that alias for themselves."
+AdminInvitesAliasSuggestion = "(Optional) Alias suggestion"
+AdminInvitesCount = "{{.Count}} invites still unclaimed"
 AdminInviteRevoke = "Revoke"
 AdminInviteRevokeConfirmTitle = "Confirm invite revocation"
 AdminInviteRevokeConfirmWelcome = "Are you sure you want to remove this invite? If you already sent it out, they will not be able to use it."

web/templates/admin/invite-list.tmpl

@@ -6,51 +6,58 @@
 
   <p id="welcome" class="my-2">{{i18n "AdminInvitesWelcome"}}</p>
 
-  <p
-    id="inviteListCount"
-    class="text-lg font-bold my-2"
-  >{{i18npl "ListCount" .Count}}</p>
-
-  <ul id="theList" class="divide-y pb-4">
-    <form
-      id="create-invite"
-      action="{{urlTo "admin:invites:create"}}"
-      method="POST"
-    >
-      {{ .csrfField }}
-      <div class="flex flex-row items-center h-12">
-        <input
-          type="text"
-          name="alias_suggestion"
-          placeholder="{{i18n "AdminInvitesAliasSuggestion"}}"
-          class="font-mono truncate flex-auto tracking-wider h-12 text-gray-900 focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent placeholder-gray-300"
-        >
-        <input
-          type="submit"
-          value="{{i18n "GenericSave"}}"
-          class="pl-4 w-20 py-2 text-center text-green-500 hover:text-green-600 font-bold bg-transparent cursor-pointer"
-        >
-      </div>
-    </form>
-    {{range .Entries}}
-    <li class="flex flex-row items-center h-12">
-      <span
-        class="font-mono truncate flex-auto text-gray-600 tracking-wider"
-      >
-      <!-- https://github.com/ssb-ngi-pointer/go-ssb-room/issues/60 -->
-      {{i18n "AdminInviteCreatedBy"}} {{.CreatedBy.Name}}
-      {{if ne .AliasSuggestion ""}}
-        ({{i18n "AdminInviteSuggestedAliasIsShort"}} {{.AliasSuggestion}})
+  <table class="table-fixed self-stretch mt-4 mb-8">
+    <thead>
+      <tr class="h-12">
+        <td class="w-3" colspan="2">
+          <div class="inline ml-0 rounded-full px-3 py-1 tracking-tight font-black text-white bg-gradient-to-r from-pink-400 to-red-400">{{i18npl "AdminInvitesCount" .Count}}</div>
+        </td>
+        <td class="w-1/2 pl-2 pr-0" colspan="2">
+          <form
+            id="create-invite"
+            action="{{urlTo "admin:invites:create"}}"
+            method="POST"
+          >
+            {{ .csrfField }}
+            <div class="h-10 flex flex-row items-center rounded-full ring-2 ring-green-400 bg-white">
+              <input
+                type="text"
+                name="alias_suggestion"
+                placeholder="{{i18n "AdminInvitesAliasSuggestion"}}"
+                class="h-10 ml-4 w-1/2 truncate flex-auto tracking-wider text-gray-900 focus:outline-none placeholder-gray-300"
+              >
+              <input
+                type="submit"
+                value="{{i18n "GenericCreate"}}"
+                class="pl-4 pr-3 w-20 py-2 text-center text-green-500 hover:text-green-600 font-bold bg-transparent cursor-pointer"
+              >
+            </div>
+          </form>
+        </td>
+      </tr>
+      <tr class="h-8 uppercase text-sm text-gray-400">
+        <th class="w-3 text-center pl-3 pr-6">ID</th>
+        <th class="w-1/2 text-left px-6">Created by</th>
+        <th class="w-1/2 text-left px-6">Alias suggestion</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y">
+      {{range .Entries}}
+      <tr class="h-12">
+        <td class="pl-3 pr-6 text-gray-400 text-center">#{{.ID}}</td>
+        <td class="px-6">{{.CreatedBy.Name}}</td>
+        <td class="px-6">{{if ne .AliasSuggestion ""}}{{.AliasSuggestion}}{{end}}</td>
+        <td class="pl-6 pr-3">
+          <a
+            href="{{urlTo "admin:invites:revoke:confirm" "id" .ID}}"
+            class="pl-4 w-20 py-2 text-center text-gray-400 hover:text-red-600 font-bold cursor-pointer"
+          >{{i18n "AdminInviteRevoke"}}</a>
+        </td>
+      </tr>
       {{end}}
-      </span>
-
-      <a
-        href="{{urlTo "admin:invites:revoke:confirm" "id" .ID}}"
-        class="pl-4 w-20 py-2 text-center text-gray-400 hover:text-red-600 font-bold cursor-pointer"
-      >{{i18n "AdminInviteRevoke"}}</a>
-    </li>
-    {{end}}
-  </ul>
+    </tbody>
+  </table>
 
   {{$pageNums := .Paginator.PageNums}}
   {{$view := .View}}