Skip to content

Commit 04f2d8d

Browse files
alcercualcercu
authored
Merge pull request #1774 from kleros/feat/bug-fixes-and-ui-improvements
feat: bunch of bug fixes, style impros, arrangement impros, refactors
2 parents 0e582ae + 6e5113c commit 04f2d8d

File tree

25 files changed

+202
-213
lines changed

25 files changed

+202
-213
lines changed

‎web/src/app.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const App: React.FC = () => {
9595
</Suspense>
9696
}
9797
/>
98-
<Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
98+
<Route path="*" element={<h1>Page not found</h1>} />
9999
</Route>
100100
</SentryRoutes>
101101
</NewDisputeProvider>

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ const StyledTitle = styled.h1`
2424
margin: 0px;
2525
`;
2626

27+
const StyledLabel = styled.label`
28+
font-size: 16px;
29+
`;
30+
2731
interface ICasesDisplay extends ICasesGrid {
2832
numberDisputes?: number;
2933
numberClosedDisputes?: number;
@@ -54,10 +58,10 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
5458
) : null}
5559
</TitleContainer>
5660
<Search />
57-
<StatsAndFilters totalDisputes={numberDisputes ?? 0} closedDisputes={numberClosedDisputes ?? 0} />
61+
<StatsAndFilters totalDisputes={numberDisputes || 0} closedDisputes={numberClosedDisputes || 0} />
5862

5963
{disputes?.length === 0 ? (
60-
<h1>No cases found</h1>
64+
<StyledLabel>No cases found</StyledLabel>
6165
) : (
6266
<CasesGrid
6367
disputes={disputes}

‎web/src/components/DisputePreview/DisputeContext.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,10 @@ const QuestionAndDescription = styled.div`
2727
div:first-child p:first-of-type {
2828
font-size: 16px;
2929
font-weight: 600;
30+
margin: 0;
3031
}
3132
`;
3233

33-
const StyledReactMarkDown = styled(ReactMarkdown)`
34-
margin: 0px;
35-
`;
36-
3734
const VotingOptions = styled(QuestionAndDescription)`
3835
display: flex;
3936
flex-direction: column;
@@ -45,11 +42,15 @@ const AnswersContainer = styled.div`
4542
flex-direction: column;
4643
`;
4744

45+
const AnswersHeader = styled.h3`
46+
margin: 0;
47+
`;
48+
4849
const Answer = styled.div`
4950
margin: 0px;
5051
display: flex;
5152
flex-wrap: wrap;
52-
gap: ${responsiveSize(2, 8)};
53+
gap: 6px;
5354
> label {
5455
max-width: 100%;
5556
}
@@ -70,11 +71,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
7071
const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
7172
return (
7273
<>
73-
<StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : disputeDetails?.title ?? errMsg}</StyledH1>
74+
<StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
7475
{!isUndefined(disputeDetails) && (
7576
<QuestionAndDescription>
76-
<StyledReactMarkDown>{disputeDetails?.question}</StyledReactMarkDown>
77-
<StyledReactMarkDown>{disputeDetails?.description}</StyledReactMarkDown>
77+
<ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
78+
<ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
7879
</QuestionAndDescription>
7980
)}
8081
{isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -83,14 +84,14 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
8384
</a>
8485
)}
8586
<VotingOptions>
86-
{isUndefined(disputeDetails) ? null : <h3>Voting Options</h3>}
87+
{isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
8788
<AnswersContainer>
8889
{disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
8990
<Answer key={answer.title}>
9091
<small>Option {i + 1}:</small>
9192
<label>
9293
{answer.title}
93-
{answer.description ? ` - ${answer.description}` : null}
94+
{answer.description.trim() ? ` - ${answer.description}` : null}
9495
</label>
9596
</Answer>
9697
))}

‎web/src/components/DisputePreview/Policies.tsx

+28-51
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,30 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
2+
import styled from "styled-components";
33

44
import PaperclipIcon from "svgs/icons/paperclip.svg";
55
import PolicyIcon from "svgs/icons/policy.svg";
66

77
import { getIpfsUrl } from "utils/getIpfsUrl";
88
import { isUndefined } from "utils/index";
99

10-
import { landscapeStyle } from "styles/landscapeStyle";
1110
import { responsiveSize } from "styles/responsiveSize";
1211

