tone-row · rob-gordon · Sep 12, 2024 · Sep 10, 2024 · Sep 12, 2024 · Sep 12, 2024
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.57.1",
+  "version": "1.57.2",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {

diff --git a/app/src/components/Checkout.tsx b/app/src/components/Checkout.tsx
@@ -124,15 +124,12 @@ export function Checkout({
   }
 
   return (
-    <div>
-      <h2 className="text-white text-5xl font-bold text-center mb-3 tracking-wide">
-        <Trans>Upgrade to Pro</Trans>
-      </h2>
-      <p className="text-white text-[26px] text-center mb-10 text-wrap-balance leading-tight opacity-90">
+    <div className="grid">
+      <h2 className="text-white text-lg font-medium sm:text-3xl text-center mb-10 text-wrap-balance leading-tight opacity-90">
         <Trans>
           Unlock AI Features and never lose your work with a Pro account.
         </Trans>
-      </p>
+      </h2>
       <div className="grid sm:grid-cols-2 gap-3 mb-8">
         <PlanButton
           onClick={() => {
@@ -158,45 +155,44 @@ export function Checkout({
           data-session-activity="Choose Monthly Plan"
         />
       </div>
-      <div className="px-[48px]">
-        <button
-          className={classNames(
-            "w-full bg-[#FFCD1F] text-black rounded-3xl text-[22px] font-bold py-6 shadow-md hover:bg-[#FFE063] hover:shadow-lg transition-all duration-300",
-            {
-              "animate-pulse": createCheckoutSession.isLoading,
-            }
-          )}
-          onClick={() => {
-            createCheckoutSession.mutate(plan);
-          }}
-          data-session-activity="Upgrade Account"
-        >
-          <Trans>
-            {createCheckoutSession.isLoading
-              ? t`Processing...`
-              : t`Get Pro Access Now`}
-          </Trans>
-        </button>
 
-        <div className="mt-8 text-base text-white bg-purple-600 rounded-lg p-5 shadow-md">
-          <div className="flex items-center mb-2">
-            <LockSimple className="mr-2" size={18} />
-            <span>
-              <Trans>Secure payment</Trans>
-            </span>
-          </div>
-          <div className="flex items-center mb-2">
-            <CreditCard className="mr-2" size={18} />
-            <span>
-              <Trans>Cancel anytime</Trans>
-            </span>
-          </div>
-          <div className="flex items-center">
-            <ArrowClockwise className="mr-2" size={18} />
-            <span>
-              <Trans>Satisfaction guaranteed or first payment refunded</Trans>
-            </span>
-          </div>
+      <button
+        className={classNames(
+          "w-full bg-[#FFCD1F] text-black rounded-3xl text-[22px] font-bold py-6 shadow-md hover:bg-[#FFE063] hover:shadow-lg transition-all duration-300",
+          {
+            "animate-pulse": createCheckoutSession.isLoading,
+          }
+        )}
+        onClick={() => {
+          createCheckoutSession.mutate(plan);
+        }}
+        data-session-activity="Upgrade Account"
+      >
+        <Trans>
+          {createCheckoutSession.isLoading
+            ? t`Processing...`
+            : t`Get Pro Access Now`}
+        </Trans>
+      </button>
+
+      <div className="mt-8 text-base text-white bg-purple-600 rounded-lg p-5 shadow-md">
+        <div className="flex items-center mb-2">
+          <LockSimple className="mr-2" size={18} />
+          <span>
+            <Trans>Secure payment</Trans>
+          </span>
+        </div>
+        <div className="flex items-center mb-2">
+          <CreditCard className="mr-2" size={18} />
+          <span>
+            <Trans>Cancel anytime</Trans>
+          </span>
+        </div>
+        <div className="flex items-center">
+          <ArrowClockwise className="mr-2" size={18} />
+          <span>
+            <Trans>Satisfaction guaranteed or first payment refunded</Trans>
+          </span>
         </div>
       </div>
     </div>

diff --git a/app/src/components/DownloadDropdown.tsx b/app/src/components/DownloadDropdown.tsx
@@ -24,18 +24,22 @@ export function DownloadDropdown({ children }: { children: React.ReactNode }) {
       const svg = await getSvg({ cy: window.__cy });
       downloadSvg({ svg, filename });
     } else {
-      const { canvas } = await getCanvas({
-        cy: window.__cy,
-        type: format as "png" | "jpg",
-        watermark,
-        scale,
-      });
-      downloadCanvas({
-        canvas,
-        filename,
-        type: format as "png" | "jpg",
-        cleanup: () => {},
-      });
+      try {
+        const { canvas } = await getCanvas({
+          cy: window.__cy,
+          type: format as "png" | "jpg",
+          watermark,
+          scale,
+        });
+        downloadCanvas({
+          canvas,
+          filename,
+          type: format as "png" | "jpg",
+          cleanup: () => {},
+        });
+      } catch (err) {
+        console.error(`Failed to download ${format}:`, err);
+      }
     }
   };
 

diff --git a/app/src/components/downloads.ts b/app/src/components/downloads.ts
@@ -8,6 +8,10 @@ import { getBackground } from "../lib/toTheme";
 // padding, gets divided in half
 const PADDING = 60;
 
+const MAX_ATTEMPTS = 8;
+const SCALE_REDUCTION_FACTOR = 0.75;
+const CANVAS_SIZE_ERROR = "`canvas.toBlob()` sent a null value in its callback";
+
 /**
  * Returns the SVG code for the current graph
  */
@@ -136,12 +140,36 @@ export async function getCanvas({
   cleanup: () => void;
 }> {
   const bg = getBackground();
-  const blob = await cy[type]({
-    full: true,
-    scale,
-    output: "blob-promise",
-    bg,
-  });
+  let blob: Blob | null = null;
+  let currentScale = scale;
+  let attempts = 0;
+
+  // Try to create the blob, reducing scale if necessary
+  while (attempts < MAX_ATTEMPTS) {
+    try {
+      blob = await cy[type]({
+        full: true,
+        scale: currentScale,
+        output: "blob-promise",
+        bg,
+      });
+      break; // Success, exit the loop
+    } catch (error) {
+      if (error instanceof Error && error.message.includes(CANVAS_SIZE_ERROR)) {
+        attempts++;
+        currentScale *= SCALE_REDUCTION_FACTOR;
+        console.warn(
+          `Canvas size too large. Reducing scale to ${currentScale}`
+        );
+      } else {
+        throw error; // Rethrow if it's not the expected error
+      }
+    }
+  }
+
+  if (!blob) {
+    throw new Error("Failed to create canvas after maximum attempts");
+  }
 
   // Get width and height of flowchart
   const { w, h } = await new Promise<{ w: number; h: number }>((resolve) => {
@@ -227,6 +255,7 @@ export function downloadCanvas({
 }: {
   filename: string;
 } & Awaited<ReturnType<typeof getCanvas>>) {
+  console.log("downloadCanvas", canvas, type, filename);
   const mime = type === "png" ? "image/png" : "image/jpeg";
   saveAs(canvas.toDataURL(mime), `${filename}.${type}`);
   cleanup();

diff --git a/app/src/index.css b/app/src/index.css
@@ -320,7 +320,7 @@ and --mouse-x
 }
 
 .feature:nth-child(1) {
-  --hover-accent: theme("colors.purple.300");
+  --hover-accent: theme("colors.purple.400");
 }
 .feature:nth-child(2) {
   --hover-accent: theme("colors.green.300");
@@ -329,7 +329,7 @@ and --mouse-x
   --hover-accent: theme("colors.orange.300");
 }
 .feature:nth-child(4) {
-  --hover-accent: theme("colors.blue.300");
+  --hover-accent: theme("colors.red.300");
 }
 
 .feature::after {
@@ -365,7 +365,7 @@ and --mouse-x
   @apply transition-opacity duration-[400ms];
 }
 
-.feature:hover::after {
+.feature[data-is-active="true"]::after {
   opacity: 1;
 }
 
@@ -408,12 +408,22 @@ and --mouse-x
       #e3dff3 32px 33px
     ),
     linear-gradient(90deg, #f5f4f91f, #f5f4f91f 30px);
-  background-position: 0 0;
   background-repeat: repeat, repeat, repeat, repeat;
-  background-size: 100% 100%;
+  background-size: 120% 120%;
   background-attachment: scroll, scroll, scroll, scroll;
   background-origin: padding-box, padding-box, padding-box, padding-box;
   background-clip: border-box, border-box, border-box, border-box;
+  background-position: 0px 0px;
+  animation: move-background 3s linear infinite;
+}
+
+@keyframes move-background {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: -33px -5px;
+  }
 }
 
 body.dark .pricing-highlights {

diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js