From 3938f4ff95bd7a4b3f703a7b0cf6d7262f1e0caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 11 Aug 2022 20:26:36 +0200
Subject: [PATCH] Render account verified icon using CSS

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.
---
 app/assets/stylesheets/account/verify-account.scss       | 7 +++----
 app/components/account/verify_account_component.html.erb | 1 -
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/account/verify-account.scss b/app/assets/stylesheets/account/verify-account.scss
index 990e7381d..79b56e6ef 100644
--- a/app/assets/stylesheets/account/verify-account.scss
+++ b/app/assets/stylesheets/account/verify-account.scss
@@ -2,14 +2,13 @@
   padding-right: $line-height / 2;
 
   .already-verified {
+    @include has-fa-icon(check, solid);
     color: $check;
     line-height: $line-height * 2;
 
-    .icon-check {
+    &::before {
       color: $text-medium;
-      font-size: rem-calc(24);
-      line-height: rem-calc(45);
-      vertical-align: middle;
+      font-size: 1.4em;
     }
   }
 }
diff --git a/app/components/account/verify_account_component.html.erb b/app/components/account/verify_account_component.html.erb
index bcd6c1880..af9538c35 100644
--- a/app/components/account/verify_account_component.html.erb
+++ b/app/components/account/verify_account_component.html.erb
@@ -1,7 +1,6 @@
 <div class="verify-account">
   <% if account.level_three_verified? %>
     <p class="already-verified">
-      <span class="icon-check"></span>
       <%= t("account.show.verified_account") %>
     </p>
   <% else %>