Move helpers to be prefixed with `gt-` (#22879)

As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

I've also added in the `gt-hidden` style that matches the tailwind one
and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton <art27@cantab.net>

---------

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 3 insertions, 3 deletions

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 405b92d7e1..6c056c6d14 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -29,7 +29,7 @@ async function receiveUpdateCount(event) {
     const data = JSON.parse(event.data);
 
     for (const count of document.querySelectorAll('.notification_count')) {
-      count.classList.toggle('hidden', data.Count === 0);
+      count.classList.toggle('gt-hidden', data.Count === 0);
       count.textContent = `${data.Count}`;
     }
     await updateNotificationTable();
@@ -165,9 +165,9 @@ async function updateNotificationCount() {
 
   const notificationCount = $('.notification_count');
   if (data.new === 0) {
-    notificationCount.addClass('hidden');
+    notificationCount.addClass('gt-hidden');
   } else {
-    notificationCount.removeClass('hidden');
+    notificationCount.removeClass('gt-hidden');
   }
 
   notificationCount.text(`${data.new}`);