Add transitions to buttons and other common design system elements (#1924)

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 */

app/views/account/transactions/bulk_edit.html.erb

@@ -49,12 +49,12 @@
         </div>
 
         <div class="flex justify-end items-center gap-2">
-          <%= 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" %>
         </div>
       </div>
     <% end %>

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

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 %>
           <span class="px-3 py-2 text-subdued rounded-md"><%= month_name %></span>
         <% end %>

app/views/mfa/new.html.erb

@@ -57,7 +57,7 @@
             placeholder: t(".code_placeholder") %>
 
           <div class="flex justify-end mt-4">
-            <%= 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" %>
           </div>
         </div>
       <% end %>

app/views/settings/profiles/show.html.erb

@@ -16,7 +16,7 @@
         <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name") %>
       </div>
       <div class="flex justify-end mt-4">
-        <%= 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" %>
       </div>
     </div>
   <% end %>
@@ -136,7 +136,7 @@
         </div>
         <%=
               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 @@
       </div>
       <%=
             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"),

app/views/transactions/_header.html.erb

@@ -16,7 +16,7 @@
         <p class="text-sm font-medium text-primary"><%= t(".import") %></p>
       <% 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") %>
         <p class="text-sm font-medium">New transaction</p>
       <% end %>