Port admin to new layout

app/assets/stylesheets/legacy/_layout.scss

@@ -8,6 +8,13 @@ body {
   background-attachment: fixed;
 }
 
+body#admin-panel {
+  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
+              url('/img/bg-1.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+}
+
 .ks-site-icon {
   svg {
     display: inline-block;
@@ -60,30 +67,6 @@ body {
   }
 }
 
-body#admin-panel {
-  #wrapper {
-    > header {
-      background: $color-red-bright;
-      background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
-                  url('/img/bg-1.jpg');
-    }
-  }
-
-  #main-nav {
-    ul {
-      grid-template-columns: repeat(4, 1fr);
-
-      li {
-        a {
-          &.active {
-            border-bottom: 2px solid $color-red-bright;
-          }
-        }
-      }
-    }
-  }
-}
-
 .flash-msg {
   width: 100%;
   text-align: center;
@@ -123,14 +106,6 @@ main {
   table {
     width: 100%;
 
-    th, td {
-      &.hide-small {
-        @include media-max(small) {
-          display: none;
-        }
-      }
-    }
-
     th {
       color: $text-color-discreet;
       font-weight: normal;

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

@@ -1,3 +1,7 @@
+<%= render partial: "components/header", locals: { page_title: "Admin Panel" } %>
+
+<%= render layout: "components/main_simple" do %>
   <p class="text-center">
     With great power comes great responsibility.
   </p>
+<% end %>

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

@@ -1,3 +1,6 @@
+<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+
+<%= render layout: "components/main_simple" do %>
   <h2>Editing Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
@@ -6,3 +9,4 @@
     <%= link_to 'Show', admin_donation_path(@donation), class: 'ks-text-link' %> |
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
   <p>
+<% end %>

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

@@ -1,9 +1,10 @@
-<h2>Donations</h2>
+<%= render partial: "components/header", locals: { page_title: "Donations" } %>
 
+<%= render layout: "components/main_simple" do %>
   <% if @donations.any? %>
-  <table>
+    <table class="w-full">
       <thead>
-      <tr>
+        <tr class="text-left">
           <th>User</th>
           <th>Amount BTC</th>
           <th>in EUR</th>
@@ -17,7 +18,7 @@
       <tbody>
         <% @donations.each do |donation| %>
           <tr>
-          <td><%= donation.user.cn %></td>
+            <td><%= donation.user.address %></td>
             <td><%= sats_to_btc donation.amount_sats %> BTC</td>
             <td><%= number_to_currency donation.amount_eur / 100, unit: "" %></td>
             <td><%= number_to_currency donation.amount_usd / 100, unit: "" %></td>
@@ -39,3 +40,4 @@
   <p class="mt-12">
     <%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn-md btn-gray' %>
   </p>
+<% end %>

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

@@ -1,3 +1,6 @@
+<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+
+<%= render layout: "components/main_simple" do %>
   <h2>New Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donations_path %>
@@ -5,3 +8,4 @@
   <p class="mt-8">
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
   </p>
+<% end %>

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

@@ -1,8 +1,11 @@
+<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+
+<%= render layout: "components/main_simple" do %>
   <p id="notice"><%= notice %></p>
 
   <p>
     <strong>User:</strong>
-  <%= @donation.user_id %>
+    <%= @donation.user.address %>
   </p>
 
   <p>
@@ -34,3 +37,4 @@
     <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
   </p>
+<% end %>

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

@@ -1,5 +1,7 @@
+<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
+
+<%= render layout: "components/main_simple" do %>
   <section>
-  <h2>Invitations</h2>
     <p>
       There are currently <strong><%= @invitations_unused_count %>
       unused invitations</strong> available to existing users.
@@ -12,7 +14,7 @@
       <h3>Accepted (<%= @invitations_used.length %>)</h3>
       <table>
         <thead>
-        <tr>
+          <tr class="text-left">
             <th>Token</th>
             <th>Accepted</th>
             <th>Invited user</th>
@@ -21,7 +23,7 @@
         <tbody>
           <% @invitations_used.each do |invitation| %>
             <tr>
-            <td class="overflow-ellipsis"><%= invitation.token %></td>
+              <td class="overflow-ellipsis font-mono"><%= invitation.token %></td>
               <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
               <td><%= User.find(invitation.invited_user_id).address %></td>
             </tr>
@@ -30,3 +32,4 @@
       </table>
     </section>
   <% end %>
+<% end %>

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

@@ -1,5 +1,6 @@
-<h2>LDAP users: <%= @ou %></h2>
+<%= render partial: "components/header", locals: { page_title: "LDAP Users: #{@ou}" } %>
 
+<%= render layout: "components/main_simple" do %>
   <h3 class="hidden">Domains</h3>
   <ul class="mb-10">
     <li class="inline-block">
@@ -12,7 +13,7 @@
 
   <table>
     <thead>
-    <tr>
+      <tr class="text-left">
         <th>UID</th>
         <th>E-Mail</th>
         <th>Admin</th>
@@ -30,3 +31,4 @@
       <% end %>
     </tbody>
   </table>
+<% end %>

app/views/components/_main_simple.html.erb

@@ -0,0 +1,5 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+    <%= yield %>
+  </div>
+</main>

app/views/dashboard/index.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "components/header", locals: { page_title: "Services" } %>
 
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+<%= render layout: "components/main_simple" do %>
   <section>
     <p>
       Your Kosmos account and password currently give you access to these
@@ -59,5 +58,4 @@
       </div>
     </div>
   </section>
-  </div>
-</main>
+<% end %>

app/views/donations/index.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "components/header", locals: { page_title: "Donations" } %>
 
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+<%= render layout: "components/main_simple" do %>
   <section>
     <p>
       Your financial contributions to the development and upkeep of Kosmos
@@ -42,5 +41,4 @@
       </p>
     <% end %>
   </section>
-  </div>
-</main>
+<% end %>

app/views/invitations/index.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "components/header", locals: { page_title: "Invitations" } %>
 
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+<%= render layout: "components/main_simple" do %>
   <section>
     <% if @invitations_unused.any? %>
     <p>
@@ -39,8 +38,8 @@
       <h3>Accepted Invitations</h3>
       <table>
         <thead>
-            <tr>
-              <th class="hide-small">ID</th>
+          <tr class="text-left">
+            <th class="hidden md:block">ID</th>
             <th>Accepted</th>
             <th>Invited user</th>
           </tr>
@@ -48,7 +47,7 @@
         <tbody>
           <% @invitations_used.each do |invitation| %>
             <tr>
-                <td class="hide-small"><%= invitation.token %></td>
+              <td class="hidden md:block font-mono"><%= invitation.token %></td>
               <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
               <td><%= User.find(invitation.invited_user_id).address %></td>
             </tr>
@@ -57,5 +56,4 @@
       </table>
     </section>
   <% end %>
-  </div>
-</main>
+<% end %>

app/views/layouts/admin.html.erb

@@ -10,30 +10,71 @@
     <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
-  <body id="admin-panel">
-    <div id="wrapper">
-      <header>
-        <h1>
-          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
-          <span class ="project-name">Kosmos</span>
-          <span class ="site-name">Accounts</span>
-        </h1>
-        <%= render partial: 'shared/header_account' %>
-      </header>
-
-      <% if user_signed_in? && current_user.confirmed? %>
+  <body id="admin-panel" class="bg-red-500">
+    <div class="">
+      <nav class="">
+        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
+          <div class="border-b border-gray-200/10">
+            <div class="flex items-center justify-between h-16 px-4 sm:px-0">
+              <div class="flex items-center">
+                <div class="ks-site-icon flex-shrink-0">
+                  <%= render partial: "shared/icons/comet" %>
+                  <!-- <img class="h&#45;8 w&#45;8" src="https://tailwindui.com/img/logos/workflow&#45;mark&#45;indigo&#45;500.svg" alt="Workflow"> -->
+                </div>
+                <div class="hidden md:block">
+                  <div class="ml-10 flex items-baseline space-x-4">
+                    <% if user_signed_in? && current_user.is_admin? %>
                       <%= render partial: 'shared/admin_nav' %>
                     <% end %>
+                  </div>
+                </div>
+              </div>
+              <div class="hidden md:block">
+                <%= render partial: 'shared/header_account' %>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <!-- Mobile menu, show/hide based on menu state. -->
+        <div class="border-b border-gray-700 md:hidden" id="mobile-menu">
+          <div class="pt-4 pb-3 border-t border-gray-700">
+            <div class="flex items-center px-5">
+              <div class="flex-shrink-0">
+                <img class="h-10 w-10 rounded-full" src="" alt="">
+              </div>
+              <div class="ml-3">
+                <div class="text-base font-medium leading-none text-white">Tom Cook</div>
+                <div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
+              </div>
+              <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                <span class="sr-only">View notifications</span>
+                <!-- Heroicon name: outline/bell -->
+                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+              </button>
+            </div>
+            <div class="mt-3 px-2 space-y-1">
+              <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
+
+              <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
+
+              <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <%= yield %>
+    </div>
+
+    <div id="wrapper">
       <% flash.each do |type, msg| %>
         <div class="flash-msg <%= type %>">
           <p><%= msg %></p>
         </div>
       <% end %>
-
-      <main>
-        <%= yield %>
-      </main>
     </div>
   </body>
 </html>

app/views/security/index.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "components/header", locals: { page_title: "Account" } %>
 
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+<%= render layout: "components/main_simple" do %>
   <section>
     <h2>Security</h2>
   </section>
@@ -14,5 +13,4 @@
       <% end %>
     </p>
   </section>
-  </div>
-</main>
+<% end %>

app/views/shared/_admin_nav.html.erb

@@ -1,22 +1,8 @@
-<nav id="main-nav">
-  <div class="wrapper">
-    <ul class="pages">
-      <li>
 <%= link_to "Dashboard", admin_root_path,
-             class: @current_section == :dashboard ? "active" : nil %>
-      </li>
-      <li>
+      class: main_nav_class(@current_section, :dashboard) %>
 <%= link_to "Invitations", admin_invitations_path,
-              class: @current_section == :invitations ? "active" : nil %>
-      </li>
-      <li>
+      class: main_nav_class(@current_section, :invitations) %>
 <%= link_to "Donations", admin_donations_path,
-              class: @current_section == :donations ? "active" : nil %>
-      </li>
-      <li>
+      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "LDAP Users", admin_ldap_users_path,
-              class: @current_section == :ldap_users ? "active" : nil %>
-      </li>
-    </ul>
-  </div>
-</nav>
+      class: main_nav_class(@current_section, :ldap_users) %>

app/views/shared/status_forbidden.html.erb

@@ -1,2 +1,6 @@
+<%= render partial: "components/header", locals: { page_title: "403" } %>
+
+<%= render layout: "components/main_simple" do %>
   <h2>Access forbidden</h2>
   <p>Sorry, you're not allowed to access this page.</p>
+<% end %>

app/views/shared/status_not_found.html.erb

@@ -1,2 +1,6 @@
+<%= render partial: "components/header", locals: { page_title: "404" } %>
+
+<%= render layout: "components/main_simple" do %>
   <h2>Not found</h2>
   <p>Sorry, this page does not exist.</p>
+<% end %>

app/views/shared/status_unauthorized.html.erb

@@ -0,0 +1,6 @@
+<%= render partial: "components/header", locals: { page_title: "401" } %>
+
+<%= render layout: "components/main_simple" do %>
+  <h2>Unauthorized</h2>
+  <p>This page needs authorization to access.</p>
+<% end %>

app/views/wallet/index.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "components/header", locals: { page_title: "Wallet" } %>
 
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+<%= render layout: "components/main_simple" do %>
   <section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
     <div class="md:col-span-8">
       <p>
@@ -85,8 +84,7 @@
       </p>
     </div>
   </section>
-  </div>
-</main>
+<% end %>
 
 <script type="text/javascript">
   (function () {