Skip to content

Commit 56b27da

Browse files
kemurukemuru
committed
feat(web): case overview mdispute info more desktop-like, thinner dividers, shadearea without paddin
1 parent fd27433 commit 56b27da

File tree

9 files changed

+150
-30
lines changed

9 files changed

+150
-30
lines changed

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

Lines changed: 68 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,43 @@ import LawBalanceIcon from "svgs/icons/law-balance.svg";
88
import PileCoinsIcon from "svgs/icons/pile-coins.svg";
99
import RoundIcon from "svgs/icons/round.svg";
1010
import Field from "../Field";
11+
import { landscapeStyle } from "styles/landscapeStyle";
1112

12-
const Container = styled.div<{ isList: boolean }>`
13+
const Container = styled.div<{ isList: boolean; isOverview?: boolean }>`
1314
display: flex;
14-
flex-direction: ${({ isList }) => (isList ? "row" : "column")};
15+
flex-direction: column;
1516
gap: 8px;
17+
justify-content: center;
18+
align-items: center;
19+
width: 100%;
20+
height: 100%;
1621
1722
${({ isList }) =>
1823
isList &&
1924
css`
20-
gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
25+
${landscapeStyle(
26+
() => css`
27+
flex-direction: row;
28+
gap: calc(4px + (24px - 4px) * ((100vw - 300px) / (900 - 300)));
29+
justify-content: space-around;
30+
`
31+
)}
32+
`};
33+
34+
${({ isOverview }) =>
35+
isOverview &&
36+
css`
37+
${landscapeStyle(
38+
() => css`
39+
margin-top: 16px;
40+
gap: 32px;
41+
flex-direction: row;
42+
flex-wrap: wrap;
43+
justify-content: flex-start;
44+
align-items: flex-start;
45+
`
46+
)}
2147
`};
22-
justify-content: ${({ isList }) => (isList ? "space-around" : "center")};
23-
align-items: center;
24-
width: 100%;
25-
height: 100%;
2648
`;
2749

2850
const getPeriodPhrase = (period: Periods): string => {
@@ -47,6 +69,7 @@ export interface IDisputeInfo {
4769
date?: number;
4870
round?: number;
4971
overrideIsList?: boolean;
72+
isOverview?: boolean;
5073
}
5174

5275
const formatDate = (date: number) => {
@@ -65,33 +88,66 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
6588
date,
6689
round,
6790
overrideIsList,
91+
isOverview,
6892
}) => {
6993
const { isList } = useIsList();
7094
const displayAsList = isList && !overrideIsList;
7195

7296
return (
73-
<Container isList={displayAsList}>
97+
<Container isList={displayAsList} isOverview={isOverview}>
7498
{court && courtId && (
7599
<Field
76100
icon={LawBalanceIcon}
77101
name="Court"
78102
value={court}
79103
link={`/courts/${courtId}`}
80104
displayAsList={displayAsList}
105+
isOverview={isOverview}
106+
/>
107+
)}
108+
{category && (
109+
<Field
110+
icon={BookmarkIcon}
111+
name="Category"
112+
value={category}
113+
displayAsList={displayAsList}
114+
isOverview={isOverview}
81115
/>
82116
)}
83-
{category && <Field icon={BookmarkIcon} name="Category" value={category} displayAsList={displayAsList} />}
84117
{!category && displayAsList && (
85-
<Field icon={BookmarkIcon} name="Category" value="General" displayAsList={displayAsList} />
118+
<Field
119+
icon={BookmarkIcon}
120+
name="Category"
121+
value="General"
122+
displayAsList={displayAsList}
123+
isOverview={isOverview}
124+
/>
125+
)}
126+
{round && (
127+
<Field
128+
icon={RoundIcon}
129+
name="Round"
130+
value={round.toString()}
131+
displayAsList={displayAsList}
132+
isOverview={isOverview}
133+
/>
134+
)}
135+
{rewards && (
136+
<Field
137+
icon={PileCoinsIcon}
138+
name="Juror Rewards"
139+
value={rewards}
140+
displayAsList={displayAsList}
141+
isOverview={isOverview}
142+
/>
86143
)}
87-
{round && <Field icon={RoundIcon} name="Round" value={round.toString()} displayAsList={displayAsList} />}
88-
{rewards && <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} displayAsList={displayAsList} />}
89144
{typeof period !== "undefined" && date && (
90145
<Field
91146
icon={CalendarIcon}
92147
name={getPeriodPhrase(period)}
93148
value={!displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date)}
94149
displayAsList={displayAsList}
150+
isOverview={isOverview}
95151
/>
96152
)}
97153
</Container>

‎web/src/components/Field.tsx‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,71 @@
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%;
12+
1113
.value {
12-
flex-grow: ${({ isList }) => (isList ? "0" : "1")};
13-
text-align: ${({ isList }) => (isList ? "center" : "end")};
14+
flex-grow: 1;
15+
text-align: end;
1416
color: ${({ theme }) => theme.primaryText};
1517
}
18+
1619
svg {
1720
fill: ${({ theme }) => theme.secondaryPurple};
1821
margin-right: 8px;
1922
width: 15px;
2023
}
24+
2125
.link {
2226
color: ${({ theme }) => theme.primaryBlue};
2327
:hover {
2428
cursor: pointer;
2529
}
2630
}
31+
32+
${({ isList }) =>
33+
isList &&
34+
css`
35+
${landscapeStyle(
36+
() => css`
37+
width: auto;
38+
.value {
39+
flex-grow: 0;
40+
text-align: center;
41+
}
42+
`
43+
)}
44+
`};
45+
${({ isOverview }) =>
46+
isOverview &&
47+
css`
48+
${landscapeStyle(
49+
() => css`
50+
width: auto;
51+
gap: 8px;
52+
.value {
53+
flex-grow: 0;
54+
text-align: none;
55+
font-weight: 600;
56+
}
57+
svg {
58+
margin-right: 0;
59+
}
60+
`
61+
)}
62+
`};
2763
`;
2864

