Skip to content

Commit 039d745

Browse files
alcercualcercu
authored
Merge pull request #1779 from kleros/feat/ui-improvements
feat: improved overview page, evidence page, voting history page, rem…
2 parents 04f2d8d + a1f57bf commit 039d745

File tree

15 files changed

+184
-120
lines changed

15 files changed

+184
-120
lines changed

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

+14-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const QuestionAndDescription = styled.div`
2626
word-wrap: break-word;
2727
div:first-child p:first-of-type {
2828
font-size: 16px;
29-
font-weight: 600;
29+
font-weight: 400;
3030
margin: 0;
3131
}
3232
`;
@@ -56,6 +56,16 @@ const Answer = styled.div`
5656
}
5757
`;
5858

59+
const StyledSmall = styled.small`
60+
color: ${({ theme }) => theme.secondaryText};
61+
font-weight: 400;
62+
`;
63+
64+
const StyledLabel = styled.label`
65+
color: ${({ theme }) => theme.primaryText};
66+
font-weight: 600;
67+
`;
68+
5969
const AliasesContainer = styled.div`
6070
display: flex;
6171
flex-wrap: wrap;
@@ -88,11 +98,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
8898
<AnswersContainer>
8999
{disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
90100
<Answer key={answer.title}>
91-
<small>Option {i + 1}:</small>
92-
<label>
101+
<StyledSmall>{i + 1 + `.`}</StyledSmall>
102+
<StyledLabel>
93103
{answer.title}
94104
{answer.description.trim() ? ` - ${answer.description}` : null}
95-
</label>
105+
</StyledLabel>
96106
</Answer>
97107
))}
98108
</AnswersContainer>

‎web/src/components/EvidenceCard.tsx

+60-40
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,33 @@ const StyledCard = styled(Card)`
2626
height: auto;
2727
`;
2828

29-
const TextContainer = styled.div`
29+
const TopContent = styled.div`
30+
display: flex;
31+
flex-direction: column;
3032
padding: ${responsiveSize(8, 24)};
33+
gap: ${responsiveSize(4, 8)};
34+
overflow-wrap: break-word;
35+
3136
> * {
3237
overflow-wrap: break-word;
3338
margin: 0;
3439
}
35-
> h3 {
40+
p {
41+
margin: 0;
42+
}
43+
h3 {
3644
display: inline-block;
37-
margin: 0px 4px;
45+
margin: 0;
3846
}
3947
`;
4048

49+
const IndexAndName = styled.div`
50+
display: flex;
51+
flex-direction: row;
52+
align-items: center;
53+
gap: 6px;
54+
`;
55+
4156
const Index = styled.p`
4257
display: inline-block;
4358
`;
@@ -49,6 +64,9 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
4964
code {
5065
color: ${({ theme }) => theme.secondaryText};
5166
}
67+
p {
68+
margin: 0;
69+
}
5270
`;
5371

5472
const BottomShade = styled.div`
@@ -65,25 +83,7 @@ const BottomShade = styled.div`
6583
}
6684
`;
6785

