Format and style user donations

app/assets/stylesheets/donations.scss

@@ -0,0 +1,40 @@
+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/helpers/application_helper.rb

@@ -1,2 +1,5 @@
 module ApplicationHelper
+  def sats_to_btc(sats)
+    sats.to_f / 100000000
+  end
 end

app/views/donations/index.html.erb

@@ -1,29 +1,38 @@
-<h2>Donations</h2>
-
-<% if @donations.any? %>
-  <table>
-    <thead>
-      <tr>
-        <th>Amount BTC (sats)</th>
-        <th>in EUR</th>
-        <th>in USD</th>
-        <th>Public name</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <% @donations.each do |donation| %>
-        <tr>
-          <td><%= donation.amount_sats %></td>
-          <td><%= donation.amount_eur %></td>
-          <td><%= donation.amount_usd %></td>
-          <td><%= donation.public_name %></td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-<% else %>
+<section>
+  <h2>Donations</h2>
   <p>
-    No donations to show.
+    Your financial contributions to the development and
+    upkeep of Kosmos software and services.
   </p>
-<% end %>
+</section>
+
+<section>
+  <% if @donations.any? %>
+    <ul class="donations">
+      <% @donations.each do |donation| %>
+        <li>
+          <h3>
+            <%= donation.created_at.strftime("%B %d, %Y") %>
+          </h3>
+          <p class="amount-btc">
+            <%= sats_to_btc donation.amount_sats %> BTC
+          </p>
+          <p class="amounts-fiat">
+            (~ <%= number_to_currency donation.amount_eur / 100 %> EUR)
+          </p>
+          <p class="public-name">
+            <% if donation.public_name.present? %>
+              Public name: <%= donation.public_name %>
+            <% else %>
+              Anonymous
+            <% end %>
+          </p>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <p>
+      No donations to show.
+    </p>
+  <% end %>
+</section>

spec/helpers/application_helper_spec.rb

@@ -0,0 +1,9 @@
+require 'rails_helper'
+
+describe ApplicationHelper do
+  describe "sats_to_btc" do
+    it "converts satoshis to BTC" do
+      expect(helper.sats_to_btc(120000000)).to eq(1.2)
+    end
+  end
+end