From 882857fcf0a6f5373de8e8ee4545fe703b62af4d Mon Sep 17 00:00:00 2001 From: Zach Gollwitzer Date: Fri, 28 Feb 2025 09:29:07 -0500 Subject: [PATCH] Add transitions to buttons and other common design system elements (#1924) --- app/assets/tailwind/maybe-design-system.css | 43 +++++++++++-------- .../account/transactions/bulk_edit.html.erb | 4 +- app/views/account/transactions/show.html.erb | 2 +- app/views/budgets/_picker.html.erb | 2 +- app/views/mfa/new.html.erb | 2 +- app/views/settings/profiles/show.html.erb | 6 +-- app/views/transactions/_header.html.erb | 2 +- 7 files changed, 34 insertions(+), 27 deletions(-) diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css index 3f252db6..c37eb286 100644 --- a/app/assets/tailwind/maybe-design-system.css +++ b/app/assets/tailwind/maybe-design-system.css @@ -331,29 +331,13 @@ details>summary { @apply list-none; } - - select[multiple="multiple"] { - @apply py-2 pr-2 space-y-0.5 overflow-y-auto; - } - - select[multiple="multiple"] option { - @apply py-2 rounded-md; - } - - select[multiple="multiple"] option:checked { - @apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2; - } - - select[multiple="multiple"] option:active, - select[multiple="multiple"] option:focus { - @apply bg-white; - } } @layer components { /* Buttons */ .btn { @apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500; + @apply transition-all duration-300; } .btn--primary { @@ -380,6 +364,25 @@ .form-field { @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full; @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100; + @apply transition-all duration-300; + + /* Add styles for multiple select within form fields */ + select[multiple] { + @apply py-2 pr-2 space-y-0.5 overflow-y-auto; + + option { + @apply py-2 rounded-md; + } + + option:checked { + @apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2; + } + + option:active, + option:focus { + @apply bg-white; + } + } } .form-field__label { @@ -392,6 +395,7 @@ @apply placeholder-shown:opacity-50; @apply disabled:text-gray-400; @apply text-ellipsis overflow-hidden whitespace-nowrap; + @apply transition-opacity duration-300; &select { @apply pr-8; @@ -410,6 +414,7 @@ .checkbox { &[type='checkbox'] { @apply rounded-sm; + @apply transition-colors duration-300; } } @@ -440,8 +445,10 @@ /* Switches */ .switch { @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer; - @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out; + @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full; + @apply after:transition-transform after:duration-300 after:ease-in-out; @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4; + @apply transition-colors duration-300; } /* Tooltips */ diff --git a/app/views/account/transactions/bulk_edit.html.erb b/app/views/account/transactions/bulk_edit.html.erb index 02afa497..b8317084 100644 --- a/app/views/account/transactions/bulk_edit.html.erb +++ b/app/views/account/transactions/bulk_edit.html.erb @@ -49,12 +49,12 @@
- <%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-primary px-3 py-2" %> + <%= link_to t(".cancel"), transactions_path, class: "btn btn--ghost" %> <%= tag.button t(".save"), type: "button", data: { "bulk-select-scope-param": "bulk_update", action: "bulk-select#submitBulkRequest" }, - class: "px-3 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg" %> + class: "btn btn--primary" %>
<% end %> diff --git a/app/views/account/transactions/show.html.erb b/app/views/account/transactions/show.html.erb index 17ff31cf..e101e8cf 100644 --- a/app/views/account/transactions/show.html.erb +++ b/app/views/account/transactions/show.html.erb @@ -81,7 +81,7 @@ label: t(".tags_label"), container_class: "h-40" }, - { "data-auto-submit-form-target": "auto", class: "overflow-y-auto border-none" } %> + { "data-auto-submit-form-target": "auto" } %> <% end %> <% end %> diff --git a/app/views/budgets/_picker.html.erb b/app/views/budgets/_picker.html.erb index 4aefbf62..8fb4bd54 100644 --- a/app/views/budgets/_picker.html.erb +++ b/app/views/budgets/_picker.html.erb @@ -38,7 +38,7 @@ <% param_key = Budget.date_to_param(date) %> <% if Budget.budget_date_valid?(date, family: family) %> - <%= link_to month_name, budget_path(param_key), data: { turbo_frame: "_top" }, class: "block px-3 py-2 text-sm text-primary hover:bg-gray-100 rounded-md" %> + <%= link_to month_name, budget_path(param_key), data: { turbo_frame: "_top" }, class: "btn btn--ghost" %> <% else %> <%= month_name %> <% end %> diff --git a/app/views/mfa/new.html.erb b/app/views/mfa/new.html.erb index 68bbcf54..fdf753c0 100644 --- a/app/views/mfa/new.html.erb +++ b/app/views/mfa/new.html.erb @@ -57,7 +57,7 @@ placeholder: t(".code_placeholder") %>
- <%= f.submit t(".verify_button"), class: "bg-gray-900 hover:bg-gray-700 cursor-pointer text-white rounded-lg px-3 py-2" %> + <%= f.submit t(".verify_button"), class: "btn btn--primary" %>
<% end %> diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb index 168f1472..29a2f239 100644 --- a/app/views/settings/profiles/show.html.erb +++ b/app/views/settings/profiles/show.html.erb @@ -16,7 +16,7 @@ <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name") %>
- <%= form.submit t(".save"), class: "bg-gray-900 hover:bg-gray-700 cursor-pointer text-white rounded-lg px-3 py-2" %> + <%= form.submit t(".save"), class: "btn btn--primary" %>
<% end %> @@ -136,7 +136,7 @@ <%= button_to t(".reset_account"), reset_user_path(@user), method: :delete, - class: "bg-orange-500 text-white text-sm font-medium rounded-lg px-4 py-2", + class: "btn btn--destructive", data: { turbo_confirm: { title: t(".confirm_reset.title"), body: t(".confirm_reset.body"), @@ -153,7 +153,7 @@ <%= button_to t(".delete_account"), user_path(@user), method: :delete, - class: "bg-red-500 text-white text-sm font-medium rounded-lg px-3 py-2", + class: "btn btn--destructive", data: { turbo_confirm: { title: t(".confirm_delete.title"), body: t(".confirm_delete.body"), diff --git a/app/views/transactions/_header.html.erb b/app/views/transactions/_header.html.erb index 1a53bf80..f2487458 100644 --- a/app/views/transactions/_header.html.erb +++ b/app/views/transactions/_header.html.erb @@ -16,7 +16,7 @@

<%= t(".import") %>

<% end %> - <%= link_to new_account_transaction_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2", data: { turbo_frame: :modal } do %> + <%= link_to new_account_transaction_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %> <%= lucide_icon("plus", class: "w-5 h-5") %>

New transaction

<% end %>