Skip to content

Commit 176bf73

Browse files
kemurukemuru
committed
feat(web): styling for mobile, code optimizations
1 parent a5f70c0 commit 176bf73

File tree

9 files changed

+121
-73
lines changed

9 files changed

+121
-73
lines changed

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,20 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { Breadcrumb } from "@kleros/ui-components-library";
55

6-
const CourtName = styled.div`
6+
const Container = styled.div`
7+
width: 100%;
8+
justify-content: flex-start;
9+
710
small {
811
height: 100%;
912
}
1013
11-
${landscapeStyle(() => css``)}
14+
${landscapeStyle(
15+
() =>
16+
css`
17+
width: auto;
18+
`
19+
)}
1220
`;
1321

1422
const StyledBreadcrumb = styled(Breadcrumb)`
@@ -23,9 +31,9 @@ interface ICourtBranch {
2331

2432
const CourtBranch: React.FC<ICourtBranch> = ({ name }) => {
2533
return (
26-
<CourtName>
34+
<Container>
2735
<StyledBreadcrumb items={[{ text: name, value: 0 }]} />
28-
</CourtName>
36+
</Container>
2937
);
3038
};
3139
export default CourtBranch;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { formatUnits } from "viem";
55

6-
const StyledLockedStakeLabel = styled.label`
6+
const StyledLabel = styled.label`
77
display: flex;
88
justify-content: flex-end;
99
color: ${({ theme }) => theme.primaryText};
10+
font-size: 16px;
1011
1112
${landscapeStyle(
1213
() => css`
@@ -22,6 +23,6 @@ interface ILockedStake {
2223
const LockedStake: React.FC<ILockedStake> = ({ lockedStake }) => {
2324
const formattedLockedStake = formatUnits(lockedStake, 18);
2425

25-
return <StyledLockedStakeLabel>{`${formattedLockedStake} PNK`}</StyledLockedStakeLabel>;
26+
return <StyledLabel>{`${formattedLockedStake} PNK`}</StyledLabel>;
2627
};
2728
export default LockedStake;

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

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { Card as _Card } from "@kleros/ui-components-library";
55
import CourtBranch from "./CourtBranch";
6+
import HeaderStake from "../Header/Stake";
7+
import HeaderLockedStake from "../Header/LockedStake";
68
import Stake from "./Stake";
79
import LockedStake from "./LockedStake";
810

911
const Container = styled(_Card)`
1012
display: flex;
1113
flex-direction: column;
1214
align-items: center;
13-
justify-content: space-between;
1415
height: auto;
1516
width: 100%;
16-
padding: 21.5px 32px 21.5px 27px;
17+
padding: 24px;
1718
border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
1819
flex-wrap: wrap;
19-
gap: 20px;
20+
gap: 18px;
2021
2122
${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}
2223
@@ -28,13 +29,27 @@ const Container = styled(_Card)`
2829
)}
2930
`;
3031

31-
const StakesContainer = styled.div`
32+
const BottomSide = styled.div`
33+
width: 100%;
3234
display: flex;
3335
flex-direction: row;
34-
align-items: center;
3536
justify-content: space-between;
36-
width: 220px;
37-
gap: 32px;
37+
`;
38+
39+
const HeaderStakeAndStake = styled.div`
40+
display: flex;
41+
flex-direction: column;
42+
width: 100%;
43+
gap: 5px;
44+
justify-content: flex-start;
45+
`;
46+
47+
const HeaderLockedStakeAndLockedStake = styled.div`
48+
display: flex;
49+
flex-direction: column;
50+
width: 100%;
51+
gap: 5px;
52+
justify-content: flex-end;
3853
`;
3954

4055
interface IMobileCard {
@@ -47,10 +62,16 @@ const MobileCard: React.FC<IMobileCard> = ({ name, stake, lockedStake }) => {
4762
return (
4863
<Container>
4964
<CourtBranch name={name} />
50-
<StakesContainer>
51-
<Stake stake={stake} />
52-
<LockedStake lockedStake={lockedStake} />
53-
</StakesContainer>
65+
<BottomSide>
66+
<HeaderStakeAndStake>
67+
<HeaderStake />
68+
<Stake stake={stake} />
69+
</HeaderStakeAndStake>
70+
<HeaderLockedStakeAndLockedStake>
71+
<HeaderLockedStake />
72+
<LockedStake lockedStake={lockedStake} />
73+
</HeaderLockedStakeAndLockedStake>
74+
</BottomSide>
5475
</Container>
5576
);
5677
};

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44
import { formatUnits } from "viem";
55

6-
const StyledStakeLabel = styled.label`
6+
const StyledLabel = styled.label`
77
display: flex;
88
font-weight: 600;
99
color: ${({ theme }) => theme.primaryText};
10-
justify-content: flex-end;
10+
font-size: 16px;
1111
1212
${landscapeStyle(
1313
() => css`
1414
width: 140px;
15+
justify-content: flex-end;
1516
`
1617
)}
1718
`;
@@ -23,6 +24,6 @@ interface IStake {
2324
const Stake: React.FC<IStake> = ({ stake }) => {
2425
const formattedStake = formatUnits(stake, 18);
2526

26-
return <StyledStakeLabel>{`${formattedStake} PNK`}</StyledStakeLabel>;
27+
return <StyledLabel>{`${formattedStake} PNK`}</StyledLabel>;
2728
};
2829
export default Stake;

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

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
4-
5-
const CourtName = styled.div`
6-
width: 100%;
7-
8-
${landscapeStyle(() => css``)}
9-
`;
102

113
const CourtBranch: React.FC = () => {
12-
return (
13-
<CourtName>
14-
<label>Court Name</label>
15-
</CourtName>
16-
);
4+
return <label>Court Name</label>;
175
};
6+
187
export default CourtBranch;

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,27 @@ import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
66
const Container = styled.div`
77
display: flex;
88
align-items: center;
9-
width: 110px;
9+
width: 100%;
10+
justify-content: flex-end;
1011
11-
${landscapeStyle(() => css``)}
12+
${landscapeStyle(
13+
() =>
14+
css`
15+
width: 110px;
16+
`
17+
)}
1218
`;
1319

1420
const StyledLockedStakeLabel = styled.label`
1521
display: flex;
16-
flex-wrap: nowrap;
22+
font-size: 12px !important;
23+
24+
${landscapeStyle(
25+
() =>
26+
css`
27+
font-size: 14px !important;
28+
`
29+
)}
1730
`;
1831

1932
const lockedStakeTooltipMsg =

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,19 @@ import React from "react";
22
import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44

5-
const StyledStakeLabel = styled.label`
5+
const StyledLabel = styled.label`
66
display: flex;
7+
font-size: 12px !important;
78
8-
${landscapeStyle(() => css``)}
9+
${landscapeStyle(
10+
() =>
11+
css`
12+
font-size: 14px !important;
13+
`
14+
)}
915
`;
1016

1117
const Stake: React.FC = () => {
12-
return <StyledStakeLabel> Stake </StyledStakeLabel>;
18+
return <StyledLabel>Stake</StyledLabel>;
1319
};
1420
export default Stake;

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

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,58 @@ import Stake from "./Stake";
66
import LockedStake from "./LockedStake";
77

88
const Container = styled.div`
9+
display: none;
10+
11+
${landscapeStyle(
12+
() =>
13+
css`
14+
display: flex;
15+
flex-direction: column;
16+
`
17+
)}
18+
`;
19+
20+
const CourtBranchAndStakesContainer = styled.div`
921
display: flex;
1022
justify-content: space-between;
1123
width: 100%;
1224
height: 100%;
1325
background-color: transparent;
1426
padding: 24px;
1527
flex-wrap: wrap;
16-
17-
${landscapeStyle(
18-
() =>
19-
css`
20-
flex-wrap: nowrap;
21-
gap: 0px;
22-
padding: 23.15px 32px;
23-
`
24-
)}
28+
padding: 23.15px 32px;
2529
`;
2630

2731
const StakesContainer = styled.div`
2832
display: flex;
2933
flex-direction: row;
3034
align-items: center;
3135
justify-content: space-between;
36+
gap: 32px;
37+
`;
3238

33-
${landscapeStyle(
34-
() =>
35-
css`
36-
gap: 32px;
37-
`
38-
)}
39+
const Divider = styled.hr`
40+
display: flex;
41+
border: none;
42+
height: 1px;
43+
background-color: ${({ theme }) => theme.stroke};
44+
margin: 0;
3945
`;
4046

4147
const Header: React.FC = () => {
4248
return (
43-
<Container>
44-
<CourtBranch />
45-
<StakesContainer>
46-
<Stake />
47-
<LockedStake />
48-
</StakesContainer>
49-
</Container>
49+
<>
50+
<Container>
51+
<Divider />
52+
<CourtBranchAndStakesContainer>
53+
<CourtBranch />
54+
<StakesContainer>
55+
<Stake />
56+
<LockedStake />
57+
</StakesContainer>
58+
</CourtBranchAndStakesContainer>
59+
</Container>
60+
</>
5061
);
5162
};
5263

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
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";
4-
import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
55
import Skeleton from "react-loading-skeleton";
66
import CourtCard from "./CourtCard";
77
import Header from "./Header";
8+
import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
89

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

17-
const Divider = styled.hr`
18-
display: flex;
19-
border: none;
20-
height: 1px;
21-
background-color: ${({ theme }) => theme.stroke};
22-
margin: 0;
23-
`;
24-
2518
const CourtCardsContainer = styled.div`
2619
display: flex;
2720
flex-direction: column;
28-
gap: 16px;
21+
gap: 12px;
2922
z-index: 0;
23+
24+
${landscapeStyle(
25+
() => css`
26+
gap: 16px;
27+
`
28+
)}
3029
`;
3130

3231
const StyledLabel = styled.label`
@@ -46,7 +45,6 @@ const Courts: React.FC = () => {
4645
{!isStaked && !isLoading ? <StyledLabel>You are not staked in any court</StyledLabel> : null}
4746
{isStaked && !isLoading ? (
4847
<>
49-
<Divider />
5048
<Header />
5149
<CourtCardsContainer>
5250
{stakeData?.jurorTokensPerCourts

0 commit comments

Comments
 (0)