feat: adding online-fix modal

src/renderer/src/components/backdrop/backdrop.css.ts

@@ -0,0 +1,47 @@
+import { keyframes } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { SPACING_UNIT } from "../../theme.css";
+
+export const backdropFadeIn = keyframes({
+  "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
+  "100%": {
+    backdropFilter: "blur(2px)",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+});
+
+export const backdropFadeOut = keyframes({
+  "0%": { backdropFilter: "blur(2px)", backgroundColor: "rgba(0, 0, 0, 0.7)" },
+  "100%": {
+    backdropFilter: "blur(0px)",
+    backgroundColor: "rgba(0, 0, 0, 0)",
+  },
+});
+
+export const backdrop = recipe({
+  base: {
+    animationName: backdropFadeIn,
+    animationDuration: "0.4s",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    top: 0,
+    padding: `${SPACING_UNIT * 3}px`,
+    backdropFilter: "blur(2px)",
+    transition: "all ease 0.2s",
+  },
+  variants: {
+    closing: {
+      true: {
+        animationName: backdropFadeOut,
+        backdropFilter: "blur(0px)",
+        backgroundColor: "rgba(0, 0, 0, 0)",
+      },
+    },
+  },
+});

src/renderer/src/components/backdrop/backdrop.tsx

@@ -0,0 +1,12 @@
+import * as styles from "./backdrop.css";
+
+export interface BackdropProps {
+  isClosing?: boolean;
+  children: React.ReactNode;
+}
+
+export function Backdrop({ isClosing = false, children }: BackdropProps) {
+  return (
+    <div className={styles.backdrop({ closing: isClosing })}>{children}</div>
+  );
+}

src/renderer/src/components/modal/modal.css.ts

@@ -2,22 +2,6 @@ import { keyframes, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { SPACING_UNIT, vars } from "../../theme.css";
 
-export const backdropFadeIn = keyframes({
-  "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" },
-  "100%": {
-    backdropFilter: "blur(2px)",
-    backgroundColor: "rgba(0, 0, 0, 0.7)",
-  },
-});
-
-export const backdropFadeOut = keyframes({
-  "0%": { backdropFilter: "blur(2px)", backgroundColor: "rgba(0, 0, 0, 0.7)" },
-  "100%": {
-    backdropFilter: "blur(0px)",
-    backgroundColor: "rgba(0, 0, 0, 0)",
-  },
-});
-
 export const modalSlideIn = keyframes({
   "0%": { opacity: 0 },
   "100%": {
@@ -32,34 +16,6 @@ export const modalSlideOut = keyframes({
   },
 });
 
-export const backdrop = recipe({
-  base: {
-    animationName: backdropFadeIn,
-    animationDuration: "0.4s",
-    backgroundColor: "rgba(0, 0, 0, 0.7)",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    zIndex: 1,
-    top: 0,
-    padding: `${SPACING_UNIT * 3}px`,
-    backdropFilter: "blur(2px)",
-    transition: "all ease 0.2s",
-  },
-  variants: {
-    closing: {
-      true: {
-        animationName: backdropFadeOut,
-        backdropFilter: "blur(0px)",
-        backgroundColor: "rgba(0, 0, 0, 0)",
-      },
-    },
-  },
-});
-
 export const modal = recipe({
   base: {
     animationName: modalSlideIn,

src/renderer/src/components/modal/modal.tsx

@@ -5,6 +5,7 @@ import { XIcon } from "@primer/octicons-react";
 import * as styles from "./modal.css";
 import { useAppDispatch } from "@renderer/hooks";
 import { toggleDragging } from "@renderer/features";
+import { Backdrop } from "../backdrop/backdrop";
 
 export interface ModalProps {
   visible: boolean;
@@ -88,7 +89,7 @@ export function Modal({
   if (!visible) return null;
 
   return createPortal(
-    <div className={styles.backdrop({ closing: isClosing })}>
+    <Backdrop isClosing={isClosing}>
       <div
         className={styles.modal({ closing: isClosing })}
         role="modal"
@@ -110,7 +111,7 @@ export function Modal({
         </div>
         <div className={styles.modalContent}>{children}</div>
       </div>
-    </div>,
+    </Backdrop>,
     document.body
   );
 }

src/renderer/src/pages/game-details/game-details.tsx

@@ -28,6 +28,7 @@ import * as styles from "./game-details.css";
 import { HeroPanel } from "./hero-panel";
 import { HowLongToBeatSection } from "./how-long-to-beat-section";
 import { RepacksModal } from "./repacks-modal";
+import { OnlineFixInstallationGuide } from "./online-fix-installation-guide";
 
 export function GameDetails() {
   const { objectID, shop } = useParams();
@@ -167,6 +168,8 @@ export function GameDetails() {
 
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+      {/* <OnlineFixInstallationGuide /> */}
+
       {gameDetails && (
         <RepacksModal
           visible={showRepacksModal}

src/renderer/src/pages/game-details/online-fix-installation-guide.tsx

@@ -0,0 +1,21 @@
+import { Button, CheckboxField, Modal, TextField } from "@renderer/components";
+import { Backdrop } from "@renderer/components/backdrop/backdrop";
+import { createPortal } from "react-dom";
+
+export function OnlineFixInstallationGuide() {
+  return (
+    <Modal title="Extraction password" visible>
+      <form>
+        <p>
+          When asked for an extraction password for OnlineFix repacks, use the
+          following one:
+        </p>
+        <TextField value="online-fix.me" readOnly disabled />
+
+        <CheckboxField label="Don't show it again" />
+
+        <Button>Ok</Button>
+      </form>
+    </Modal>
+  );
+}