Skip to content

Commit 4543d99

Browse files
kemurukemuru
committed
feat(web): add onboarding mini guides, link it to help component, abstract better, style better
1 parent d164898 commit 4543d99

File tree

10 files changed

+372
-47
lines changed

10 files changed

+372
-47
lines changed

‎web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg‎

Lines changed: 81 additions & 0 deletions
Loading

‎web/src/assets/svgs/styled/pnk.svg‎

Lines changed: 3 additions & 3 deletions
Loading

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,30 +72,33 @@ const userLevelData = [
7272
totalCoherent: 3,
7373
totalResolvedDisputes: 10,
7474
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.",
75+
"There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" +
76+
" with less than 50% of coherent votes.",
7677
},
7778
];
7879

7980
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
81+
const userData = userLevelData[currentPage - 1];
8082
return (
8183
<LeftContentContainer>
8284
<Title>
83-
Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title}
85+
Juror Level {userData.level}: {userData.title}
8486
</Title>
85-
<label>{userLevelData[currentPage - 1].firstParagraph}</label>
86-
<label>{userLevelData[currentPage - 1].secondParagraph}</label>
87+
<label>{userData.firstParagraph}</label>
88+
{userData.secondParagraph ? <label>{userData.secondParagraph}</label> : null}
8789
</LeftContentContainer>
8890
);
8991
};
9092

