From fbc5d91c2c549b5f05652655a95df2aa96a7143f Mon Sep 17 00:00:00 2001
From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:25:31 +0000
Subject: [PATCH] adding opacity to the PDFs so we can see the numbers and
 stamps better on the add PDF numbers and the add stamp tools (#5383)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="301" height="450" alt="Screenshot 2026-01-02 at 2 17 19 PM"
src="https://github.com/user-attachments/assets/f7a1fd6d-722e-454a-a63d-d43709dd4e23"
/>

<img width="304" height="612" alt="Screenshot 2026-01-02 at 2 17 53 PM"
src="https://github.com/user-attachments/assets/907ba03c-b95a-49e2-8285-8ccaffaf067f"
/>

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
---
 .../tools/addPageNumbers/PageNumberPreview.module.css          | 3 ++-
 .../core/components/tools/addPageNumbers/PageNumberPreview.tsx | 2 +-
 .../src/core/components/tools/addStamp/StampPreview.module.css | 3 ++-
 .../src/core/components/tools/addStamp/StampPreviewUtils.ts    | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
index 1657472b1..eff81e632 100644
--- a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
+++ b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
@@ -8,7 +8,7 @@
 }
 
 .containerWithThumbnail {
-  background-color: transparent;
+  background-color: white;
 }
 
 .containerWithoutThumbnail {
@@ -27,6 +27,7 @@
   height: 100%;
   object-fit: contain;
   filter: grayscale(10%) contrast(95%) brightness(105%);
+  opacity: 0.3;
 }
 
 /* Quick grid overlay styles - EXACT copy from stamp */
diff --git a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
index 8edb8fa2c..7bf0dab04 100644
--- a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
@@ -181,7 +181,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
     position: 'relative' as const,
     width: '100%',
     aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
-    backgroundColor: pageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+    backgroundColor: pageThumbnail ? 'white' : 'rgba(255,255,255,0.03)',
     border: '1px solid var(--border-default, #333)',
     overflow: 'hidden' as const
   }), [pageSize, pageThumbnail]);
diff --git a/frontend/src/core/components/tools/addStamp/StampPreview.module.css b/frontend/src/core/components/tools/addStamp/StampPreview.module.css
index 779d7bf1d..7e740f6f5 100644
--- a/frontend/src/core/components/tools/addStamp/StampPreview.module.css
+++ b/frontend/src/core/components/tools/addStamp/StampPreview.module.css
@@ -8,7 +8,7 @@
 }
 
 .containerWithThumbnail {
-  background-color: transparent;
+  background-color: white;
 }
 
 .containerWithoutThumbnail {
@@ -27,6 +27,7 @@
   height: 100%;
   object-fit: contain;
   filter: grayscale(10%) contrast(95%) brightness(105%);
+  opacity: 0.3;
 }
 
 /* Stamp item styles */
diff --git a/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts b/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
index 67124482a..768df7120 100644
--- a/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
+++ b/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
@@ -209,7 +209,7 @@ export function computeStampPreviewStyle(
       position: 'relative',
       width: '100%',
       aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
-      backgroundColor: hasPageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+      backgroundColor: hasPageThumbnail ? 'white' : 'rgba(255,255,255,0.03)',
       border: '1px solid var(--border-default, #333)',
       overflow: 'hidden'
     },