Skip to content

Commit a3f5a66

Browse files
kemurukemuru
committed
feat(web): create mini guides structure, create level miniguides, style mobile, link to top jurors
1 parent 7f8be8e commit a3f5a66

File tree

5 files changed

+305
-12
lines changed

5 files changed

+305
-12
lines changed

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React, { useState } from "react";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
4+
import { Card as _Card } from "@kleros/ui-components-library";
5+
import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
6+
import Coherency from "pages/Dashboard/JurorInfo/Coherency";
7+
import Template from "./Template";
8+
9+
const Card = styled(_Card)`
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
width: 234px;
14+
height: 100%;
15+
gap: 28px;
16+
17+
padding: 24px;
18+
19+
${landscapeStyle(
20+
() => css`
21+
flex-direction: row;
22+
width: 100%;
23+
height: 236px;
24+
`
25+
)}
26+
`;
27+
28+
const Title = styled.h1`
29+
margin-bottom: 0;
30+
`;
31+
32+
const LeftContentContainer = styled.div`
33+
display: flex;
34+
gap: 18px;
35+
flex-direction: column;
36+
`;
37+
38+
const userLevelData = [
39+
{
40+
level: 1,
41+
title: "Pythagoras",
42+
totalCoherent: 6,
43+
totalResolvedDisputes: 10,
44+
firstParagraph: "Jurors are classified into distinct levels according to their performance starting from Level 1.",
45+
secondParagraph:
46+
"Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
47+
},
48+
{
49+
level: 2,
50+
title: "Socrates",
51+
totalCoherent: 7,
52+
totalResolvedDisputes: 10,
53+
firstParagraph: "Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes.",
54+
},
55+
{
56+
level: 3,
57+
title: "Plato",
58+
totalCoherent: 8,
59+
totalResolvedDisputes: 10,
60+
firstParagraph: "Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes.",
61+
},
62+
{
63+
level: 4,
64+
title: "Aristoteles",
65+
totalCoherent: 9,
66+
totalResolvedDisputes: 10,
67+
firstParagraph: "Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes.",
68+
},
69+
{
70+
level: 0,
71+
title: "Diogenes",
72+
totalCoherent: 3,
73+
totalResolvedDisputes: 10,
74+
firstParagraph:
75+
"There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated with less than 50% of coherent votes.",
76+
},
77+
];
78+
79+
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
80+
return (
81+
<LeftContentContainer>
82+
<Title>
83+
Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title}
84+
</Title>
85+
<label>{userLevelData[currentPage - 1].firstParagraph}</label>
86+
<label>{userLevelData[currentPage - 1].secondParagraph}</label>
87+
</LeftContentContainer>
88+
);
89+
};
90+
91+
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
92+
return (
93+
<Card>
94+
<PixelArt level={userLevelData[currentPage - 1].level} width="189px" height="189px" />
95+
<Coherency
96+
userLevelData={userLevelData[currentPage - 1]}
97+
totalCoherent={userLevelData[currentPage - 1].totalCoherent}
98+
totalResolvedDisputes={userLevelData[currentPage - 1].totalResolvedDisputes}
99+
isMiniGuide={true}
100+
/>
101+
</Card>
102+
);
103+
};
104+
105+
interface ILevel {
106+
toggleIsLevelMiniGuidesOpen: () => void;
107+
}
108+
109+
const Level: React.FC<ILevel> = ({ toggleIsLevelMiniGuidesOpen }) => {
110+
const [currentPage, setCurrentPage] = useState(1);
111+
112+
return (
113+
<Template
114+
LeftContent={<LeftContent currentPage={currentPage} />}
115+
RightContent={<RightContent currentPage={currentPage} />}
116+
onClose={toggleIsLevelMiniGuidesOpen}
117+
currentPage={currentPage}
118+
setCurrentPage={setCurrentPage}
119+
numPages={userLevelData.length}
120+
/>
121+
);
122+
};
123+
124+
export default Level;

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React, { Dispatch, SetStateAction } from "react";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
4+
import { CompactPagination } from "@kleros/ui-components-library";
5+
import { Overlay } from "components/Overlay";
6+
import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
7+
8+
const Container = styled.div`
9+
display: flex;
10+
margin: 0 auto;
11+
width: auto;
12+
z-index: 10;
13+
position: fixed;
14+
width: 82vw;
15+
flex-direction: column;
16+
17+
top: 50%;
18+
left: 50%;
19+
transform: translate(-50%, -50%);
20+
max-height: 80vh;
21+
overflow-y: auto;
22+
23+
${landscapeStyle(
24+
() => css`
25+
overflow-y: hidden;
26+
width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
27+
flex-direction: row;
28+
height: 500px;
29+
`
30+
)}
31+
`;
32+
33+
const LeftContainer = styled.div`
34+
display: grid;
35+
grid-template-rows: auto 1fr auto;
36+
width: 82vw;
37+
min-height: 356px;
38+
padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
39+
background-color: ${({ theme }) => theme.whiteBackground};
40+
border-top-left-radius: 3px;
41+
border-bottom-left-radius: 3px;
42+
43+
${landscapeStyle(
44+
() => css`
45+
overflow-y: hidden;
46+
width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
47+
height: 500px;
48+
min-height: auto;
49+
`
50+
)}
51+
`;
52+
53+
const HowItWorks = styled.div`
54+
display: flex;
55+
align-items: center;
56+
gap: 8px;
57+
margin-bottom: calc(32px + (64 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
58+
59+
label {
60+
color: ${({ theme }) => theme.secondaryPurple};
61+
}
62+
`;
63+
64+
const StyledCompactPagination = styled(CompactPagination)`
65+
align-self: end;
66+
justify-self: end;
67+
`;
68+
69+
const Close = styled.label`
70+
position: absolute;
71+
top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
72+
right: 17px;
73+
display: flex;
74+
align-items: flex-end;
75+
justify-content: flex-end;
76+
cursor: pointer;
77+
78+
color: ${({ theme }) => theme.primaryBlue};
79+
80+
${landscapeStyle(
81+
() => css`
82+
z-index: 11;
83+
`
84+
)}
85+
`;
86+
87+
const RightContainer = styled.div`
88+
width: 82vw;
89+
position: relative;
90+
display: flex;
91+
flex-direction: column;
92+
align-items: center;
93+
justify-content: center;
94+
padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 17px;
95+
background-color: ${({ theme }) => theme.mediumBlue};
96+
border-top-right-radius: 3px;
97+
border-bottom-right-radius: 3px;
98+
height: 800px;
99+
100+
${landscapeStyle(
101+
() => css`
102+
overflow-y: hidden;
103+
width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
104+
height: 500px;
105+
`
106+
)}
107+
`;
108+
109+
interface ITemplate {
110+
onClose: () => void;
111+
LeftContent: React.ReactNode;
112+
RightContent: React.ReactNode;
113+
currentPage: number;
114+
setCurrentPage: Dispatch<SetStateAction<number>>;
115+
numPages: number;
116+
}
117+
118+
const Template: React.FC<ITemplate> = ({
119+
onClose,
120+
LeftContent,
121+
RightContent,
122+
currentPage,
123+
setCurrentPage,
124+
numPages,
125+
}) => {
126+
return (
127+
<>
128+
<Overlay />
129+
<Container>
130+
<LeftContainer>
131+
<HowItWorks>
132+
<BookOpenIcon />
133+
<label> How it works </label>
134+
</HowItWorks>
135+
<Close onClick={onClose}>Close</Close>
136+
{LeftContent}
137+
<StyledCompactPagination
138+
currentPage={currentPage}
139+
callback={setCurrentPage}
140+
numPages={numPages}
141+
label={`${currentPage}/${numPages}`}
142+
/>
143+
</LeftContainer>
144+
<RightContainer>{RightContent}</RightContainer>
145+
</Container>
146+
</>
147+
);
148+
};
149+
150+
export default Template;

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,31 +24,39 @@ const tooltipMsg =
2424

