Skip to content

Commit 09b1a14

Browse files
kemurukemuru
committed
chore(web): code abstractions, refactors
1 parent 0d340ba commit 09b1a14

File tree

14 files changed

+96
-191
lines changed

14 files changed

+96
-191
lines changed

‎web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModeCrowdfundAppealImage from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal-dark-mode.svg";
55
import LightModeCrowdfundAppealImage from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal-light-mode.svg";
66

7-
const StyledCrowdfundAppealImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const CrowdfundAppeal: React.FC = () => {
188
const theme = useTheme();
199
const CrowdfundAppealImage = theme.name === "dark" ? DarkModeCrowdfundAppealImage : LightModeCrowdfundAppealImage;
2010

21-
return <StyledCrowdfundAppealImage as={CrowdfundAppealImage} />;
11+
return <StyledImage as={CrowdfundAppealImage} />;
2212
};
2313

2414
export default CrowdfundAppeal;

‎web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModePayoffSimulatorImage from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator-dark-mode.svg";
55
import LightModePayoffSimulatorImage from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator-light-mode.svg";
66

7-
const StyledPayoffSimulatorImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const PayoffSimulator: React.FC = () => {
188
const theme = useTheme();
199
const PayoffSimulatorImage = theme.name === "dark" ? DarkModePayoffSimulatorImage : LightModePayoffSimulatorImage;
2010

21-
return <StyledPayoffSimulatorImage as={PayoffSimulatorImage} />;
11+
return <StyledImage as={PayoffSimulatorImage} />;
2212
};
2313

2414
export default PayoffSimulator;

‎web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModeStageOneImage from "tsx:assets/svgs/mini-guides/appeal/stage-one-dark-mode.svg";
55
import LightModeStageOneImage from "tsx:assets/svgs/mini-guides/appeal/stage-one-light-mode.svg";
66

7-
const StyledStageOneImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const StageOne: React.FC = () => {
188
const theme = useTheme();
199
const StageOneImage = theme.name === "dark" ? DarkModeStageOneImage : LightModeStageOneImage;
2010

21-
return <StyledStageOneImage as={StageOneImage} />;
11+
return <StyledImage as={StageOneImage} />;
2212
};
2313

2414
export default StageOne;

‎web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModeStageTwoImage from "tsx:assets/svgs/mini-guides/appeal/stage-two-dark-mode.svg";
55
import LightModeStageTwoImage from "tsx:assets/svgs/mini-guides/appeal/stage-two-light-mode.svg";
66

7-
const StyledStageTwoImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const StageTwo: React.FC = () => {
188
const theme = useTheme();
199
const StageTwoImage = theme.name === "dark" ? DarkModeStageTwoImage : LightModeStageTwoImage;
2010

21-
return <StyledStageTwoImage as={StageTwoImage} />;
11+
return <StyledImage as={StageTwoImage} />;
2212
};
2313

2414
export default StageTwo;

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

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
11
import React, { useState } from "react";
2-
import styled from "styled-components";
3-
import Template from "../Template";
42
import CrowdfundAppeal from "./CrowdfundAppeal";
53
import PayoffSimulator from "./PayoffSimulator";
64
import StageOne from "./StageOne";
75
import StageTwo from "./StageTwo";
8-
9-
const ParagraphsContainer = styled.div`
10-
display: flex;
11-
gap: 18px;
12-
flex-direction: column;
13-
`;
14-
15-
const Title = styled.h1`
16-
margin-bottom: 0;
17-
`;
18-
19-
const LeftContentContainer = styled.div`
20-
display: flex;
21-
gap: 18px;
22-
flex-direction: column;
23-
`;
6+
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
247

258
const leftPageContents = [
269
{

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

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
44
import { Card as _Card } from "@kleros/ui-components-library";
55
import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
66
import Coherency from "pages/Dashboard/JurorInfo/Coherency";
7-
import Template from "./Template";
7+
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "./Template";
88

99
const Card = styled(_Card)`
1010
display: flex;
@@ -25,67 +25,79 @@ const Card = styled(_Card)`
2525
)}
2626
`;
2727

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-
`;
28+
const leftPageContents = [
29+
{
30+
title: "Juror Level 1: Phytagoras",
31+
paragraphs: [
32+
"Jurors are classified into distinct levels according to their performance starting from Level 1.",
33+
"Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
34+
],
35+
},
36+
{
37+
title: "Juror Level 2: Socrates",
38+
paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes."],
39+
},
40+
{
41+
title: "Juror Level 3: Plato",
42+
paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes."],
43+
},
44+
{
45+
title: "Juror Level 4: Aristotle",
46+
paragraphs: ["Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes."],
47+
},
48+
{
49+
title: "Juror Level 0: Diogenes",
50+
paragraphs: [
51+
"There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" +
52+
" with less than 50% of coherent votes.",
53+
],
54+
},
55+
];
3756

