From 2fba2af126331fc6b94e4e543d26a7db60d843d4 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Sat, 18 Apr 2026 10:46:09 +0500
Subject: [PATCH] web: fix pdf viewer's search dialog unreadable UI in dark
 mode (#9720)

* web: fix pdf viewer's search dialog unreadable UI in dark mode
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* web: fix pdf search dialog ui

---------

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
---
 apps/web/src/components/pdf-preview/index.tsx | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/pdf-preview/index.tsx b/apps/web/src/components/pdf-preview/index.tsx
index 4d71c7e3d..9261f518a 100644
--- a/apps/web/src/components/pdf-preview/index.tsx
+++ b/apps/web/src/components/pdf-preview/index.tsx
@@ -22,6 +22,7 @@ import "@react-pdf-viewer/core/lib/styles/index.css";
 import { ToolbarSlot, toolbarPlugin } from "@react-pdf-viewer/toolbar";
 import { Button, Flex, Text } from "@theme-ui/components";
 import { searchPlugin } from "@react-pdf-viewer/search";
+import "@react-pdf-viewer/search/lib/styles/index.css";
 import {
   ChevronDown,
   ChevronUp,
@@ -80,12 +81,30 @@ export function PdfPreview(props: PdfPreviewProps) {
 
                     ".rpv-search__popover label, .rpv-search__popover span": {
                       fontFamily: "body",
-                      fontSize: "body"
+                      fontSize: "body",
+                      color: "paragraph"
                     },
 
                     ".rpv-core__popover-body, .rpv-core__arrow": {
                       bg: "background",
-                      borderColor: "border"
+                      borderColor: "border",
+                      color: "paragraph"
+                    },
+
+                    ".rpv-search__popover .rpv-core__minimal-button": {
+                      color: "icon",
+                      ":hover": {
+                        bg: "hover"
+                      }
+                    },
+
+                    ".rpv-search__popover .rpv-core__button": {
+                      bg: "background-secondary",
+                      color: "paragraph",
+                      border: "none",
+                      ":hover": {
+                        bg: "hover"
+                      }
                     },
 
                     ".rpv-search__popover-label-checkbox": {
@@ -112,6 +131,10 @@ export function PdfPreview(props: PdfPreviewProps) {
                       ":hover:not(:focus)": {
                         outline: "1.5px solid var(--accent)"
                       }
+                    },
+
+                    ".rpv-search__popover .rpv-core__textbox": {
+                      width: "85% !important"
                     }
                   }}
                 >