Update App.css and PDFViewer.jsx for Enhanced Styling and Code Clarity

- Modified background color in App.css to use color-mix for improved visual effects.
- Added border and box-shadow to .react-pdf__Page class for better PDF presentation.
- Simplified conditional styling in PDFViewer.jsx for cleaner code structure.

assets/stylesheets/App.css

@@ -1693,7 +1693,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   bottom: 0;
   z-index: 2;
   backdrop-filter: blur(8px);
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: color-mix(
+    in srgb,
+    var(--layout-header-bg) 20%,
+    transparent
+  );
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1707,3 +1711,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   opacity: 0;
   pointer-events: none;
 }
+
+.react-pdf__Page {
+  border: 1px solid #000;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}

src/components/Dashboard/common/PDFViewer.jsx

@@ -158,9 +158,7 @@ const PDFViewer = ({
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            ...(activeFile
+            ...(activeFile ? { position: 'absolute', inset: 0, zIndex: 1 } : {})
-              ? { position: 'absolute', inset: 0, zIndex: 1 }
-              : {})
           }}
         >
           <LoadingPlaceholder message={'Loading PDF...'} />