Refactor form input styles
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

* Fix issue where button is rendered taller in flexbox, due to default
  margin on input elements
* Refactor/improve all login and signup views
This commit is contained in:
Râu Cao
2023-03-08 15:51:09 +07:00
parent 1142a4e2d5
commit b34d040ce3
8 changed files with 48 additions and 47 deletions

View File

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

View File

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

View File

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