From 5751c0338a1427a3d5451a71f149552674dc735a Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 24 Feb 2022 13:59:51 -0600
Subject: [PATCH] Nicer buttons on small screens

---
 app/assets/stylesheets/components/buttons.css |  2 +-
 app/views/signup/index.html.erb               |  3 ++-
 app/views/signup/steps.html.erb               | 13 ++++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/buttons.css b/app/assets/stylesheets/components/buttons.css
index 75fd400..a89203b 100644
--- a/app/assets/stylesheets/components/buttons.css
+++ b/app/assets/stylesheets/components/buttons.css
@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply font-semibold rounded-md leading-none cursor-pointer
+    @apply font-semibold rounded-md leading-none cursor-pointer text-center
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 
diff --git a/app/views/signup/index.html.erb b/app/views/signup/index.html.erb
index fa72390..075deeb 100644
--- a/app/views/signup/index.html.erb
+++ b/app/views/signup/index.html.erb
@@ -10,6 +10,7 @@
     by invitation. Seems like you have good friends!
   </p>
   <p class="mt-12">
-    <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
+    <%= link_to "Get started", signup_steps_path(1),
+          class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
   </p>
 <% end %>
diff --git a/app/views/signup/steps.html.erb b/app/views/signup/steps.html.erb
index 00a4d70..b1c53e4 100644
--- a/app/views/signup/steps.html.erb
+++ b/app/views/signup/steps.html.erb
@@ -1,8 +1,8 @@
 <%= render HeaderCompactComponent.new(title: "Signup") %>
 
 <%= render MainCompactComponent.new do %>
-  <% case @step %>
-  <% when 1 %>
+  <% case @step
+     when 1 %>
     <h2>Choose a username</h2>
     <%= form_for @user, :url => signup_validate_url do |f| %>
       <p>
@@ -16,7 +16,8 @@
         <p class="error-msg">Username <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
 
@@ -32,7 +33,8 @@
         <p class="error-msg">Email <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
 
@@ -53,7 +55,8 @@
         and Privacy Policy. Don't worry, they will be excellent!
       </p>
       <p class="mt-8">
-        <%= f.submit "Create account", class: 'btn-md btn-blue' %>
+        <%= f.submit "Create account",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
   <% end %>