Merge pull request #1649 from ShubhamParkhi/dev

fix(web): open menu settings onClick of acc. info & overlay fix

Author: alcercu

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/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";
@@ -22,6 +21,7 @@ import Explore from "./navbar/Explore";
 import Menu from "./navbar/Menu";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
+import { useAccount } from "wagmi";
 
 const Container = styled.div`
   display: none;
@@ -73,10 +73,19 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
   fill: ${({ theme }) => theme.white} !important;
 `;
 
-const ConnectWalletContainer = styled.div`
+const ConnectWalletContainer = styled.div<{ isConnected: boolean }>`
   label {
     color: ${({ theme }) => theme.white};
   }
+
+  ${({ isConnected }) =>
+    isConnected &&
+    css`
+      cursor: pointer;
+      & > * {
+        pointer-events: none;
+      }
+    `}
 `;
 
 const PopupContainer = styled.div`
@@ -85,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 = () => {
@@ -95,6 +105,7 @@ const DesktopHeader: React.FC = () => {
   const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
   const [initialTab, setInitialTab] = useState<number>(0);
   const location = useLocation();
+  const { isConnected } = useAccount();
 
   const initializeFragmentURL = useCallback(() => {
     const hash = location.hash;
@@ -130,15 +141,14 @@ const DesktopHeader: React.FC = () => {
         </MiddleSide>
 
         <RightSide>
-          <ConnectWalletContainer>
+          <ConnectWalletContainer isConnected={isConnected} onClick={isConnected ? toggleIsSettingsOpen : undefined}>
             <ConnectWallet />
           </ConnectWalletContainer>
           <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
         </RightSide>
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}

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

@@ -9,8 +9,6 @@ import { Tabs } from "@kleros/ui-components-library";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { Overlay } from "components/Overlay";
-
 import { ISettings } from "../../index";
 
 import General from "./General";
@@ -27,7 +25,6 @@ const Container = styled.div`
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
-  background-color: ${({ theme }) => theme.whiteBackground};
   border: 1px solid ${({ theme }) => theme.stroke};
   border-radius: 3px;
   overflow-y: auto;
@@ -85,20 +82,17 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
   });
 
   return (
-    <>
-      <Overlay />
-      <Container ref={containerRef}>
-        <StyledSettingsText>Settings</StyledSettingsText>
-        <StyledTabs
-          currentValue={currentTab}
-          items={TABS}
-          callback={(n: number) => {
-            setCurrentTab(n);
-          }}
-        />
-        {currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
-      </Container>
-    </>
+    <Container ref={containerRef}>
+      <StyledSettingsText>Settings</StyledSettingsText>
+      <StyledTabs
+        currentValue={currentTab}
+        items={TABS}
+        callback={(n: number) => {
+          setCurrentTab(n);
+        }}
+      />
+      {currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
+    </Container>
   );
 };
 

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

@@ -28,7 +28,7 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 30;
+  z-index: 1;
 `;
 
 const StyledOverlay = styled(Overlay)`
@@ -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 {
@@ -104,34 +105,34 @@ 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>
-          <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
           {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}