Skip to content

Commit 3626a8e

Browse files
jaybuidljaybuidl
committed
Merge branch 'dev' into testnet-2
2 parents d0f80b2 + 34fa822 commit 3626a8e

File tree

35 files changed

+563
-265
lines changed

35 files changed

+563
-265
lines changed

‎web/src/assets/pngs/dashboard/aristoteles.png‎

68.7 KB
Loading

‎web/src/assets/pngs/dashboard/diogenes.png‎

69.1 KB
Loading

‎web/src/assets/pngs/dashboard/plato.png‎

68.3 KB
Loading

‎web/src/assets/pngs/dashboard/pythagoras.png‎

68.8 KB
Loading

‎web/src/assets/pngs/dashboard/socrates.png‎

67.8 KB
Loading

‎web/src/assets/svgs/styled/three-pnks.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎web/src/components/CasesDisplay/CasesGrid.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import CasesListHeader from "./CasesListHeader";
1515
const GridContainer = styled.div`
1616
display: flex;
1717
flex-wrap: wrap;
18-
justify-content: center;
1918
align-items: center;
2019
gap: 24px;
2120
`;

‎web/src/components/DisputeCard/DisputeInfo.tsx‎

Lines changed: 137 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34
import { Periods } from "consts/periods";
45
import { useIsList } from "context/IsListProvider";
56
import BookmarkIcon from "svgs/icons/bookmark.svg";
@@ -8,21 +9,71 @@ import LawBalanceIcon from "svgs/icons/law-balance.svg";
89
import PileCoinsIcon from "svgs/icons/pile-coins.svg";
910
import RoundIcon from "svgs/icons/round.svg";
1011
import Field from "../Field";
12+
import { getCourtsPath } from "pages/Courts/CourtDetails";
13+
import { useCourtTree } from "hooks/queries/useCourtTree";
1114

