feat(web): create mini guides structure, create level miniguides, sty…

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

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Card as _Card } from "@kleros/ui-components-library";
+import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import Coherency from "pages/Dashboard/JurorInfo/Coherency";
+import Template from "./Template";
+
+const Card = styled(_Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 234px;
+  height: 100%;
+  gap: 28px;
+
+  padding: 24px;
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+      width: 100%;
+      height: 236px;
+    `
+  )}
+`;
+
+const Title = styled.h1`
+  margin-bottom: 0;
+`;
+
+const LeftContentContainer = styled.div`
+  display: flex;
+  gap: 18px;
+  flex-direction: column;
+`;
+
+const userLevelData = [
+  {
+    level: 1,
+    title: "Pythagoras",
+    totalCoherent: 6,
+    totalResolvedDisputes: 10,
+    firstParagraph: "Jurors are classified into distinct levels according to their performance starting from Level 1.",
+    secondParagraph:
+      "Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
+  },
+  {
+    level: 2,
+    title: "Socrates",
+    totalCoherent: 7,
+    totalResolvedDisputes: 10,
+    firstParagraph: "Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes.",
+  },
+  {
+    level: 3,
+    title: "Plato",
+    totalCoherent: 8,
+    totalResolvedDisputes: 10,
+    firstParagraph: "Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes.",
+  },
+  {
+    level: 4,
+    title: "Aristoteles",
+    totalCoherent: 9,
+    totalResolvedDisputes: 10,
+    firstParagraph: "Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes.",
+  },
+  {
+    level: 0,
+    title: "Diogenes",
+    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.",
+  },
+];
+
+const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  return (
+    <LeftContentContainer>
+      <Title>
+        Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title}
+      </Title>
+      <label>{userLevelData[currentPage - 1].firstParagraph}</label>
+      <label>{userLevelData[currentPage - 1].secondParagraph}</label>
+    </LeftContentContainer>
+  );
+};
+
+const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  return (
+    <Card>
+      <PixelArt level={userLevelData[currentPage - 1].level} width="189px" height="189px" />
+      <Coherency
+        userLevelData={userLevelData[currentPage - 1]}
+        totalCoherent={userLevelData[currentPage - 1].totalCoherent}
+        totalResolvedDisputes={userLevelData[currentPage - 1].totalResolvedDisputes}
+        isMiniGuide={true}
+      />
+    </Card>
+  );
+};
+
+interface ILevel {
+  toggleIsLevelMiniGuidesOpen: () => void;
+}
+
+const Level: React.FC<ILevel> = ({ toggleIsLevelMiniGuidesOpen }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  return (
+    <Template
+      LeftContent={<LeftContent currentPage={currentPage} />}
+      RightContent={<RightContent currentPage={currentPage} />}
+      onClose={toggleIsLevelMiniGuidesOpen}
+      currentPage={currentPage}
+      setCurrentPage={setCurrentPage}
+      numPages={userLevelData.length}
+    />
+  );
+};
+
+export default Level;

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

@@ -0,0 +1,155 @@
+import React, { Dispatch, SetStateAction, useRef } from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { CompactPagination } from "@kleros/ui-components-library";
+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;
+  margin: 0 auto;
+  width: auto;
+  z-index: 10;
+  position: fixed;
+  width: 82vw;
+  flex-direction: column;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 80vh;
+  overflow-y: auto;
+
+  ${landscapeStyle(
+    () => css`
+      overflow-y: hidden;
+      width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      flex-direction: row;
+      height: 500px;
+    `
+  )}
+`;
+
+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);
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  ${landscapeStyle(
+    () => css`
+      overflow-y: hidden;
+      width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      height: 500px;
+      min-height: auto;
+    `
+  )}
+`;
+
+const HowItWorks = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+  label {
+    color: ${({ theme }) => theme.secondaryPurple};
+  }
+`;
+
+const StyledCompactPagination = styled(CompactPagination)`
+  align-self: end;
+  justify-self: end;
+`;
+
+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;
+
+  color: ${({ theme }) => theme.primaryBlue};
+
+  ${landscapeStyle(
+    () => css`
+      z-index: 11;
+    `
+  )}
+`;
+
+const RightContainer = styled.div`
+  width: 82vw;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 17px;
+  background-color: ${({ theme }) => theme.mediumBlue};
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  height: 800px;
+
+  ${landscapeStyle(
+    () => css`
+      overflow-y: hidden;
+      width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      height: 500px;
+    `
+  )}
+`;
+
+interface ITemplate {
+  onClose: () => void;
+  LeftContent: React.ReactNode;
+  RightContent: React.ReactNode;
+  currentPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  numPages: number;
+}
+
+const Template: React.FC<ITemplate> = ({
+  onClose,
+  LeftContent,
+  RightContent,
+  currentPage,
+  setCurrentPage,
+  numPages,
+}) => {
+  const containerRef = useRef(null);
+  useFocusOutside(containerRef, () => {
+    onClose();
+  });
+  return (
+    <>
+      <Overlay />
+      <Container ref={containerRef}>
+        <LeftContainer>
+          <HowItWorks>
+            <BookOpenIcon />
+            <label> How it works </label>
+          </HowItWorks>
+          <Close onClick={onClose}>Close</Close>
+          {LeftContent}
+          <StyledCompactPagination
+            currentPage={currentPage}
+            callback={setCurrentPage}
+            numPages={numPages}
+            label={`${currentPage}/${numPages}`}
+          />
+        </LeftContainer>
+        <RightContainer>{RightContent}</RightContainer>
+      </Container>
+    </>
+  );
+};
+
+export default Template;

