Skip to content

Commit 38f61bc

Browse files
kemurukemuru
committed
feat(web): mobile version top jurors + bunch of code refactors
1 parent 8e45aa7 commit 38f61bc

File tree

16 files changed

+308
-137
lines changed

16 files changed

+308
-137
lines changed

‎web/src/assets/svgs/menu-icons/help.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎web/src/pages/Dashboard/WithHelpTooltip.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import { Tooltip } from "@kleros/ui-components-library";
45
import _HelpIcon from "svgs/menu-icons/help.svg";
56

@@ -9,8 +10,17 @@ const Container = styled.div`
910
`;
1011

1112
const HelpIcon = styled(_HelpIcon)`
13+
height: 12px;
14+
width: 12px;
1215
fill: ${({ theme }) => theme.secondaryText};
13-
margin: 4px;
16+
margin: 4px 4px 6px 8px;
17+
18+
${landscapeStyle(
19+
() => css`
20+
height: 14px;
21+
width: 14px;
22+
`
23+
)}
1424
`;
1525

1626
interface IWithHelpTooltip {

‎web/src/pages/Home/TopJurors/Header/Coherency.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,46 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
4+
import { useWindowSize } from "react-use";
35
import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
46

5-
const Container = styled.div``;
7+
const Container = styled.div`
8+
label {
9+
font-size: 12px !important;
10+
&::before {
11+
content: "Votes";
12+
}
13+
}
14+
15+
${landscapeStyle(
16+
() =>
17+
css`
18+
display: flex;
19+
20+
label {
21+
font-size: 14px !important;
22+
&::before {
23+
content: "Coherent Votes";
24+
}
25+
}
26+
`
27+
)}
28+
`;
629

730
const coherentVotesTooltipMsg =
831
"This is the ratio of coherent votes made by a juror: " +
932
"the number in the left is the number of times where the juror " +
1033
"voted coherently and the number in the right is the total number of times " +
1134
"the juror voted";
1235

13-
const Coherency: React.FC = () => (
14-
<Container>
15-
<WithHelpTooltip place="top" tooltipMsg={coherentVotesTooltipMsg}>
16-
<label> Coherent Votes </label>
17-
</WithHelpTooltip>
18-
</Container>
19-
);
36+
const Coherency: React.FC = () => {
37+
const { width } = useWindowSize();
38+
return (
39+
<Container>
40+
<WithHelpTooltip place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}>
41+
<label></label>
42+
</WithHelpTooltip>
43+
</Container>
44+
);
45+
};
2046
export default Coherency;

‎web/src/pages/Home/TopJurors/Header/JurorTitle.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import styled from "styled-components";
43

54
const Container = styled.div`
65
display: flex;
7-
gap: 16px;
86
align-items: center;
7+
width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
8+
gap: 36px;
99
1010
label {
1111
font-weight: 400;
1212
font-size: 14px;
1313
line-height: 19px;
1414
color: ${({ theme }) => theme.secondaryText} !important;
1515
}
16-
17-
${landscapeStyle(
18-
() =>
19-
css`
20-
width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
21-
gap: 36px;
22-
`
23-
)}
2416
`;
2517

