Consolidate some styles

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;
+  }
 }

app/assets/stylesheets/legacy/_layout.scss

@@ -85,10 +85,6 @@ main {
     }
   }
 
-  section {
-    margin-bottom: 3rem;
-  }
-
   table {
     width: 100%;
 

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>

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>

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 %>
 

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 %>
 

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 %>
 

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 %>

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>

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>

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 %>

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 %>

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 %>