From b4de99a7d23b7dbb085a15602f8d56d8631a6c1d Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 10:25:42 -0500
Subject: [PATCH 1/6] Adds scale to percentage updates - user input and display
 will be in percentage instead of a decimal scale. Styles the open pdf message
 a little bit more. Changes the styling of the scale message (see if you like
 it or not, it takes up a bit more screen real estate)

---
 app/[locale]/calibrate/page.tsx             |  8 +++--
 app/[locale]/globals.css                    | 39 +++++++++++++++++++++
 app/_components/canvases/overlay-canvas.tsx |  4 ---
 app/_components/header.tsx                  |  4 ++-
 app/_components/menus/scale-menu.tsx        | 26 +++++++++++---
 app/_components/menus/side-menu.tsx         |  5 ++-
 app/_components/modifiers-banner.tsx        | 30 ++++++++++++++++
 app/_components/pdf-viewer.tsx              | 21 +++++++++--
 app/_components/theme/colors.ts             |  4 +--
 app/_components/theme/styles.ts             |  6 ++++
 app/_lib/drawing.ts                         | 28 ++++++---------
 app/_lib/remove-non-digits.ts               | 13 +++++++
 app/_reducers/patternScaleReducer.ts        |  6 ++--
 messages/en.json                            |  5 +--
 tailwind.config.ts                          | 13 +++++++
 15 files changed, 173 insertions(+), 39 deletions(-)
 create mode 100644 app/_components/modifiers-banner.tsx

diff --git a/app/[locale]/calibrate/page.tsx b/app/[locale]/calibrate/page.tsx
index bbd0931a..145bddde 100644
--- a/app/[locale]/calibrate/page.tsx
+++ b/app/[locale]/calibrate/page.tsx
@@ -75,6 +75,7 @@ import { Button } from "@/_components/buttons/button";
 import { erosionFilter } from "@/_lib/erode";
 import SvgViewer from "@/_components/svg-viewer";
 import { toggleFullScreen } from "@/_lib/full-screen";
