Skip to content

Commit 9daf106

Browse files
authored
Merge pull request #1808 from kleros/feat/lang-direction
feat(web): lang-direction
2 parents 1fa3e7d + 2f055e2 commit 9daf106

File tree

21 files changed

+80
-39
lines changed

21 files changed

+80
-39
lines changed

web/src/components/CasesDisplay/Search.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const Search: React.FC = () => {
9090
)}
9191
<SearchBarContainer>
9292
<StyledSearchbar
93+
dir="auto"
9394
type="text"
9495
placeholder="Search By ID"
9596
value={search}

web/src/components/DisputePreview/Alias.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const AliasDisplay: React.FC<IAlias> = ({ name, address }) => {
4646
const resolvedAddress = addressFromENS ?? (address as `0x${string}`);
4747

4848
return (
49-
<AliasContainer>
49+
<AliasContainer dir="auto">
5050
{isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={resolvedAddress} size="24" />}
5151
<TextContainer>
5252
{isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={resolvedAddress} />}&nbsp;

web/src/components/DisputePreview/DisputeContext.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ import { responsiveSize } from "styles/responsiveSize";
1212
import ReactMarkdown from "components/ReactMarkdown";
1313
import { StyledSkeleton } from "components/StyledSkeleton";
1414

15-
import AliasDisplay from "./Alias";
1615
import { Divider } from "../Divider";
1716
import { ExternalLink } from "../ExternalLink";
1817

18+
import AliasDisplay from "./Alias";
19+
1920
const StyledH1 = styled.h1`
2021
margin: 0;
2122
word-wrap: break-word;
@@ -75,16 +76,18 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
7576

7677
return (
7778
<>
78-
<StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
79+
<StyledH1 dir="auto">
80+
{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}
81+
</StyledH1>
7982
{disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
8083
<div>
8184
{disputeDetails?.question?.trim() ? (
82-
<ReactMarkdownWrapper>
85+
<ReactMarkdownWrapper dir="auto">
8386
<ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
8487
</ReactMarkdownWrapper>
8588
) : null}
8689
{disputeDetails?.description?.trim() ? (
87-
<ReactMarkdownWrapper>
90+
<ReactMarkdownWrapper dir="auto">
8891
<ReactMarkdown>{disputeDetails.description}</ReactMarkdown>
8992
</ReactMarkdownWrapper>
9093
) : null}
@@ -100,7 +103,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
100103
{isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
101104
<AnswersContainer>
102105
{disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
103-
<AnswerTitleAndDescription key={answer.title}>
106+
<AnswerTitleAndDescription dir="auto" key={answer.title}>
104107
<label>{i + 1}. </label>
105108
<AnswerTitle>{answer.title}</AnswerTitle>
106109
<AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>

web/src/components/DisputeView/DisputeCardView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)`
4646

4747
const TruncatedTitle = ({ text, maxLength }) => {
4848
const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
49-
return <StyledCaseCardTitle>{truncatedText}</StyledCaseCardTitle>;
49+
return <StyledCaseCardTitle dir="auto">{truncatedText}</StyledCaseCardTitle>;
5050
};
5151

5252
interface IDisputeCardView {

web/src/components/DisputeView/DisputeListView.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { Card } from "@kleros/ui-components-library";
88

99
import { Periods } from "consts/periods";
1010

11-
import { responsiveSize } from "styles/responsiveSize";
1211
import { hoverShortTransitionTiming } from "styles/commonStyles";
12+
import { responsiveSize } from "styles/responsiveSize";
1313

1414
import DisputeInfo from "./DisputeInfo";
1515
import PeriodBanner from "./PeriodBanner";
@@ -37,11 +37,12 @@ const TitleContainer = styled.div<{ isLabel?: boolean }>`
3737
width: ${({ isLabel }) => (isLabel ? responsiveSize(150, 340, 900) : "fit-content")};
3838
h3 {
3939
margin: 0;
40+
flex: 1;
4041
}
4142
`;
4243
const TruncatedTitle = ({ text, maxLength }) => {
4344
const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
44-
return <h3>{truncatedText}</h3>;
45+
return <h3 dir="auto">{truncatedText}</h3>;
4546
};
4647
interface IDisputeListView {
4748
title: string;

web/src/components/EvidenceCard.tsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { useMemo } from "react";
22
import styled, { css } from "styled-components";
33

4-
import { landscapeStyle } from "styles/landscapeStyle";
5-
import { responsiveSize } from "styles/responsiveSize";
6-
import { hoverShortTransitionTiming } from "styles/commonStyles";
7-
84
import Identicon from "react-identicons";
95
import ReactMarkdown from "react-markdown";
106

@@ -19,6 +15,10 @@ import { shortenAddress } from "utils/shortenAddress";
1915

2016
import { type Evidence } from "src/graphql/graphql";
2117

18+
import { hoverShortTransitionTiming } from "styles/commonStyles";
19+
import { landscapeStyle } from "styles/landscapeStyle";
20+
import { responsiveSize } from "styles/responsiveSize";
21+
2222
import { ExternalLink } from "./ExternalLink";
2323
import { InternalLink } from "./InternalLink";
2424

@@ -65,6 +65,7 @@ const Index = styled.p`
6565
color: ${({ theme }) => theme.secondaryText};
6666
`;
6767

68+
const ReactMarkdownWrapper = styled.div``;
6869
const StyledReactMarkdown = styled(ReactMarkdown)`
6970
a {
7071
font-size: 16px;
@@ -229,12 +230,18 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
229230

230231
return (
231232
<StyledCard>
232-
<TopContent>
233+
<TopContent dir="auto">
233234
<IndexAndName>
234235
<Index>#{index}. </Index>
235236
<h3>{name}</h3>
236237
</IndexAndName>
237-
{name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}
238+
{name && description ? (
239+
<ReactMarkdownWrapper dir="auto">
240+
<StyledReactMarkdown>{description}</StyledReactMarkdown>
241+
</ReactMarkdownWrapper>
242+
) : (
243+
<p>{evidence}</p>
244+
)}
238245
</TopContent>
239246
<BottomShade>
240247
<BottomLeftContent>

web/src/components/Field.tsx

Lines changed: 2 additions & 1 deletion
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+
34
import { landscapeStyle } from "styles/landscapeStyle";
45

56
import { InternalLink } from "./InternalLink";
@@ -99,7 +100,7 @@ const Field: React.FC<IField> = ({
99100
className,
100101
}) => {
101102
return (
102-
<FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
103+
<FieldContainer dir="auto" isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
103104
<Icon />
104105
{(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
105106
{link ? (

web/src/components/LabeledInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const LabeledInput: React.FC<ILabeledInput> = (props) => {
3030
return (
3131
<Container>
3232
{!isUndefined(props.label) ? <StyledLabel id={props.label}>{props.label}</StyledLabel> : null}
33-
<StyledField {...props} id={props?.label} />
33+
<StyledField dir="auto" {...props} id={props?.label} />
3434
</Container>
3535
);
3636
};

web/src/components/Verdict/Answer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
2222
return (
2323
<>
2424
{answer ? (
25-
<AnswerTitleAndDescription>
25+
<AnswerTitleAndDescription dir="auto">
2626
<AnswerTitle>{answer.title}</AnswerTitle>
2727
<AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
2828
</AnswerTitleAndDescription>

web/src/components/Verdict/FinalDecision.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { useAccount } from "wagmi";
77

88
import ArrowIcon from "svgs/icons/arrow.svg";
99

10+
import { DEFAULT_CHAIN } from "consts/chains";
1011
import { REFETCH_INTERVAL } from "consts/index";
1112
import { Periods } from "consts/periods";
12-
import { DEFAULT_CHAIN } from "consts/chains";
1313
import { useReadKlerosCoreCurrentRuling } from "hooks/contracts/generated";
1414
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
1515
import { useVotingHistory } from "hooks/queries/useVotingHistory";
@@ -21,11 +21,12 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
2121

2222
import { landscapeStyle } from "styles/landscapeStyle";
2323

24-
import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
25-
import AnswerDisplay from "./Answer";
2624
import { Divider } from "../Divider";
2725
import { StyledArrowLink } from "../StyledArrowLink";
2826

27+
import AnswerDisplay from "./Answer";
28+
import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
29+
2930
const Container = styled.div`
3031
width: 100%;
3132
`;
@@ -36,11 +37,14 @@ const JuryContainer = styled.div`
3637
flex-wrap: wrap;
3738
align-items: center;
3839
gap: 5px 7px;
39-
40+
flex: 1;
4041
h3 {
4142
line-height: 21px;
4243
margin-bottom: 0px;
4344
}
45+
> div {
46+
flex: 1;
47+
}
4448
`;
4549

4650
const VerdictContainer = styled.div`
@@ -104,7 +108,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
104108
if (isVotingPeriod && isHiddenVotes && commited && !hasVoted) return "Reveal your vote";
105109
if (isVotingPeriod && !isHiddenVotes && !hasVoted) return "Cast your vote";
106110
return "Check how the jury voted";
107-
}, [wasDrawn, hasVoted, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes]);
111+
}, [wasDrawn, hasVoted, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes, isDisconnected]);
108112

109113
return (
110114
<Container>

0 commit comments

Comments
 (0)