feat(web): add staking mini guides, howitworks component abstraction, style mobile, light & dark

Author: kemuru

web/src/assets/svgs/mini-guides/staking/court-header-dark-mode.svg

@@ -1,8 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { useToggle } from "react-use";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
-import Level from "components/Popup/MiniGuides/Level";
 
 const Container = styled.div`
   display: flex;
@@ -30,15 +28,20 @@ const StyledLabel = styled.label`
   color: ${({ theme }) => theme.primaryBlue};
 `;
 
-const HowItWorks: React.FC = () => {
-  const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
+interface IHowItWorks {
+  isMiniGuideOpen: boolean;
+  toggleMiniGuide: () => void;
+  MiniGuideComponent: React.ComponentType<{ toggleMiniGuide: () => void }>;
+}
+
+const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => {
   return (
     <>
-      <Container onClick={() => toggleIsLevelMiniGuidesOpen()}>
+      <Container onClick={toggleMiniGuide}>
         <BookOpenIcon />
         <StyledLabel> How it works </StyledLabel>
       </Container>
-      {isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
+      {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>
   );
 };

web/src/assets/svgs/mini-guides/staking/court-header-light-mode.svg

@@ -106,17 +106,17 @@ const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
 };
 
 interface ILevel {
-  toggleIsLevelMiniGuidesOpen: () => void;
+  toggleMiniGuide: () => void;
 }
 
-const Level: React.FC<ILevel> = ({ toggleIsLevelMiniGuidesOpen }) => {
+const Level: React.FC<ILevel> = ({ toggleMiniGuide }) => {
   const [currentPage, setCurrentPage] = useState(1);
 
   return (
     <Template
       LeftContent={<LeftContent currentPage={currentPage} />}
       RightContent={<RightContent currentPage={currentPage} />}
-      onClose={toggleIsLevelMiniGuidesOpen}
+      onClose={toggleMiniGuide}
       currentPage={currentPage}
       setCurrentPage={setCurrentPage}
       numPages={userLevelData.length}