3857
const userLevelData = [
3958
{
4059
level: 1,
41-
title: "Pythagoras",
60+
title: "Phytagoras",
4261
totalCoherent: 6,
4362
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.",
4763
},
4864
{
4965
level: 2,
5066
title: "Socrates",
5167
totalCoherent: 7,
5268
totalResolvedDisputes: 10,
53-
firstParagraph: "Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes.",
5469
},
5570
{
5671
level: 3,
5772
title: "Plato",
5873
totalCoherent: 8,
5974
totalResolvedDisputes: 10,
60-
firstParagraph: "Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes.",
6175
},
6276
{
6377
level: 4,
64-
title: "Aristoteles",
78+
title: "Aristotle",
6579
totalCoherent: 9,
6680
totalResolvedDisputes: 10,
67-
firstParagraph: "Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes.",
6881
},
6982
{
7083
level: 0,
7184
title: "Diogenes",
7285
totalCoherent: 3,
7386
totalResolvedDisputes: 10,
74-
firstParagraph:
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.",
7787
},
7888
];
7989

8090
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
81-
const userData = userLevelData[currentPage - 1];
91+
const { title, paragraphs } = leftPageContents[currentPage - 1];
92+
8293
return (
8394
<LeftContentContainer>
84-
<Title>
85-
Juror Level {userData.level}: {userData.title}
86-
</Title>
87-
<label>{userData.firstParagraph}</label>
88-
{userData.secondParagraph ? <label>{userData.secondParagraph}</label> : null}
95+
<Title>{title}</Title>
96+
<ParagraphsContainer>
97+
{paragraphs.map((paragraph, index) => (
98+
<label key={index}>{paragraph}</label>
99+
))}
100+
</ParagraphsContainer>
89101
</LeftContentContainer>
90102
);
91103
};
@@ -119,7 +131,7 @@ const Level: React.FC<ILevel> = ({ toggleMiniGuide }) => {
119131
onClose={toggleMiniGuide}
120132
currentPage={currentPage}
121133
setCurrentPage={setCurrentPage}
122-
numPages={userLevelData.length}
134+
numPages={leftPageContents.length}
123135
isOnboarding={false}
124136
/>
125137
);

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme } from "styled-components";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
34
import DarkModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg";
45
import LightModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg";
56

6-
const StyledHowItWorksImage = styled.div`
7-
width: calc(260px + (379 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
8-
height: calc(200px + (291 - 200) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
`;
10-
117
const HowItWorks: React.FC = () => {
128
const theme = useTheme();
139
const HowItWorksImage = theme.name === "dark" ? DarkModeHowItWorksImage : LightModeHowItWorksImage;
1410

15-
return <StyledHowItWorksImage as={HowItWorksImage} />;
11+
return <StyledImage as={HowItWorksImage} />;
1612
};
1713

1814
export default HowItWorks;

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,21 @@
11
import React, { useState } from "react";
22
import styled from "styled-components";
3-
import Template from "../Template";
43
import HowItWorks from "./HowItWorks";
54
import PnkLogoAndTitle from "./PnkLogoAndTitle";
65
import WhatDoINeed from "./WhatDoINeed";
7-
8-
const Title = styled.h1`
9-
margin-bottom: 18px;
10-
`;
6+
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
117

128
const StyledLabel = styled.label`
139
color: ${({ theme }) => theme.primaryBlue};
1410
margin: 0;
1511
cursor: pointer;
1612
`;
1713

18-
const ParagraphsContainer = styled.div`
19-
display: flex;
20-
gap: 18px;
21-
flex-direction: column;
22-
`;
23-
2414
const LinksContainer = styled.div`
2515
display: flex;
2616
flex-direction: column;
2717
`;
2818

29-
const LeftContentContainer = styled.div`
30-
display: flex;
31-
flex-direction: column;
32-
`;
33-
3419
const leftPageContents = [
3520
{
3621
title: "Welcome to Kleros Court",

‎web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModeCourtHeaderImage from "tsx:assets/svgs/mini-guides/staking/court-header-dark-mode.svg";
55
import LightModeCourtHeaderImage from "tsx:assets/svgs/mini-guides/staking/court-header-light-mode.svg";
66

7-
const StyledCourtHeaderImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const CourtHeader: React.FC = () => {
188
const theme = useTheme();
199
const CourtHeaderImage = theme.name === "dark" ? DarkModeCourtHeaderImage : LightModeCourtHeaderImage;
2010

21-
return <StyledCourtHeaderImage as={CourtHeaderImage} />;
11+
return <StyledImage as={CourtHeaderImage} />;
2212
};
2313

2414
export default CourtHeader;

‎web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from "react";
2-
import styled, { useTheme, css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import { useTheme } from "styled-components";
3+
import { StyledImage } from "../Template";
44
import DarkModeJurorRewardsImage from "tsx:assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg";
55
import LightModeJurorRewardsImage from "tsx:assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg";
66

7-
const StyledJurorRewardsImage = styled.div`
8-
width: calc(260px + (340 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
9-
10-
${landscapeStyle(
11-
() => css`
12-
width: 389px;
13-
`
14-
)}
15-
`;
16-
177
const JurorRewards: React.FC = () => {
188
const theme = useTheme();
199
const JurorRewardsImage = theme.name === "dark" ? DarkModeJurorRewardsImage : LightModeJurorRewardsImage;
2010

21-
return <StyledJurorRewardsImage as={JurorRewardsImage} />;
11+
return <StyledImage as={JurorRewardsImage} />;
2212
};
2313

2414
export default JurorRewards;

0 commit comments

Comments
 (0)