From 9561518d97f719143ae2097ff2edb38dcbc9612a Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Wed, 3 Mar 2021 22:47:22 +0000
Subject: [PATCH] added matchmaking status

---
 gulpfile.js               |  1 +
 src/js/tribe-mm-status.js | 17 +++++++++++++++++
 src/js/tribe.js           |  1 +
 src/sass/style.scss       | 17 +++++++++++++++++
 static/index.html         |  5 ++++-
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/js/tribe-mm-status.js

diff --git a/gulpfile.js b/gulpfile.js
index 5278ffdbb..e3a9b5163 100644
--- a/gulpfile.js
+++ b/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
diff --git a/src/js/tribe-mm-status.js b/src/js/tribe-mm-status.js
new file mode 100644
index 000000000..3c33f27f5
--- /dev/null
+++ b/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);
+}
diff --git a/src/js/tribe.js b/src/js/tribe.js
index 170ed8f61..7899ad5de 100644
--- a/src/js/tribe.js
+++ b/src/js/tribe.js
@@ -1,4 +1,5 @@
 import InputSuggestions from "./input-suggestions";
+import * as MatchmakingStatus from "./tribe-mm-status";
 
 let MP = {
   state: -1,
diff --git a/src/sass/style.scss b/src/sass/style.scss
index cc465fe50..16ca59337 100644
--- a/src/sass/style.scss
+++ b/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;
diff --git a/static/index.html b/static/index.html
index 14aec125d..7174406fa 100644
--- a/static/index.html
+++ b/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>