1312
import { InternalLink } from "components/InternalLink";
1413

15-
const ShadeArea = styled.div`
14+
const Container = styled.div`
1615
display: flex;
17-
flex-direction: column;
18-
justify-content: center;
19-
width: 100%;
16+
align-items: center;
17+
flex-direction: row;
18+
flex-wrap: wrap;
19+
gap: 8px 16px;
2020
padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
21-
margin-top: 16px;
2221
background-color: ${({ theme }) => theme.mediumBlue};
23-
24-
${landscapeStyle(
25-
() => css`
26-
flex-direction: row;
27-
justify-content: space-between;
28-
`
29-
)};
3022
`;
3123

3224
const StyledP = styled.p`
3325
font-size: 14px;
34-
margin-top: 0;
35-
margin-bottom: 16px;
26+
margin: 0;
3627
color: ${({ theme }) => theme.primaryBlue};
37-
${landscapeStyle(
38-
() => css`
39-
margin-bottom: 0;
40-
`
41-
)};
4228
`;
4329

4430
const StyledPolicyIcon = styled(PolicyIcon)`
@@ -51,13 +37,6 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
5137
fill: ${({ theme }) => theme.primaryBlue};
5238
`;
5339

54-
const LinkContainer = styled.div`
55-
display: flex;
56-
gap: ${responsiveSize(16, 24)};
57-
flex-wrap: wrap;
58-
align-items: center;
59-
`;
60-
6140
const StyledInternalLink = styled(InternalLink)`
6241
display: flex;
6342
gap: 4px;
@@ -82,28 +61,26 @@ interface IPolicies {
8261

8362
export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attachment }) => {
8463
return (
85-
<ShadeArea>
86-
<StyledP>Make sure you read and understand the Policies</StyledP>
87-
<LinkContainer>
88-
{!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
89-
<StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
90-
<StyledPaperclipIcon />
91-
{attachment.label ?? "Attachment"}
92-
</StyledInternalLink>
93-
) : null}
94-
{isUndefined(disputePolicyURI) ? null : (
95-
<StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
96-
<StyledPolicyIcon />
97-
Dispute Policy
98-
</StyledInternalLink>
99-
)}
100-
{isUndefined(courtId) ? null : (
101-
<StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
102-
<StyledPolicyIcon />
103-
Court Policy
104-
</StyledInternalLink>
105-
)}
106-
</LinkContainer>
107-
</ShadeArea>
64+
<Container>
65+
<StyledP>Policy documents:</StyledP>
66+
{!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
67+
<StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
68+
<StyledPaperclipIcon />
69+
{attachment.label ?? "Attachment"}
70+
</StyledInternalLink>
71+
) : null}
72+
{isUndefined(disputePolicyURI) ? null : (
73+
<StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
74+
<StyledPolicyIcon />
75+
Dispute Policy
76+
</StyledInternalLink>
77+
)}
78+
{isUndefined(courtId) ? null : (
79+
<StyledInternalLink to={`/courts/${courtId}/policy?section=description`}>
80+
<StyledPolicyIcon />
81+
Court Policy
82+
</StyledInternalLink>
83+
)}
84+
</Container>
10885
);
10986
};

‎web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

+2-42
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
import React, { useMemo } from "react";
1+
import React from "react";
22
import styled, { css } from "styled-components";
33

4-
import LawBalanceIcon from "svgs/icons/law-balance.svg";
5-
6-
import { useCourtTree } from "hooks/queries/useCourtTree";
7-
84
import { landscapeStyle } from "styles/landscapeStyle";
95

106
import Field, { IField } from "components/Field";
11-
import { getCourtsPath } from "pages/Courts/CourtDetails";
127

138
import CardLabel from "../CardLabels";
149

@@ -22,12 +17,6 @@ const Container = styled.div`
2217
justify-content: flex-end;
2318
`;
2419