12-
const Container = styled.div<{ isList: boolean }>`
15+
const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
1316
display: flex;
14-
flex-direction: ${({ isList }) => (isList ? "row" : "column")};
17+
width: 100%;
1518
gap: 8px;
19+
flex-direction: column;
20+
justify-content: flex-end;
1621
1722
${({ isList }) =>
1823
isList &&
1924
css`
20-
gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
25+
${landscapeStyle(
26+
() => css`
27+
gap: 0;
28+
height: 100%;
29+
`
30+
)}
31+
`};
32+
`;
33+
34+
const CourtBranchFieldContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
35+
${({ isOverview }) =>
36+
isOverview &&
37+
css`
38+
display: flex;
39+
margin-top: 16px;
40+
flex-wrap: wrap;
2141
`};
22-
justify-content: ${({ isList }) => (isList ? "space-around" : "center")};
42+
`;
43+
44+
const RestOfFieldsContainer = styled.div<{ isList?: boolean; isOverview?: boolean }>`
45+
display: flex;
46+
flex-direction: column;
47+
gap: 8px;
48+
justify-content: center;
2349
align-items: center;
2450
width: 100%;
2551
height: 100%;
52+
53+
${({ isList }) =>
54+
isList &&
55+
css`
56+
${landscapeStyle(
57+
() => css`
58+
flex-direction: row;
59+
gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
60+
justify-content: space-around;
61+
`
62+
)}
63+
`};
64+
${({ isOverview }) =>
65+
isOverview &&
66+
css`
67+
${landscapeStyle(
68+
() => css`
69+
margin-top: 16px;
70+
gap: 32px;
71+
flex-direction: row;
72+
flex-wrap: wrap;
73+
justify-content: flex-start;
74+
`
75+
)}
76+
`};
2677
`;
2778

2879
const getPeriodPhrase = (period: Periods): string => {
@@ -47,6 +98,7 @@ export interface IDisputeInfo {
4798
date?: number;
4899
round?: number;
49100
overrideIsList?: boolean;
101+
isOverview?: boolean;
50102
}
51103

52104
const formatDate = (date: number) => {
@@ -65,35 +117,92 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
65117
date,
66118
round,
67119
overrideIsList,
120+
isOverview,
68121
}) => {
69122
const { isList } = useIsList();
70123
const displayAsList = isList && !overrideIsList;
124+
const { data } = useCourtTree();
125+
const courtPath = getCourtsPath(data?.court, courtId);
126+
const items = [];
127+
items.push(
128+
...(courtPath?.map((node) => ({
129+
text: node.name,
130+
value: node.id,
131+
})) ?? [])
132+
);
133+
const courtBranchValue = items.map((item) => item.text).join(" / ");
71134

72135
return (
73-
<Container isList={displayAsList}>
74-
{court && courtId && (
75-
<Field
76-
icon={LawBalanceIcon}
77-
name="Court"
78-
value={court}
79-
link={`/courts/${courtId}`}
80-
displayAsList={displayAsList}
81-
/>
82-
)}
83-
{category && <Field icon={BookmarkIcon} name="Category" value={category} displayAsList={displayAsList} />}
84-
{!category && displayAsList && (
85-
<Field icon={BookmarkIcon} name="Category" value="General" displayAsList={displayAsList} />
86-
)}
87-
{round && <Field icon={RoundIcon} name="Round" value={round.toString()} displayAsList={displayAsList} />}
88-
{rewards && <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} displayAsList={displayAsList} />}
89-
{typeof period !== "undefined" && date && (
90-
<Field
91-
icon={CalendarIcon}
92-
name={getPeriodPhrase(period)}
93-
value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
94-
displayAsList={displayAsList}
95-
/>
96-
)}
136+
<Container isList={displayAsList} isOverview={isOverview}>
137+
<CourtBranchFieldContainer isOverview={isOverview}>
138+
{court && courtId && isOverview && (
139+
<Field
140+
icon={LawBalanceIcon}
141+
name="Court Branch"
142+
value={courtBranchValue}
143+
displayAsList={displayAsList}
144+
isOverview={isOverview}
145+
/>
146+
)}
147+
</CourtBranchFieldContainer>
148+
<RestOfFieldsContainer isOverview={isOverview} isList={displayAsList}>
149+
{court && courtId && !isOverview && (
150+
<Field
151+
icon={LawBalanceIcon}
152+
name="Court"
153+
value={court}
154+
link={`/courts/${courtId}`}
155+
displayAsList={displayAsList}
156+
isOverview={isOverview}
157+
/>
158+
)}
159+
160+
{category && (
161+
<Field
162+
icon={BookmarkIcon}
163+
name="Category"
164+
value={category}
165+
displayAsList={displayAsList}
166+
isOverview={isOverview}
167+
/>
168+
)}
169+
{!category && displayAsList && (
170+
<Field
171+
icon={BookmarkIcon}
172+
name="Category"
173+
value="General"
174+
displayAsList={displayAsList}
175+
isOverview={isOverview}
176+
/>
177+
)}
178+
{round && (
179+
<Field
180+
icon={RoundIcon}
181+
name="Round"
182+
value={round.toString()}
183+
displayAsList={displayAsList}
184+
isOverview={isOverview}
185+
/>
186+
)}
187+
{rewards && (
188+
<Field
189+
icon={PileCoinsIcon}
190+
name="Juror Rewards"
191+
value={rewards}
192+
displayAsList={displayAsList}
193+
isOverview={isOverview}
194+
/>
195+
)}
196+
{typeof period !== "undefined" && date && (
197+
<Field
198+
icon={CalendarIcon}
199+
name={getPeriodPhrase(period)}
200+
value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
201+
displayAsList={displayAsList}
202+
isOverview={isOverview}
203+
/>
204+
)}
205+
</RestOfFieldsContainer>
97206
</Container>
98207
);
99208
};

‎web/src/components/DisputeCard/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,17 @@ import { getLocalRounds } from "utils/getLocalRounds";
1818

1919
const StyledCard = styled(Card)`
2020
width: 100%;
21-
height: 260px;
21+
height: calc(280px + (296 - 280) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
22+
2223
${landscapeStyle(
2324
() =>
2425
css`
2526
/* Explanation of this formula:
2627
- The 48px accounts for the total width of gaps: 2 gaps * 24px each.
2728
- The 0.333 is used to equally distribute width among 3 cards per row.
28-
- The 294px ensures the card has a minimum width.
29+
- The 348px ensures the card has a minimum width.
2930
*/
30-
width: max(calc((100% - 48px) * 0.333), 294px);
31+
width: max(calc((100% - 48px) * 0.333), 348px);
3132
`
3233
)}
3334
`;
@@ -40,8 +41,8 @@ const StyledListItem = styled(Card)`
4041
`;
4142

4243
const CardContainer = styled.div`
43-
height: 215px;
44-
padding: 24px;
44+
height: calc(100% - 45px);
45+
padding: calc(20px + (24 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
4546
display: flex;
4647
flex-direction: column;
4748
justify-content: space-between;

‎web/src/components/Field.tsx‎

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,70 @@
11
import React from "react";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
24
import { Link } from "react-router-dom";
3-
import styled from "styled-components";
45

56
const FieldContainer = styled.div<FieldContainerProps>`
6-
width: ${({ isList }) => (isList ? "auto" : "100%")};
77
display: flex;
88
align-items: center;
99
justify-content: flex-start;
1010
white-space: nowrap;
11+
width: 100%;
1112
.value {
12-
flex-grow: ${({ isList }) => (isList ? "0" : "1")};
13-
text-align: ${({ isList }) => (isList ? "center" : "end")};
13+
flex-grow: 1;
14+
text-align: end;
1415
color: ${({ theme }) => theme.primaryText};
1516
}
17+
1618
svg {
1719
fill: ${({ theme }) => theme.secondaryPurple};
1820
margin-right: 8px;
1921
width: 15px;
2022
}
23+
2124
.link {
2225
color: ${({ theme }) => theme.primaryBlue};
2326
:hover {
2427
cursor: pointer;
2528
}
2629
}
30+
${({ isList }) =>
31+
isList &&
32+
css`
33+
${landscapeStyle(
34+
() => css`
35+
width: auto;
36+
.value {
37+
flex-grow: 0;
38+
text-align: center;
39+
}
40+
`
41+
)}
42+
`};
43+
${({ isOverview, isJurorBalance }) =>
44+
(isOverview || isJurorBalance) &&
45+
css`
46+
${landscapeStyle(
47+
() => css`
48+
width: auto;
49+
gap: 8px;
50+
.value {
51+
flex-grow: 0;
52+
text-align: none;
53+
font-weight: 600;
54+
}
55+
svg {
56+
margin-right: 0;
57+
}
58+
`
59+
)}
60+
`};
2761
`;
2862

2963
type FieldContainerProps = {
3064
width?: string;
3165
isList?: boolean;
66+
isOverview?: boolean;
67+
isJurorBalance?: boolean;
3268
};
3369

3470
interface IField {
@@ -38,12 +74,23 @@ interface IField {
3874
link?: string;
3975
width?: string;
4076
displayAsList?: boolean;
77+
isOverview?: boolean;
78+
isJurorBalance?: boolean;
4179
}
4280

43-
const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, displayAsList }) => {
81+
const Field: React.FC<IField> = ({
82+
icon: Icon,
83+
name,
84+
value,
85+
link,
86+
width,
87+
displayAsList,
88+
isOverview,
89+
isJurorBalance,
90+
}) => {
4491
return (
45-
<FieldContainer isList={displayAsList} width={width}>
46-
{!displayAsList && (
92+
<FieldContainer isList={displayAsList} isOverview={isOverview} isJurorBalance={isJurorBalance} width={width}>
93+
{(!displayAsList || isOverview || isJurorBalance) && (
4794
<>
4895
<Icon />
4996
<label>{name}:</label>
@@ -59,5 +106,4 @@ const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, display
59106
</FieldContainer>
60107
);
61108
};
62-
63109
export default Field;

0 commit comments

Comments
 (0)