9193
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
94+
const userData = userLevelData[currentPage - 1];
9295
return (
9396
<Card>
94-
<PixelArt level={userLevelData[currentPage - 1].level} width="189px" height="189px" />
97+
<PixelArt level={userData.level} width="189px" height="189px" />
9598
<Coherency
96-
userLevelData={userLevelData[currentPage - 1]}
97-
totalCoherent={userLevelData[currentPage - 1].totalCoherent}
98-
totalResolvedDisputes={userLevelData[currentPage - 1].totalResolvedDisputes}
99+
userLevelData={userData}
100+
totalCoherent={userData.totalCoherent}
101+
totalResolvedDisputes={userData.totalResolvedDisputes}
99102
isMiniGuide={true}
100103
/>
101104
</Card>
@@ -117,6 +120,7 @@ const Level: React.FC<ILevel> = ({ toggleIsLevelMiniGuidesOpen }) => {
117120
currentPage={currentPage}
118121
setCurrentPage={setCurrentPage}
119122
numPages={userLevelData.length}
123+
isOnboarding={false}
120124
/>
121125
);
122126
};

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg";
3+
4+
const HowItWorks: React.FC = () => {
5+
return <HowItWorksImage />;
6+
};
7+
8+
export default HowItWorks;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import PnkIcon from "tsx:assets/svgs/styled/pnk.svg";
4+
5+
const Container = styled.div`
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
gap: 32px;
10+
align-items: center;
11+
`;
12+
13+
const StyledPnkIcon = styled(PnkIcon)`
14+
width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
15+
height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
16+
`;
17+
18+
const StyledCourtLabel = styled.label`
19+
font-size: 24px;
20+
background: linear-gradient(
21+
90deg,
22+
${({ theme }) => theme.secondaryPurple} 0%,
23+
${({ theme }) => theme.primaryBlue} 100%
24+
);
25+
background-clip: text;
26+
-webkit-background-clip: text;
27+
-webkit-text-fill-color: transparent;
28+
`;
29+
30+
const PnkLogoAndTitle: React.FC = () => {
31+
return (
32+
<Container>
33+
<StyledPnkIcon />
34+
<StyledCourtLabel>Court v.2</StyledCourtLabel>
35+
</Container>
36+
);
37+
};
38+
export default PnkLogoAndTitle;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg";
3+
4+
const WhatDoINeed: React.FC = () => {
5+
return <WhatDoINeedImage />;
6+
};
7+
8+
export default WhatDoINeed;

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
import Template from "../Template";
4+
import HowItWorks from "./HowItWorks";
5+
import PnkLogoAndTitle from "./PnkLogoAndTitle";
6+
import WhatDoINeed from "./WhatDoINeed";
7+
8+
const Title = styled.h1`
9+
margin-bottom: 18px;
10+
`;
11+
12+
const StyledLabel = styled.label`
13+
color: ${({ theme }) => theme.primaryBlue};
14+
margin: 0;
15+
cursor: pointer;
16+
`;
17+
18+
const ParagraphsContainer = styled.div`
19+
display: flex;
20+
gap: 18px;
21+
flex-direction: column;
22+
`;
23+
24+
const LinksContainer = styled.div`
25+
display: flex;
26+
flex-direction: column;
27+
`;
28+
29+
const LeftContentContainer = styled.div`
30+
display: flex;
31+
flex-direction: column;
32+
`;
33+
34+
const leftPageContents = [
35+
{
36+
title: "Welcome to Kleros Court",
37+
paragraphs: ["The decentralized arbitration service for the disputes of the new economy.", "Learn what’s new"],
38+
links: [],
39+
},
40+
{
41+
title: "What do I need to start?",
42+
paragraphs: [
43+
"Do you want to be a juror? If yes, you will need PNK tokens for staking on courts, and ETH for gas fees.",
44+
"I don't want to be a juror. Can I still participate in the Court? Yes, sure. Users can also participate as" +
45+
" contributors by helping fund appeal fees in exchange for rewards, or by submitting evidence." +
46+
" In this case, you will need ETH.",
47+
"I have a case that needs resolution? What do I do? It's simple. Send your case to Kleros and receive" +
48+
" the resolution. You will need a few minutes to fill up the details of your case, and ETH to pay for" +
49+
" Arbitration fees (It's used to pay jurors for their work).",
50+
],
51+
links: [],
52+
},
53+
{
54+
title: "Access the Mini Guides",
55+
paragraphs: [],
56+
links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"],
57+
},
58+
];
59+
60+
const rightPageComponents = [() => <PnkLogoAndTitle />, () => <WhatDoINeed />, () => <HowItWorks />];
61+
62+
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
63+
const { title, paragraphs, links } = leftPageContents[currentPage - 1];
64+
65+
return (
66+
<LeftContentContainer>
67+
<Title>{title}</Title>
68+
<ParagraphsContainer>
69+
{paragraphs.map((paragraph, index) => (
70+
<label key={index}>{paragraph}</label>
71+
))}
72+
</ParagraphsContainer>
73+
<LinksContainer>
74+
{links.map((link, index) => (
75+
<StyledLabel key={index}>{link}</StyledLabel>
76+
))}
77+
</LinksContainer>
78+
</LeftContentContainer>
79+
);
80+
};
81+
82+
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
83+
const RightPageComponent = rightPageComponents[currentPage - 1];
84+
85+
return <RightPageComponent />;
86+
};
87+
88+
interface IOnboarding {
89+
toggleIsOnboardingMiniGuidesOpen: () => void;
90+
}
91+
92+
const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen }) => {
93+
const [currentPage, setCurrentPage] = useState(1);
94+
95+
return (
96+
<Template
97+
LeftContent={<LeftContent currentPage={currentPage} />}
98+
RightContent={<RightContent currentPage={currentPage} />}
99+
onClose={toggleIsOnboardingMiniGuidesOpen}
100+
currentPage={currentPage}
101+
setCurrentPage={setCurrentPage}
102+
numPages={leftPageContents.length}
103+
isOnboarding={true}
104+
/>
105+
);
106+
};
107+
108+
export default Onboarding;

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

Lines changed: 63 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Container = styled.div`
1515
width: 82vw;
1616
flex-direction: column;
1717
18-
top: 50%;
18+
top: 45%;
1919
left: 50%;
2020
transform: translate(-50%, -50%);
2121
max-height: 80vh;
@@ -24,6 +24,7 @@ const Container = styled.div`
2424
${landscapeStyle(
2525
() => css`
2626
overflow-y: hidden;
27+
top: 50%;
2728
width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2829
flex-direction: row;
2930
height: 500px;
@@ -35,8 +36,8 @@ const LeftContainer = styled.div`
3536
display: grid;
3637
grid-template-rows: auto 1fr auto;
3738
width: 82vw;
38-
min-height: 356px;
3939
padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
40+
padding-bottom: 44px;
4041
background-color: ${({ theme }) => theme.whiteBackground};
4142
border-top-left-radius: 3px;
4243
border-bottom-left-radius: 3px;
@@ -46,11 +47,17 @@ const LeftContainer = styled.div`
4647
overflow-y: hidden;
4748
width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
4849
height: 500px;
49-
min-height: auto;
50+
padding-bottom: 32px;
5051
`
5152
)}
5253
`;
5354

55+
const LeftContainerHeader = styled.div`
56+
display: flex;
57+
flex-direction: row;
58+
justify-content: space-between;
59+
`;
60+
5461
const HowItWorks = styled.div`
5562
display: flex;
5663
align-items: center;
@@ -62,29 +69,49 @@ const HowItWorks = styled.div`
6269
}
6370
`;
6471