25-
const CourtBranchFieldContainer = styled.div`
26-
display: flex;
27-
margin-top: 16px;
28-
flex-wrap: wrap;
29-
`;
30-
3120
const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
3221
display: flex;
3322
flex-direction: column;
@@ -42,7 +31,6 @@ const RestOfFieldsContainer = styled.div<{ isOverview?: boolean }>`
4231
css`
4332
${landscapeStyle(
4433
() => css`
45-
margin-top: 16px;
4634
gap: 32px;
4735
flex-direction: row;
4836
flex-wrap: wrap;
@@ -56,7 +44,6 @@ const StyledField = styled(Field)`
5644
max-width: 100%;
5745
label {
5846
&.value {
59-
margin-left: 8px;
6047
overflow: hidden;
6148
text-overflow: ellipsis;
6249
text-wrap: auto;
@@ -66,36 +53,9 @@ const StyledField = styled(Field)`
6653

6754
type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
6855

69-
const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
70-
isOverview,
71-
showLabels,
72-
fieldItems,
73-
court,
74-
courtId,
75-
disputeID,
76-
round,
77-
}) => {
78-
const { data } = useCourtTree();
79-
const courtPath = getCourtsPath(data?.court, courtId);
80-
const items = useMemo(
81-
() => [...(courtPath?.map((node) => ({ text: node.name, value: node.id })) ?? [])],
82-
[courtPath]
83-
);
84-
85-
const courtBranchValue = items.map((item) => item.text).join(" / ");
56+
const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({ isOverview, showLabels, fieldItems, disputeID, round }) => {
8657
return (
8758
<Container>
88-
{court && courtId && isOverview && (
89-
<CourtBranchFieldContainer>
90-
<StyledField
91-
link={`/courts/${courtId}`}
92-
icon={LawBalanceIcon}
93-
name="Court Branch"
94-
value={courtBranchValue}
95-
{...{ isOverview }}
96-
/>
97-
</CourtBranchFieldContainer>
98-
)}
9959
<RestOfFieldsContainer {...{ isOverview }}>
10060
{fieldItems.map((item) =>
10161
item.display ? <StyledField key={item.name} {...(item as IField)} {...{ isOverview }} /> : null

‎web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const RestOfFieldsContainer = styled.div`
3030
grid-template-columns: repeat(3, min-content);
3131
justify-content: start;
3232
`;
33+
3334
const StyledField = styled(Field)<{ style?: string }>`
3435
${({ style }) => style ?? ""}
3536
`;

‎web/src/components/DisputeView/DisputeInfo/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
7676
name: "Court",
7777
value: court,
7878
link: `/courts/${courtId}`,
79-
display: !isUndefined(court) && !isUndefined(courtId) && !isOverview,
79+
display: !isUndefined(court) && !isUndefined(courtId),
8080
},
8181
{
8282
icon: RoundIcon,

‎web/src/components/Field.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ const FieldContainer = styled.div<FieldContainerProps>`
4848
text-align: none;
4949
font-weight: 600;
5050
}
51+
a {
52+
font-weight: 600;
53+
}
5154
svg {
5255
margin-right: 0;
5356
}
@@ -56,7 +59,9 @@ const FieldContainer = styled.div<FieldContainerProps>`
5659
`};
5760
`;
5861

59-
const LinkContainer = styled.div``;
62+
const LinkContainer = styled.div`
63+
padding-bottom: 1px;
64+
`;
6065

6166
const StyledInternalLink = styled(InternalLink)`
6267
text-wrap: auto;

‎web/src/components/LightButton.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
44

55
import { Button } from "@kleros/ui-components-library";
66

7-
const StyledButton = styled(Button)`
7+
const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
88
background-color: transparent;
99
padding: 8px !important;
1010
border-radius: 7px;
@@ -13,12 +13,12 @@ const StyledButton = styled(Button)`
1313
font-weight: 400;
1414
}
1515
.button-svg {
16-
fill: ${({ theme }) => theme.white}BF !important;
16+
fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
1717
}
1818
1919
&:hover {
2020
.button-svg {
21-
fill: ${({ theme }) => theme.white} !important;
21+
fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
2222
}
2323
transition: background-color 0.1s;
2424
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
@@ -40,10 +40,11 @@ interface ILightButton {
4040
onClick?: React.MouseEventHandler<HTMLButtonElement>;
4141
disabled?: boolean;
4242
className?: string;
43+
isMobileNavbar?: boolean;
4344
}
4445

45-
const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className }) => (
46-
<StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className }} />
46+
const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
47+
<StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
4748
);
4849

4950
export default LightButton;

0 commit comments

Comments
 (0)