Most Unicode Icons back to Font Awesome 4.7 for better accessibility. Less always visible buttons, More at ☰ Men.

Thanks to xet7 !

client/components/main/dueCards.jade

@@ -1,23 +1,23 @@
 template(name="dueCardsHeaderBar")
   if currentUser
     h1
-      | 📅
+      i.fa.fa-calendar
       | {{_ 'dueCards-title'}}
 
     .board-header-btns.left
       a.board-header-btn.js-due-cards-view-change(title="{{_ 'dueCardsViewChange-title'}}")
-        | ▼
+        i.fa.fa-caret-down
         if $eq dueCardsView 'me'
-          | 👤
+          i.fa.fa-user
           | {{_ 'dueCardsViewChange-choice-me'}}
         if $eq dueCardsView 'all'
-          | 👥
+          i.fa.fa-users
           | {{_ 'dueCardsViewChange-choice-all'}}
 
 template(name="dueCardsModalTitle")
   if currentUser
     h2
-      | ⌨️
+      i.fa.fa-keyboard-o
       | {{_ 'dueCards-title'}}
 
 template(name="dueCards")
@@ -49,18 +49,17 @@ template(name="dueCardsViewChangePopup")
       li
         with "dueCardsViewChange-choice-me"
           a.js-due-cards-view-me
-            | 👤
+            i.fa.fa-user
             | {{_ 'dueCardsViewChange-choice-me'}}
             if $eq Utils.dueCardsView "me"
-              | ✅
-      hr
+              i.fa.fa-check      hr
       li
         with "dueCardsViewChange-choice-all"
           a.js-due-cards-view-all
-            | 👥
+            i.fa.fa-users
             | {{_ 'dueCardsViewChange-choice-all'}}
             span.sub-name
               +viewer
                 | {{_ 'dueCardsViewChange-choice-all-description' }}
             if $eq Utils.dueCardsView "all"
-              | ✅
+              i.fa.fa-check

client/components/main/editor.jade

@@ -1,8 +1,6 @@
 template(name="editor")
-  a(title="{{_ 'convert-to-markdown'}}")
-    | 📝
-  a(title="{{_ 'copy-text-to-clipboard'}}")
-    | 📋
+  a.fa.fa-brands.fa-markdown(title="{{_ 'convert-to-markdown'}}")
+  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.editor(
     dir="auto"

client/components/main/globalSearch.jade

@@ -1,13 +1,13 @@
 template(name="globalSearchHeaderBar")
   if currentUser
     h1
-      | 🔍
+      i.fa.fa-search
       | {{_ 'globalSearch-title'}}
 
 template(name="globalSearchModalTitle")
   if currentUser
     h2
-      | ⌨️
+      i.fa.fa-keyboard-o
       | {{_ 'globalSearch-title'}}
 
 template(name="resultsPaged")

client/components/main/header.jade

@@ -9,7 +9,7 @@ template(name="header")
       // Home icon - always at left side of logo
       span.home-icon.allBoards
         a(href="{{pathFor 'home'}}")
-          | 🏠
+          i.fa.fa-home
           | {{_ 'all-boards'}}
 
       // Logo - visible; on mobile constrained by CSS
@@ -32,11 +32,11 @@ template(name="header")
 
       // Drag handles toggle - between zoom and mobile mode toggle
       a.board-header-btn.js-toggle-desktop-drag-handles(title="{{_ 'show-desktop-drag-handles'}}")
-        | ↕️
+        i.fa.fa-arrows
         if isShowDesktopDragHandles
-          | ✅
+          i.fa.fa-check
         unless isShowDesktopDragHandles
-          | 🚫
+          i.fa.fa-ban
 
       if isMiniScreen
         ul.header-quick-access-list
@@ -64,8 +64,9 @@ template(name="header")
               a(href="{{pathFor 'board' id=_id slug=slug}}")
                 +viewer
                   = title
-          else
-            li.current.empty {{_ 'quick-access-description'}}
+          //else
+          //  li.current.empty
+          //    {{_ 'quick-access-description'}}
         #header-new-board-icon
       // Next line is used only for spacing at header,
       // there is no visible clickable icon.
@@ -77,8 +78,10 @@ template(name="header")
 
       .mobile-mode-toggle
         a.board-header-btn.js-mobile-mode-toggle(title="{{_ 'mobile-desktop-toggle'}}" class="{{#if mobileMode}}mobile-active{{else}}desktop-active{{/if}}")
-          i.mobile-icon(class="{{#if mobileMode}}active{{/if}}") 📱
-          i.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}") 🖥️
+          i.mobile-icon(class="{{#if mobileMode}}active{{/if}}")
+            i.fa.fa-mobile
+          i.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}")
+            i.fa.fa-desktop
 
       // Notifications
       +notifications
@@ -86,7 +89,7 @@ template(name="header")
       if currentSetting.customHelpLinkUrl
         #header-help
           a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
-            | ❓
+            i.fa.fa-question-circle
 
       +headerUserBar
 
