fix(CLD-60): Link to Windows Dev Mode instructions in onboarding

DeckThemes · Jul 3, 2023 · bffec71 · bffec71
1 parent 02f3caa
commit bffec71
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/components/DownloadBackendPage.tsx b/components/DownloadBackendPage.tsx
@@ -47,9 +47,25 @@ export function DownloadBackendPage({
         titleText={onboarding ? "Install CSSLoader's Backend" : "Backend Update Available"}
         dontClose={installProg > 0 || onboarding}
         descriptionText={
-          onboarding
-            ? "CSSLoader's backend allows it to inject your CSS into Steam. You must install it to use CSSLoader Desktop"
-            : "We recommend installing backend updates as soon as they're available in order to maintain compatibility with new themes."
+          onboarding ? (
+            <>
+              <span>
+                You must install CSSLoader's Backend to use CSSLoader Desktop. If you wish to use
+                custom images and fonts, you must{" "}
+                <span
+                  className="cursor-pointer font-bold underline"
+                  onClick={async () => {
+                    const { open } = await import("@tauri-apps/api/shell");
+                    open("https://docs.deckthemes.com/CSSLoader/Install/#standalone");
+                  }}
+                >
+                  enable Windows Developer Mode.
+                </span>
+              </span>
+            </>
+          ) : (
+            "We recommend installing backend updates as soon as they're available in order to maintain compatibility with new themes."
+          )
         }
         {...{ installProg, installText }}
         onAction={() => installBackend()}

diff --git a/components/GenericInstallBackendModal.tsx b/components/GenericInstallBackendModal.tsx
@@ -20,7 +20,7 @@ export function GenericInstallBackendModal({
   onAction?: () => void;
   dontClose?: boolean;
   onCloseWindow?: () => void;
-  descriptionText?: string;
+  descriptionText?: string | ReactNode;
 }) {
   return (
     <>

diff --git a/components/Primitives/AlertDialog.tsx b/components/Primitives/AlertDialog.tsx
@@ -24,7 +24,7 @@ export function AlertDialog({
   Trigger?: ReactNode;
   title: string;
   triggerDisabled?: boolean;
-  description?: string;
+  description?: string | ReactNode;
   Content?: ReactNode;
   dontClose?: boolean;
   Footer?: ReactNode;