web/src/pages/Dashboard/JurorInfo/Coherency.tsx

@@ -24,31 +24,39 @@ const tooltipMsg =
 
 interface ICoherency {
   userLevelData: {
-    scoreRange: number[];
     level: number;
     title: string;
   };
   totalCoherent: number;
   totalResolvedDisputes: number;
+  isMiniGuide: boolean;
 }
 
-const Coherency: React.FC<ICoherency> = ({ userLevelData, totalCoherent, totalResolvedDisputes }) => {
+const Coherency: React.FC<ICoherency> = ({ userLevelData, totalCoherent, totalResolvedDisputes, isMiniGuide }) => {
+  const votesContent = (
+    <label>
+      Coherent Votes:
+      <small>
+        {" "}
+        {totalCoherent}/{totalResolvedDisputes}{" "}
+      </small>
+    </label>
+  );
+
   return (
     <Container>
       <small>{userLevelData.title}</small>
       <label>Level {userLevelData.level}</label>
       <CircularProgress
         progress={parseFloat(((totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100).toFixed(2))}
       />
-      <WithHelpTooltip place="left" {...{ tooltipMsg }}>
-        <label>
-          Coherent Votes:
-          <small>
-            {" "}
-            {totalCoherent}/{totalResolvedDisputes}{" "}
-          </small>
-        </label>
-      </WithHelpTooltip>
+      {!isMiniGuide ? (
+        <WithHelpTooltip place="left" {...{ tooltipMsg }}>
+          {votesContent}
+        </WithHelpTooltip>
+      ) : (
+        votesContent
+      )}
     </Container>
   );
 };

web/src/pages/Dashboard/JurorInfo/index.tsx

@@ -54,6 +54,7 @@ const JurorInfo: React.FC = () => {
           userLevelData={userLevelData}
           totalCoherent={totalCoherent}
           totalResolvedDisputes={totalResolvedDisputes}
+          isMiniGuide={false}
         />
         <JurorRewards />
       </Card>

web/src/pages/Home/TopJurors/TopJurorsHeader.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { useToggle } from "react-use";
 import { landscapeStyle } from "styles/landscapeStyle";
 import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
 import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
+import Level from "components/Popup/MiniGuides/Level";
 
 const Container = styled.div`
   display: flex;
@@ -101,6 +103,11 @@ const HowItWorks = styled.div`
   align-items: center;
   gap: 8px;
 
+  &,
+  & * {
+    cursor: pointer;
+  }
+
   label {
     color: ${({ theme }) => theme.primaryBlue};
   }
@@ -125,6 +132,8 @@ const coherentVotesTooltipMsg =
   "the juror voted";
 
 const TopJurorsHeader: React.FC = () => {
+  const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
+
   return (
     <Container>
       <PlaceAndTitleAndRewardsAndCoherency>
@@ -145,10 +154,11 @@ const TopJurorsHeader: React.FC = () => {
           </WithHelpTooltip>
         </Coherency>
       </PlaceAndTitleAndRewardsAndCoherency>
-      <HowItWorks>
+      <HowItWorks onClick={() => toggleIsLevelMiniGuidesOpen()}>
         <BookOpenIcon />
         <label> How it works </label>
       </HowItWorks>
+      {isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
     </Container>
   );
 };