From 7791f15509e34ef0b4f82bb756fc2dae38fec43d Mon Sep 17 00:00:00 2001
From: Dillon Dumesnil <ddumesnil@edx.org>
Date: Wed, 17 Mar 2021 09:30:33 -0700
Subject: [PATCH] refactor: AA-692: Update location of is-hidden class when fa
 icon is used

We ran into a bug where the is-hidden class was being overridden by the
font awesome styling due to a late load of font awesome (causing the
fa class to take precedence). This changes to instead wrap the icon in
the span so there is no competing between the two classes on the same
element
---
 lms/templates/seq_module.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html
index 05123ab22f..29d79b1104 100644
--- a/lms/templates/seq_module.html
+++ b/lms/templates/seq_module.html
@@ -62,16 +62,20 @@
             id="tab_${idx}">
             <span class="icon fa seq_${item['type']}" aria-hidden="true"></span>
             % if 'complete' in item:
-              <span
-                class="fa fa-check-circle check-circle ${"is-hidden" if not item['complete'] else ""}"
-                style="color:green"
-                aria-hidden="true"
-              ></span>
+              <span class="check-circle ${"is-hidden" if not item['complete'] else ""}">
+                <span
+                  class="fa fa-check-circle"
+                  style="color:green"
+                  aria-hidden="true"
+                ></span>
+              </span>
               % if item['complete']:
                 <span class="sr">${_("Completed")}</span>
               %endif
             % endif
-            <span class="fa fa-fw fa-bookmark bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}" aria-hidden="true"></span>
+            <span class="bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}">
+              <span class="fa fa-fw fa-bookmark" aria-hidden="true"></span>
+            </span>
             <div class="sequence-tooltip sr"><span class="sr">${item['type']}&nbsp;</span>${item['page_title']}<span class="sr bookmark-icon-sr">&nbsp;${_("Bookmarked") if item['bookmarked'] else ""}</span></div>
           </button>
         </li>