68-
const AccountContainer = styled.div`
69-
display: flex;
70-
flex-direction: row;
71-
gap: 8px;
72-
align-items: center;
73-
74-
canvas {
75-
width: 24px;
76-
height: 24px;
77-
}
78-
79-
> * {
80-
flex-basis: 1;
81-
flex-shrink: 0;
82-
margin: 0;
83-
}
84-
`;
85-
86-
const LeftContent = styled.div`
86+
const BottomLeftContent = styled.div`
8787
display: block;
8888
8989
& > *:not(:last-child) {
@@ -105,21 +105,45 @@ const LeftContent = styled.div`
105105
)}
106106
`;
107107

108+
const AccountContainer = styled.div`
109+
display: flex;
110+
flex-direction: row;
111+
gap: 8px;
112+
align-items: center;
113+
114+
canvas {
115+
width: 24px;
116+
height: 24px;
117+
}
118+
119+
> * {
120+
flex-basis: 1;
121+
flex-shrink: 0;
122+
margin: 0;
123+
}
124+
`;
125+
108126
const HoverStyle = css`
109127
:hover {
110128
text-decoration: underline;
111129
color: ${({ theme }) => theme.primaryBlue};
112130
cursor: pointer;
113131
}
132+
:hover {
133+
label {
134+
text-decoration: underline;
135+
color: ${({ theme }) => theme.primaryBlue};
136+
cursor: pointer;
137+
}
138+
}
114139
`;
115140

116141
const Address = styled.p`
117142
${HoverStyle}
118143
margin: 0;
119144
`;
120145

121-
const Timestamp = styled.label`
122-
color: ${({ theme }) => theme.secondaryText};
146+
const StyledExternalLink = styled(ExternalLink)`
123147
${HoverStyle}
124148
`;
125149

@@ -191,29 +215,25 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
191215

192216
return (
193217
<StyledCard>
194-
<TextContainer>
195-
<Index>#{index}:</Index>
196-
{name && description ? (
197-
<>
198-
<h3>{name}</h3>
199-
<StyledReactMarkdown>{description}</StyledReactMarkdown>
200-
</>
201-
) : (
202-
<p>{evidence}</p>
203-
)}
204-
</TextContainer>
218+
<TopContent>
219+
<IndexAndName>
220+
<Index>#{index}: </Index>
221+
<h3>{name}</h3>
222+
</IndexAndName>
223+
{name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}
224+
</TopContent>
205225
<BottomShade>
206-
<LeftContent>
226+
<BottomLeftContent>
207227
<AccountContainer>
208228
<Identicon size="24" string={sender} />
209229
<ExternalLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
210230
<Address>{shortenAddress(sender)}</Address>
211231
</ExternalLink>
212232
</AccountContainer>
213-
<ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
214-
<Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
215-
</ExternalLink>
216-
</LeftContent>
233+
<StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
234+
<label>{formatDate(Number(timestamp), true)}</label>
235+
</StyledExternalLink>
236+
</BottomLeftContent>
217237
{fileURI && fileURI !== "-" ? (
218238
<FileLinkContainer>
219239
<StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>

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

+6-15
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ const Container = styled.div`
1111
gap: 6px;
1212
`;
1313

14-
const AnswerTitle = styled.h3`
15-
margin: 0;
16-
`;
17-
18-
const AnswerDescription = styled.h4`
19-
margin: 0;
20-
font-size: 15px;
21-
color: ${({ theme }) => theme.primaryText};
22-
padding-bottom: 0.5px;
23-
`;
24-
2514
interface IAnswer {
2615
answer?: Answer;
2716
currentRuling: number;
@@ -32,14 +21,16 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
3221
<>
3322
{answer ? (
3423
<Container>
35-
<AnswerTitle>
24+
<small>
3625
{answer.title}
3726
{answer.description.trim() ? " -" : null}
38-
</AnswerTitle>
39-
<AnswerDescription>{answer.description.trim()}</AnswerDescription>
27+
</small>
28+
<small>{answer.description.trim()}</small>
4029
</Container>
4130
) : (
42-
<Container>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</Container>
31+
<Container>
32+
{currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}
33+
</Container>
4334
)}
4435
</>
4536
);

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

-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import { responsiveSize } from "styles/responsiveSize";
2424
const Container = styled.div`
2525
display: flex;
2626
position: relative;
27-
margin-left: 8px;
2827
flex-direction: column;
2928
`;
3029

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

+36-16
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ArrowIcon from "svgs/icons/arrow.svg";
99

1010
import { REFETCH_INTERVAL } from "consts/index";
1111
import { Periods } from "consts/periods";
12+
import { DEFAULT_CHAIN } from "consts/chains";
1213
import { useReadKlerosCoreCurrentRuling } from "hooks/contracts/generated";
1314
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
1415
import { useVotingHistory } from "hooks/queries/useVotingHistory";
@@ -41,6 +42,14 @@ const JuryContainer = styled.div`
4142
}
4243
`;
4344

45+
const VerdictContainer = styled.div`
46+
display: flex;
47+
flex-direction: row;
48+
align-items: center;
49+
flex-wrap: wrap;
50+
gap: ${responsiveSize(6, 8)};
51+
`;
52+
4453
const JuryDecisionTag = styled.small`
4554
font-weight: 400;
4655
line-height: 19px;
@@ -51,6 +60,15 @@ const StyledDivider = styled(Divider)`
5160
margin: ${responsiveSize(16, 24)} 0px;
5261
`;
5362

