refactor: find in page (#7086)

- refactor rxjs data flow
- use canvas text to mitigate searchable search box input text issue

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
 export const widthVar = createVar('widthVar');
 export const heightVar = createVar('heightVar');
 export const minHeightVar = createVar('minHeightVar');
@@ -17,6 +17,7 @@ export const modalContentWrapper = style({
   justifyContent: 'center',
   zIndex: cssVar('zIndexModal'),
 });
+
 export const modalContent = style({
   vars: {
     [widthVar]: '',
@@ -82,3 +83,11 @@ export const confirmModalContainer = style({
   display: 'flex',
   flexDirection: 'column',
 });
+
+globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
+  pointerEvents: 'none',
+});
+
+globalStyle(`[data-modal="false"] ${modalContent}`, {
+  pointerEvents: 'auto',
+});