added matchmaking status

gulpfile.js

@@ -96,6 +96,7 @@ const refactoredSrc = [
   "./src/js/result-filters.js",
   "./src/js/notification-center.js",
   "./src/js/input-suggestions.js",
+  "./src/js/tribe-mm-status.js",
 ];
 
 //legacy files

src/js/tribe-mm-status.js

@@ -0,0 +1,17 @@
+let el = $("#tribeMatchmakingStatus");
+
+export function show() {
+  el.removeClass("hidden");
+}
+
+export function hide() {
+  el.addClass("hidden");
+}
+
+export function updateText(text) {
+  el.find(".text").text(text);
+}
+
+export function updateIcon(html) {
+  el.find(".icon").html(html);
+}

src/js/tribe.js

@@ -1,4 +1,5 @@
 import InputSuggestions from "./input-suggestions";
+import * as MatchmakingStatus from "./tribe-mm-status";
 
 let MP = {
   state: -1,

src/sass/style.scss

@@ -190,6 +190,23 @@ a:hover {
   z-index: 9999;
 }
 
+#tribeMatchmakingStatus {
+  background: var(--bg-color);
+  position: fixed;
+  transform: translate(-50%);
+  left: 50%;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0 0 var(--roundness) var(--roundness);
+  color: var(--sub-color);
+  font-size: 0.75rem;
+  .icon {
+    color: var(--main-color);
+    opacity: 0.5;
+  }
+}
+
 @keyframes loader {
   0% {
     width: 0;

static/index.html

@@ -52,6 +52,10 @@
     <div id="notificationCenter">
       <div class="history"></div>
     </div>
+    <div id="tribeMatchmakingStatus" class="hidden">
+      <div class="icon"><i class="fas fa-spin fa-circle-notch"></i></div>
+      <div class="text">Tribe matchmaking status...</div>
+    </div>
     <div
       class="nameChangeMessage"
       style="
@@ -78,7 +82,6 @@
       . We've got some awesome designs for you.
       <i class="fas closeButton fa-times"></i>
     </div>
-    <div class="notification">Signed in</div>
 
     <div id="simplePopupWrapper" class="hidden">
       <div id="simplePopup" popupId=""></div>