feat(web): add onboarding mini guides, link it to help component, abs…

…tract better, style better

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

@@ -72,30 +72,33 @@ const userLevelData = [
     totalCoherent: 3,
     totalResolvedDisputes: 10,
     firstParagraph:
-      "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated with less than 50% of coherent votes.",
+      "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" +
+      " with less than 50% of coherent votes.",
   },
 ];
 
 const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const userData = userLevelData[currentPage - 1];
   return (
     <LeftContentContainer>
       <Title>
-        Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title}
+        Juror Level {userData.level}: {userData.title}
       </Title>
-      <label>{userLevelData[currentPage - 1].firstParagraph}</label>
-      <label>{userLevelData[currentPage - 1].secondParagraph}</label>
+      <label>{userData.firstParagraph}</label>
+      {userData.secondParagraph ? <label>{userData.secondParagraph}</label> : null}
     </LeftContentContainer>
   );
 };
 
 const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const userData = userLevelData[currentPage - 1];
   return (
     <Card>
-      <PixelArt level={userLevelData[currentPage - 1].level} width="189px" height="189px" />
+      <PixelArt level={userData.level} width="189px" height="189px" />
       <Coherency
-        userLevelData={userLevelData[currentPage - 1]}
-        totalCoherent={userLevelData[currentPage - 1].totalCoherent}
-        totalResolvedDisputes={userLevelData[currentPage - 1].totalResolvedDisputes}
+        userLevelData={userData}
+        totalCoherent={userData.totalCoherent}
+        totalResolvedDisputes={userData.totalResolvedDisputes}
         isMiniGuide={true}
       />
     </Card>
@@ -117,6 +120,7 @@ const Level: React.FC<ILevel> = ({ toggleIsLevelMiniGuidesOpen }) => {
       currentPage={currentPage}
       setCurrentPage={setCurrentPage}
       numPages={userLevelData.length}
+      isOnboarding={false}
     />
   );
 };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg";
+
+const HowItWorks: React.FC = () => {
+  return <HowItWorksImage />;
+};
+
+export default HowItWorks;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+import PnkIcon from "tsx:assets/svgs/styled/pnk.svg";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 32px;
+  align-items: center;
+`;
+
+const StyledPnkIcon = styled(PnkIcon)`
+  width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const StyledCourtLabel = styled.label`
+  font-size: 24px;
+  background: linear-gradient(
+    90deg,
+    ${({ theme }) => theme.secondaryPurple} 0%,
+    ${({ theme }) => theme.primaryBlue} 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
+
+const PnkLogoAndTitle: React.FC = () => {
+  return (
+    <Container>
+      <StyledPnkIcon />
+      <StyledCourtLabel>Court v.2</StyledCourtLabel>
+    </Container>
+  );
+};
+export default PnkLogoAndTitle;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg";
+
+const WhatDoINeed: React.FC = () => {
+  return <WhatDoINeedImage />;
+};
+
+export default WhatDoINeed;

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

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Template from "../Template";
+import HowItWorks from "./HowItWorks";
+import PnkLogoAndTitle from "./PnkLogoAndTitle";
+import WhatDoINeed from "./WhatDoINeed";
+
+const Title = styled.h1`
+  margin-bottom: 18px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryBlue};
+  margin: 0;
+  cursor: pointer;
+`;
+
+const ParagraphsContainer = styled.div`
+  display: flex;
+  gap: 18px;
+  flex-direction: column;
+`;
+
+const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LeftContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const leftPageContents = [
+  {
+    title: "Welcome to Kleros Court",
+    paragraphs: ["The decentralized arbitration service for the disputes of the new economy.", "Learn what’s new"],
+    links: [],
+  },
+  {
+    title: "What do I need to start?",
+    paragraphs: [
+      "Do you want to be a juror? If yes, you will need PNK tokens for staking on courts, and ETH for gas fees.",
+      "I don't want to be a juror. Can I still participate in the Court? Yes, sure. Users can also participate as" +
+        " contributors by helping fund appeal fees in exchange for rewards, or by submitting evidence." +
+        " In this case, you will need ETH.",
+      "I have a case that needs resolution? What do I do? It's simple. Send your case to Kleros and receive" +
+        " the resolution. You will need a few minutes to fill up the details of your case, and ETH to pay for" +
+        " Arbitration fees (It's used to pay jurors for their work).",
+    ],
+    links: [],
+  },
+  {
+    title: "Access the Mini Guides",
+    paragraphs: [],
+    links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"],
+  },
+];
+
+const rightPageComponents = [() => <PnkLogoAndTitle />, () => <WhatDoINeed />, () => <HowItWorks />];
+
+const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const { title, paragraphs, links } = leftPageContents[currentPage - 1];
+
+  return (
+    <LeftContentContainer>
+      <Title>{title}</Title>
+      <ParagraphsContainer>
+        {paragraphs.map((paragraph, index) => (
+          <label key={index}>{paragraph}</label>
+        ))}
+      </ParagraphsContainer>
+      <LinksContainer>
+        {links.map((link, index) => (
+          <StyledLabel key={index}>{link}</StyledLabel>
+        ))}
+      </LinksContainer>
+    </LeftContentContainer>
+  );
+};
+
+const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const RightPageComponent = rightPageComponents[currentPage - 1];
+
+  return <RightPageComponent />;
+};
+
+interface IOnboarding {
+  toggleIsOnboardingMiniGuidesOpen: () => void;
+}
+
+const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  return (
+    <Template
+      LeftContent={<LeftContent currentPage={currentPage} />}
+      RightContent={<RightContent currentPage={currentPage} />}
+      onClose={toggleIsOnboardingMiniGuidesOpen}
+      currentPage={currentPage}
+      setCurrentPage={setCurrentPage}
+      numPages={leftPageContents.length}
+      isOnboarding={true}
+    />
+  );
+};
+
+export default Onboarding;

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

@@ -15,7 +15,7 @@ const Container = styled.div`
   width: 82vw;
   flex-direction: column;
 
