Skip to content

Commit d4f554b

Browse files
jaybuidljaybuidl
committed
Merge branch 'feat(web)/mobile-view-top-jurors-and-some-refactors' of github.com:kleros/kleros-v2 into feat(web)/mobile-view-top-jurors-and-some-refactors
2 parents f2803cb + e5ded92 commit d4f554b

File tree

12 files changed

+72
-104
lines changed

12 files changed

+72
-104
lines changed

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

+13-15
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,20 @@ import { useWindowSize } from "react-use";
55
import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
66

77
const Container = styled.div`
8-
label {
9-
font-size: 12px !important;
10-
&::before {
11-
content: "Votes";
12-
}
8+
display: flex;
9+
font-size: 12px !important;
10+
&::before {
11+
content: "Votes";
1312
}
13+
color: ${({ theme }) => theme.secondaryText};
14+
align-items: center;
1415
1516
${landscapeStyle(
1617
() =>
1718
css`
18-
display: flex;
19-
20-
label {
21-
font-size: 14px !important;
22-
&::before {
23-
content: "Coherent Votes";
24-
}
19+
font-size: 14px !important;
20+
&::before {
21+
content: "Coherent Votes";
2522
}
2623
`
2724
)}
@@ -37,9 +34,10 @@ const Coherency: React.FC = () => {
3734
const { width } = useWindowSize();
3835
return (
3936
<Container>
40-
<WithHelpTooltip place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}>
41-
<label></label>
42-
</WithHelpTooltip>
37+
<WithHelpTooltip
38+
place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"}
39+
tooltipMsg={coherentVotesTooltipMsg}
40+
></WithHelpTooltip>
4341
</Container>
4442
);
4543
};

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,24 @@ const Container = styled.div`
1414
cursor: pointer;
1515
}
1616
17-
label {
18-
color: ${({ theme }) => theme.primaryBlue};
19-
}
20-
2117
svg {
2218
path {
2319
fill: ${({ theme }) => theme.primaryBlue};
2420
}
2521
}
2622
`;
2723

24+
const StyledLabel = styled.label`
25+
color: ${({ theme }) => theme.primaryBlue};
26+
`;
27+
2828
const HowItWorks: React.FC = () => {
2929
const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
3030
return (
3131
<>
3232
<Container onClick={() => toggleIsLevelMiniGuidesOpen()}>
3333
<BookOpenIcon />
34-
<label> How it works </label>
34+
<StyledLabel> How it works </StyledLabel>
3535
</Container>
3636
{isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
3737
</>

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

+2-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,9 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
const Container = styled.div`
5-
display: flex;
6-
align-items: center;
4+
const StyledLabel = styled.label`
75
width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
8-
gap: 36px;
9-
10-
label {
11-
font-weight: 400;
12-
font-size: 14px;
13-
line-height: 19px;
14-
color: ${({ theme }) => theme.secondaryText} !important;
15-
}
166
`;
177

