Improve icon to remove investment from ballot

Note we're absolutely positioning the link instead of the icon; that way
keyboard users will be able to focus on the icon. Until now, users would
focus on an empty link.

For the same reason, we couldn't use `click_link` with Capybara, since
it would fail to click an empty link. Now we can.

Co-authored-by: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -14,22 +14,15 @@
     font-style: italic;
   }
 
-  .remove-investment-project {
+  .remove-budget-investment {
-    display: block;
+    @include has-fa-icon(times, solid);
-    height: 0;
+    font-size: rem-calc(20);
+    position: absolute;
+    right: rem-calc(6);
+    top: rem-calc(6);
 
-    .icon-x {
+    &::before {
-      color: #9f9f9f;
+      margin-right: 0;
-      font-size: rem-calc(24);
-      line-height: $line-height / 2;
-      position: absolute;
-      right: 6px;
-      text-decoration: none;
-      top: 6px;
-
-      @include breakpoint(medium) {
-        font-size: $base-font-size;
-      }
     }
   }
 
@@ -43,9 +36,5 @@
       outline: 0;
       text-decoration: none;
     }
-
-    .remove-investment-project .icon-x {
-      color: #fff;
-    }
   }
 }

app/components/budgets/ballot/investment_component.html.erb

@@ -5,11 +5,10 @@
   <% if budget.balloting? %>
     <%= link_to delete_path,
                 title: t("budgets.ballots.show.remove"),
-                class: "remove-investment-project",
+                class: "remove-budget-investment",
                 method: :delete,
                 remote: true do %>
       <span class="show-for-sr"><%= t("budgets.ballots.show.remove") %></span>
-      <span class="icon-x"></span>
     <% end %>
   <% end %>
 </li>

spec/system/budgets/ballots_spec.rb

@@ -380,7 +380,7 @@ describe "Ballots" do
     expect(page).to have_content("You have voted one investment")
 
     within("#budget_investment_#{investment.id}") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
     expect(page).to have_current_path(budget_ballot_path(budget))
@@ -407,7 +407,7 @@ describe "Ballots" do
     end
 
     within("#sidebar #budget_investment_#{investment1.id}_sidebar") do
-      find(".icon-x").click
+      click_link "Remove vote"
     end
 
     expect(page).to have_css("#amount-spent", text: "€20,000")
@@ -437,7 +437,7 @@ describe "Ballots" do
       expect(page).to have_content("You have voted one investment")
 
       within(".ballot-list li", text: "Sully monument") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).to have_content("You have voted 0 investments")
@@ -627,7 +627,7 @@ describe "Ballots" do
       end
 
       within("#budget_investment_#{bi1.id}_sidebar") do
-        find(".icon-x").click
+        click_link "Remove vote"
       end
 
       expect(page).not_to have_css "#budget_investment_#{bi1.id}_sidebar"