-  top: 50%;
+  top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: 80vh;
@@ -24,6 +24,7 @@ const Container = styled.div`
   ${landscapeStyle(
     () => css`
       overflow-y: hidden;
+      top: 50%;
       width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       flex-direction: row;
       height: 500px;
@@ -35,8 +36,8 @@ const LeftContainer = styled.div`
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: 82vw;
-  min-height: 356px;
   padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: 44px;
   background-color: ${({ theme }) => theme.whiteBackground};
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -46,11 +47,17 @@ const LeftContainer = styled.div`
       overflow-y: hidden;
       width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       height: 500px;
-      min-height: auto;
+      padding-bottom: 32px;
     `
   )}
 `;
 
+const LeftContainerHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
 const HowItWorks = styled.div`
   display: flex;
   align-items: center;
@@ -62,29 +69,49 @@ const HowItWorks = styled.div`
   }
 `;
 
-const StyledCompactPagination = styled(CompactPagination)`
+const MobileCompactPagination = styled(CompactPagination)`
+  display: flex;
+  align-items: flex-start;
+
+  ${landscapeStyle(
+    () => css`
+      display: none;
+    `
+  )}
+`;
+
+const DesktopCompactPagination = styled(CompactPagination)`
+  display: none;
   align-self: end;
   justify-self: end;
+
+  ${landscapeStyle(
+    () => css`
+      display: flex;
+    `
+  )}
 `;
 
 const Close = styled.label`
-  position: absolute;
-  top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  right: 17px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  color: ${({ theme }) => theme.primaryBlue};
+  display: none;
 
   ${landscapeStyle(
     () => css`
+      display: flex;
+      position: absolute;
+      top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      right: 17px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      cursor: pointer;
       z-index: 11;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      color: ${({ theme }) => theme.primaryBlue};
     `
   )}
 `;
@@ -100,7 +127,6 @@ const RightContainer = styled.div`
   background-color: ${({ theme }) => theme.mediumBlue};
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
-  height: 800px;
 
   ${landscapeStyle(
     () => css`
@@ -118,6 +144,7 @@ interface ITemplate {
   currentPage: number;
   setCurrentPage: Dispatch<SetStateAction<number>>;
   numPages: number;
+  isOnboarding: boolean;
 }
 
 const Template: React.FC<ITemplate> = ({
@@ -127,6 +154,7 @@ const Template: React.FC<ITemplate> = ({
   currentPage,
   setCurrentPage,
   numPages,
+  isOnboarding,
 }) => {
   const containerRef = useRef(null);
   useFocusOutside(containerRef, () => {
@@ -137,20 +165,30 @@ const Template: React.FC<ITemplate> = ({
       <Overlay />
       <Container ref={containerRef}>
         <LeftContainer>
-          <HowItWorks>
-            <BookOpenIcon />
-            <label> How it works </label>
-          </HowItWorks>
-          <Close onClick={onClose}>Close</Close>
+          <LeftContainerHeader>
+            <HowItWorks>
+              <BookOpenIcon />
+              <label> {isOnboarding ? "Onboarding" : "How it works"} </label>
+            </HowItWorks>
+            <MobileCompactPagination
+              currentPage={currentPage}
+              callback={setCurrentPage}
+              numPages={numPages}
+              label={`${currentPage}/${numPages}`}
+            />
+          </LeftContainerHeader>
           {LeftContent}
-          <StyledCompactPagination
+          <DesktopCompactPagination
             currentPage={currentPage}
             callback={setCurrentPage}
             numPages={numPages}
             label={`${currentPage}/${numPages}`}
           />
         </LeftContainer>
-        <RightContainer>{RightContent}</RightContainer>
+        <RightContainer>
+          <Close onClick={onClose}>Close</Close>
+          {RightContent}
+        </RightContainer>
       </Container>
     </>
   );