2525
interface ICoherency {
2626
userLevelData: {
27-
scoreRange: number[];
2827
level: number;
2928
title: string;
3029
};
3130
totalCoherent: number;
3231
totalResolvedDisputes: number;
32+
isMiniGuide: boolean;
3333
}
3434

35-
const Coherency: React.FC<ICoherency> = ({ userLevelData, totalCoherent, totalResolvedDisputes }) => {
35+
const Coherency: React.FC<ICoherency> = ({ userLevelData, totalCoherent, totalResolvedDisputes, isMiniGuide }) => {
36+
const votesContent = (
37+
<label>
38+
Coherent Votes:
39+
<small>
40+
{" "}
41+
{totalCoherent}/{totalResolvedDisputes}{" "}
42+
</small>
43+
</label>
44+
);
45+
3646
return (
3747
<Container>
3848
<small>{userLevelData.title}</small>
3949
<label>Level {userLevelData.level}</label>
4050
<CircularProgress
4151
progress={parseFloat(((totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100).toFixed(2))}
4252
/>
43-
<WithHelpTooltip place="left" {...{ tooltipMsg }}>
44-
<label>
45-
Coherent Votes:
46-
<small>
47-
{" "}
48-
{totalCoherent}/{totalResolvedDisputes}{" "}
49-
</small>
50-
</label>
51-
</WithHelpTooltip>
53+
{!isMiniGuide ? (
54+
<WithHelpTooltip place="left" {...{ tooltipMsg }}>
55+
{votesContent}
56+
</WithHelpTooltip>
57+
) : (
58+
votesContent
59+
)}
5260
</Container>
5361
);
5462
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const JurorInfo: React.FC = () => {
5454
userLevelData={userLevelData}
5555
totalCoherent={totalCoherent}
5656
totalResolvedDisputes={totalResolvedDisputes}
57+
isMiniGuide={false}
5758
/>
5859
<JurorRewards />
5960
</Card>

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
3+
import { useToggle } from "react-use";
34
import { landscapeStyle } from "styles/landscapeStyle";
45
import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
56
import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
7+
import Level from "components/Popup/MiniGuides/Level";
68

79
const Container = styled.div`
810
display: flex;
@@ -101,6 +103,11 @@ const HowItWorks = styled.div`
101103
align-items: center;
102104
gap: 8px;
103105
106+
&,
107+
& * {
108+
cursor: pointer;
109+
}
110+
104111
label {
105112
color: ${({ theme }) => theme.primaryBlue};
106113
}
@@ -125,6 +132,8 @@ const coherentVotesTooltipMsg =
125132
"the juror voted";
126133

127134
const TopJurorsHeader: React.FC = () => {
135+
const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
136+
128137
return (
129138
<Container>
130139
<PlaceAndTitleAndRewardsAndCoherency>
@@ -145,10 +154,11 @@ const TopJurorsHeader: React.FC = () => {
145154
</WithHelpTooltip>
146155
</Coherency>
147156
</PlaceAndTitleAndRewardsAndCoherency>
148-
<HowItWorks>
157+
<HowItWorks onClick={() => toggleIsLevelMiniGuidesOpen()}>
149158
<BookOpenIcon />
150159
<label> How it works </label>
151160
</HowItWorks>
161+
{isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
152162
</Container>
153163
);
154164
};

0 commit comments

Comments
 (0)