Skip to content

Commit 9b8a25a

Browse files
kemurukemuru
committed
feat(web): set some structure basis for the desktop my courts section
1 parent 13aa860 commit 9b8a25a

File tree

3 files changed

+159
-34
lines changed

3 files changed

+159
-34
lines changed

‎web/src/pages/Dashboard/Courts/CourtCard.tsx‎

Lines changed: 55 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,66 @@
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 { useAccount } from "wagmi";
45
import { formatUnits } from "viem";
56
import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
6-
import WithHelpTooltip from "../WithHelpTooltip";
77
import { isUndefined } from "utils/index";
88
import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
99

1010
const Card = styled(_Card)`
11+
display: flex;
12+
flex-direction: row;
13+
align-items: center;
14+
justify-content: space-between;
1115
height: auto;
1216
width: 100%;
13-
padding: 12px 24px;
17+
padding: 21.5px 32px 21.5px 27px;
1418
border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
19+
flex-wrap: wrap;
1520
`;
1621

17-
const ValueContainer = styled.div`
18-
width: 100%;
22+
const CourtName = styled.div`
23+
small {
24+
height: 100%;
25+
}
26+
27+
${landscapeStyle(() => css``)}
28+
`;
29+
30+
const StyledBreadcrumb = styled(Breadcrumb)`
1931
display: flex;
2032
align-items: center;
21-
justify-content: space-between;
33+
height: 100%;
2234
`;
2335

24-
const StyledBreadcrumb = styled(Breadcrumb)`
25-
margin-bottom: 12px;
36+
const StakesContainer = styled.div`
37+
display: flex;
38+
flex-direction: row;
39+
align-items: center;
40+
41+
${landscapeStyle(() => css``)}
2642
`;
2743

28-
const tooltipMsg =
29-
"When a juror is selected to arbitrate a case, part of their stake (PNK) is " +
30-
"locked until the case is resolved. Jurors whose vote is coherent with the " +
31-
"final jury decision have their locked stake released. Jurors whose vote " +
32-
"is not coherent with the final jury decision, lose their locked stake. " +
33-
"The locked stake of incoherent jurors is redistributed as incentives for " +
34-
"the coherent jurors.";
44+
const Stake = styled.div`
45+
display: flex;
46+
width: 69px;
47+
label {
48+
font-weight: 600;
49+
color: ${({ theme }) => theme.primaryText};
50+
}
51+
`;
52+
53+
const LockedStake = styled.div`
54+
display: flex;
55+
gap: 8px;
56+
width: 112px;
57+
justify-content: flex-end;
58+
align-items: flex-end;
59+
60+
label {
61+
color: ${({ theme }) => theme.primaryText};
62+
}
63+
`;
3564

3665
interface ICourtCard {
3766
id: string;
@@ -53,17 +82,17 @@ const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
5382

5483
return stake > 0 || lockedStake > 0 ? (
5584
<Card>
56-
<StyledBreadcrumb items={[{ text: name, value: 0 }]} />
57-
<ValueContainer>
58-
<label> Stake: </label>
59-
<small>{`${formatedStake} PNK`}</small>
60-
</ValueContainer>
61-
<ValueContainer>
62-
<WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
63-
<label> Locked Stake: </label>
64-
</WithHelpTooltip>
65-
<small>{`${formatedLockedStake} PNK`}</small>
66-
</ValueContainer>
85+
<CourtName>
86+
<StyledBreadcrumb items={[{ text: name, value: 0 }]} />
87+
</CourtName>
88+
<StakesContainer>
89+
<Stake>
90+
<label>{`${formatedStake} PNK`}</label>
91+
</Stake>
92+
<LockedStake>
93+
<label>{`${formatedLockedStake} PNK`}</label>
94+
</LockedStake>
95+
</StakesContainer>
6796
</Card>
6897
) : null;
6998
};

