fix: react warning

packages/app/src/components/header/header.tsx

@@ -148,7 +148,6 @@ export const Header = ({ children }: PropsWithChildren<{}>) => {
   const router = useRouter();
   const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
   const isTrash = !!currentPageMeta?.trash;
-  console.log('isTrash', isTrash);
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning

packages/app/src/components/header/page-header.tsx

@@ -52,7 +52,7 @@ export const PageHeader = () => {
           <StyledSearchArrowWrapper>
             <IconButton
               onClick={() => {
-                triggerQuickSearchModal(true);
+                triggerQuickSearchModal();
               }}
             >
               <MiddleIconArrowDownSmallIcon />

packages/app/src/ui/button/styles.ts

@@ -3,7 +3,20 @@ import { CSSProperties } from 'react';
 import { ButtonProps } from '@/ui/button/interface';
 import { getSize, getButtonColors } from './utils';
 
-export const StyledIconButton = styled.button<{
+export const StyledIconButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+    ].includes(prop);
+  },
+})<{
   width: number;
   height: number;
   borderRadius: number;
@@ -55,7 +68,13 @@ export const StyledIconButton = styled.button<{
     };
   }
 );
-export const StyledButton = styled.button<
+export const StyledButton = styled('button', {
+  shouldForwardProp: prop => {
+    return !['hoverBackground', 'hoverColor', 'hoverStyle', 'type'].includes(
+      prop
+    );
+  },
+})<
   Pick<
     ButtonProps,
     | 'size'

packages/app/src/ui/layout/wrapper.tsx

@@ -12,7 +12,19 @@ export type WrapperProps = {
 };
 
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
-export const Wrapper = styled.div<WrapperProps>(
+export const Wrapper = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'display',
+      'justifyContent',
+      'alignItems',
+      'flexWrap',
+      'flexDirection',
+      'flexShrink',
+      'flexGrow',
+    ].includes(prop);
+  },
+})<WrapperProps>(
   ({
     display = 'flex',
     justifyContent = 'flex-start',

packages/app/src/ui/menu/styles.ts

@@ -24,9 +24,8 @@ export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
 });
 
 export const StyledMenuItem = styled.button<{
-  popperVisible?: boolean;
   isDir?: boolean;
-}>(({ theme, popperVisible, isDir = false }) => {
+}>(({ theme, isDir = false }) => {
   return {
     width: '100%',
     borderRadius: '5px',
@@ -36,12 +35,8 @@ export const StyledMenuItem = styled.button<{
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
-    color: popperVisible
-      ? theme.colors.primaryColor
-      : theme.colors.popoverColor,
-    backgroundColor: popperVisible
-      ? theme.colors.hoverBackground
-      : 'transparent',
+    color: theme.colors.popoverColor,
+    backgroundColor: 'transparent',
 
     ':hover': {
       color: theme.colors.primaryColor,

packages/app/src/ui/popper/Popper.tsx

@@ -117,7 +117,6 @@ export const Popper = ({
           onPointerEnter: onPointerEnterHandler,
           onPointerLeave: onPointerLeaveHandler,
           className: anchorClassName,
-          popperVisible: visible,
         })}
         {content && (
           <BasicStyledPopper