diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss
index 2e476d6b0..fbd0a5043 100644
--- a/app/assets/stylesheets/account/permissions_list.scss
+++ b/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;
+ }
}
}
}
diff --git a/app/components/account/permissions_list_component.html.erb b/app/components/account/permissions_list_component.html.erb
index 2d7c63687..055c9a922 100644
--- a/app/components/account/permissions_list_component.html.erb
+++ b/app/components/account/permissions_list_component.html.erb
@@ -1,12 +1,6 @@
<% permissions.each do |text, allowed| %>
- -
- <% if allowed %>
-
- <% else %>
-
- <% end %>
-
+
-
<%= text %>
<% end %>
diff --git a/app/components/account/permissions_list_component.rb b/app/components/account/permissions_list_component.rb
index 6120ea3f7..619ef8b5f 100644
--- a/app/components/account/permissions_list_component.rb
+++ b/app/components/account/permissions_list_component.rb
@@ -15,4 +15,12 @@ class Account::PermissionsListComponent < ApplicationComponent
t("verification.user_permission_votes") => user.level_three_verified?
}
end
+
+ def allowed_class(allowed)
+ if allowed
+ "permission-allowed"
+ else
+ "permission-denied"
+ end
+ end
end
diff --git a/spec/components/account/permissions_list_component_spec.rb b/spec/components/account/permissions_list_component_spec.rb
new file mode 100644
index 000000000..864a21bd5
--- /dev/null
+++ b/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