‎web/src/pages/Dashboard/Courts/Header.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from "react";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
4+
import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
5+
6+
const Container = styled.div`
7+
display: flex;
8+
justify-content: space-between;
9+
width: 100%;
10+
height: 100%;
11+
background-color: transparent;
12+
padding: 24px;
13+
flex-wrap: wrap;
14+
15+
${landscapeStyle(
16+
() =>
17+
css`
18+
flex-wrap: nowrap;
19+
gap: 0px;
20+
padding: 23.15px 32px;
21+
`
22+
)}
23+
`;
24+
25+
const CourtName = styled.div`
26+
width: 100%;
27+
28+
${landscapeStyle(() => css``)}
29+
`;
30+
31+
const StakesContainer = styled.div`
32+
display: flex;
33+
flex-direction: row;
34+
align-items: center;
35+
36+
${landscapeStyle(
37+
() =>
38+
css`
39+
width: 206px;
40+
`
41+
)}
42+
`;
43+
44+
const Stake = styled.div`
45+
display: flex;
46+
width: 69px;
47+
`;
48+
49+
const LockedStake = styled.div`
50+
display: flex;
51+
align-items: center;
52+
gap: 8px;
53+
width: 112px;
54+
`;
55+
56+
const lockedStakeTooltipMsg =
57+
"When a juror is selected to arbitrate a case, part of their stake (PNK) is " +
58+
"locked until the case is resolved. Jurors whose vote is coherent with the " +
59+
"final jury decision have their locked stake released. Jurors whose vote " +
60+
"is not coherent with the final jury decision, lose their locked stake. " +
61+
"The locked stake of incoherent jurors is redistributed as incentives for " +
62+
"the coherent jurors.";
63+
64+
const Header: React.FC = () => {
65+
return (
66+
<Container>
67+
<CourtName>
68+
<label>Court Name</label>
69+
</CourtName>
70+
<StakesContainer>
71+
<Stake>
72+
<label> Stake </label>
73+
</Stake>
74+
<LockedStake>
75+
<WithHelpTooltip place="left" tooltipMsg={lockedStakeTooltipMsg}>
76+
<label> Locked Stake </label>
77+
</WithHelpTooltip>
78+
</LockedStake>
79+
</StakesContainer>
80+
</Container>
81+
);
82+
};
83+
84+
export default Header;

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useFragment as getFragment } from "src/graphql";
55
import { useUserQuery, userFragment } from "queries/useUser";
66
import { isUndefined } from "utils/index";
77
import CourtCard from "./CourtCard";
8+
import Header from "./Header";
89

910
const Container = styled.div`
1011
margin-top: 64px;
@@ -14,7 +15,15 @@ const Container = styled.div`
1415
}
1516
`;
1617

17-
const CourtsContainer = styled.div`
18+
const Divider = styled.hr`
19+
display: flex;
20+
border: none;
21+
height: 1px;
22+
background-color: ${({ theme }) => theme.stroke};
23+
margin: 0;
24+
`;
25+
26+
const CourtCardsContainer = styled.div`
1827
display: flex;
1928
flex-direction: column;
2029
gap: 8px;
@@ -29,14 +38,17 @@ const Courts: React.FC = () => {
2938
return (
3039
<Container>
3140
<h1> My Courts </h1>
32-
{!isUndefined(data) ? <hr /> : null}
33-
<CourtsContainer>
34-
{!isUndefined(data)
35-
? user?.tokens?.map(({ court: { id, name } }) => {
41+
<Divider />
42+
{!isUndefined(data) ? (
43+
<>
44+
<Header />
45+
<CourtCardsContainer>
46+
{user?.tokens?.map(({ court: { id, name } }) => {
3647
return <CourtCard key={id} id={id} name={name ?? ""} />;
37-
})
38-
: null}
39-
</CourtsContainer>
48+
})}
49+
</CourtCardsContainer>
50+
</>
51+
) : null}
4052
</Container>
4153
);
4254
};

0 commit comments

Comments
 (0)