1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-02 20:15:22 +02:00

Apply default form styling (#272)

* Add and organise component stylesheets

* Revert CSS folder and file structure

* Add FormsHelper and FormBuilder to apply component classes

* Refactor label args

Co-authored-by: Jose Farias <31393016+josefarias@users.noreply.github.com>
Signed-off-by: Josh Brown <josh@joossh.com>

* Update form field styles

* Apply form builder to all fields

* Remove redundant style rules

Some of these were either duplicative or had no effect.

* Apply default submit button styles

* Set default form class

* Fix opacity of input when focused

---------

Signed-off-by: Josh Brown <josh@joossh.com>
Co-authored-by: Jose Farias <31393016+josefarias@users.noreply.github.com>
Co-authored-by: Josh Pigford <josh@joshpigford.com>
This commit is contained in:
Josh Brown 2024-02-09 15:29:31 +00:00 committed by GitHub
parent f8174990ca
commit df3e14a975
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 124 additions and 113 deletions

View file

@ -2,22 +2,14 @@
header_title t('.title')
%>
<%= form_with url: session_path, html: {class: 'space-y-6'} do |form| %>
<%= form_with url: session_path do |form| %>
<%= auth_messages form %>
<div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :email, t('.email'), class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.email_field :email, autofocus: false, autocomplete: "email", required: 'required', placeholder: t('.email_placeholder'), class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
</div>
<%= form.email_field :email, label: t('.email'), autofocus: false, autocomplete: "email", required: 'required', placeholder: t('.email_placeholder') %>
<div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :password, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.password_field :password, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
</div>
<%= form.password_field :password, label: true, required: 'required' %>
<div>
<%= form.submit t('.submit'), class: 'cursor-pointer flex justify-center w-full px-4 py-3 text-sm font-medium text-white bg-black rounded-xl hover:bg-black focus:outline-none focus:ring-2 focus:ring-gray-200 shadow' %>
</div>
<%= form.submit t('.submit') %>
<% end %>
<div class="mt-6 text-center">