Fix: Replace the red highlight at the top of the PDF document with yellow. (#15203)

### What problem does this PR solve?

Fix: Replace the red highlight at the top of the PDF document with
yellow.
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/document-preview/index.module.less

@@ -1,13 +0,0 @@
-.documentContainer {
-  width: 100%;
-  // height: calc(100vh - 284px);
-  height: calc(100vh - 180px);
-  position: relative;
-  :global(.PdfHighlighter) {
-    overflow-x: hidden;
-  }
-  :global(.Highlight--scrolledTo .Highlight__part) {
-    overflow-x: hidden;
-    background-color: rgba(255, 226, 143, 1);
-  }
-}

web/src/components/document-preview/index.tsx

@@ -15,13 +15,13 @@ type PreviewProps = {
   className?: string;
   url: string;
 };
-const Preview = ({
+const DocumentPreview = function ({
   fileType,
   className,
   highlights,
   setWidthAndHeight,
   url,
-}: PreviewProps & Partial<IProps>) => {
+}: PreviewProps & Partial<IProps>) {
   return (
     <>
       {fileType === 'pdf' && highlights && setWidthAndHeight && (
@@ -91,4 +91,4 @@ const Preview = ({
     </>
   );
 };
-export default memo(Preview);
+export default memo(DocumentPreview);

web/src/components/document-preview/pdf-preview.tsx

@@ -112,8 +112,8 @@ const PdfPreview = ({
                 screenshot,
                 isScrolledTo,
               ) => {
-                const isTextHighlight = !Boolean(
-                  highlight.content && highlight.content.image,
+                const isTextHighlight = !(
+                  highlight.content && highlight.content.image
                 );
 
                 const component = isTextHighlight ? (

web/src/global.less

@@ -48,3 +48,7 @@ body,
 ::-webkit-scrollbar-thumb:hover {
   background: #888;
 }
+
+.Highlight--scrolledTo .Highlight__part {
+  background: #ffe28f !important;
+}