From 6610542d5ffdbb17cbebd154d61a9e490b61a121 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 19 Sep 2023 23:51:20 +0100
Subject: [PATCH] refactor: use footer instead of a div with an id

---
 frontend/src/styles/footer.scss          | 4 ++--
 frontend/src/styles/z_media-queries.scss | 6 +++---
 frontend/src/ts/commandline/index.ts     | 2 +-
 frontend/src/ts/config.ts                | 4 ++--
 frontend/src/ts/popups/version-popup.ts  | 4 ++--
 frontend/src/ts/ready.ts                 | 8 ++++----
 frontend/src/ts/test/focus.ts            | 4 ++--
 frontend/src/ts/test/test-ui.ts          | 4 ++--
 frontend/src/ts/ui.ts                    | 6 +++---
 frontend/static/funbox/crt.css           | 2 +-
 frontend/static/html/footer.html         | 4 ++--
 frontend/static/themes/chaos_theory.css  | 4 ++--
 frontend/static/themes/purpurite.css     | 4 ++--
 13 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/src/styles/footer.scss b/frontend/src/styles/footer.scss
index eadb7eb55..40b525637 100644
--- a/frontend/src/styles/footer.scss
+++ b/frontend/src/styles/footer.scss
@@ -1,4 +1,4 @@
-#bottom {
+footer {
   position: relative;
   text-align: center;
   line-height: 1rem;
@@ -101,7 +101,7 @@
   }
 }
 
-#bottom.focus {
+footer.focus {
   .keyTips {
     opacity: 0 !important;
   }
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index b70dc1631..42a283e58 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -154,7 +154,7 @@
   #quoteRatePopup {
     width: 90vw !important;
   }
