chore: use signal instead of modifying the dom directly

Author: Miodec

frontend/src/ts/components/layout/footer/Footer.tsx

@@ -1,7 +1,8 @@
 import { JSXElement } from "solid-js";
 
-import { getFocus } from "../../../signals/core";
+import { getFocus, getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
+import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
 
 import { Keytips } from "./Keytips";
@@ -10,7 +11,11 @@ import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
-    <footer class="text-sub relative text-xs">
+    <footer
+      class={cn("text-sub relative text-xs", {
+        "opacity-0": getIsScreenshotting(),
+      })}
+    >
       <Keytips />
 
       <div

frontend/src/ts/test/test-screenshot.ts

@@ -10,7 +10,7 @@ import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
 import * as TestState from "./test-state";
-import { qs, qsa } from "../utils/dom";
+import { qs } from "../utils/dom";
 import { getTheme } from "../signals/theme";
 
 let revealReplay = false;
@@ -29,7 +29,7 @@ function revert(): void {
   qs(".pageTest .buttons")?.show();
   qs("noscript")?.show();
   qs("#nocss")?.show();
-  qsa("header, footer")?.removeClass("invisible");
+  qs("header")?.removeClass("invisible");
   qs("#result")?.removeClass("noBalloons");
   qs(".wordInputHighlight")?.show();
   qsa(".highlightContainer")?.show();
@@ -97,7 +97,7 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   // Ensure spacer is removed before adding a new one if function is called rapidly
   qs(".pageTest .screenshotSpacer")?.remove();
   qs(".page.pageTest")?.prependHtml("<div class='screenshotSpacer'></div>");
-  qsa("header, footer")?.addClass("invisible");
+  qs("header")?.addClass("invisible");
   qs("#result")?.addClass("noBalloons");
   qs(".wordInputHighlight")?.hide();
   qsa(".highlightContainer")?.hide();