WIP New app layout

app/assets/stylesheets/components/base.css

@@ -3,9 +3,9 @@
     @apply leading-none
   }
 
-  h1, h2, h3 {
+  /* h1, h2, h3 { */
-    @apply font-light;
+  /*   @apply font-light; */
-  }
+  /* } */
 
   h1 {
     @apply text-3xl uppercase;

app/assets/stylesheets/legacy/_layout.scss

@@ -1,6 +1,22 @@
 @import "variables";
 @import "mediaqueries";
 
+body {
+  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;
+  background-attachment: fixed;
+}
+
+.ks-site-icon {
+  svg {
+    display: inline-block;
+    height: 1.875rem;
+    vertical-align: top;
+    width: auto;
+  }
+}
+
 #wrapper {
   width: 100%;
   text-align: center;
@@ -23,17 +39,6 @@
       span.project-name {
         display: none;
       }
-
-      span.icon {
-        svg {
-          display: inline-block;
-          height: 1.875rem;
-          vertical-align: top;
-          width: auto;
-        }
-
-        margin-right: 0.5rem;
-      }
     }
 
     p.current-user {
@@ -94,19 +99,6 @@ body#admin-panel {
 }
 
 main {
-  width: $content-width;
-  max-width: $content-max-width;
-  margin: 4rem auto 6rem auto;
-  text-align: left;
-
-  @include media-max(medium) {
-    max-width: 90%;
-  }
-
-  @include media-max(small) {
-    margin: 3rem auto;
-  }
-
   p {
     line-height: 1.5rem;
     margin-bottom: 1rem;
@@ -126,10 +118,6 @@ main {
 
   section {
     margin-bottom: 3rem;
-
-    h2 {
-      display: none;
-    }
   }
 
   table {

app/helpers/application_helper.rb

@@ -2,4 +2,12 @@ module ApplicationHelper
   def sats_to_btc(sats)
     sats.to_f / 100000000
   end
+
+  def main_nav_class(current_section, link_to_section)
+    if current_section == link_to_section
+      "bg-gray-900/50 text-white px-3 py-2 rounded-md text-sm font-medium"
+    else
+      "text-gray-300 hover:bg-gray-900/30 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+    end
+  end
 end

app/views/components/_header.html.erb

@@ -0,0 +1,5 @@
+<header class="py-10">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-white"><%= page_title %></h1>
+  </div>
+</header>

app/views/dashboard/index.html.erb

@@ -1,5 +1,8 @@
+<%= 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">
     <section>
-  <h2>Services</h2>
       <p>
         Your Kosmos account and password currently give you access to these
         services:
@@ -56,3 +59,5 @@
         </div>
       </div>
     </section>
+  </div>
+</main>

app/views/donations/index.html.erb

@@ -1,8 +1,11 @@
+<%= 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">
     <section>
-  <h2>Donations</h2>
       <p>
-    Your financial contributions to the development and
+        Your financial contributions to the development and upkeep of Kosmos
-    upkeep of Kosmos software and services.
+        software and services.
       </p>
     </section>
 
@@ -39,3 +42,5 @@
         </p>
       <% end %>
     </section>
+  </div>
+</main>

app/views/invitations/index.html.erb

@@ -1,5 +1,8 @@
+<%= 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">
     <section>
-  <h2>Invitations</h2>
       <% if @invitations_unused.any? %>
       <p>
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
@@ -11,14 +14,14 @@
       <% if @invitations_unused.any? %>
         <table>
           <thead>
-        <tr>
+            <tr class="text-left">
               <th>URL</th>
             </tr>
           </thead>
           <tbody>
             <% @invitations_unused.each do |invitation| %>
               <tr>
-            <td><%= invitation_url(invitation.token) %></td>
+                <td class="font-mono"><%= invitation_url(invitation.token) %></td>
               </tr>
             <% end %>
           </tbody>
@@ -54,3 +57,5 @@
         </table>
       </section>
     <% end %>
+  </div>
+</main>

app/views/layouts/application.html.erb

@@ -11,29 +11,68 @@
     <%= javascript_importmap_tags %>
   </head>
   <body>
-    <div id="wrapper">
+    <div class="">
-      <header>
+      <nav class="">
-        <h1>
+        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
+          <div class="border-b border-gray-200/10">
-          <span class ="project-name">Kosmos</span>
+            <div class="flex items-center justify-between h-16 px-4 sm:px-0">
-          <span class ="site-name">Account</span>
+              <div class="flex items-center">
-        </h1>
+                <div class="ks-site-icon flex-shrink-0">
-        <%= render partial: 'shared/header_account' %>
+                  <%= render partial: "shared/icons/comet" %>
-      </header>
+                  <!-- <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>
-      <% if user_signed_in? && current_user.confirmed? %>
+                <div class="hidden md:block">
+                  <div class="ml-10 flex items-baseline space-x-4">
                     <%= render partial: 'shared/main_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,3 +1,7 @@
+<%= 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">
     <section>
       <h2>Security</h2>
     </section>
@@ -10,3 +14,5 @@
         <% end %>
       </p>
     </section>
+  </div>
+</main>

app/views/shared/_header_account.html.erb

@@ -1,6 +1,10 @@
 <% if user_signed_in? %>
-  <p class="current-user mt-8">
+  <div class="flex items-baseline space-x-4 text-gray-200/80 text-sm font-medium">
-    Signed in as <strong class="text-white font-normal"><%= current_user.cn %>@kosmos.org</strong>.
+    <span>
-    <%= link_to "Log out", destroy_user_session_path, class: 'underline' %>
+      Signed in as <strong class="text-white font-normal"><%= current_user.cn %>@kosmos.org</strong>
-  </p>
+    </span>
+    <span>
+      <%= link_to "Log out", destroy_user_session_path, class: 'underline hover:text-white' %>
+    </span>
+  </div>
 <% end %>

app/views/shared/_main_nav.html.erb

@@ -1,26 +1,10 @@
-<nav id="main-nav">
-  <div class="wrapper">
-    <ul class="pages">
-      <li>
 <%= link_to "Services", root_path,
-             class: @current_section == :dashboard ? "active" : nil %>
+      class: main_nav_class(@current_section, :dashboard) %>
-      </li>
-      <li>
 <%= link_to "Invitations", invitations_path,
-              class: @current_section == :invitations ? "active" : nil %>
+      class: main_nav_class(@current_section, :invitations) %>
-      </li>
-      <li>
 <%= link_to "Donations", donations_path,
-              class: @current_section == :contributions ? "active" : nil %>
+      class: main_nav_class(@current_section, :contributions) %>
-      </li>
-      <li>
 <%= link_to "Wallet", wallet_path,
-              class: @current_section == :wallet ? "active" : nil %>
+      class: main_nav_class(@current_section, :wallet) %>
-      </li>
+<%= link_to "Account", security_path,
-      <li>
+      class: main_nav_class(@current_section, :security) %>
-        <%= link_to "Security", security_path,
-              class: @current_section == :security ? "active" : nil %>
-      </li>
-    </ul>
-  </div>
-</nav>

app/views/wallet/index.html.erb

@@ -1,6 +1,9 @@
+<%= 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">
     <section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
       <div class="md:col-span-8">
-    <h2>Wallet</h2>
         <p>
           Send and receive sats via the Bitcoin Lightning Network.
         </p>
@@ -82,6 +85,8 @@
         </p>
       </div>
     </section>
+  </div>
+</main>
 
 <script type="text/javascript">
   (function () {