Skip to content

Commit 5fc1a7e

Browse files
kemurukemuru
committed
fix: merge conflicts
2 parents 60cfccd + f845a26 commit 5fc1a7e

File tree

22 files changed

+247
-160
lines changed

22 files changed

+247
-160
lines changed

‎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
@@ -17,16 +17,17 @@ import { isUndefined } from "utils/index";
1717

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

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

‎web/src/components/Field.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ const FieldContainer = styled.div<FieldContainerProps>`
1414
text-align: end;
1515
color: ${({ theme }) => theme.primaryText};
1616
}
17+
1718
svg {
1819
fill: ${({ theme }) => theme.secondaryPurple};
1920
margin-right: 8px;
2021
width: 15px;
2122
}
23+
2224
.link {
2325
color: ${({ theme }) => theme.primaryBlue};
2426
:hover {

‎web/src/components/LatestCases.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton";
77
import { isUndefined } from "utils/index";
88

99
const Container = styled.div`
10-
margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
10+
margin-top: calc(48px + (80 - 48) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
1111
`;
1212

1313
const Title = styled.h1`
@@ -18,7 +18,6 @@ const DisputeContainer = styled.div`
1818
display: flex;
1919
gap: 24px;
2020
flex-wrap: wrap;
21-
justify-content: center;
2221
`;
2322

2423
const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {

‎web/src/components/StyledSkeleton.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,22 @@ export const StyledSkeleton = styled(Skeleton)`
99

1010
const SkeletonDisputeCardContainer = styled.div`
1111
width: 100%;
12+
1213
${landscapeStyle(
1314
() =>
1415
css`
1516
/* Explanation of this formula:
16-
- The 48px accounts for the total width of gaps: 2 gaps * 24px each.
17-
- The 0.333 is used to equally distribute width among 3 cards per row.
18-
- The 294px ensures the card has a minimum width.
19-
*/
20-
width: max(calc((100% - 48px) * 0.333), 294px);
17+
- The 48px accounts for the total width of gaps: 2 gaps * 24px each.
18+
- The 0.333 is used to equally distribute width among 3 cards per row.
19+
- The 348px ensures the card has a minimum width.
20+
*/
21+
width: max(calc((100% - 48px) * 0.333), 348px);
2122
`
2223
)}
2324
`;
2425

2526
const StyledSkeletonDisputeCard = styled(Skeleton)`
26-
height: 260px;
27+
height: calc(272px + (296 - 270) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2728
`;
2829

2930
const StyledSkeletonDisputeListItem = styled(Skeleton)`

‎web/src/components/Verdict/FinalDecision.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,9 @@ const AnswerTitle = styled.h3`
7171

7272
const Divider = styled.hr`
7373
display: flex;
74-
color: ${({ theme }) => theme.stroke};
74+
border: none;
75+
height: 1px;
76+
background-color: ${({ theme }) => theme.stroke};
7577
margin: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875) 0px;
7678
`;
7779

0 commit comments

Comments
 (0)