-  #bottom {
+  footer {
     .leftright {
       .left {
         gap: 0.25rem 1rem;
@@ -899,7 +899,7 @@
       font-size: 1rem;
     }
   }
-  #bottom {
+  footer {
     .leftright {
       .left {
         gap: 0.25rem 1rem;
@@ -984,7 +984,7 @@
     font-size: 0.75rem;
   }
 
-  #bottom {
+  footer {
     font-size: 0.65rem;
     .leftright {
       grid-template-columns: 1fr 1fr;
diff --git a/frontend/src/ts/commandline/index.ts b/frontend/src/ts/commandline/index.ts
index bc266e9cd..cbf18fd75 100644
--- a/frontend/src/ts/commandline/index.ts
+++ b/frontend/src/ts/commandline/index.ts
@@ -787,7 +787,7 @@ $(".pageTest").on("click", "#testModesNotice .textButton", (event) => {
   }
 });
 
-$("#bottom").on("click", ".leftright .right .current-theme", (e) => {
+$("footer").on("click", ".leftright .right .current-theme", (e) => {
   if (e.shiftKey) {
     if (!Config.customTheme) {
       if (Auth?.currentUser) {
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index f12d04974..dcceebd2c 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -1038,9 +1038,9 @@ export function setKeyTips(keyTips: boolean, nosave?: boolean): boolean {
 
   config.showKeyTips = keyTips;
   if (config.showKeyTips) {
-    $("#bottom .keyTips").removeClass("hidden");
+    $("footer .keyTips").removeClass("hidden");
   } else {
-    $("#bottom .keyTips").addClass("hidden");
+    $("footer .keyTips").addClass("hidden");
   }
   saveToLocalStorage("showKeyTips", nosave);
   ConfigEvent.dispatch("showKeyTips", config.showKeyTips);
diff --git a/frontend/src/ts/popups/version-popup.ts b/frontend/src/ts/popups/version-popup.ts
index ad449cfa9..702fb6fdb 100644
--- a/frontend/src/ts/popups/version-popup.ts
+++ b/frontend/src/ts/popups/version-popup.ts
@@ -61,11 +61,11 @@ function hide(): void {
     });
 }
 
-$("#bottom").on("click", "#newVersionIndicator", () => {
+$("footer").on("click", "#newVersionIndicator", () => {
   $("#newVersionIndicator").addClass("hidden");
 });
 
-$("#bottom").on("click", ".version", (e) => {
+$("footer").on("click", ".version", (e) => {
   if (e.shiftKey) return;
   show();
 });
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 867aa4727..e0a572110 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -15,15 +15,15 @@ import Konami from "konami";
 
 if (Misc.isLocalhost()) {
   $("head title").text("localhost");
-  $("#bottom .version .text").text("localhost");
-  $("#bottom #versionGroup").removeClass("hidden");
+  $("footer .version .text").text("localhost");
+  $("footer #versionGroup").removeClass("hidden");
   $("body").prepend(
     `<a class='button configureAPI' href='http://localhost:5005/configure/' target='_blank' aria-label="Configure API" data-balloon-pos="right"><i class="fas fa-fw fa-server"></i></a>`
   );
 } else {
   Misc.getLatestReleaseFromGitHub().then((v) => {
-    $("#bottom .version .text").text(v);
-    $("#bottom #versionGroup").removeClass("hidden");
+    $("footer .version .text").text(v);
+    $("footer #versionGroup").removeClass("hidden");
     NewVersionNotification.show(v);
   });
 }
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index 91363bc99..b13883ea0 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -12,7 +12,7 @@ export function set(foc: boolean, withCursor = false): void {
     state = true;
     Caret.stopAnimation();
     $("header").addClass("focus");
-    $("#bottom").addClass("focus");
+    $("footer").addClass("focus");
     if (!withCursor) $("body").css("cursor", "none");
     $("#middle").addClass("focus");
     $("#testConfig").addClass("focus");
@@ -31,7 +31,7 @@ export function set(foc: boolean, withCursor = false): void {
     state = false;
     Caret.startAnimation();
     $("header").removeClass("focus");
-    $("#bottom").removeClass("focus");
+    $("footer").removeClass("focus");
     $("body").css("cursor", "default");
     $("#middle").removeClass("focus");
     $("#testConfig").removeClass("focus");
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index b712d64be..7108b90dd 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -411,7 +411,7 @@ export async function screenshot(): Promise<void> {
     $(".pageTest .buttons").removeClass("hidden");
     $("noscript").removeClass("hidden");
     $("#nocss").removeClass("hidden");
-    $("header, #bottom").removeClass("invisible");
+    $("header, footer").removeClass("invisible");
     $("#result").removeClass("noBalloons");
     if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
     if (revealReplay) $("#resultReplay").removeClass("hidden");
@@ -450,7 +450,7 @@ export async function screenshot(): Promise<void> {
   $("#ad-result-small-wrapper").addClass("hidden");
   $("#testConfig").addClass("hidden");
   $(".page.pageTest").prepend("<div class='screenshotSpacer'></div>");
-  $("header, #bottom").addClass("invisible");
+  $("header, footer").addClass("invisible");
   $("#result").addClass("noBalloons");
   if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");
 
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 7391ea1c9..9d97f2c27 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -25,15 +25,15 @@ function updateKeytips(): void {
   }
 
   if (Config.quickRestart === "esc") {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>esc</key> - restart test<br>
     <key>tab</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   } else if (Config.quickRestart === "tab") {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>tab</key> - restart test<br>
       <key>esc</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   } else {
-    $("#bottom .keyTips").html(`
+    $("footer .keyTips").html(`
     <key>tab</key> + <key>enter</key> - restart test<br>
     <key>esc</key> or <key>${modifierKey}</key>+<key>shift</key>+<key>p</key> - command line`);
   }
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index 180f99ecb..30003bbf2 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -44,7 +44,7 @@ body.crtmode #scanline {
 }
 body.crtmode header,
 body.crtmode #middle,
-body.crtmode #bottom,
+body.crtmode footer,
 body.crtmode #result,
 body.crtmode #popups,
 body.crtmode #notificationCenter,
diff --git a/frontend/static/html/footer.html b/frontend/static/html/footer.html
index e13c93693..3752a230c 100644
--- a/frontend/static/html/footer.html
+++ b/frontend/static/html/footer.html
@@ -1,4 +1,4 @@
-<div id="bottom">
+<footer>
   <div id="commandLineMobileButton">
     <i class="fas fa-terminal"></i>
   </div>
@@ -90,4 +90,4 @@
       </div> -->
     </div>
   </div>
-</div>
+</footer>
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index f64acec6e..6d3f11703 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -33,7 +33,7 @@ header .logo .icon {
   direction: rtl;
 }
 
-#bottom .leftright .right .current-theme .text {
+footer .leftright .right .current-theme .text {
   /* font-family: "Comic Sans MS", "Comic Sans", cursive; */
 }
 
@@ -94,7 +94,7 @@ header.focus .logo:after {
   direction: ltr;
 }
 
-#bottom .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
+footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
   -webkit-transform: rotateY(180deg);
   transition: 0.5s;
 }
diff --git a/frontend/static/themes/purpurite.css b/frontend/static/themes/purpurite.css
index 0fbbb36f9..cd788ab6a 100644
--- a/frontend/static/themes/purpurite.css
+++ b/frontend/static/themes/purpurite.css
@@ -15,10 +15,10 @@
   color: #99ffdd;
 }
 
-#bottom .leftright div {
+footer .leftright div {
   color: #99ffdd;
 }
 
-#bottom .leftright i {
+footer .leftright i {
   color: #99ffdd;
 }