Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-02 20:15:22 +02:00
Code Issues Releases Activity Actions

Apply default form styling (#272)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

5
app/views/accounts/account/_depository.html.erb
View file

@ -1,4 +1 @@
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
<label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
<%= f.select :subtype, options_for_select([["Checking", "checking"], ["Savings", "savings"]], selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
</div>
<%= f.select :subtype, options_for_select([["Checking", "checking"], ["Savings", "savings"]], selected: ""), { label: "Type" } %>

5
app/views/accounts/account/_investment.html.erb
View file

@ -1,4 +1 @@
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
<label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
<%= f.select :subtype, options_for_select(Account::Investment::SUBTYPES, selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
</div>
<%= f.select :subtype, options_for_select(Account::Investment::SUBTYPES, selected: ""), { label: true } %>

18
app/views/accounts/new.html.erb
View file

@ -70,25 +70,13 @@
<%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4 m-5 mt-1", data: { turbo: false } } do |f| %>
<%= f.hidden_field :accountable_type %>
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
<%= f.label :name, 'Account name', class: 'block text-sm font-medium opacity-50 focus-within:opacity-100' %>
<%= f.text_field :name, placeholder: 'Example account name', required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %>
<%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
<%= f.label :balance, class: 'block text-sm font-medium opacity-50 focus-within:opacity-100' %>
<div class="flex">
<%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full" %>
</div>
</div>
<%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', label: true %>
<div class="">
<button type="submit" class="w-full p-3 text-center text-white bg-black rounded-lg hover:bg-gray-700" title="Submit">
Add <%= @account.accountable.model_name.human.downcase %>
</button>
</div>
<%= f.submit "Add #{@account.accountable.model_name.human.downcase}" %>
<% end %>
<% end %>
<% end %>

11
app/views/password_resets/new.html.erb
View file

@ -2,15 +2,10 @@
header_title t('.title')
%>
<%= form_with url: password_reset_path, html: {class: 'space-y-6'} do |form| %>
<%= form_with url: password_reset_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, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.email_field :email, autofocus: false, autocomplete: "email", required: 'required', placeholder: 'you@example.com', 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: true, autofocus: false, autocomplete: "email", required: 'required', placeholder: 'you@example.com' %>
<div>
<%= form.submit t('.submit'), class: '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 %>

26
app/views/registrations/new.html.erb
View file

@ -2,32 +2,18 @@
header_title t('.title')
%>
<%= form_with model: @user, url: registration_path, html: {class: 'space-y-6'} do |form| %>
<%= form_with model: @user, url: registration_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, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.email_field :email, autofocus: false, autocomplete: "email", required: 'required', placeholder: 'you@example.com', 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, autofocus: false, autocomplete: "email", required: 'required', placeholder: 'you@example.com', label: true %>
<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, autocomplete: "new-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, autocomplete: "new-password", required: 'required', label: true %>
<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_confirmation, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.password_field :password_confirmation, autocomplete: "new-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_confirmation, autocomplete: "new-password", required: 'required', label: true %>
<% if hosted_app? %>
<div class="bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100 relative border border-gray-100">
<%= form.label :invite_code, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
<%= form.password_field :invite_code, 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 :invite_code, required: 'required', label: true %>
<% end %>
<div>
<%= form.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 %>
<% end %>

16
app/views/sessions/new.html.erb
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">

35
app/views/settings/edit.html.erb
View file

@ -2,39 +2,20 @@
<%= form_with model: Current.user, url: settings_path, html: { class: "space-y-4" } do |form| %>
<%= form.fields_for :family_attributes do |family_fields| %>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= family_fields.label :name, "Family name", class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= family_fields.text_field :name, placeholder: "Family name", value: Current.family.name, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<%= family_fields.text_field :name, placeholder: "Family name", value: Current.family.name, label: "Family name" %>
<% end %>
<%= form.text_field :first_name, placeholder: "First name", value: Current.user.first_name, label: true %>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :first_name, class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= form.text_field :first_name, placeholder: "First name", value: Current.user.first_name, class: "w-full p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<%= form.text_field :last_name, placeholder: "Last name", value: Current.user.last_name, label: true %>
<%= form.email_field :email, placeholder: "Email", value: Current.user.email, label: true %>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :last_name, class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= form.text_field :last_name, placeholder: "Last name", value: Current.user.last_name, class: "w-full p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<%= form.password_field :password, label: true %>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :email, class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= form.email_field :email, placeholder: "Email", value: Current.user.email, class: "w-full p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<%= form.password_field :password_confirmation, label: true %>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :password, class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= form.password_field :password, class: "w-full p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
<%= form.label :password_confirmation, class: "block text-sm font-medium opacity-75 focus-within:opacity-100" %>
<%= form.password_field :password_confirmation, class: "w-full p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
</div>
<div class="absolute right-5 bottom-5">
<div class="fixed right-5 bottom-5">
<button type="submit" class="flex items-center justify-center w-12 h-12 mb-2 bg-black rounded-full shrink-0 grow-0 hover:bg-gray-600">
<%= inline_svg_tag('icn-check.svg', class: 'text-white fill-current') %>
</button>