fix(web): overlay issue

Author: ShubhamParkhi

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -159,8 +159,7 @@ const Template: React.FC<ITemplate> = ({
   });
 
   return (
-    <>
-      <Overlay />
+    <Overlay>
       <Container ref={containerRef} isVisible={isVisible}>
         <LeftContainer>
           <LeftContainerHeader>
@@ -187,7 +186,7 @@ const Template: React.FC<ITemplate> = ({
         </LeftContainer>
         <RightContainer>{RightContent}</RightContainer>
       </Container>
-    </>
+    </Overlay>
   );
 };
 

web/src/components/Popup/index.tsx

@@ -237,8 +237,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
   }
 
   return (
-    <>
-      <Overlay />
+    <Overlay>
       <Container ref={containerRef}>
         {popupType === PopupType.SWAP_SUCCESS && (
           <SVGContainer>
@@ -270,7 +269,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
           />
         )}
       </Container>
-    </>
+    </Overlay>
   );
 };
 export default Popup;

web/src/layout/Header/DesktopHeader.tsx

@@ -13,7 +13,6 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
-import { Overlay } from "components/Overlay";
 import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Logo from "./Logo";
@@ -95,7 +94,8 @@ const PopupContainer = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 30;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.blackLowOpacity};
 `;
 
 const DesktopHeader: React.FC = () => {
@@ -149,7 +149,6 @@ const DesktopHeader: React.FC = () => {
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}

web/src/layout/Header/navbar/index.tsx

@@ -77,7 +77,8 @@ const PopupContainer = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 30;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.blackLowOpacity};
 `;
 
 export interface ISettings {
@@ -131,7 +132,6 @@ const NavBar: React.FC = () => {
       </Wrapper>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}