From b34d040ce37df71c605cc58f30f15559d89762d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Wed, 8 Mar 2023 15:51:09 +0700
Subject: [PATCH] Refactor form input styles

* Fix issue where button is rendered taller in flexbox, due to default
  margin on input elements
* Refactor/improve all login and signup views
---
 app/assets/stylesheets/components/forms.css |  2 +-
 app/views/devise/confirmations/new.html.erb |  4 +--
 app/views/devise/passwords/new.html.erb     | 20 +++++++-------
 app/views/devise/sessions/new.html.erb      | 20 +++++++-------
 app/views/invitations/index.html.erb        |  9 +++----
 app/views/settings/profile/index.html.erb   |  8 +++---
 app/views/signup/index.html.erb             |  2 +-
 app/views/signup/steps.html.erb             | 30 ++++++++++-----------
 8 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/app/assets/stylesheets/components/forms.css b/app/assets/stylesheets/components/forms.css
index 61c7b1e..5603ba4 100644
--- a/app/assets/stylesheets/components/forms.css
+++ b/app/assets/stylesheets/components/forms.css
@@ -1,7 +1,7 @@
 @layer components {
   input[type=text], input[type=email], input[type=password],
   input[type=number], select, textarea {
-    @apply mt-1 rounded-md bg-gray-100 focus:bg-white
+    @apply rounded-md bg-gray-100 focus:bg-white
            border-transparent focus:border-transparent focus:ring-2
            focus:ring-blue-600 focus:ring-opacity-75;
   }
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
index 4f51d90..da793a0 100644
--- a/app/views/devise/confirmations/new.html.erb
+++ b/app/views/devise/confirmations/new.html.erb
@@ -6,7 +6,7 @@
   <%= 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 w-full' %>
+      <%= f.label :email, 'Email address', class: 'block mb-2 font-bold' %>
       <%= f.email_field :email,
         required: true, autofocus: true, autocomplete: "email",
         value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
@@ -14,7 +14,7 @@
     </p>
     <p class="mt-8">
       <%= f.submit "Resend confirmation link",
-                   class: 'btn-md btn-blue w-full sm:w-auto' %>
+                   class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 622f238..a0345f3 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -5,19 +5,21 @@
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
+    <div class="mb-6">
+      <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
+      <p class="flex gap-2 items-center">
+        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                              required: true, class: "relative grow"%>
+        <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
+      </p>
+    </div>
     <p>
-      <%= f.label :cn, 'User', class: 'block' %>
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                            required: true, class: "w-full md:w-3/5"%>
-      <span class="ml-1 text-gray-500">@ kosmos.org</span>
-    </p>
-    <p>
-      <%= f.label :email, 'Email address', class: 'block' %>
+      <%= f.label :email, 'Email address', class: 'block mb-2 font-bold' %>
       <%= f.email_field :email, autocomplete: "email", required: true,
-                                class: "w-full md:w-3/5"%>
+                                class: "w-full"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full sm:w-auto' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 607edb3..687d90a 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -3,19 +3,21 @@
 <%= render MainCompactComponent.new do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
+    <div class="mb-6">
+      <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
+      <p class="flex gap-2 items-center">
+        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                              required: true, class: "relative grow"%>
+        <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
+      </p>
+    </div>
     <p>
-      <%= f.label :cn, 'User', class: 'block' %>
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                            class: "w-full md:w-3/5"%>
-      <span class="ml-1 text-gray-500">@ kosmos.org</span>
-    </p>
-    <p>
-      <%= f.label :password, class: 'block' %>
+      <%= f.label :password, class: 'block mb-2 font-bold' %>
       <%= f.password_field :password, autocomplete: "current-password",
-                                      class: "w-full md:w-3/5"%>
+                                      required: true, class: "w-full"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 
diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index 5517a47..b2c5a22 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -6,14 +6,13 @@
       <p class="mb-8">
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-      <ul>
+      <ul class="md:w-3/4">
         <% @invitations_unused.each do |invitation| %>
-          <li class="font-mono mb-1 flex gap-1 md:block"
-              data-controller="clipboard">
-            <input type="text" disabled class="md:w-3/4 flex-1"
+          <li class="font-mono mb-2 flex gap-1" data-controller="clipboard">
+            <input type="text" disabled class="relative grow"
                    value="<%= invitation_url(invitation.token) %>"
                    data-clipboard-target="source" />
-            <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+            <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0 w-auto"
                     data-clipboard-target="trigger" data-action="clipboard#copy"
                     title="Copy to clipboard">
               <span class="content-initial">
diff --git a/app/views/settings/profile/index.html.erb b/app/views/settings/profile/index.html.erb
index b166cee..3e91709 100644
--- a/app/views/settings/profile/index.html.erb
+++ b/app/views/settings/profile/index.html.erb
@@ -3,14 +3,14 @@
 <%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
   <section>
     <h3>Profile</h3>
-    <p class="mb-1">
+    <p class="mb-2">
       <%= label :user_address, 'User address', class: 'font-bold' %>
     </p>
-    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
-      <input type="text" id="user_address" class="flex-1 sm:w-3/5"
+    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:w-3/5">
+      <input type="text" id="user_address" class="grow"
              value=<%= @user.address %> disabled="disabled"
              data-clipboard-target="source" />
-      <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+      <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
               data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
         <span class="content-initial">
diff --git a/app/views/signup/index.html.erb b/app/views/signup/index.html.erb
index 4487623..0d4c759 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 sm:w-auto" %>
+          class: "btn-md btn-blue block w-full" %>
   </p>
 <% end %>
diff --git a/app/views/signup/steps.html.erb b/app/views/signup/steps.html.erb
index 09a3d2e..ffc8a23 100644
--- a/app/views/signup/steps.html.erb
+++ b/app/views/signup/steps.html.erb
@@ -5,19 +5,20 @@
      when 1 %>
     <h2>Choose a username</h2>
     <%= form_for @user, :url => signup_validate_url do |f| %>
-      <p>
-        <%= f.label :cn, 'Username', class: 'hidden' %>
-        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-              class: 'text-xl w-full md:w-3/5 mb-1' %>
-        <span class="text-base md:text-xl text-gray-500 ml-1">@</span>
-        <span class="text-base md:text-xl text-gray-500">kosmos.org</span>
-      </p>
+      <div class="mb-6">
+        <p class="flex gap-2 items-center">
+          <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                                required: true, class: "relative grow text-xl"%>
+          <span class="relative shrink-0 text-gray-500 md:text-xl">
+            @ kosmos.org
+          </span>
+        </p>
+      </div>
       <% if @validation_error.present? %>
         <p class="error-msg">Username <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
 
@@ -27,14 +28,13 @@
       <p>
         <%= f.label :email, 'Email address', class: 'hidden' %>
         <%= f.email_field :email, autofocus: true, autocomplete: 'email',
-                                  class: 'text-xl w-full' %>
+                                  required: true, class: 'text-xl w-full' %>
       </p>
       <% if @validation_error.present? %>
         <p class="error-msg">Email <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
 
@@ -44,8 +44,7 @@
     <%= form_for @user, :url => signup_validate_url do |f| %>
       <p>
         <%= f.label :password, 'Password', class: 'hidden' %>
-        <%= f.password_field :password, autofocus: true,
-                                        class: 'text-xl w-full' %>
+        <%= f.password_field :password, autofocus: true, class: 'text-xl w-full' %>
       </p>
       <% if @validation_error.present? %>
         <p class="error-msg">Password <%= @validation_error %></p>
@@ -55,8 +54,7 @@
         and Privacy Policy. Don't worry, they will be excellent!
       </p>
       <p class="mt-8">
-        <%= f.submit "Create account",
-              class: "btn-md btn-blue block w-full sm:inline-block sm:w-auto" %>
+        <%= f.submit "Create account", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
   <% end %>