v1.47.2

app/e2e/pro.spec.ts

@@ -166,7 +166,7 @@ test("Create chart from imported data", async () => {
       page.getByText("You are about to add 9 nodes and 10 edges to your graph.")
     ).toBeVisible();
 
-    await page.getByRole("button", { name: "Continue" }).click();
+    await page.getByTestId("import-confirm-button").click();
   } catch (error) {
     console.error(error);
     throw error;

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.47.1",
+  "version": "1.47.2",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {

app/src/components/Header.tsx

@@ -185,7 +185,7 @@ export const Header = memo(function SharedHeader() {
                   to="/pricing"
                   data-testid="pro-link"
                   aria-current={isSponsorPage ? "page" : undefined}
-                  className="font-bold text-[15px] rounded-xl py-2 ml-2 px-4 bg-purple-100 text-purple-500 hover:bg-purple-200 hover:text-purple-600 dark:bg-purple-800 dark:text-white dark:hover:ring-2 dark:hover:ring-white/10"
+                  className="font-bold rounded-md py-2 ml-2 px-4 bg-gradient-to-t from-purple-600 to-purple-500 text-white hover:to-purple-400 dark:bg-purple-800 dark:text-white dark:hover:ring-2 dark:hover:ring-white/10"
                   onClick={() => {
                     track("sponsor", "click");
                   }}

app/src/components/ImportDataDialog.tsx

@@ -704,6 +704,7 @@ function ConfirmAddNodesAndEdges() {
               }));
             }}
             color="blue"
+            data-testid="import-confirm-button"
           >
             {t`Continue`}
           </Button2>

app/src/components/SandboxWarning.tsx

@@ -42,31 +42,33 @@ export function SandboxWarning() {
           data-testid="sandbox-warning"
         >
           <h2 className="font-bold text-xl leading-normal text-center">
-            👋 <Trans>Don't lose your work!</Trans>
+            <Trans>Your Work is Important</Trans>
           </h2>
           <P>
             <Trans>
-              You're currently working in your sandbox. Remember, it resets
-              daily, so your current work won't be saved tomorrow.
+              This is your sandbox. It's a great place for experimentation, but{" "}
+              <u className="underline-offset-2">it resets daily</u>.
             </Trans>
           </P>
           <P>
             <Trans>
-              Want to keep your flowcharts? Upgrade to our Pro account for only
-              $3/month. With Pro, you can save unlimited flowcharts and never
-              lose your creativity.
+              You can save unlimited flowcharts in the cloud or to your
+              computer, as well as get access to features like AI Editing and
+              Data Imports for less than the price of a cup of coffee.
             </Trans>
           </P>
           <Button2
-            color="blue"
+            color="purple"
             size="sm"
             className="mt-3"
             data-testid="sandbox-warning-learn-more"
             onClick={() => {
               useSandboxWarning.setState({ isOpen: false });
             }}
           >
-            <Link to="/pricing">Learn More</Link>
+            <Link to="/pricing">
+              Learn about <span>Flowchart Fun Pro</span>
+            </Link>
           </Button2>
         </Content>
       </Dialog.Portal>

app/src/components/Tabs/ThemeTab.tsx

@@ -27,12 +27,12 @@ import { Warning } from "../Warning";
 import { Trans, t } from "@lingui/macro";
 import {
   ArrowsOutLineVertical,
-  ArrowsOutSimple,
   Article,
   Graph,
   LineSegment,
   TextAa,
 } from "phosphor-react";
+import { useGraphStore } from "../../lib/useGraphStore";
 
 const createForm = createControls({
   select,
@@ -91,6 +91,8 @@ const Form = createForm<{
             return data.theme.layoutName;
           },
           onChange(value) {
+            // reset zoom here
+            useGraphStore.setState({ autoFit: true });
             updateThemeEditor({ layoutName: value as LayoutName });
           },
           options: [
@@ -120,6 +122,7 @@ const Form = createForm<{
             return data.theme.direction ?? "UNDEFINED";
           },
           onChange(value) {
+            useGraphStore.setState({ autoFit: true });
             updateThemeEditor({ direction: value as Direction });
           },
           options: [
@@ -130,7 +133,7 @@ const Form = createForm<{
           ],
         },
         {
-          title: () => <ArrowsOutSimple className="w-5 h-5" />,
+          title: () => t`Spacing`,
           id: "spacingFactor",
           label: t`Spacing`,
           control: "range",

app/src/ui/Dialog.tsx

@@ -13,7 +13,7 @@ export const Overlay = forwardRef<
   <Dialog.Overlay
     ref={ref}
     {...props}
-    className={`bg-foreground/50 dark:bg-background/50 data-[state=open]:animate-overlayShow z-[15] fixed inset-0 ${className}`}
+    className={`bg-foreground/50 dark:bg-background/50 data-[state=open]:animate-overlayShow z-[40] fixed inset-0 ${className}`}
   />
 ));
 Overlay.displayName = "Dialog.Overlay";