63+
const ReStyledArrowLink = styled(StyledArrowLink)`
64+
font-size: 14px;
65+
66+
> svg {
67+
height: 15px;
68+
width: 15px;
69+
}
70+
`;
71+
5472
interface IFinalDecision {
5573
arbitrable?: `0x${string}`;
5674
}
@@ -68,6 +86,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
6886
const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({
6987
query: { refetchInterval: REFETCH_INTERVAL },
7088
args: [BigInt(id ?? 0)],
89+
chainId: DEFAULT_CHAIN,
7190
});
7291
const currentRuling = Number(currentRulingArray?.[0]);
7392
const answer = populatedDisputeData?.answers?.[currentRuling! - 1];
@@ -81,27 +100,28 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
81100

82101
return (
83102
<Container>
84-
<VerdictBanner ruled={ruled} />
85-
86-
{ruled && (
87-
<JuryContainer>
88-
<JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
89-
<AnswerDisplay {...{ answer, currentRuling }} />
90-
</JuryContainer>
91-
)}
92-
{!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
93-
<JuryContainer>
94-
<JuryDecisionTag>This option is winning:</JuryDecisionTag>
95-
<AnswerDisplay {...{ answer, currentRuling }} />
96-
</JuryContainer>
97-
)}
103+
<VerdictContainer>
104+
<VerdictBanner ruled={ruled} />
105+
{ruled && (
106+
<JuryContainer>
107+
<JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
108+
<AnswerDisplay {...{ answer, currentRuling }} />
109+
</JuryContainer>
110+
)}
111+
{!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
112+
<JuryContainer>
113+
<JuryDecisionTag>This option is winning:</JuryDecisionTag>
114+
<AnswerDisplay {...{ answer, currentRuling }} />
115+
</JuryContainer>
116+
)}
117+
</VerdictContainer>
98118
<StyledDivider />
99119
{isLoading && !isDisconnected ? (
100120
<Skeleton width={250} height={20} />
101121
) : (
102-
<StyledArrowLink to={`/cases/${id?.toString()}/voting`}>
122+
<ReStyledArrowLink to={`/cases/${id?.toString()}/voting`}>
103123
{buttonText} <ArrowIcon />
104-
</StyledArrowLink>
124+
</ReStyledArrowLink>
105125
)}
106126
</Container>
107127
);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import HourglassIcon from "svgs/icons/hourglass.svg";
77
const BannerContainer = styled.div`
88
display: flex;
99
gap: 8px;
10-
margin-bottom: 8px;
10+
align-items: center;
1111
svg {
1212
width: 16px;
1313
height: 16px;

‎web/src/layout/Header/navbar/Menu/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
44
import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
55
import HelpIcon from "svgs/menu-icons/help.svg";
66
import LightModeIcon from "svgs/menu-icons/light-mode.svg";
7-
import NotificationsIcon from "svgs/menu-icons/notifications.svg";
7+
// import NotificationsIcon from "svgs/menu-icons/notifications.svg";
88
import SettingsIcon from "svgs/menu-icons/settings.svg";
99

1010
import { useToggleTheme } from "hooks/useToggleThemeContext";
@@ -57,7 +57,7 @@ const Menu: React.FC<ISettings & IHelp & IMenu> = ({ toggleIsHelpOpen, toggleIsS
5757
const isLightTheme = theme === "light";
5858

5959
const buttons = [
60-
{ text: "Notifications", Icon: NotificationsIcon },
60+
// { text: "Notifications", Icon: NotificationsIcon },
6161
{
6262
text: "Settings",
6363
Icon: SettingsIcon,

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

-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const ScrollButton = styled(Button)`
4141
background-color: transparent;
4242
padding: 0;
4343
flex-direction: row-reverse;
44-
margin: 0 0 18px;
4544
gap: 8px;
4645
.button-text {
4746
color: ${({ theme }) => theme.primaryBlue};

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

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const StyledBox = styled(Box)`
1414
display: flex;
1515
gap: 8px;
1616
align-items: center;
17+
margin-bottom: -4px;
1718
> p {
1819
margin: 0;
1920
}

0 commit comments

Comments
 (0)