From ca940ec35d811726b38c543f2a1816a65d8e7359 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 24 Feb 2022 17:24:59 -0600
Subject: [PATCH] Consolidate some styles

---
 app/assets/stylesheets/components/base.css     |  8 ++++++++
 app/assets/stylesheets/legacy/_layout.scss     |  4 ----
 app/components/main_compact_component.html.erb |  2 +-
 app/components/main_simple_component.html.erb  |  4 ++--
 app/views/devise/confirmations/new.html.erb    |  2 +-
 app/views/devise/passwords/new.html.erb        |  2 +-
 app/views/devise/sessions/new.html.erb         |  2 +-
 app/views/donations/index.html.erb             |  9 +++------
 app/views/invitations/index.html.erb           | 13 ++++---------
 app/views/security/index.html.erb              |  7 ++-----
 app/views/signup/index.html.erb                |  2 +-
 app/views/signup/steps.html.erb                |  6 +++---
 app/views/wallet/index.html.erb                |  6 +++---
 13 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/components/base.css b/app/assets/stylesheets/components/base.css
index f022c1a..5bb472c 100644
--- a/app/assets/stylesheets/components/base.css
+++ b/app/assets/stylesheets/components/base.css
@@ -18,4 +18,12 @@
   h3 {
     @apply text-xl mb-6;
   }
+
+  main section {
+    @apply pt-8 sm:pt-12;
+  }
+
+  main section:first-of-type {
+    @apply pt-0;
+  }
 }
diff --git a/app/assets/stylesheets/legacy/_layout.scss b/app/assets/stylesheets/legacy/_layout.scss
index 1f8bc43..222b34e 100644
--- a/app/assets/stylesheets/legacy/_layout.scss
+++ b/app/assets/stylesheets/legacy/_layout.scss
@@ -85,10 +85,6 @@ main {
     }
   }
 
-  section {
-    margin-bottom: 3rem;
-  }
-
   table {
     width: 100%;
 
diff --git a/app/components/main_compact_component.html.erb b/app/components/main_compact_component.html.erb
index d1d2a5f..80161b6 100644
--- a/app/components/main_compact_component.html.erb
+++ b/app/components/main_compact_component.html.erb
@@ -1,5 +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">
+  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>
diff --git a/app/components/main_simple_component.html.erb b/app/components/main_simple_component.html.erb
index 3d75a30..b72b31d 100644
--- a/app/components/main_simple_component.html.erb
+++ b/app/components/main_simple_component.html.erb
@@ -1,5 +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">
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
index 86f6ae9..4f51d90 100644
--- a/app/views/devise/confirmations/new.html.erb
+++ b/app/views/devise/confirmations/new.html.erb
@@ -14,7 +14,7 @@
     </p>
     <p class="mt-8">
       <%= f.submit "Resend confirmation link",
-                   class: 'btn-md btn-blue w-full md:w-auto' %>
+                   class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index e14002b..622f238 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -17,7 +17,7 @@
                                 class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full md:w-auto' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index f557cc1..607edb3 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -15,7 +15,7 @@
                                       class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full md:w-auto' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 
diff --git a/app/views/donations/index.html.erb b/app/views/donations/index.html.erb
index 95cd52c..bbb4f3c 100644
--- a/app/views/donations/index.html.erb
+++ b/app/views/donations/index.html.erb
@@ -2,15 +2,12 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <p>
+    <p class="mb-12">
       Your financial contributions to the development and upkeep of Kosmos
       software and services.
     </p>
-  </section>
-
-  <section>
     <% if @donations.any? %>
-      <ul class="donations list-none">
+      <ul class="list-none">
         <% @donations.each do |donation| %>
           <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
             <h3 class="mb-0">
@@ -36,7 +33,7 @@
         <% end %>
       </ul>
     <% else %>
-      <p>
+      <p class="text-gray-500">
         No donations to show.
       </p>
     <% end %>
diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index 377d268..e91d9ca 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -3,15 +3,10 @@
 <%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
-    <p>
-      Invite your friends to a Kosmos account by sharing an invitation URL with them:
-    </p>
-    <% end %>
-  </section>
-
-  <section>
-    <% if @invitations_unused.any? %>
-      <table>
+      <p>
+        Invite your friends to a Kosmos account by sharing an invitation URL with them:
+      </p>
+      <table class="mt-12">
         <thead>
           <tr class="text-left">
             <th>URL</th>
diff --git a/app/views/security/index.html.erb b/app/views/security/index.html.erb
index 797454a..046ff9c 100644
--- a/app/views/security/index.html.erb
+++ b/app/views/security/index.html.erb
@@ -2,14 +2,11 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <h2>Security</h2>
-  </section>
-
-  <section>
+    <h2 class="mb-12">Security</h2>
     <h3>Password change</h3>
     <p>
       <%= form_with(url: settings_reset_password_path, method: :post) do %>
-        <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %>
+        <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray w-full sm:w-auto') %>
       <% end %>
     </p>
   </section>
diff --git a/app/views/signup/index.html.erb b/app/views/signup/index.html.erb
index 075deeb..4487623 100644
--- a/app/views/signup/index.html.erb
+++ b/app/views/signup/index.html.erb
@@ -11,6 +11,6 @@
   </p>
   <p class="mt-12">
     <%= link_to "Get started", signup_steps_path(1),
-          class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
+          class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
   </p>
 <% end %>
diff --git a/app/views/signup/steps.html.erb b/app/views/signup/steps.html.erb
index b1c53e4..09a3d2e 100644
--- a/app/views/signup/steps.html.erb
+++ b/app/views/signup/steps.html.erb
@@ -17,7 +17,7 @@
       <% end %>
       <p class="mt-12">
         <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
+              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </p>
     <% end %>
 
@@ -34,7 +34,7 @@
       <% end %>
       <p class="mt-12">
         <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
+              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </p>
     <% end %>
 
@@ -56,7 +56,7 @@
       </p>
       <p class="mt-8">
         <%= f.submit "Create account",
-              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
+              class: "btn-md btn-blue block w-full sm:inline-block sm:w-auto" %>
       </p>
     <% end %>
   <% end %>
diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index 25f8780..afabb25 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -42,10 +42,10 @@
       code/URL:
     </p>
     <p class="my-6 text-center md:text-left">
-      <button id="copy-setup-code" class="btn-md btn-blue">Copy setup code/URL</button>
+      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto">Copy setup code/URL</button>
       <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
-      <button id="show-setup-code" class="btn-md btn-blue">Show setup QR code</button>
-      <button id="hide-setup-code" class="btn-md btn-blue hidden">Hide setup QR code</button>
+      <button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
+      <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
     </p>
     <p id="setup-code" class="hidden my-10 w-full text-center">
       <%= raw @svg %>