@@ -105,17 +108,17 @@ template(name="header")
     if hasAnnouncement
       .announcement
         p
-          | 📢
+          i.fa.fa-bullhorn
           +viewer
             | #{announcement}
           a
             .js-close-announcement
-              | ❌
+              i.fa.fa-times-thin
 
 template(name="offlineWarning")
   .offline-warning
     p
-      | ⚠️
+      i.fa.fa-warning
       | {{_ 'app-is-offline'}}
 
       a.app-try-reconnect {{_ 'app-try-reconnect'}}

client/components/main/keyboardShortcuts.jade

@@ -6,7 +6,7 @@ template(name="shortcutsHeaderBar")
 
 template(name="shortcutsModalTitle")
   h2
-    | ⌨️
+    i.fa.fa-keyboard-o
     | {{_ 'keyboard-shortcuts'}}
 
 template(name="keyboardShortcuts")

client/components/main/layouts.jade

@@ -69,9 +69,15 @@ template(name="userFormsLayout")
           select.select-lang.js-userform-set-language#userform-set-language-select(aria-label="{{_ 'changeLanguagePopup-title'}}")
             each languages
               if isCurrentLanguage
-                option(value="{{tag}}" selected="selected") {{name}}
+                if rtl
+                  option(value="{{tag}}" selected="selected") {{name}} (RTL)
+                else
+                  option(value="{{tag}}" selected="selected") {{name}}
               else
-                option(value="{{tag}}") {{name}}
+                if rtl
+                  option(value="{{tag}}") {{name}} (RTL)
+                else
+                  option(value="{{tag}}") {{name}}
 
 template(name="defaultLayout")
   +header
@@ -86,13 +92,13 @@ template(name="defaultLayout")
       if (Modal.isWide)
         .modal-content-wide.modal-container
           a.modal-close-btn.js-close-modal
-            | ❌
+            i.fa.fa-times-thin
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
       else
         .modal-content.modal-container
           a.modal-close-btn.js-close-modal
-            | ❌
+            i.fa.fa-times-thin
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
 
@@ -103,8 +109,7 @@ template(name="message")
   .big-message.quiet(class=color)
     h1 {{_ label}}
     unless currentUser
-      with(pathFor route='atSignIn')
-        p {{{_ 'page-maybe-private' this}}}
+      p {{{_ 'page-maybe-private' '/sign-in'}}}
 
 template(name="loader")
   h1.loadingText {{_ 'loading'}}

client/components/main/layouts.js

