From 987ac16bc88287ae5c3ce302840853d2024c74c2 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 16 Mar 2024 17:28:53 +0100
Subject: [PATCH] style: update out of focus warning

---
 frontend/src/html/pages/test.html |  2 +-
 frontend/src/styles/test.scss     |  5 +++--
 frontend/src/ts/test/test-ui.ts   | 10 ++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index f32d96c55..a4f9048ec 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -111,7 +111,7 @@
       <div class="burst hidden">1</div>
     </div>
     <div class="outOfFocusWarning hidden">
-      <i class="fas fa-mouse-pointer"></i>
+      <i class="fas fa-fw fa-mouse-pointer"></i>
       Click here or press any key to focus
     </div>
     <input
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 7f2538678..803c05fc9 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1091,9 +1091,10 @@
   .outOfFocusWarning {
     text-align: center;
     height: 0;
-    line-height: 150px;
+    font-size: 1rem;
     z-index: 999;
-    position: relative;
+    position: absolute;
+    width: 100%;
     -webkit-user-select: none;
     user-select: none;
     pointer-events: none;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 3607e9a77..6bd5633cf 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -319,7 +319,10 @@ function updateWordsHeight(force = false): void {
     if (nh > wordsHeight) {
       nh = wordsHeight;
     }
-    $(".outOfFocusWarning").css("line-height", nh + "px");
+    $(".outOfFocusWarning").css(
+      "margin-top",
+      wordHeight + Misc.convertRemToPixels(1) / 2 + "px"
+    );
   } else {
     let finalWordsHeight: number, finalWrapperHeight: number;
 
@@ -370,7 +373,10 @@ function updateWordsHeight(force = false): void {
     $("#wordsWrapper")
       .css("height", finalWrapperHeight + "px")
       .css("overflow", "hidden");
-    $(".outOfFocusWarning").css("line-height", finalWrapperHeight + "px");
+    $(".outOfFocusWarning").css(
+      "margin-top",
+      finalWrapperHeight / 2 - Misc.convertRemToPixels(1) / 2 + "px"
+    );
   }
 
   if (Config.mode === "zen") {