Skip to content

Commit

Permalink
Increase form input field border contrast
Browse files Browse the repository at this point in the history
The contrast provided by the border-gray-200 Tailwind utility
class is very poor. It's nearly impossible to distinguish the edges 
of an input field on a white background. 

That's not a great default experience for Rails scaffolds.

With a slight bump to border-gray-400, things are much easier 
to distinguish.
  • Loading branch information
olivierlacan authored Apr 29, 2024
1 parent 6e6e34a commit e9c3f80
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@
<div class="my-5">
<% if attribute.password_digest? -%>
<%%= form.label :password %>
<%%= form.password_field :password, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<%%= form.password_field :password, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>

<div class="my-5">
<%%= form.label :password_confirmation %>
<%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
<% elsif attribute.attachments? -%>
<%%= form.label :<%= attribute.column_name %> %>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
<% else -%>
<%%= form.label :<%= attribute.column_name %> %>
<% if attribute.field_type == :text_area -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
<% elsif attribute.field_type == :check_box -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block mt-2 h-5 w-5" %>
<% else -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
<% end -%>
<% end -%>
</div>
Expand Down

0 comments on commit e9c3f80

Please sign in to comment.