Add compact layout for content, port sign-in screens

app/views/components/_header.html.erb

@@ -1,5 +1,7 @@
 <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>
+    <h1 class="text-3xl font-bold text-white">
+      <%= page_title %>
+    </h1>
   </div>
 </header>

app/views/components/_header_compact.html.erb

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

app/views/components/_main_compact.html.erb

@@ -0,0 +1,5 @@
+<main class="w-full max-w-xl 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/devise/confirmations/new.html.erb

@@ -1,10 +1,16 @@
+<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+
+<%= render layout: "components/main_compact" do %>
   <h2>Resend confirmation instructions</h2>
 
   <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
       <%= f.label :email, 'Email address', class: 'block mb-1' %>
-    <%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+      <%= f.email_field :email,
+        required: true, autofocus: true, autocomplete: "email",
+        value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
+        class: "w-full sm:w-4/5" %>
     </p>
     <p class="mt-8">
       <%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %>
@@ -12,3 +18,4 @@
   <% end %>
 
   <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/passwords/edit.html.erb

@@ -1,3 +1,6 @@
+<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+
+<%= render layout: "components/main_compact" do %>
   <h2>Change your password</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
@@ -25,3 +28,4 @@
   <% end %>
 
   <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/passwords/new.html.erb

@@ -1,3 +1,6 @@
+<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+
+<%= render layout: "components/main_compact" do %>
   <h2>Forgot your password?</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
@@ -11,8 +14,9 @@
       <%= f.email_field :email, autocomplete: "email", required: true %>
     </p>
     <p class="mt-8">
-    <%= f.submit "Send me reset password instructions", class: 'btn-md btn-blue' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue' %>
     </p>
   <% end %>
 
   <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/sessions/new.html.erb

@@ -1,5 +1,6 @@
-<h2>Log in</h2>
+<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
 
+<%= render layout: "components/main_compact" do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
@@ -16,3 +17,4 @@
   <% end %>
 
   <%= render "devise/shared/links" %>
+<% end %>

app/views/layouts/admin.html.erb

@@ -21,14 +21,14 @@
                   <%= 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>
+                <% if user_signed_in? && current_user.is_admin? %>
                   <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' %>
+                    </div>
+                  </div>
                 <% end %>
               </div>
-                </div>
-              </div>
               <div class="hidden md:block">
                 <%= render partial: 'shared/header_account' %>
               </div>

app/views/layouts/application.html.erb

@@ -21,11 +21,13 @@
                   <%= 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>
+                <% 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' %>
                     </div>
                   </div>
+                <% end %>
               </div>
               <div class="hidden md:block">
                 <%= render partial: 'shared/header_account' %>