From a3f5a66b0427ab79a4741984628c0e05a5fcecf5 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Fri, 27 Oct 2023 13:42:13 +0200 Subject: [PATCH 1/3] feat(web): create mini guides structure, create level miniguides, style mobile, link to top jurors --- web/src/components/Popup/MiniGuides/Level.tsx | 124 +++++++++++++++ .../components/Popup/MiniGuides/Template.tsx | 150 ++++++++++++++++++ .../pages/Dashboard/JurorInfo/Coherency.tsx | 30 ++-- web/src/pages/Dashboard/JurorInfo/index.tsx | 1 + .../pages/Home/TopJurors/TopJurorsHeader.tsx | 12 +- 5 files changed, 305 insertions(+), 12 deletions(-) create mode 100644 web/src/components/Popup/MiniGuides/Level.tsx create mode 100644 web/src/components/Popup/MiniGuides/Template.tsx diff --git a/web/src/components/Popup/MiniGuides/Level.tsx b/web/src/components/Popup/MiniGuides/Level.tsx new file mode 100644 index 000000000..5e9c94ad4 --- /dev/null +++ b/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 ( + + + Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title} + + + + + ); +}; + +const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + return ( + + + + + ); +}; + +interface ILevel { + toggleIsLevelMiniGuidesOpen: () => void; +} + +const Level: React.FC = ({ toggleIsLevelMiniGuidesOpen }) => { + const [currentPage, setCurrentPage] = useState(1); + + return ( +