@@ -85,6 +85,70 @@ Template.userFormsLayout.onRendered(() => {
       validator,
     );
     EscapeActions.executeAll();
+    
+    // Set up MutationObserver for OIDC button instead of deprecated DOMSubtreeModified
+    const oidcButton = document.getElementById('at-oidc');
+    if (oidcButton) {
+      const observer = new MutationObserver((mutations) => {
+        if (alreadyCheck <= 2) {
+          let currSetting = ReactiveCache.getCurrentSetting();
+          let oidcBtnElt = $('#at-oidc');
+          if (
+            currSetting &&
+            currSetting !== undefined &&
+            currSetting.oidcBtnText !== undefined &&
+            oidcBtnElt != null &&
+            oidcBtnElt != undefined
+          ) {
+            let htmlvalue = "<i class='fa fa-oidc'></i>" + currSetting.oidcBtnText;
+            if (alreadyCheck == 1) {
+              alreadyCheck++;
+              oidcBtnElt.html('');
+            } else {
+              alreadyCheck++;
+              oidcBtnElt.html(htmlvalue);
+            }
+          }
+        } else {
+          alreadyCheck = 1;
+        }
+      });
+      observer.observe(oidcButton, { childList: true, subtree: true });
+    }
+    
+    // Set up MutationObserver for .at-form instead of deprecated DOMSubtreeModified
+    const atForm = document.querySelector('.at-form');
+    if (atForm) {
+      const formObserver = new MutationObserver((mutations) => {
+        if (alreadyCheck <= 2 && !isCheckDone) {
+          if (document.getElementById('at-oidc') != null) {
+            let currSetting = ReactiveCache.getCurrentSetting();
+            let oidcBtnElt = $('#at-oidc');
+            if (
+              currSetting &&
+              currSetting !== undefined &&
+              currSetting.oidcBtnText !== undefined &&
+              oidcBtnElt != null &&
+              oidcBtnElt != undefined
+            ) {
+              let htmlvalue =
+                "<i class='fa fa-oidc'></i>" + currSetting.oidcBtnText;
+              if (alreadyCheck == 1) {
+                alreadyCheck++;
+                oidcBtnElt.html('');
+              } else {
+                alreadyCheck++;
+                isCheckDone = true;
+                oidcBtnElt.html(htmlvalue);
+              }
+            }
+          }
+        } else {
+          alreadyCheck = 1;
+        }
+      });
+      formObserver.observe(atForm, { childList: true, subtree: true });
+    }
 
     // Add autocomplete attribute to login input for WCAG compliance
     const loginInput = document.querySelector(
@@ -152,7 +216,7 @@ Template.userFormsLayout.helpers({
 
   languages() {
     return TAPi18n.getSupportedLanguages()
-      .map(({ tag, name }) => ({ tag: tag, name }))
+      .map(({ tag, name, rtl }) => ({ tag, name, rtl }))
       .sort((a, b) => {
         if (a.name === b.name) {
           return 0;
@@ -183,61 +247,6 @@ Template.userFormsLayout.events({
     }
     isCheckDone = false;
   },
-  'click #at-signUp'(event, templateInstance) {
-    isCheckDone = false;
-  },
-  'DOMSubtreeModified #at-oidc'(event) {
-    if (alreadyCheck <= 2) {
-      let currSetting = ReactiveCache.getCurrentSetting();
-      let oidcBtnElt = $('#at-oidc');
-      if (
-        currSetting &&
-        currSetting !== undefined &&
-        currSetting.oidcBtnText !== undefined &&
-        oidcBtnElt != null &&
-        oidcBtnElt != undefined
-      ) {
-        let htmlvalue = "<i class='fa fa-oidc'></i>" + currSetting.oidcBtnText;
-        if (alreadyCheck == 1) {
-          alreadyCheck++;
-          oidcBtnElt.html('');
-        } else {
-          alreadyCheck++;
-          oidcBtnElt.html(htmlvalue);
-        }
-      }
-    } else {
-      alreadyCheck = 1;
-    }
-  },
-  'DOMSubtreeModified .at-form'(event) {
-    if (alreadyCheck <= 2 && !isCheckDone) {
-      if (document.getElementById('at-oidc') != null) {
-        let currSetting = ReactiveCache.getCurrentSetting();
-        let oidcBtnElt = $('#at-oidc');
-        if (
-          currSetting &&
-          currSetting !== undefined &&
-          currSetting.oidcBtnText !== undefined &&
-          oidcBtnElt != null &&
-          oidcBtnElt != undefined
-        ) {
-          let htmlvalue =
-            "<i class='fa fa-oidc'></i>" + currSetting.oidcBtnText;
-          if (alreadyCheck == 1) {
-            alreadyCheck++;
-            oidcBtnElt.html('');
-          } else {
-            alreadyCheck++;
-            isCheckDone = true;
-            oidcBtnElt.html(htmlvalue);
-          }
-        }
-      }
-    } else {
-      alreadyCheck = 1;
-    }
-  },
 });
 
 Template.defaultLayout.events({

client/components/main/myCards.jade

@@ -3,23 +3,23 @@ template(name="myCardsHeaderBar")
     h1
       //a.back-btn(href="{{pathFor 'home'}}")
       //  i.fa.fa-chevron-left
-      | 📋
+      i.fa.fa-list
       | {{_ 'my-cards'}}
 
     .board-header-btns.left
       a.board-header-btn.js-my-cards-view-change(title="{{_ 'myCardsViewChange-title'}}")
-        | ▼
+        i.fa.fa-caret-down
         if $eq myCardsView 'boards'
-          | 📋
+          i.fa.fa-list
           | {{_ 'myCardsViewChange-choice-boards'}}
         if $eq myCardsView 'table'
-          | 📊
+          i.fa.fa-bar-chart
           | {{_ 'myCardsViewChange-choice-table'}}
 
 template(name="myCardsModalTitle")
   if currentUser
     h2
-      | ⌨️
+      i.fa.fa-keyboard-o
       | {{_ 'my-cards'}}
 
 template(name="myCards")
@@ -102,15 +102,15 @@ template(name="myCardsViewChangePopup")
       li
         with "myCardsViewChange-choice-boards"
           a.js-my-cards-view-boards
-            | 📋
+            i.fa.fa-list
             | {{_ 'myCardsViewChange-choice-boards'}}
             if $eq Utils.myCardsView "boards"
-              | ✅
+              i.fa.fa-check
       hr
       li
         with "myCardsViewChange-choice-table"
           a.js-my-cards-view-table
-            | 📊
+            i.fa.fa-bar-chart
             | {{_ 'myCardsViewChange-choice-table'}}
             if $eq Utils.myCardsView "table"
-              | ✅
+              i.fa.fa-check

client/components/main/popup.css

@@ -478,6 +478,7 @@
 /*  flex-wrap:wrap;*/
   gap:5px;
   align-items: center;
+  color: #000 !important;
 }
 .pop-over-list li > a > .member{
   align-self: flex-start;

client/components/main/popup.tpl.jade

@@ -6,10 +6,10 @@
   style="left:{{offset.left}}px; top:{{offset.top}}px;{{#if offset.maxHeight}} max-height:{{offset.maxHeight}}px;{{/if}}")
   .header
     a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
-      | ◀️
+      i.fa.fa-caret-left
     span.header-title= title
     a.close-btn.js-close-pop-over
-      | ❌
+      i.fa.fa-times-thin
   .content-wrapper
     //-
       We display the all stack of popup content next to each other and move