Render icons using CSS in user permissions

As mentioned in commit 925f04e, icon classes make screen readers
announce strange symbols and aren't properly displayed for people who
have changed their preferred font family.

app/assets/stylesheets/account/permissions_list.scss

@@ -7,17 +7,25 @@
  font-size: $small-font-size;
  margin-bottom: $line-height / 2;
 
- span {
- color: $text-medium;
- font-size: rem-calc(12);
+ &::before {
+ font-size: 0.9em;
+ margin-#{$global-right}: 0.2em;
  }
 
- .icon-check {
- color: $check;
+ &.permission-allowed {
+ @include has-fa-icon(check, solid);
+
+ &::before {
+ color: $check;
+ }
  }
 
- .icon-x {
- color: $delete;
+ &.permission-denied {
+ @include has-fa-icon(times, solid);
+
+ &::before {
+ color: $delete;
+ }
  }
  }
 }

app/components/account/permissions_list_component.html.erb

@@ -1,12 +1,6 @@
 <ul class="permissions-list">
  <% permissions.each do |text, allowed| %>
- <li>
- <% if allowed %>
- <span class="icon-check"></span>
- <% else %>
- <span class="icon-x"></span>
- <% end %>
-
+ <li class="<%= allowed_class(allowed) %>">
  <%= text %>
  </li>
  <% end %>

app/components/account/permissions_list_component.rb

@@ -15,4 +15,12 @@ def permissions
  t("verification.user_permission_votes") => user.level_three_verified?
  }
  end
+
+ def allowed_class(allowed)
+ if allowed
+ "permission-allowed"
+ else
+ "permission-denied"
+ end
+ end
 end

spec/components/account/permissions_list_component_spec.rb

@@ -0,0 +1,10 @@
+require "rails_helper"
+
+describe Account::PermissionsListComponent do
+ it "adds different classes for actions that can and cannot be performed" do
+ render_inline Account::PermissionsListComponent.new(User.new)
+
+ expect(page).to have_css "li.permission-allowed", text: "Participate in debates"
+ expect(page).to have_css "li.permission-denied", text: "Support proposals"
+ end
+end