fix(web): overlay issue and stying

Author: ShubhamParkhi

web/src/components/Overlay.tsx

@@ -7,5 +7,5 @@ export const Overlay = styled.div`
   width: 100vw;
   height: 100vh;
   background-color: ${({ theme }) => theme.blackLowOpacity};
-  z-index: 1;
+  z-index: 30;
 `;

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

@@ -49,7 +49,7 @@ const Container = styled.div`
 
   ${landscapeStyle(
     () => css`
-      margin-top: 94px;
+      margin-top: 64px;
       top: 0;
       left: 0;
       right: auto;

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

@@ -38,7 +38,7 @@ const Container = styled.div`
 
   ${landscapeStyle(
     () => css`
-      margin-top: 94px;
+      margin-top: 64px;
       width: 260px;
       top: 0;
       right: 0;

web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx

@@ -51,7 +51,7 @@ const StyledA = styled.a`
   display: flex;
   justify-content: center;
   gap: 4px;
-  margin-top: 94px;
+  margin-top: 64px;
   margin-bottom: 110px;
   font-size: 16px;
 

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

@@ -31,7 +31,7 @@ const Container = styled.div`
 
   ${landscapeStyle(
     () => css`
-      margin-top: 94px;
+      margin-top: 64px;
       top: 0;
       right: 0;
       left: auto;

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

@@ -105,30 +105,31 @@ const NavBar: React.FC = () => {
   return (
     <>
       <Wrapper {...{ isOpen }}>
-        <StyledOverlay />
-        <Container {...{ isOpen }}>
-          <LightButton
-            text="Kleros Solutions"
-            onClick={() => {
-              toggleIsDappListOpen();
-            }}
-            Icon={KlerosSolutionsIcon}
-          />
-          <hr />
-          <Explore />
-          <hr />
-          <WalletContainer>
-            <ConnectWallet />
-            {isConnected && (
-              <DisconnectWalletButtonContainer>
-                <DisconnectWalletButton />
-              </DisconnectWalletButtonContainer>
-            )}
-          </WalletContainer>
-          <hr />
-          <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
-          <br />
-        </Container>
+        <StyledOverlay>
+          <Container {...{ isOpen }}>
+            <LightButton
+              text="Kleros Solutions"
+              onClick={() => {
+                toggleIsDappListOpen();
+              }}
+              Icon={KlerosSolutionsIcon}
+            />
+            <hr />
+            <Explore />
+            <hr />
+            <WalletContainer>
+              <ConnectWallet />
+              {isConnected && (
+                <DisconnectWalletButtonContainer>
+                  <DisconnectWalletButton />
+                </DisconnectWalletButtonContainer>
+              )}
+            </WalletContainer>
+            <hr />
+            <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
+            <br />
+          </Container>
+        </StyledOverlay>
       </Wrapper>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>