refactor(web): refactor-popup-container-to-separate-file

Author: tractorss

web/src/layout/Header/DesktopHeader.tsx

@@ -21,8 +21,6 @@ import Menu from "./navbar/Menu";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
 
-import { PopupContainer } from ".";
-
 const Container = styled.div`
   display: none;
   position: absolute;
@@ -79,6 +77,15 @@ const ConnectWalletContainer = styled.div`
   }
 `;
 
+const PopupContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 30;
+`;
+
 const DesktopHeader = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);

web/src/layout/Header/index.tsx

@@ -23,15 +23,6 @@ const HeaderContainer = styled.div`
   padding: 4px 24px 8px;
 `;
 
-export const PopupContainer = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 30;
-`;
-
 const Header: React.FC = () => {
   return (
     <Container>

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

@@ -12,7 +12,6 @@ import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
 
-import { PopupContainer } from "..";
 import { useOpenContext } from "../MobileHeader";
 
 import DappList from "./DappList";
@@ -72,6 +71,15 @@ const DisconnectWalletButtonContainer = styled.div`
   align-items: center;
 `;
 
+const PopupContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 30;
+`;
+
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
 }