Port shared CSS for tables to Tailwind

app/assets/stylesheets/application.tailwind.css

@@ -7,3 +7,4 @@
 @import "components/forms";
 @import "components/links";
 @import "components/notifications";
+@import "components/tables";

app/assets/stylesheets/components/tables.css

@@ -0,0 +1,22 @@
+@layer components {
+  table {
+    @apply w-full;
+  }
+
+  table thead tr {
+    @apply text-left;
+  }
+
+  table th {
+    @apply pb-3.5 text-sm font-normal uppercase text-gray-500;
+  }
+
+  table th:not(:last-of-type),
+  table td:not(:last-of-type) {
+    @apply pr-2;
+  }
+
+  table td {
+    @apply py-2;
+  }
+}

app/assets/stylesheets/legacy/_layout.scss

@@ -24,49 +24,6 @@ body#admin {
   }
 }
 
-#wrapper {
-  width: 100%;
-  text-align: center;
-
-  > header {
-    margin: 0 auto;
-    padding: 4rem 0;
-    text-align: center;
-    background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-                url('/img/bg-1.jpg');
-    background-size: cover;
-
-    @include media-max(small) {
-      padding: 3rem 0;
-    }
-
-    h1 {
-      color: #fff;
-
-      span.project-name {
-        display: none;
-      }
-    }
-
-    p.current-user {
-      color: rgba(255,255,255,0.6);
-
-      @include media-max(small) {
-        font-size: 0.85rem;
-      }
-    }
-
-    a {
-      color: rgba(255,255,255,0.6);
-      transition: color 0.1s linear;
-
-      &:hover, &:active {
-        color: #fff;
-      }
-    }
-  }
-}
-
 main {
   p {
     line-height: 1.5rem;
@@ -84,23 +41,6 @@ main {
       line-height: 1.5rem;
     }
   }
-
-  table {
-    width: 100%;
-
-    th {
-      color: $text-color-discreet;
-      font-weight: normal;
-      text-transform: uppercase;
-      font-size: 0.85rem;
-      padding-bottom: 0.825rem;
-    }
-
-    td {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-  }
 }
 
 .grid {

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

@@ -2,14 +2,14 @@
 
 <%= render MainSimpleComponent.new do %>
   <% if @donations.any? %>
-    <table class="w-full">
+    <table>
       <thead>
-        <tr class="text-left">
+        <tr>
           <th>User</th>
-          <th>Amount BTC</th>
+          <th class="text-right">Amount BTC</th>
-          <th>in EUR</th>
+          <th class="text-right">in EUR</th>
-          <th>in USD</th>
+          <th class="text-right">in USD</th>
-          <th>Public name</th>
+          <th class="pl-2">Public name</th>
           <th>Date</th>
           <th colspan="3"></th>
         </tr>
@@ -19,10 +19,10 @@
         <% @donations.each do |donation| %>
           <tr>
             <td><%= donation.user.address %></td>
-            <td><%= sats_to_btc donation.amount_sats %> BTC</td>
+            <td class="text-right"><%= sats_to_btc donation.amount_sats %></td>
-            <td><% if donation.amount_eur.present? %><%= number_to_currency donation.amount_eur / 100, unit: "" %><% end %></td>
+            <td class="text-right"><% if donation.amount_eur.present? %><%= number_to_currency donation.amount_eur / 100, unit: "" %><% end %></td>
-            <td><% if donation.amount_usd.present? %><%= number_to_currency donation.amount_usd / 100, unit: "" %><% end %></td>
+            <td class="text-right"><% if donation.amount_usd.present? %><%= number_to_currency donation.amount_usd / 100, unit: "" %><% end %></td>
-            <td><%= donation.public_name %></td>
+            <td class="pl-2"><%= donation.public_name %></td>
             <td><%= donation.paid_at ? donation.paid_at.strftime("%Y-%m-%d") : "" %></td>
             <td><%= link_to 'Show', admin_donation_path(donation), class: 'btn btn-sm btn-gray' %></td>
             <td><%= link_to 'Edit', edit_admin_donation_path(donation), class: 'btn btn-sm btn-gray' %></td>

app/views/admin/invitations/index.html.erb

@@ -14,7 +14,7 @@
       <h3>Accepted (<%= @invitations_used.length %>)</h3>
       <table>
         <thead>
-          <tr class="text-left">
+          <tr>
             <th>Token</th>
             <th>Accepted</th>
             <th>Invited user</th>

app/views/admin/ldap_users/index.html.erb

@@ -13,7 +13,7 @@
 
   <table>
     <thead>
-      <tr class="text-left">
+      <tr>
         <th>UID</th>
         <th>E-Mail</th>
         <th>Admin</th>

app/views/invitations/index.html.erb

@@ -8,7 +8,7 @@
       </p>
       <table class="mt-12">
         <thead>
-          <tr class="text-left">
+          <tr>
             <th>URL</th>
           </tr>
         </thead>
@@ -33,7 +33,7 @@
       <h3>Accepted Invitations</h3>
       <table>
         <thead>
-          <tr class="text-left">
+          <tr>
             <th class="hidden md:block">ID</th>
             <th>Accepted</th>
             <th>Invited user</th>