2965
type FieldContainerProps = {
3066
width?: string;
3167
isList?: boolean;
68+
isOverview?: boolean;
3269
};
3370

3471
interface IField {
@@ -38,12 +75,13 @@ interface IField {
3875
link?: string;
3976
width?: string;
4077
displayAsList?: boolean;
78+
isOverview?: boolean;
4179
}
4280

43-
const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, displayAsList }) => {
81+
const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width, displayAsList, isOverview }) => {
4482
return (
45-
<FieldContainer isList={displayAsList} width={width}>
46-
{!displayAsList && (
83+
<FieldContainer isList={displayAsList} isOverview={isOverview} width={width}>
84+
{(!displayAsList || isOverview) && (
4785
<>
4886
<Icon />
4987
<label>{name}:</label>

‎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

‎web/src/pages/Cases/CaseDetails/Appeal/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import React from "react";
2+
import styled from "styled-components";
23
import Classic from "./Classic";
34
import { Periods } from "consts/periods";
45
import AppealHistory from "./AppealHistory";
56
import { ClassicAppealProvider } from "hooks/useClassicAppealContext";
67

8+
const Container = styled.div`
9+
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
10+
`;
11+
712
const Appeal: React.FC<{ currentPeriodIndex: number }> = ({ currentPeriodIndex }) => {
813
return (
914
<ClassicAppealProvider>
10-
{Periods.appeal === currentPeriodIndex ? <Classic /> : <AppealHistory />}
15+
<Container>{Periods.appeal === currentPeriodIndex ? <Classic /> : <AppealHistory />}</Container>
1116
</ClassicAppealProvider>
1217
);
1318
};

‎web/src/pages/Cases/CaseDetails/Evidence/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Container = styled.div`
1717
gap: 16px;
1818
1919
align-items: center;
20+
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2021
`;
2122

2223
const StyledButton = styled(Button)`

‎web/src/pages/Cases/CaseDetails/Overview.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const Container = styled.div`
2222
display: flex;
2323
flex-direction: column;
2424
gap: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
25+
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2526
2627
> h1 {
2728
margin: 0;
@@ -62,8 +63,9 @@ const ShadeArea = styled.div`
6263
flex-direction: column;
6364
justify-content: center;
6465
width: 100%;
65-
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
66-
margin-top: calc(24px + (48 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
66+
padding: calc(16px + (20 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875)
67+
calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
68+
margin-top: 16px;
6769
background-color: ${({ theme }) => theme.mediumBlue};
6870
> p {
6971
margin-top: 0;
@@ -101,10 +103,17 @@ const LinkContainer = styled.div`
101103

102104
const Divider = styled.hr`
103105
display: flex;
104-
color: ${({ theme }) => theme.stroke};
106+
border: none;
107+
height: 1px;
108+
background-color: ${({ theme }) => theme.stroke};
105109
margin: 0;
106110
`;
107111

112+
const StyledP = styled.p`
113+
font-size: 14px;
114+
color: ${({ theme }) => theme.primaryBlue};
115+
`;
116+
108117
interface IOverview {
109118
arbitrable?: `0x${string}`;
110119
courtID?: string;
@@ -161,10 +170,16 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
161170
</>
162171
)}
163172

164-
<DisputeInfo courtId={court?.id} court={courtName} round={localRounds?.length} {...{ rewards, category }} />
173+
<DisputeInfo
174+
isOverview={true}
175+
courtId={court?.id}
176+
court={courtName}
177+
round={localRounds?.length}
178+
{...{ rewards, category }}
179+
/>
165180
</Container>
166181
<ShadeArea>
167-
<p>Make sure you understand the Policies</p>
182+
<StyledP>Make sure you read and understand the Policies</StyledP>
168183
<LinkContainer>
169184
{disputeTemplate?.policyURI && (
170185
<StyledA href={`${IPFS_GATEWAY}${disputeTemplate.policyURI}`} target="_blank" rel="noreferrer">

‎web/src/pages/Cases/CaseDetails/Voting/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ import { useDisputeKitClassicIsVoteActive } from "hooks/contracts/generated";
1717
import VoteIcon from "assets/svgs/icons/voted.svg";
1818
import InfoCircle from "tsx:svgs/icons/info-circle.svg";
1919

20+
const Container = styled.div`
21+
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
22+
`;
23+
2024
const InfoContainer = styled.div`
2125
display: flex;
2226
flex-direction: row;
@@ -64,7 +68,7 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
6468
getPeriodEndTimestamp(lastPeriodChange, currentPeriodIndex, timesPerPeriod);
6569

6670
return (
67-
<>
71+
<Container>
6872
{!isUndefined(appealCost) && isLastRound(appealCost) && (
6973
<>
7074
<InfoContainer>
@@ -106,7 +110,7 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
106110
) : (
107111
<VotingHistory {...{ arbitrable }} isQuestion={true} />
108112
)}
109-
</>
113+
</Container>
110114
);
111115
};
112116

‎web/src/pages/Cases/CaseDetails/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const StyledCard = styled(Card)`
1717
width: 100%;
1818
height: auto;
1919
min-height: 100px;
20-
padding: calc(16px + (32 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
2120
`;
2221

2322
const Header = styled.h1`

‎web/src/pages/DisputeTemplateView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ const Overview: React.FC<{ disputeTemplate: any }> = ({ disputeTemplate }) => {
136136
))}
137137
</VotingOptions>
138138
<ShadeArea>
139-
<p>Make sure you understand the Policies</p>
139+
<p>Make sure you read and understand the Policies</p>
140140
<LinkContainer>
141141
{disputeTemplate?.policyURI && (
142142
<StyledA href={`${IPFS_GATEWAY}${disputeTemplate.policyURI}`} target="_blank" rel="noreferrer">

0 commit comments

Comments
 (0)