65-
const StyledCompactPagination = styled(CompactPagination)`
72+
const MobileCompactPagination = styled(CompactPagination)`
73+
display: flex;
74+
align-items: flex-start;
75+
76+
${landscapeStyle(
77+
() => css`
78+
display: none;
79+
`
80+
)}
81+
`;
82+
83+
const DesktopCompactPagination = styled(CompactPagination)`
84+
display: none;
6685
align-self: end;
6786
justify-self: end;
87+
88+
${landscapeStyle(
89+
() => css`
90+
display: flex;
91+
`
92+
)}
6893
`;
6994

7095
const Close = styled.label`
71-
position: absolute;
72-
top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
73-
right: 17px;
74-
display: flex;
75-
align-items: flex-end;
76-
justify-content: flex-end;
77-
cursor: pointer;
78-
79-
&:hover {
80-
text-decoration: underline;
81-
}
82-
83-
color: ${({ theme }) => theme.primaryBlue};
96+
display: none;
8497
8598
${landscapeStyle(
8699
() => css`
100+
display: flex;
101+
position: absolute;
102+
top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
103+
right: 17px;
104+
display: flex;
105+
align-items: flex-end;
106+
justify-content: flex-end;
107+
cursor: pointer;
87108
z-index: 11;
109+
110+
&:hover {
111+
text-decoration: underline;
112+
}
113+
114+
color: ${({ theme }) => theme.primaryBlue};
88115
`
89116
)}
90117
`;
@@ -100,7 +127,6 @@ const RightContainer = styled.div`
100127
background-color: ${({ theme }) => theme.mediumBlue};
101128
border-top-right-radius: 3px;
102129
border-bottom-right-radius: 3px;
103-
height: 800px;
104130
105131
${landscapeStyle(
106132
() => css`
@@ -118,6 +144,7 @@ interface ITemplate {
118144
currentPage: number;
119145
setCurrentPage: Dispatch<SetStateAction<number>>;
120146
numPages: number;
147+
isOnboarding: boolean;
121148
}
122149

123150
const Template: React.FC<ITemplate> = ({
@@ -127,6 +154,7 @@ const Template: React.FC<ITemplate> = ({
127154
currentPage,
128155
setCurrentPage,
129156
numPages,
157+
isOnboarding,
130158
}) => {
131159
const containerRef = useRef(null);
132160
useFocusOutside(containerRef, () => {
@@ -137,20 +165,30 @@ const Template: React.FC<ITemplate> = ({
137165
<Overlay />
138166
<Container ref={containerRef}>
139167
<LeftContainer>
140-
<HowItWorks>
141-
<BookOpenIcon />
142-
<label> How it works </label>
143-
</HowItWorks>
144-
<Close onClick={onClose}>Close</Close>
168+
<LeftContainerHeader>
169+
<HowItWorks>
170+
<BookOpenIcon />
171+
<label> {isOnboarding ? "Onboarding" : "How it works"} </label>
172+
</HowItWorks>
173+
<MobileCompactPagination
174+
currentPage={currentPage}
175+
callback={setCurrentPage}
176+
numPages={numPages}
177+
label={`${currentPage}/${numPages}`}
178+
/>
179+
</LeftContainerHeader>
145180
{LeftContent}
146-
<StyledCompactPagination
181+
<DesktopCompactPagination
147182
currentPage={currentPage}
148183
callback={setCurrentPage}
149184
numPages={numPages}
150185
label={`${currentPage}/${numPages}`}
151186
/>
152187
</LeftContainer>
153-
<RightContainer>{RightContent}</RightContainer>
188+
<RightContainer>
189+
<Close onClick={onClose}>Close</Close>
190+
{RightContent}
191+
</RightContainer>
154192
</Container>
155193
</>
156194
);

0 commit comments

Comments
 (0)