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