18-
const JurorTitle: React.FC = () => (
19-
<Container>
20-
<label>Juror</label>
21-
</Container>
22-
);
8+
const JurorTitle: React.FC = () => <StyledLabel>Juror</StyledLabel>;
239
export default JurorTitle;

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

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
const Container = styled.div`
4+
const StyledLabel = styled.label`
55
width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
6-
7-
label {
8-
&::before {
9-
content: "#";
10-
}
11-
}
126
`;
137

14-
const Rank: React.FC = () => (
15-
<Container>
16-
<label></label>
17-
</Container>
18-
);
8+
const Rank: React.FC = () => <StyledLabel>#</StyledLabel>;
9+
1910
export default Rank;

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

+11-14
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,22 @@ 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-
}
7+
display: flex;
8+
font-size: 12px !important;
9+
&::before {
10+
content: "Rewards";
1211
}
12+
color: ${({ theme }) => theme.secondaryText};
13+
align-items: center;
1314
1415
${landscapeStyle(
1516
() =>
1617
css`
17-
display: flex;
1818
width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
1919
20-
label {
21-
font-size: 14px !important;
22-
&::before {
23-
content: "Total Rewards";
24-
}
20+
font-size: 14px !important;
21+
&::before {
22+
content: "Total Rewards";
2523
}
2624
`
2725
)}
@@ -35,9 +33,8 @@ const totalRewardsTooltipMsg =
3533

3634
const Rewards: React.FC = () => (
3735
<Container>
38-
<WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
39-
<label></label>
40-
</WithHelpTooltip>
36+
<WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}></WithHelpTooltip>
4137
</Container>
4238
);
39+
4340
export default Rewards;

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

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const PlaceAndTitleAndRewardsAndCoherency = styled.div`
3737
display: flex;
3838
flex-direction: row;
3939
gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
40+
align-items: center;
4041
`
4142
)}
4243
`;

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

+4-9
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import styled from "styled-components";
44
const Container = styled.div`
55
display: flex;
66
align-items: center;
7-
label {
8-
font-weight: 600;
9-
color: ${({ theme }) => theme.primaryText};
10-
}
7+
font-weight: 600;
8+
color: ${({ theme }) => theme.primaryText};
119
flex-wrap: wrap;
1210
`;
1311

@@ -19,10 +17,7 @@ interface ICoherency {
1917
const Coherency: React.FC<ICoherency> = ({ totalCoherent, totalResolvedDisputes }) => {
2018
const coherenceRatio = `${totalCoherent}/${totalResolvedDisputes}`;
2119

22-
return (
23-
<Container>
24-
<label>{coherenceRatio}</label>
25-
</Container>
26-
);
20+
return <Container>{coherenceRatio}</Container>;
2721
};
22+
2823
export default Coherency;

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

+15-12
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,26 @@ const Container = styled.div`
99
align-items: center;
1010
gap: 8px;
1111
12-
label {
13-
font-size: 12px !important;
12+
${landscapeStyle(
13+
() => css`
14+
gap: 16px;
15+
`
16+
)}
17+
`;
1418

15-
&::before {
16-
content: "Lv. ";
17-
}
19+
const StyledLabel = styled.label`
20+
font-size: 12px !important;
21+
22+
&::before {
23+
content: "Lv. ";
1824
}
1925
2026
${landscapeStyle(
2127
() => css`
22-
gap: 16px;
23-
label {
24-
font-size: 16px !important;
28+
font-size: 16px !important;
2529
26-
&::before {
27-
content: "Level ";
28-
}
30+
&::before {
31+
content: "Level ";
2932
}
3033
`
3134
)}
@@ -41,7 +44,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ coherenceScore }) => {
4144

4245
return (
4346
<Container>
44-
<label>{level}</label>
47+
<StyledLabel>{level}</StyledLabel>
4548
<PixelArt width="32px" height="32px" level={level} />
4649
</Container>
4750
);

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

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ const Container = styled.div`
88
gap: 8px;
99
align-items: center;
1010
11+
label {
12+
font-size: 16px;
13+
}
14+
1115
canvas {
1216
width: 20px;
1317
height: 20px;

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

-4
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@ const Container = styled.div`
2121
align-items: center;
2222
gap: 20px;
2323
24-
label {
25-
font-size: 16px;
26-
}
27-
2824
${landscapeStyle(
2925
() => css`
3026
display: none;

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

+5-10
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44

55
const Container = styled.div`
6-
label {
7-
color: ${({ theme }) => theme.primaryText};
8-
}
9-
label::before {
6+
color: ${({ theme }) => theme.primaryText};
7+
8+
&::before {
109
content: "#";
1110
display: inline;
1211
}
1312
1413
${landscapeStyle(
1514
() => css`
1615
width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
17-
label::before {
16+
&::before {
1817
display: none;
1918
}
2019
`
@@ -26,10 +25,6 @@ interface IRank {
2625
}
2726

2827
const Rank: React.FC<IRank> = ({ rank }) => {
29-
return (
30-
<Container>
31-
<label>{rank}</label>
32-
</Container>
33-
);
28+
return <Container>{rank}</Container>;
3429
};
3530
export default Rank;

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

+9-7
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ const Container = styled.div`
1010
display: flex;
1111
gap: 8px;
1212
align-items: center;
13-
label {
14-
font-weight: 600;
15-
color: ${({ theme }) => theme.primaryText};
16-
}
1713
flex-wrap: wrap;
1814
1915
${landscapeStyle(
@@ -33,6 +29,12 @@ const StyledIcon = styled.div`
3329
}
3430
`;
3531

32+
const StyledLabel = styled.label`
33+
font-size: 16px;
34+
font-weight: 600;
35+
color: ${({ theme }) => theme.primaryText};
36+
`;
37+
3638
interface IRewards {
3739
address: string;
3840
}
@@ -45,10 +47,10 @@ const Rewards: React.FC<IRewards> = ({ address }) => {
4547

4648
return (
4749
<Container>
48-
<label>{ethReward}</label>
50+
<StyledLabel>{ethReward}</StyledLabel>
4951
<StyledIcon as={EthIcon} />
50-
<label>+</label>
51-
<label>{pnkReward}</label>
52+
<StyledLabel>+</StyledLabel>
53+
<StyledLabel>{pnkReward}</StyledLabel>
5254
<StyledIcon as={PnkIcon} />
5355
</Container>
5456
);

0 commit comments

Comments
 (0)