From 5a78eb903c794a786233c2d63806752d7fc7a48a Mon Sep 17 00:00:00 2001
From: Hydra <hydralauncher@proton.me>
Date: Wed, 1 May 2024 00:59:24 +0100
Subject: [PATCH] feat: adding online-fix modal

---
 .../src/components/backdrop/backdrop.css.ts   | 47 +++++++++++++++++++
 .../src/components/backdrop/backdrop.tsx      | 12 +++++
 .../src/components/modal/modal.css.ts         | 44 -----------------
 src/renderer/src/components/modal/modal.tsx   |  5 +-
 .../src/pages/game-details/game-details.tsx   |  3 ++
 .../online-fix-installation-guide.tsx         | 21 +++++++++
 6 files changed, 86 insertions(+), 46 deletions(-)
 create mode 100644 src/renderer/src/components/backdrop/backdrop.css.ts
 create mode 100644 src/renderer/src/components/backdrop/backdrop.tsx
 create mode 100644 src/renderer/src/pages/game-details/online-fix-installation-guide.tsx

diff --git a/src/renderer/src/components/backdrop/backdrop.css.ts b/src/renderer/src/components/backdrop/backdrop.css.ts
new file mode 100644
index 000000000..0a7b61bb2
--- /dev/null
+++ b/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)",
+      },
+    },
+  },
+});
diff --git a/src/renderer/src/components/backdrop/backdrop.tsx b/src/renderer/src/components/backdrop/backdrop.tsx
new file mode 100644
index 000000000..5852d59dc
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/renderer/src/components/modal/modal.css.ts b/src/renderer/src/components/modal/modal.css.ts
index d6e4732dd..37a3fef5a 100644
--- a/src/renderer/src/components/modal/modal.css.ts
+++ b/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,
diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
index b8b4e7ef8..7bfc0dcc3 100644
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/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
   );
 }
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx
index 59b25ba9a..2f287e58e 100644
--- a/src/renderer/src/pages/game-details/game-details.tsx
+++ b/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}
diff --git a/src/renderer/src/pages/game-details/online-fix-installation-guide.tsx b/src/renderer/src/pages/game-details/online-fix-installation-guide.tsx
new file mode 100644
index 000000000..09f51c5dc
--- /dev/null
+++ b/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>
+  );
+}