feat(web): hide onboarding miniguide if subminiguide is open

Author: kemuru

web/src/components/Popup/MiniGuides/Appeal/index.tsx

@@ -82,6 +82,7 @@ const Appeal: React.FC<IAppeal> = ({ toggleMiniGuide }) => {
       numPages={leftPageContents.length}
       isOnboarding={false}
       canClose={true}
+      isVisible={true}
     />
   );
 };

web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx

@@ -63,6 +63,7 @@ const BinaryVoting: React.FC<IBinaryVoting> = ({ toggleMiniGuide }) => {
       numPages={leftPageContents.length}
       isOnboarding={false}
       canClose={true}
+      isVisible={true}
     />
   );
 };

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

@@ -134,6 +134,7 @@ const JurorLevels: React.FC<IJurorLevels> = ({ toggleMiniGuide }) => {
       numPages={leftPageContents.length}
       isOnboarding={false}
       canClose={true}
+      isVisible={true}
     />
   );
 };

web/src/components/Popup/MiniGuides/Onboarding/index.tsx

@@ -95,6 +95,13 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen })
   const [isAppealMiniGuideOpen, toggleAppealMiniGuide] = useToggle(false);
   const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
 
+  const isAnyMiniGuideOpen =
+    isStakingMiniGuideOpen ||
+    isBinaryVotingMiniGuideOpen ||
+    isRankedVotingMiniGuideOpen ||
+    isAppealMiniGuideOpen ||
+    isJurorLevelsMiniGuideOpen;
+
   const canCloseOnboarding =
     !isStakingMiniGuideOpen &&
     !isBinaryVotingMiniGuideOpen &&
@@ -127,6 +134,7 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen })
         numPages={leftPageContents.length}
         isOnboarding={true}
         canClose={canCloseOnboarding}
+        isVisible={!isAnyMiniGuideOpen}
       />
 
       {isStakingMiniGuideOpen && <Staking toggleMiniGuide={toggleStakingMiniGuide} />}

web/src/components/Popup/MiniGuides/RankedVoting/index.tsx

@@ -65,6 +65,7 @@ const RankedVoting: React.FC<IRankedVoting> = ({ toggleMiniGuide }) => {
       numPages={leftPageContents.length}
       isOnboarding={false}
       canClose={true}
+      isVisible={true}
     />
   );
 };

web/src/components/Popup/MiniGuides/Staking/index.tsx

@@ -88,6 +88,7 @@ const Staking: React.FC<IStaking> = ({ toggleMiniGuide }) => {
       numPages={leftPageContents.length}
       isOnboarding={false}
       canClose={true}
+      isVisible={true}
     />
   );
 };

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

@@ -6,8 +6,8 @@ import { Overlay } from "components/Overlay";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
 import { useFocusOutside } from "hooks/useFocusOutside";
 
-const Container = styled.div`
-  display: flex;
+const Container = styled.div<{ isVisible: boolean }>`
+  display: ${({ isVisible }) => (isVisible ? "flex" : "none")};
   margin: 0 auto;
   width: auto;
   z-index: 10;
@@ -161,6 +161,7 @@ interface ITemplate {
   numPages: number;
   isOnboarding: boolean;
   canClose: boolean;
+  isVisible: boolean;
 }
 
 const Template: React.FC<ITemplate> = ({
@@ -172,6 +173,7 @@ const Template: React.FC<ITemplate> = ({
   numPages,
   isOnboarding,
   canClose,
+  isVisible,
 }) => {
   const containerRef = useRef(null);
   useFocusOutside(containerRef, () => {
@@ -182,7 +184,7 @@ const Template: React.FC<ITemplate> = ({
   return (
     <>
       <Overlay />
-      <Container ref={containerRef}>
+      <Container ref={containerRef} isVisible={isVisible}>
         <LeftContainer>
           <LeftContainerHeader>
             <HowItWorks>