feat: improve prompt dialog styling

dist/BetterYTM.css

@@ -892,6 +892,10 @@ body .bytm-ripple.slower {
 #bytm-prompt-dialog-upper-cont,
 #bytm-prompt-dialog-message {
   font-size: 1.6rem;
+  white-space: pre-wrap;
+}
+
+.bytm-prompt-type-prompt #bytm-prompt-dialog-message {
   margin-bottom: 15px;
 }
 

src/dialogs/prompt.css

@@ -12,6 +12,10 @@
 #bytm-prompt-dialog-upper-cont,
 #bytm-prompt-dialog-message {
   font-size: 1.6rem;
+  white-space: pre-wrap;
+}
+
+.bytm-prompt-type-prompt #bytm-prompt-dialog-message {
   margin-bottom: 15px;
 }
 

src/dialogs/prompt.ts

@@ -44,6 +44,7 @@ class PromptDialog extends BytmDialog {
       small: true,
       renderHeader: () => this.renderHeader(props),
       renderBody: () => this.renderBody(props),
+      renderFooter: () => this.renderFooter(props),
     });
   }
 
@@ -58,9 +59,8 @@ class PromptDialog extends BytmDialog {
   }
 
   async renderBody({ type, message, ...rest }: PromptDialogRenderProps) {
-    const resolve = (val: boolean | string | null) => (this.events as PromptDialogEmitter).emit("resolve", val);
-
     const contElem = document.createElement("div");
+    contElem.classList.add(`bytm-prompt-type-${type}`);
 
     const upperContElem = document.createElement("div");
     upperContElem.id = "bytm-prompt-dialog-upper-cont";
@@ -85,6 +85,12 @@ class PromptDialog extends BytmDialog {
       upperContElem.appendChild(inputElem);
     }
 
+    return contElem;
+  }
+
+  async renderFooter({ type }: PromptDialogRenderProps) {
+    const resolve = (val: boolean | string | null) => (this.events as PromptDialogEmitter).emit("resolve", val);
+
     const buttonsWrapper = document.createElement("div");
     buttonsWrapper.id = "bytm-prompt-dialog-button-wrapper";
 
@@ -129,9 +135,8 @@ class PromptDialog extends BytmDialog {
     confirmBtn && getOS() === "mac" && buttonsCont.appendChild(confirmBtn);
 
     buttonsWrapper.appendChild(buttonsCont);
-    contElem.appendChild(buttonsWrapper);
 
-    return contElem;
+    return buttonsWrapper;
   }
 }
 

src/menu/menu_old.ts

@@ -2,13 +2,14 @@ import { compress, debounce, isScrollable, type Stringifiable } from "@sv443-net
 import { type defaultData, formatVersion, getFeature, getFeatures, migrations, setFeatures } from "../config.js";
 import { buildNumber, compressionFormat, host, mode, scriptInfo } from "../constants.js";
 import { featInfo, disableBeforeUnload } from "../features/index.js";
-import { error, getResourceUrl, info, log, resourceAsString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse, setInnerHtml } from "../utils/index.js";
+import { error, getResourceUrl, info, log, resourceAsString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse, setInnerHtml, type TrLocale } from "../utils/index.js";
 import { emitSiteEvent, siteEvents } from "../siteEvents.js";
 import { getChangelogDialog, getFeatHelpDialog, showPrompt } from "../dialogs/index.js";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types.js";
 import { BytmDialog, ExImDialog, createHotkeyInput, createToggleInput, openDialogs, setCurrentDialogId } from "../components/index.js";
 import { emitInterface } from "../interface.js";
 import pkg from "../../package.json" with { type: "json" };
+import localeMapping from "../../assets/locales.json" with { type: "json" };
 import "./menu_old.css";
 
 //#region create menu
@@ -20,7 +21,7 @@ export let isCfgMenuOpen = false;
 const scrollIndicatorOffsetThreshold = 50;
 let scrollIndicatorEnabled = true;
 /** Locale at the point of initializing the config menu */
-let initLocale: string | undefined;
+let initLocale: TrLocale | undefined;
 /** Stringified config at the point of initializing the config menu */
 let initConfig: FeatureConfig | undefined;
 /** Timeout id for the "copied" text in the hidden value copy button */
@@ -312,7 +313,10 @@ async function mountCfgMenu() {
       setLocale(featConf.locale);
       const newText = t("lang_changed_prompt_reload");
 
-      const confirmText = newText !== initLangReloadText ? `${newText}\n\n────────────────────────────────\n\n${initLangReloadText}` : newText;
+      const newLangEmoji = localeMapping[featConf.locale]?.emoji ? `${localeMapping[featConf.locale].emoji}\n` : "";
+      const initLangEmoji = initLocale && localeMapping[initLocale]?.emoji ? `${localeMapping[initLocale].emoji}\n` : "";
+
+      const confirmText = newText !== initLangReloadText ? `${newLangEmoji}${newText}\n\n\n${initLangEmoji}${initLangReloadText}` : newText;
 
       if(await showPrompt({ type: "confirm", message: confirmText })) {
         closeCfgMenu();