fix: some screenshot issues (@byseif21) (#7416)

Co-authored-by: Miodec <jack@monkeytype.com>

Author: byseif21

frontend/src/styles/index.scss

@@ -15,8 +15,11 @@
   }
 }
 
+// the screenshotting library has some issues with css layers
+@import "fonts";
+
 @layer custom-styles {
-  @import "buttons", "fonts", "404", "ads", "account", "animations", "caret",
+  @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",
     "notifications", "popups", "profile", "scroll", "settings",
     "account-settings", "leaderboards", "test", "loading", "friends",

frontend/src/styles/vendor.scss

@@ -1,7 +1,7 @@
-@import "normalize.css" layer(normalize);
+@import "fontawesome-5"; // the screenshotting library has some issues with css layers
 
+@import "normalize.css" layer(normalize);
 @layer vendor {
-  @import "fontawesome-5";
   @import "slim-select/styles";
   @import "balloon-css/src/balloon";
 }

frontend/src/ts/components/layout/overlays/Overlays.tsx

@@ -1,6 +1,8 @@
 import { JSXElement } from "solid-js";
 
+import { getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
+import { cn } from "../../../utils/cn";
 import { ScrollToTop } from "../footer/ScrollToTop";
 
 import { Banners } from "./Banners";
@@ -15,7 +17,12 @@ export function Overlays(): JSXElement {
       <button
         type="button"
         id="commandLineMobileButton"
-        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
+        class={cn(
+          "bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12",
+          {
+            "opacity-0": getIsScreenshotting(),
+          },
+        )}
         onClick={() => {
           showModal("Commandline");
         }}

frontend/src/ts/signals/core.ts

@@ -28,3 +28,4 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
 
 export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
+export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);

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

@@ -5,7 +5,7 @@ import { isAuthenticated } from "../firebase";
 import { getActiveFunboxesWithFunction } from "./funbox/list";
 import * as DB from "../db";
 import { format } from "date-fns/format";
-import { getActivePage } from "../signals/core";
+import { getActivePage, setIsScreenshotting } from "../signals/core";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
@@ -17,13 +17,13 @@ let revealReplay = false;
 let revertCookie = false;
 
 function revert(): void {
+  setIsScreenshotting(false);
   hideLoaderBar();
   qs("#ad-result-wrapper")?.show();
   qs("#ad-result-small-wrapper")?.show();
   qs("#testConfig")?.show();
   qs(".pageTest .screenshotSpacer")?.remove();
   qs("#notificationCenter")?.show();
-  qs("#commandLineMobileButton")?.show();
   qs(".pageTest .ssWatermark")?.hide();
   qs(".pageTest .ssWatermark")?.setText("monkeytype.com"); // Reset watermark text
   qs(".pageTest .buttons")?.show();
@@ -84,9 +84,10 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
       .map((el) => `<span>${el}</span>`)
       .join("<span class='pipe'>|</span>"),
   );
+
+  setIsScreenshotting(true);
   qs(".pageTest .buttons")?.hide();
   qs("#notificationCenter")?.hide();
-  qs("#commandLineMobileButton")?.hide();
   qs(".pageTest .loginTip")?.hide();
   qs("noscript")?.hide();
   qs("#nocss")?.hide();
@@ -122,8 +123,6 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   const sourceX = src.screenBounds().left ?? 0;
   const sourceY = src.screenBounds().top ?? 0;
 
-  console.log(sourceX, sourceY);
-
   const sourceWidth = src.getOuterWidth();
   const sourceHeight = src.getOuterHeight();
   const paddingX = convertRemToPixels(2);