consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render account verified icon using CSS

Browse Source 
As mentioned in commit 925f04e3f, icon classes make screen readers
announce strange symbols and aren't properly displayed for people who
have changed their preferred font family.
This commit is contained in:
Javi Martín
2022-08-11 20:26:36 +02:00
parent d59d02ba83
commit 3938f4ff95
2 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/stylesheets/account/verify-account.scss
View File

@@ -2,14 +2,13 @@
padding-right: $line-height / 2; padding-right: $line-height / 2;
.already-verified { .already-verified {
@include has-fa-icon(check, solid);
color: $check; color: $check;
line-height: $line-height * 2; line-height: $line-height * 2;
.icon-check { &::before {
color: $text-medium; color: $text-medium;
font-size: rem-calc(24); font-size: 1.4em;
line-height: rem-calc(45);
vertical-align: middle;
} }
} }
} }

1
app/components/account/verify_account_component.html.erb
View File

@@ -1,7 +1,6 @@
<div class="verify-account"> <div class="verify-account">
<% if account.level_three_verified? %> <% if account.level_three_verified? %>
<p class="already-verified"> <p class="already-verified">
<span class="icon-check"></span>
<%= t("account.show.verified_account") %> <%= t("account.show.verified_account") %>
</p> </p>
<% else %> <% else %>