fix: overlays and settings having double overlay

Author: kemuru

web/src/layout/Header/DesktopHeader.tsx

@@ -13,7 +13,6 @@ import Explore from "./navbar/Explore";
 import Menu from "./navbar/Menu";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
-import { Overlay } from "components/Overlay";
 import { PopupContainer } from ".";
 
 const Container = styled.div`
@@ -112,7 +111,6 @@ const DesktopHeader = () => {
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}

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

@@ -11,6 +11,7 @@ import Court from "svgs/icons/kleros.svg";
 import POH from "svgs/icons/poh-image.png";
 import Vea from "svgs/icons/vea.svg";
 import Product from "./Product";
+import { Overlay } from "components/Overlay";
 
 const Header = styled.h1`
   padding-top: 32px;
@@ -141,14 +142,17 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   useClickAway(containerRef, () => toggleIsDappListOpen());
 
   return (
-    <Container ref={containerRef}>
-      <Header>Kleros Solutions</Header>
-      <ItemsDiv>
-        {ITEMS.map((item) => {
-          return <Product {...item} key={item.text} />;
-        })}
-      </ItemsDiv>
-    </Container>
+    <>
+      <Overlay />
+      <Container ref={containerRef}>
+        <Header>Kleros Solutions</Header>
+        <ItemsDiv>
+          {ITEMS.map((item) => {
+            return <Product {...item} key={item.text} />;
+          })}
+        </ItemsDiv>
+      </Container>
+    </>
   );
 };
 export default DappList;

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -9,6 +9,7 @@ import Faq from "svgs/menu-icons/help.svg";
 import Telegram from "svgs/socialmedia/telegram.svg";
 import { IHelp } from "..";
 import Debug from "../Debug";
+import { Overlay } from "components/Overlay";
 
 const Container = styled.div`
   display: flex;
@@ -99,6 +100,7 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
 
   return (
     <>
+      <Overlay />
       <Container ref={containerRef}>
         {ITEMS.map((item, index) => (
           <ListItem href={item.url} key={item.text} target="_blank">

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

@@ -8,7 +8,6 @@ import DappList from "./DappList";
 import Explore from "./Explore";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
-import { Overlay } from "components/Overlay";
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 import Menu from "./Menu";
 import Help from "./Menu/Help";
@@ -99,7 +98,6 @@ const NavBar: React.FC = () => {
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}