Use a button to delete an investment

Note that, since the button now generates a `form` tag, we need to
adjust the styles of this section.

As mentioned in commit 5311daadf, there are several reasons to use
buttons in these situations. And, as mentioned in the previous commits,
using buttons instead of links for actions requiring confirmation will
help us test for accessibility issues.

Note we're simplifying the `table .button` margin rules because the
`.button` class already defines `0` for all its margins except the
bottom margin. Otherwise, the margins defined by the `flex-with-gap`
mixin would be overwritten by the margins defined in the `table .button`
class.

app/assets/stylesheets/application.scss

@@ -56,6 +56,7 @@
 @import "sdg_management/**/*";
 @import "shared/**/*";
 @import "subscriptions";
+@import "users/**/*";
 @import "widgets/**/*";
 
 @import "custom";

app/assets/stylesheets/layout.scss

@@ -1245,7 +1245,7 @@ table {
   }
 
   .button {
-    margin: 0;
+    margin-bottom: 0;
   }
 }
 

app/assets/stylesheets/users/budget_investment_table_actions.scss

@@ -0,0 +1,3 @@
+.user-budget-investment-table-actions {
+  @include flex-with-gap($line-height * 0.25);
+}

app/components/users/budget_investment_table_actions_component.html.erb

@@ -1,9 +1,11 @@
-<% if can? :update, investment %>
-  <%= link_to t("shared.edit"), edit_budget_investment_path(investment.budget, investment),
-              class: "button hollow" %>
-<% end %>
-<% if can? :destroy, investment %>
-  <%= link_to t("shared.delete"), budget_investment_path(investment.budget, investment),
-              method: :delete, class: "button hollow alert",
-              data: { confirm: t("users.show.delete_alert") } %>
-<% end %>
+<div class="user-budget-investment-table-actions">
+  <% if can? :update, investment %>
+    <%= link_to t("shared.edit"), edit_budget_investment_path(investment.budget, investment),
+                class: "button hollow" %>
+  <% end %>
+  <% if can? :destroy, investment %>
+    <%= button_to t("shared.delete"), budget_investment_path(investment.budget, investment),
+                  method: :delete, class: "button hollow alert",
+                  data: { confirm: t("users.show.delete_alert") } %>
+  <% end %>
+</div>

spec/system/budgets/investments_spec.rb

@@ -1170,7 +1170,7 @@ describe "Budget Investments" do
       within("#budget_investment_#{investment1.id}") do
         expect(page).to have_content(investment1.title)
 
-        accept_confirm { click_link("Delete") }
+        accept_confirm { click_button "Delete" }
       end
 
       expect(page).to have_content "Investment project deleted successfully"

spec/system/users_spec.rb

@@ -131,12 +131,12 @@ describe "Users" do
       expect(page).to have_link budget_investment.title
 
       within("#budget_investment_#{budget_investment.id}") do
-        dismiss_confirm { click_link "Delete" }
+        dismiss_confirm { click_button "Delete" }
       end
       expect(page).to have_link budget_investment.title
 
       within("#budget_investment_#{budget_investment.id}") do
-        accept_confirm { click_link "Delete" }
+        accept_confirm { click_button "Delete" }
       end
       expect(page).not_to have_link budget_investment.title
     end