Improve admin donation pages

app/assets/stylesheets/components/base.css

@@ -32,11 +32,11 @@
     @apply pt-0;
   }
 
-  main p {
+  main p:not(:last-child) {
     @apply mb-4 leading-6;
   }
 
-  main ul {
+  main ul:not(:last-child) {
     @apply mb-6;
   }
 

app/assets/stylesheets/components/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply font-semibold rounded-md leading-none cursor-pointer text-center
+    @apply inline-block font-semibold rounded-md leading-none cursor-pointer text-center
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 

app/views/admin/donations/_form.html.erb

@@ -10,46 +10,24 @@
     </div>
   <% end %>
 
-  <div class="field">
-    <p>
-      <%= form.label :user_id %>
-      <%= form.collection_select :user_id, User.where(ou: "kosmos.org").order(:cn), :id, :cn %>
-    </p>
-  </div>
+  <div class="sm:w-1/2 grid grid-cols-2 items-center gap-y-2">
+    <%= form.label :user_id %>
+    <%= form.collection_select :user_id, User.where(ou: "kosmos.org").order(:cn), :id, :cn, {} %>
 
-  <div class="field">
-    <p>
-      <%= form.label :amount_sats, "Amount BTC (sats)" %>
-      <%= form.number_field :amount_sats %>
-    </p>
-  </div>
+    <%= form.label :amount_sats, "Amount BTC (sats)" %>
+    <%= form.number_field :amount_sats %>
 
-  <div class="field">
-    <p>
-      <%= form.label :amount_eur, "Amount EUR (cents)" %>
-      <%= form.number_field :amount_eur %>
-    </p>
-  </div>
+    <%= form.label :amount_eur, "Amount EUR (cents)" %>
+    <%= form.number_field :amount_eur %>
 
-  <div class="field">
-    <p>
-      <%= form.label :amount_usd, "Amount USD (cents)"%>
-      <%= form.number_field :amount_usd %>
-    </p>
-  </div>
+    <%= form.label :amount_usd, "Amount USD (cents)"%>
+    <%= form.number_field :amount_usd %>
 
-  <div class="field">
-    <p>
-      <%= form.label :public_name %>
-      <%= form.text_field :public_name %>
-    </p>
-  </div>
+    <%= form.label :public_name %>
+    <%= form.text_field :public_name %>
 
-  <div class="field">
-    <p>
-      <%= form.label :paid_at %>
-      <%= form.text_field :paid_at %>
-    </p>
+    <%= form.label :paid_at %>
+    <%= form.text_field :paid_at %>
   </div>
 
   <p class="mt-8">

app/views/admin/donations/edit.html.erb

@@ -1,12 +1,9 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Donation ##{@donation.id}") %>
 
 <%= render MainSimpleComponent.new do %>
-  <h2>Editing Donation</h2>
-
   <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
 
   <p class="mt-8">
-    <%= link_to 'Show', admin_donation_path(@donation), class: 'ks-text-link' %> |
-    <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
+    <%= link_to 'Cancel', admin_donation_path(@donation), class: 'btn-sm btn-gray' %>
   <p>
 <% end %>

app/views/admin/donations/new.html.erb

@@ -1,8 +1,6 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Add Donation") %>
 
 <%= render MainSimpleComponent.new do %>
-  <h2>New Donation</h2>
-
   <%= render 'form', donation: @donation, url: admin_donations_path %>
 
   <p class="mt-8">

app/views/admin/donations/show.html.erb

@@ -1,37 +1,41 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Donation ##{@donation.id}") %>
 
 <%= render MainSimpleComponent.new do %>
-  <table class="w-1/2">
-    <tbody>
-      <tr>
-        <th>User</th>
-        <td><%= link_to @donation.user.address, admin_user_path(@donation.user.address), class: 'ks-text-link' %></td>
-      </tr>
-      <tr>
-        <th>Amount sats</th>
-        <td><%= @donation.amount_sats %></td>
-      </tr>
-      <tr>
-        <th>Amount EUR</th>
-        <td><%= @donation.amount_eur %></td>
-      </tr>
-      <tr>
-        <th>Amount USD</th>
-        <td><%= @donation.amount_usd %></td>
-      </tr>
-      <tr>
-        <th>Public name</th>
-        <td><%= @donation.public_name %></td>
-      </tr>
-      <tr>
-        <th>Date</th>
-        <td><%= @donation.paid_at.strftime("%Y-%m-%d (%H:%M UTC)") %></td>
-      </tr>
-    </tbody>
-  </table>
+  <section>
+    <table class="w-1/2 divided">
+      <tbody>
+        <tr>
+          <th>User</th>
+          <td><%= link_to @donation.user.address, admin_user_path(@donation.user.address), class: 'ks-text-link' %></td>
+        </tr>
+        <tr>
+          <th>Amount sats</th>
+          <td><%= @donation.amount_sats %></td>
+        </tr>
+        <tr>
+          <th>Amount EUR</th>
+          <td><%= @donation.amount_eur %></td>
+        </tr>
+        <tr>
+          <th>Amount USD</th>
+          <td><%= @donation.amount_usd %></td>
+        </tr>
+        <tr>
+          <th>Public name</th>
+          <td><%= @donation.public_name %></td>
+        </tr>
+        <tr>
+          <th>Date</th>
+          <td><%= @donation.paid_at.strftime("%Y-%m-%d (%H:%M UTC)") %></td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
 
-  <p class="mt-8">
-    <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
-    <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
-  </p>
+  <section>
+    <p>
+      <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'btn-md btn-blue mr-1' %>
+      <%= link_to 'Back', admin_donations_path, class: 'btn-md btn-gray' %>
+    </p>
+  </section>
 <% end %>

app/views/admin/settings/registrations/index.html.erb

@@ -22,14 +22,14 @@
         <%= f.text_area :reserved_usernames,
           value: Setting.reserved_usernames.join("\n"),
           class: "h-44 mb-2" %>
-        <p class="mb-0 text-sm text-gray-500">
+        <p class="text-sm text-gray-500">
           One username per line
         </p>
       </label>
     </section>
 
     <section>
-      <p class="mb-0 pt-6 border-t border-gray-200">
+      <p class="pt-6 border-t border-gray-200">
         <%= f.submit 'Save', class: "btn-md btn-blue w-full md:w-auto" %>
       </p>
     </section>

app/views/admin/settings/services/index.html.erb

@@ -18,7 +18,7 @@
         <li class="flex items-center justify-between py-6">
           <div class="flex flex-col">
             <label class="font-bold mb-1">Enable LNDHub integration</label>
-            <p class="text-gray-500 mb-0">LNDHub configuration present and wallet features enabled</p>
+            <p class="text-gray-500">LNDHub configuration present and wallet features enabled</p>
           </div>
           <%= f.check_box :lndhub_enabled, checked: Setting.lndhub_enabled?,
                           disabled: true,
@@ -27,7 +27,7 @@
         <li class="flex items-center justify-between py-6">
           <div class="flex flex-col">
             <label class="font-bold mb-1">Enable LNDHub admin panel</label>
-            <p class="text-gray-500 mb-0">LNDHub database configuration present and admin panel enabled</p>
+            <p class="text-gray-500">LNDHub database configuration present and admin panel enabled</p>
           </div>
           <%= f.check_box :lndhub_admin_enabled, checked: Setting.lndhub_admin_enabled?,
                           disabled: true,

app/views/admin/users/show.html.erb

@@ -45,7 +45,7 @@
           <th class="align-top">Invited users</th>
           <td class="align-top">
           <% if @user.invitees.length > 0 %>
-            <ul class="mb-0">
+            <ul>
             <% @user.invitees.order(cn: :asc).each do |invitee| %>
               <li class="leading-none mb-2 last:mb-0"><%= link_to invitee.address, admin_user_path(invitee.address), class: 'ks-text-link' %></li>
             <% end %>