Show sats instead of BTC on donation page, refactor CSS

* Show sats instead of BTC on donation page
* Use number delimiters on both donation page and wallet page
* Refactor donation page CSS into Tailwind directives

app/assets/stylesheets/donations.scss

@@ -1,40 +0,0 @@
-ul.donations {
-  list-style: none;
-
-  li {
-    margin-bottom: 2rem;
-    display: grid;
-    grid-row-gap: 0.5rem;
-    grid-column-gap: 2rem;
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-      "date amount-btc"
-      "public-name amounts-fiat";
-
-    h3 {
-      grid-area: "date";
-      margin-bottom: 0;
-    }
-
-    p {
-      margin-bottom: 0;
-
-      &.amount-btc {
-        grid-area: amount-btc;
-        text-align: right;
-        font-family: monospace;
-        font-size: 1.25rem;
-      }
-      &.amounts-fiat {
-        grid-area: amounts-fiat;
-        text-align: right;
-        font-family: monospace;
-        font-size: 0.85rem;
-        color: #888;
-      }
-      &.public-name {
-        grid-area: public-name;
-      }
-    }
-  }
-}

app/javascript/stylesheets/application.scss

@@ -1,4 +1,4 @@
-// version 3
+// version 4
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

app/views/donations/index.html.erb

@@ -8,19 +8,22 @@
 
 <section>
   <% if @donations.any? %>
-    <ul class="donations">
+    <ul class="donations list-none">
       <% @donations.each do |donation| %>
-        <li>
-          <h3>
+        <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
+          <h3 class="mb-0">
             <%= donation.paid_at.strftime("%B %d, %Y") %>
           </h3>
-          <p class="amount-btc">
-            <%= sats_to_btc donation.amount_sats %> BTC
+          <p class="row-span-2 font-mono text-right mb-0">
+            <span class="text-xl">
+              <%= number_with_delimiter donation.amount_sats %> sats
+            </span>
+            <br>
+            <span class="text-sm text-gray-500">
+              (~ <%= number_to_currency donation.amount_eur / 100, unit: "" %> EUR)
+            </span>
           </p>
-          <p class="amounts-fiat">
-            (~ <%= number_to_currency donation.amount_eur / 100, unit: "" %> EUR)
-          </p>
-          <p class="public-name">
+          <p class="mb-0">
             <% if donation.public_name.present? %>
               Public name: <%= donation.public_name %>
             <% else %>

app/views/wallet/index.html.erb

@@ -6,9 +6,9 @@
     </p>
   </div>
   <div class="md:col-span-4 mt-4 md:mt-0">
-    <p class="font-mono md:text-right p-4 bg-gray-100 shadow rounded-lg overflow-hidden">
+    <p class="font-mono md:text-right mb-0 p-4 border border-gray-300 rounded-lg overflow-hidden">
     <% if @balance %>
-      <span class="text-xl"><%= @balance %> sats</span><br>
+      <span class="text-xl"><%= number_with_delimiter @balance %> sats</span><br>
       <span class="text-sm text-gray-500">Available balance</span>
     <% else %>
       <span class="text-xl">n/a sats</span><br>