+import ModifiersBanner from "@/_components/modifiers-banner";
 
 const defaultStitchSettings = {
   lineCount: 1,
@@ -296,7 +297,7 @@ export default function Page() {
       setMeasuring(false);
       setPageCount(0);
       setLayers({});
-      dispatchPatternScaleAction({ type: "set", scale: "1.00" });
+      dispatchPatternScaleAction({ type: "set", scale: "1.000" });
       const lineThicknessString = localStorage.getItem(
         `lineThickness:${files[0].name}`,
       );
@@ -703,10 +704,11 @@ export default function Page() {
             </MeasureCanvas>
 
             <menu
-              className={`absolute w-screen ${visible(!menusHidden)} ${menuStates.nav ? "top-0" : "-top-16"} pointer-events-none`}
+              className={`absolute w-screen ${menuStates.nav ? "top-0" : "-top-16"} pointer-events-none`}
             >
               <menu className="pointer-events-auto">
                 <Header
+                  hidden={menusHidden}
                   isCalibrating={isCalibrating}
                   setIsCalibrating={setIsCalibrating}
                   widthInput={widthInput}
@@ -779,10 +781,12 @@ export default function Page() {
                   />
                 )}
                 <MailModal open={mailOpen} setOpen={setMailOpen} />
+                <ModifiersBanner patternScale={patternScaleFactor} />
               </menu>
 
               {!isCalibrating && file !== null && (
                 <SideMenu
+                  hidden={menusHidden}
                   menuStates={menuStates}
                   setMenuStates={setMenuStates}
                   pageCount={pageCount}
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index cb7355dd..a3041fa2 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -22,6 +22,45 @@
   .scrollbar::-webkit-scrollbar-thumb:hover {
     background: #6b7280;
   }
+
+  /**
+   * Buttons ========================
+   */
+
+  /* Button base classes */
+  .btn-outline {
+    @apply flex gap-2 dark:bg-black bg-white items-center border-2 border-solid focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center
+  }
+
+  .btn {
+    @apply flex gap-2 items-center text-white font-medium rounded-lg text-sm px-5 py-2.5
+  }
+
+  /* Primary color button */
+  .btn-primary-static-outline {
+    @apply btn-outline text-purple-700 border-purple-700 dark:border-purple-500 dark:text-purple-500;
+  }
+
+  .btn-primary-static {
+    @apply btn bg-purple-700 dark:bg-purple-600
+  }
+
+  .btn-primary-outline {
+    @apply btn-primary-static-outline hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-500 dark:focus:ring-purple-800
+  }
+
+  .btn-primary {
+    @apply btn-primary-static hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-700 dark:focus:ring-purple-800
+  }
+
+  /* Secondary color button */
+  .btn-secondary-outline-static {
+    @apply text-blue-700 border-blue-700 dark:border-blue-500 dark:text-blue-500
+  }
+
+  .btn-secondary-static {
+    @apply bg-blue-700 dark:bg-blue-600
+  }
 }
 
 /* Do not display PDF Links https://github.com/Pattern-Projector/pattern-projector/issues/260 */
diff --git a/app/_components/canvases/overlay-canvas.tsx b/app/_components/canvases/overlay-canvas.tsx
index ddc3f341..a78f7fc9 100644
--- a/app/_components/canvases/overlay-canvas.tsx
+++ b/app/_components/canvases/overlay-canvas.tsx
@@ -22,7 +22,6 @@ export default function OverlayCanvas({
   zoomedOut,
   magnifying,
   restoreTransforms,
-  patternScale,
 }: {
   className: string | undefined;
   points: Point[];
@@ -34,7 +33,6 @@ export default function OverlayCanvas({
   zoomedOut: boolean;
   magnifying: boolean;
   restoreTransforms: RestoreTransforms | null;
-  patternScale: string;
 }) {
   const flipped = isFlipped(useTransformContext());
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -74,7 +72,6 @@ export default function OverlayCanvas({
           magnifying,
           restoreTransforms,
           t,
-          patternScale,
         );
         drawOverlays(cs);
       }
@@ -91,7 +88,6 @@ export default function OverlayCanvas({
     magnifying,
     restoreTransforms,
     t,
-    patternScale,
   ]);
   return (
     <canvas
diff --git a/app/_components/header.tsx b/app/_components/header.tsx
index 2684275e..5dc90a29 100644
--- a/app/_components/header.tsx
+++ b/app/_components/header.tsx
@@ -70,6 +70,7 @@ import { acceptedMimeTypes } from "@/_lib/is-valid-file";
 import { toggleFullScreen } from "@/_lib/full-screen";
 
 export default function Header({
+  hidden,
   isCalibrating,
   setIsCalibrating,
   widthInput,
@@ -109,6 +110,7 @@ export default function Header({
   invalidCalibration,
   file,
 }: {
+  hidden: boolean;
   isCalibrating: boolean;
   setIsCalibrating: Dispatch<SetStateAction<boolean>>;
   widthInput: string;
@@ -370,7 +372,7 @@ export default function Header({
         </ModalActions>
       </Modal>
       <header
-        className={`relative z-10 bg-opacity-60 dark:bg-opacity-50 bg-white dark:bg-black left-0 w-full border-b dark:border-gray-700 transition-all duration-500 h-16 flex items-center ${menuStates.nav ? "translate-y-0" : "-translate-y-16"}`}
+        className={`relative ${visible(!hidden)} z-10 bg-opacity-60 dark:bg-opacity-50 bg-white dark:bg-black left-0 w-full border-b dark:border-gray-700 transition-all duration-500 h-16 flex items-center ${menuStates.nav ? "translate-y-0" : "-translate-y-16"}`}
       >
         <nav
           className="mx-auto flex max-w-7xl items-center justify-between p-2 lg:px-8 w-full"
diff --git a/app/_components/menus/scale-menu.tsx b/app/_components/menus/scale-menu.tsx
index 85e2d034..31363291 100644
--- a/app/_components/menus/scale-menu.tsx
+++ b/app/_components/menus/scale-menu.tsx
@@ -1,9 +1,9 @@
 import StepperInput from "@/_components/stepper-input";
-import { Dispatch } from "react";
-import removeNonDigits from "@/_lib/remove-non-digits";
+import { Dispatch, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { PatternScaleAction } from "@/_reducers/patternScaleReducer";
 import { sideMenuStyles } from "../theme/styles";
+import { decimalToString, roundTo } from "@/_lib/remove-non-digits";
 
 export default function ScaleMenu({
   patternScale,
@@ -14,6 +14,22 @@ export default function ScaleMenu({
 }) {
   const t = useTranslations("ScaleMenu");
 
+  const scaleValue: string = useMemo(() => {
+    const number = +patternScale;
+    if (Number.isNaN(number)) {
+      return "100%";
+    }
+    return `${decimalToString(number * 100, 1)}%`;
+  }, [patternScale]);
+
+  const convertInputToScale = (newString: string, oldString: string) => {
+    const num = +newString.replace(/[^.\d]/g, "");
+    if (!isNaN(num)) {
+      return (num / 100).toString();
+    }
+    return oldString;
+  };
+
   return (
     <menu className={`${sideMenuStyles}`}>
       <StepperInput
@@ -21,15 +37,15 @@ export default function ScaleMenu({
         handleChange={(e) =>
           dispatchPatternScaleAction({
             type: "set",
-            scale: removeNonDigits(e.target.value, patternScale),
+            scale: convertInputToScale(e.target.value, patternScale),
           })
         }
         label={t("scale")}
-        value={patternScale}
+        value={scaleValue}
         onStep={(delta) =>
           dispatchPatternScaleAction({ type: "delta", delta: delta })
         }
-        step={0.1}
+        step={0.05}
       ></StepperInput>
     </menu>
   );
diff --git a/app/_components/menus/side-menu.tsx b/app/_components/menus/side-menu.tsx
index 9c70b0eb..693f3b8d 100644
--- a/app/_components/menus/side-menu.tsx
+++ b/app/_components/menus/side-menu.tsx
@@ -18,8 +18,10 @@ import { StitchSettings } from "@/_lib/interfaces/stitch-settings";
 import { LayerAction } from "@/_reducers/layersReducer";
 import { PatternScaleAction } from "@/_reducers/patternScaleReducer";
 import TuneIcon from "@/_icons/tune-icon";
+import { visible } from "@/_components/theme/css-functions";
 
 export default function SideMenu({
+  hidden,
   menuStates,
   setMenuStates,
   pageCount,
@@ -31,6 +33,7 @@ export default function SideMenu({
   patternScale,
   dispatchPatternScaleAction,
 }: {
+  hidden: boolean;
   menuStates: MenuStates;
   setMenuStates: Dispatch<SetStateAction<MenuStates>>;
   pageCount: number;
@@ -51,7 +54,7 @@ export default function SideMenu({
     pageCount === 0 || file?.name.toLocaleUpperCase().endsWith(".SVG");
 
   return (
-    <menu className="pointer-events-auto flex w-fit">
+    <menu className={`pointer-events-auto flex w-fit ${visible(!hidden)}`}>
       {/* reverse so the tooltips show on top */}
       <menu className="w-16 flex flex-col-reverse justify-end gap-2 p-2 bg-opacity-60 dark:bg-opacity-50 bg-white dark:bg-black left-0 border-b border-r dark:border-gray-700 transition-all duration-500">
         <Tooltip description={menuStates.scale ? sc("hide") : sc("show")}>
diff --git a/app/_components/modifiers-banner.tsx b/app/_components/modifiers-banner.tsx
new file mode 100644
index 00000000..2a52c07e
--- /dev/null
+++ b/app/_components/modifiers-banner.tsx
@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import { visible } from "@/_components/theme/css-functions";
+import { decimalToString } from "@/_lib/remove-non-digits";
+
+export default function ModifiersBanner({
+  patternScale,
+}: {
+  patternScale?: number;
+}) {
+  const hidden = useMemo(() => {
+    if (!patternScale || patternScale === 1) {
+      return true;
+    }
+    return false;
+  }, [patternScale]);
+
+  const text = useMemo(() => {
+    if (patternScale && patternScale !== 1) {
+      return `${decimalToString(patternScale * 100, 1)}%`;
+    }
+  }, [patternScale]);
+
+  return (
+    <div
+      className={`${visible(!hidden)} h-6 bg-amber-700 w-full text-center font-bold opacity-80`}
+    >
+      {text}
+    </div>
+  );
+}
diff --git a/app/_components/pdf-viewer.tsx b/app/_components/pdf-viewer.tsx
index 8b1f36e7..7527fe39 100644
--- a/app/_components/pdf-viewer.tsx
+++ b/app/_components/pdf-viewer.tsx
@@ -25,7 +25,8 @@ import { getLayersFromPdf, Layers } from "@/_lib/layers";
 import { LoadStatusEnum } from "@/_lib/load-status-enum";
 import { Point } from "@/_lib/point";
 import { useTranslations } from "next-intl";
-import { MenuStates, getDefaultMenuStates } from "@/_lib/menu-states";
+import { getDefaultMenuStates, MenuStates } from "@/_lib/menu-states";
+import PdfIcon from "@/_icons/pdf-icon";
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   "pdfjs-dist/build/pdf.worker.min.js",
@@ -75,6 +76,7 @@ export default function PdfViewer({
   );
   const transformer = useTransformerContext();
   const t = useTranslations("PdfViewer");
+  const h = useTranslations("Header");
 
   function onDocumentLoadSuccess(docProxy: PDFDocumentProxy) {
     const numPages = docProxy.numPages;
@@ -170,7 +172,22 @@ export default function PdfViewer({
     <Document
       file={file}
       onLoadSuccess={onDocumentLoadSuccess}
-      noData={<p className="text-9xl">{t("noData")}</p>}
+      noData={
+        <div className="text-6xl text-center w-full border-gray-400 leading-[1.3] px-6 py-3">
+          <span>{t("noDataFirst")}</span>
+          <div className="flex w-full align-middle justify-center">
+            <div className="flex items-center gap-2 scale-[2] m-8">
+              <label
+                className={`flex gap-2 items-center btn-primary-static-outline !py-1.5 !px-3`}
+              >
+                <PdfIcon ariaLabel={h("openPDF")} fill="currentColor" />
+                <span className="hidden md:flex">{h("openPDF")}</span>
+              </label>
+            </div>
+          </div>
+          <span>{t("noDataLast")}</span>
+        </div>
+      }
       error={<p className="text-9xl">{t("error")}</p>}
       onLoadError={() => setFileLoadStatus(LoadStatusEnum.FAILED)}
     >
diff --git a/app/_components/theme/colors.ts b/app/_components/theme/colors.ts
index f7c4c54a..f063ac2a 100644
--- a/app/_components/theme/colors.ts
+++ b/app/_components/theme/colors.ts
@@ -29,8 +29,8 @@ export function getColorClasses(
     }
     case ButtonColor.PURPLE: {
       return style === ButtonStyle.OUTLINE
-        ? "text-purple-700 border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-500 dark:text-purple-500 dark:hover:bg-purple-500 dark:focus:ring-purple-800"
-        : "bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
+        ? "btn-primary-outline"
+        : "btn-primary";
     }
   }
 }
diff --git a/app/_components/theme/styles.ts b/app/_components/theme/styles.ts
index 75aedb73..5a7052f3 100644
--- a/app/_components/theme/styles.ts
+++ b/app/_components/theme/styles.ts
@@ -9,4 +9,10 @@ export function getButtonStyleClasses(style: ButtonStyle) {
     : `flex gap-2 items-center text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none`;
 }
 
+export function getStaticButtonStyleClasses(style: ButtonStyle) {
+  return style === ButtonStyle.OUTLINE
+    ? `flex gap-2 dark:bg-black bg-white items-center border border-2 border-solid focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center`
+    : `flex gap-2 items-center text-white font-medium rounded-lg text-sm px-5 py-2.5`;
+}
+
 export const sideMenuStyles = `flex flex-col gap-2 p-2 w-64 items-start bg-white dark:bg-black border-b border-r border-gray-200 dark:border-gray-700`;
diff --git a/app/_lib/drawing.ts b/app/_lib/drawing.ts
index 282ee017..2a773c26 100644
--- a/app/_lib/drawing.ts
+++ b/app/_lib/drawing.ts
@@ -41,7 +41,6 @@ export class CanvasState {
     public magnifying: boolean,
     public restoreTransforms: RestoreTransforms | null,
     public t: any,
-    public patternScale: string | null,
   ) {
     this.isConcave = checkIsConcave(this.points);
   }
@@ -113,15 +112,8 @@ export function drawPolygon(
 }
 
 export function drawOverlays(cs: CanvasState) {
-  const {
-    ctx,
-    displaySettings,
-    zoomedOut,
-    t,
-    magnifying,
-    restoreTransforms,
-    patternScale,
-  } = cs;
+  const { ctx, displaySettings, zoomedOut, t, magnifying, restoreTransforms } =
+    cs;
   const { grid, border, paper, flipLines, flippedPattern, disabled } =
     displaySettings.overlay;
   const { theme } = displaySettings;
@@ -153,14 +145,14 @@ export function drawOverlays(cs: CanvasState) {
     if (flippedPattern && cs.isFlipped) {
       drawFlippedPattern(cs);
     }
-    if (patternScale && Number(patternScale) !== 1) {
-      drawMessage(
-        cs,
-        t.rich("scaled", {
-          scale: () => String(Number(patternScale).toFixed(2)),
-        }),
-      );
-    }
+    // if (patternScale && Number(patternScale) !== 1) {
+    //   drawMessage(
+    //     cs,
+    //     t.rich("scaled", {
+    //       scale: () => String(Number(patternScale).toFixed(2)),
+    //     }),
+    //   );
+    // }
   }
 }
 
diff --git a/app/_lib/remove-non-digits.ts b/app/_lib/remove-non-digits.ts
index 68dc42a3..9b6c5028 100644
--- a/app/_lib/remove-non-digits.ts
+++ b/app/_lib/remove-non-digits.ts
@@ -14,6 +14,19 @@ export default function removeNonDigits(
   }
 }
 
+export function roundTo(num: number, decimalDigits: number) {
+  const factor = 10 ** decimalDigits; // Takes 10^num
+  return Math.round(num * factor) / factor;
+}
+
+export function decimalToString(num: number, decimalDigits: number) {
+  const roundedNum = roundTo(num, decimalDigits);
+  if (Number.isInteger(roundedNum)) {
+    return num.toFixed(0);
+  }
+  return num.toFixed(decimalDigits);
+}
+
 export function allowInteger(
   s: string,
   allowNegative: boolean = false,
diff --git a/app/_reducers/patternScaleReducer.ts b/app/_reducers/patternScaleReducer.ts
index 0f78efbe..301969aa 100644
--- a/app/_reducers/patternScaleReducer.ts
+++ b/app/_reducers/patternScaleReducer.ts
@@ -1,3 +1,5 @@
+import { roundTo } from "@/_lib/remove-non-digits";
+
 interface DeltaAction {
   type: "delta";
   delta: number;
@@ -19,8 +21,8 @@ export default function PatternScaleReducer(
       return action.scale;
     }
     case "delta": {
-      const n = action.delta + Number(patternScale);
-      const hm = n > 0 ? String(n.toFixed(2)) : patternScale;
+      const n = roundTo(action.delta + Number(patternScale), 3);
+      const hm = n > 0 ? n.toFixed(3) : patternScale;
       return hm;
     }
   }
diff --git a/messages/en.json b/messages/en.json
index b141bd2e..3017140b 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -325,10 +325,11 @@
   "OverlayCanvas": {
     "zoomedOut": "click pattern to zoom in",
     "magnifying": "click pattern to stop magnifying",
-    "scaled": "<scale></scale>× scale"
+    "scaled": "<scale></scale>%"
   },
   "PdfViewer": {
     "error": "Failed to load pattern",
-    "noData": "Press the \"Open\" button to load a pattern"
+    "noDataFirst": "Press the",
+    "noDataLast": "button to load a pattern"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4e0fa799..87e4f8a2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,5 +14,18 @@ const config: Config = {
     require("@tailwindcss/typography"),
     require("@tailwindcss/aspect-ratio"),
   ],
+  theme: {
+    extend: {
+      keyframes: {
+        breathe: {
+          "0%, 100%": { color: "" }, // Primary color
+          "50%": { color: "#FACC15" }, // Secondary color
+        },
+      },
+      animation: {
+        breathe: "breathe 1.5s ease-in-out infinite",
+      },
+    },
+  },
 };
 export default config;

From 2ee3ed3f9b49b1c6c88bf508b471bbcf17cea1cf Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 10:26:21 -0500
Subject: [PATCH 2/6] removes patternScale from overlay canvas in favor of a
 colored bar

---
 app/[locale]/calibrate/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/calibrate/page.tsx b/app/[locale]/calibrate/page.tsx
index 145bddde..d2afbcc0 100644
--- a/app/[locale]/calibrate/page.tsx
+++ b/app/[locale]/calibrate/page.tsx
@@ -699,7 +699,7 @@ export default function Page() {
                 zoomedOut={zoomedOut}
                 magnifying={magnifying}
                 restoreTransforms={restoreTransforms}
-                patternScale={String(patternScaleFactor)}
+                // patternScale={String(patternScaleFactor)}
               />
             </MeasureCanvas>
 

From d906bceab7dcebb65df5177ae3375d6bed05601b Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 10:28:49 -0500
Subject: [PATCH 3/6] Added changelog and fixed build error

---
 CHANGELOG.md                                    |  3 ++-
 app/[locale]/globals.css                        | 14 +++++++-------
 app/_components/canvases/calibration-canvas.tsx |  1 -
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb4d6551..5b99c79b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,12 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Side menu for stitch, layers, and scale menus
-- Scale menu for changing the pattern scale
+- Scale menu for changing the pattern scale (modified to use percentage instead of decimal)
 - "Open With Pattern Projector" for PDF files on desktop, when installed with Chrome/Edge
 - Show a pop up when there's an error
 - Change page range in stitch menu with +/- (use + to throw beginning pages at the end e.g. for instruction pages)
 - Option to arrange stitched pages by column order
 - Support for SVG (with layer visibility toggling), PNG, and JPEG
+- Modified open pdf message slightly to add styling
 
 ### Changed
 
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index a3041fa2..5d28ae7c 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -29,11 +29,11 @@
 
   /* Button base classes */
   .btn-outline {
-    @apply flex gap-2 dark:bg-black bg-white items-center border-2 border-solid focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center
+    @apply flex gap-2 dark:bg-black bg-white items-center border-2 border-solid focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center;
   }
 
   .btn {
-    @apply flex gap-2 items-center text-white font-medium rounded-lg text-sm px-5 py-2.5
+    @apply flex gap-2 items-center text-white font-medium rounded-lg text-sm px-5 py-2.5;
   }
 
   /* Primary color button */
@@ -42,24 +42,24 @@
   }
 
   .btn-primary-static {
-    @apply btn bg-purple-700 dark:bg-purple-600
+    @apply btn bg-purple-700 dark:bg-purple-600;
   }
 
   .btn-primary-outline {
-    @apply btn-primary-static-outline hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-500 dark:focus:ring-purple-800
+    @apply btn-primary-static-outline hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-500 dark:focus:ring-purple-800;
   }
 
   .btn-primary {
-    @apply btn-primary-static hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-700 dark:focus:ring-purple-800
+    @apply btn-primary-static hover:bg-purple-800 focus:ring-purple-300 dark:hover:bg-purple-700 dark:focus:ring-purple-800;
   }
 
   /* Secondary color button */
   .btn-secondary-outline-static {
-    @apply text-blue-700 border-blue-700 dark:border-blue-500 dark:text-blue-500
+    @apply text-blue-700 border-blue-700 dark:border-blue-500 dark:text-blue-500;
   }
 
   .btn-secondary-static {
-    @apply bg-blue-700 dark:bg-blue-600
+    @apply bg-blue-700 dark:bg-blue-600;
   }
 }
 
diff --git a/app/_components/canvases/calibration-canvas.tsx b/app/_components/canvases/calibration-canvas.tsx
index a7498eda..cb969ed7 100644
--- a/app/_components/canvases/calibration-canvas.tsx
+++ b/app/_components/canvases/calibration-canvas.tsx
@@ -95,7 +95,6 @@ export default function CalibrationCanvas({
           false,
           null,
           null,
-          null,
         );
         draw(cs);
       }

From f165ac1c09dd32e65bc112db1fd895ade6d7e9d6 Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 11:03:31 -0500
Subject: [PATCH 4/6] Adds modifications based on Sasha's comments and a
 subsequent discussion over DM. Does not modify the input value to percentage,
 but instead uses the new proposed styling to add both units to the display
 bar

---
 app/_components/menus/scale-menu.tsx | 4 ++--
 app/_components/modifiers-banner.tsx | 7 ++++++-
 messages/en.json                     | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/_components/menus/scale-menu.tsx b/app/_components/menus/scale-menu.tsx
index 31363291..e5e5e574 100644
--- a/app/_components/menus/scale-menu.tsx
+++ b/app/_components/menus/scale-menu.tsx
@@ -17,9 +17,9 @@ export default function ScaleMenu({
   const scaleValue: string = useMemo(() => {
     const number = +patternScale;
     if (Number.isNaN(number)) {
-      return "100%";
+      return "1";
     }
-    return `${decimalToString(number * 100, 1)}%`;
+    return decimalToString(number, 2);
   }, [patternScale]);
 
   const convertInputToScale = (newString: string, oldString: string) => {
diff --git a/app/_components/modifiers-banner.tsx b/app/_components/modifiers-banner.tsx
index 2a52c07e..fbe9bf30 100644
--- a/app/_components/modifiers-banner.tsx
+++ b/app/_components/modifiers-banner.tsx
@@ -1,12 +1,14 @@
 import React, { useMemo } from "react";
 import { visible } from "@/_components/theme/css-functions";
 import { decimalToString } from "@/_lib/remove-non-digits";
+import { useTranslations } from "next-intl";
 
 export default function ModifiersBanner({
   patternScale,
 }: {
   patternScale?: number;
 }) {
+  const t = useTranslations("OverlayCanvas");
   const hidden = useMemo(() => {
     if (!patternScale || patternScale === 1) {
       return true;
@@ -16,7 +18,10 @@ export default function ModifiersBanner({
 
   const text = useMemo(() => {
     if (patternScale && patternScale !== 1) {
-      return `${decimalToString(patternScale * 100, 1)}%`;
+      return t.rich("scaled", {
+        scale: () => decimalToString(patternScale, 2),
+        scaleP: () => decimalToString(patternScale * 100, 1),
+      });
     }
   }, [patternScale]);
 
diff --git a/messages/en.json b/messages/en.json
index 3017140b..c3eb80ae 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -325,7 +325,7 @@
   "OverlayCanvas": {
     "zoomedOut": "click pattern to zoom in",
     "magnifying": "click pattern to stop magnifying",
-    "scaled": "<scale></scale>%"
+    "scaled": "Scaled to <scale></scale>x (<scaleP></scaleP>%)"
   },
   "PdfViewer": {
     "error": "Failed to load pattern",

From b212093d008c18013a304318b30e5a4c1cad5381 Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 11:57:55 -0500
Subject: [PATCH 5/6] Resized text to original size after previewing on vercel.
 My transforms must be different locally

---
 app/_components/pdf-viewer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/_components/pdf-viewer.tsx b/app/_components/pdf-viewer.tsx
index 7527fe39..f41b83a4 100644
--- a/app/_components/pdf-viewer.tsx
+++ b/app/_components/pdf-viewer.tsx
@@ -173,10 +173,10 @@ export default function PdfViewer({
       file={file}
       onLoadSuccess={onDocumentLoadSuccess}
       noData={
-        <div className="text-6xl text-center w-full border-gray-400 leading-[1.3] px-6 py-3">
+        <div className="text-9xl text-center w-full border-gray-400 leading-[1.3] px-6 py-3">
           <span>{t("noDataFirst")}</span>
           <div className="flex w-full align-middle justify-center">
-            <div className="flex items-center gap-2 scale-[2] m-8">
+            <div className="flex items-center gap-2 scale-[4] m-16">
               <label
                 className={`flex gap-2 items-center btn-primary-static-outline !py-1.5 !px-3`}
               >

From febfb79ced2040672ea3616f1dccb95d2ac965b7 Mon Sep 17 00:00:00 2001
From: Hannah L <vballprincess859@hotmail.com>
Date: Sat, 22 Mar 2025 12:25:45 -0500
Subject: [PATCH 6/6] Removed some ghost code from the original conversion from
 decimal to percentage conversion in scale-menu. Was causing user input to not
 work correctly

---
 app/_components/menus/scale-menu.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/_components/menus/scale-menu.tsx b/app/_components/menus/scale-menu.tsx
index e5e5e574..edb80148 100644
--- a/app/_components/menus/scale-menu.tsx
+++ b/app/_components/menus/scale-menu.tsx
@@ -3,7 +3,10 @@ import { Dispatch, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { PatternScaleAction } from "@/_reducers/patternScaleReducer";
 import { sideMenuStyles } from "../theme/styles";
-import { decimalToString, roundTo } from "@/_lib/remove-non-digits";
+import removeNonDigits, {
+  decimalToString,
+  roundTo,
+} from "@/_lib/remove-non-digits";
 
 export default function ScaleMenu({
   patternScale,
@@ -19,17 +22,9 @@ export default function ScaleMenu({
     if (Number.isNaN(number)) {
       return "1";
     }
-    return decimalToString(number, 2);
+    return patternScale;
   }, [patternScale]);
 
-  const convertInputToScale = (newString: string, oldString: string) => {
-    const num = +newString.replace(/[^.\d]/g, "");
-    if (!isNaN(num)) {
-      return (num / 100).toString();
-    }
-    return oldString;
-  };
-
   return (
     <menu className={`${sideMenuStyles}`}>
       <StepperInput
@@ -37,7 +32,7 @@ export default function ScaleMenu({
         handleChange={(e) =>
           dispatchPatternScaleAction({
             type: "set",
-            scale: convertInputToScale(e.target.value, patternScale),
+            scale: removeNonDigits(e.target.value, patternScale),
           })
         }
         label={t("scale")}