2618
const JurorTitle: React.FC = () => (

‎web/src/pages/Home/TopJurors/Header/Rank.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
2+
import styled from "styled-components";
43

54
const Container = styled.div`
6-
width: 50%;
5+
width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
76
87
label {
98
&::before {
10-
content: "Ranking";
11-
visibility: visible;
9+
content: "#";
1210
}
1311
}
14-
15-
${landscapeStyle(
16-
() =>
17-
css`
18-
width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
19-
20-
label {
21-
&::before {
22-
content: "#";
23-
}
24-
}
25-
`
26-
)}
2712
`;
2813

2914
const Rank: React.FC = () => (

‎web/src/pages/Home/TopJurors/Header/Rewards.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,25 @@ import { landscapeStyle } from "styles/landscapeStyle";
44
import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
55

66
const Container = styled.div`
7+
label {
8+
font-size: 12px !important;
9+
&::before {
10+
content: "Rewards";
11+
}
12+
}
13+
714
${landscapeStyle(
815
() =>
916
css`
17+
display: flex;
1018
width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
19+
20+
label {
21+
font-size: 14px !important;
22+
&::before {
23+
content: "Total Rewards";
24+
}
25+
}
1126
`
1227
)}
1328
`;
@@ -21,7 +36,7 @@ const totalRewardsTooltipMsg =
2136
const Rewards: React.FC = () => (
2237
<Container>
2338
<WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
24-
<label> Total Rewards </label>
39+
<label></label>
2540
</WithHelpTooltip>
2641
</Container>
2742
);

‎web/src/pages/Home/TopJurors/Header/index.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,49 @@ const Container = styled.div`
1111
display: flex;
1212
justify-content: space-between;
1313
width: 100%;
14-
height: 100%;
1514
background-color: ${({ theme }) => theme.lightBlue};
1615
padding: 24px;
1716
border 1px solid ${({ theme }) => theme.stroke};
1817
border-top-left-radius: 3px;
1918
border-top-right-radius: 3px;
19+
border-bottom: none;
2020
flex-wrap: wrap;
2121
2222
${landscapeStyle(
2323
() =>
2424
css`
25-
flex-wrap: nowrap;
26-
gap: 0px;
25+
border-bottom: 1px solid ${({ theme }) => theme.stroke};
2726
padding: 18.6px 32px;
2827
`
2928
)}
3029
`;
3130

3231
const PlaceAndTitleAndRewardsAndCoherency = styled.div`
33-
display: flex;
34-
flex-direction: column;
35-
gap: 8px;
32+
display: none;
3633
3734
${landscapeStyle(
3835
() =>
3936
css`
37+
display: flex;
4038
flex-direction: row;
41-
gap: 32px;
39+
gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
40+
`
41+
)}
42+
`;
43+
44+
const StyledLabel = styled.label`
45+
${landscapeStyle(
46+
() =>
47+
css`
48+
display: none;
4249
`
4350
)}
4451
`;
4552

4653
const Header: React.FC = () => {
4754
return (
4855
<Container>
56+
<StyledLabel>Ranking</StyledLabel>
4957
<PlaceAndTitleAndRewardsAndCoherency>
5058
<Rank />
5159
<JurorTitle />

‎web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Container = styled.div`
66
align-items: center;
77
label {
88
font-weight: 600;
9+
color: ${({ theme }) => theme.primaryText};
910
}
1011
flex-wrap: wrap;
1112
`;

‎web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from "react";
2+
import { landscapeStyle } from "styles/landscapeStyle";
3+
import styled, { css } from "styled-components";
4+
import Rank from "./Rank";
5+
import JurorTitle from "./JurorTitle";
6+
import Rewards from "./Rewards";
7+
import Coherency from "./Coherency";
8+
import HowItWorks from "./HowItWorks";
9+
10+
const Container = styled.div`
11+
display: none;
12+
13+
justify-content: space-between;
14+
flex-wrap: wrap;
15+
width: 100%;
16+
background-color: ${({ theme }) => theme.whiteBackground};
17+
border: 1px solid ${({ theme }) => theme.stroke};
18+
border-top: none;
19+
align-items: center;
20+
padding: 15.55px 32px;
21+
22+
label {
23+
font-size: 16px;
24+
}
25+
26+
${landscapeStyle(
27+
() => css`
28+
display: flex;
29+
`
30+
)}
31+
`;
32+
33+
const PlaceAndTitleAndRewardsAndCoherency = styled.div`
34+
display: flex;
35+
flex-direction: row;
36+
gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
37+
`;
38+
39+
interface IDesktopCard {
40+
rank: number;
41+
address: string;
42+
totalCoherent: number;
43+
totalResolvedDisputes: number;
44+
coherenceScore: number;
45+
}
46+
47+
const DesktopCard: React.FC<IDesktopCard> = ({
48+
rank,
49+
address,
50+
totalCoherent,
51+
totalResolvedDisputes,
52+
coherenceScore,
53+
}) => {
54+
return (
55+
<Container>
56+
<PlaceAndTitleAndRewardsAndCoherency>
57+
<Rank rank={rank} />
58+
<JurorTitle address={address} />
59+
<Rewards address={address} />
60+
<Coherency totalCoherent={totalCoherent} totalResolvedDisputes={totalResolvedDisputes} />
61+
</PlaceAndTitleAndRewardsAndCoherency>
62+
<HowItWorks coherenceScore={coherenceScore} />
63+
</Container>
64+
);
65+
};
66+
export default DesktopCard;

‎web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
45
import { getUserLevelData } from "utils/userLevelCalculation";
56

67
const Container = styled.div`
78
display: flex;
89
align-items: center;
9-
gap: 16px;
10+
gap: 8px;
11+
12+
label {
13+
font-size: 12px !important;
14+
15+
&::before {
16+
content: "Lv. ";
17+
}
18+
}
19+
20+
${landscapeStyle(
21+
() => css`
22+
gap: 16px;
23+
label {
24+
font-size: 16px !important;
25+
26+
&::before {
27+
content: "Level ";
28+
}
29+
}
30+
`
31+
)}
1032
`;
1133

1234
interface IHowItWorks {
@@ -19,7 +41,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ coherenceScore }) => {
1941

2042
return (
2143
<Container>
22-
<label> Level {level}</label>
44+
<label>{level}</label>
2345
<PixelArt width="32px" height="32px" level={level} />
2446
</Container>
2547
);

0 commit comments

Comments
 (0)