Merge pull request #1808 from kleros/feat/lang-direction

feat(web): lang-direction

Author: alcercu

web/src/components/CasesDisplay/Search.tsx

@@ -90,6 +90,7 @@ const Search: React.FC = () => {
  )}
  <SearchBarContainer>
  <StyledSearchbar
+ dir="auto"
  type="text"
  placeholder="Search By ID"
  value={search}

web/src/components/DisputePreview/Alias.tsx

@@ -46,7 +46,7 @@ const AliasDisplay: React.FC<IAlias> = ({ name, address }) => {
  const resolvedAddress = addressFromENS ?? (address as `0x${string}`);
 
  return (
- <AliasContainer>
+ <AliasContainer dir="auto">
  {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={resolvedAddress} size="24" />}
  <TextContainer>
  {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={resolvedAddress} />}&nbsp;

web/src/components/DisputePreview/DisputeContext.tsx

@@ -12,10 +12,11 @@ import { responsiveSize } from "styles/responsiveSize";
 import ReactMarkdown from "components/ReactMarkdown";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
-import AliasDisplay from "./Alias";
 import { Divider } from "../Divider";
 import { ExternalLink } from "../ExternalLink";
 
+import AliasDisplay from "./Alias";
+
 const StyledH1 = styled.h1`
  margin: 0;
  word-wrap: break-word;
@@ -75,16 +76,18 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
 
  return (
  <>
- <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
+ <StyledH1 dir="auto">
+ {isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}
+ </StyledH1>
  {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
  <div>
  {disputeDetails?.question?.trim() ? (
- <ReactMarkdownWrapper>
+ <ReactMarkdownWrapper dir="auto">
  <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
  </ReactMarkdownWrapper>
  ) : null}
  {disputeDetails?.description?.trim() ? (
- <ReactMarkdownWrapper>
+ <ReactMarkdownWrapper dir="auto">
  <ReactMarkdown>{disputeDetails.description}</ReactMarkdown>
  </ReactMarkdownWrapper>
  ) : null}
@@ -100,7 +103,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
  {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
  <AnswersContainer>
  {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
- <AnswerTitleAndDescription key={answer.title}>
+ <AnswerTitleAndDescription dir="auto" key={answer.title}>
  <label>{i + 1}. </label>
  <AnswerTitle>{answer.title}</AnswerTitle>
  <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>

web/src/components/DisputeView/DisputeCardView.tsx

@@ -46,7 +46,7 @@ const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)`
 
 const TruncatedTitle = ({ text, maxLength }) => {
  const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
- return <StyledCaseCardTitle>{truncatedText}</StyledCaseCardTitle>;
+ return <StyledCaseCardTitle dir="auto">{truncatedText}</StyledCaseCardTitle>;
 };
 
 interface IDisputeCardView {

web/src/components/DisputeView/DisputeListView.tsx

@@ -8,8 +8,8 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 
-import { responsiveSize } from "styles/responsiveSize";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { responsiveSize } from "styles/responsiveSize";
 
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
@@ -37,11 +37,12 @@ const TitleContainer = styled.div<{ isLabel?: boolean }>`
  width: ${({ isLabel }) => (isLabel ? responsiveSize(150, 340, 900) : "fit-content")};
  h3 {
  margin: 0;
+ flex: 1;
  }
 `;
 const TruncatedTitle = ({ text, maxLength }) => {
  const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
- return <h3>{truncatedText}</h3>;
+ return <h3 dir="auto">{truncatedText}</h3>;
 };
 interface IDisputeListView {
  title: string;

web/src/components/EvidenceCard.tsx

@@ -1,10 +1,6 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
 
@@ -19,6 +15,10 @@ import { shortenAddress } from "utils/shortenAddress";
 
 import { type Evidence } from "src/graphql/graphql";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { ExternalLink } from "./ExternalLink";
 import { InternalLink } from "./InternalLink";
 
@@ -65,6 +65,7 @@ const Index = styled.p`
  color: ${({ theme }) => theme.secondaryText};
 `;
 
+const ReactMarkdownWrapper = styled.div``;
 const StyledReactMarkdown = styled(ReactMarkdown)`
  a {
  font-size: 16px;
@@ -229,12 +230,18 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
 
  return (
  <StyledCard>
- <TopContent>
+ <TopContent dir="auto">
  <IndexAndName>
  <Index>#{index}. </Index>
  <h3>{name}</h3>
  </IndexAndName>
- {name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}
+ {name && description ? (
+ <ReactMarkdownWrapper dir="auto">
+ <StyledReactMarkdown>{description}</StyledReactMarkdown>
+ </ReactMarkdownWrapper>
+ ) : (
+ <p>{evidence}</p>
+ )}
  </TopContent>
  <BottomShade>
  <BottomLeftContent>

web/src/components/Field.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
+
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import { InternalLink } from "./InternalLink";
@@ -99,7 +100,7 @@ const Field: React.FC<IField> = ({
  className,
 }) => {
  return (
- <FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
+ <FieldContainer dir="auto" isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
  <Icon />
  {(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
  {link ? (

web/src/components/LabeledInput.tsx

@@ -30,7 +30,7 @@ const LabeledInput: React.FC<ILabeledInput> = (props) => {
  return (
  <Container>
  {!isUndefined(props.label) ? <StyledLabel id={props.label}>{props.label}</StyledLabel> : null}
- <StyledField {...props} id={props?.label} />
+ <StyledField dir="auto" {...props} id={props?.label} />
  </Container>
  );
 };

web/src/components/Verdict/Answer.tsx

@@ -22,7 +22,7 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
  return (
  <>
  {answer ? (
- <AnswerTitleAndDescription>
+ <AnswerTitleAndDescription dir="auto">
  <AnswerTitle>{answer.title}</AnswerTitle>
  <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
  </AnswerTitleAndDescription>

web/src/components/Verdict/FinalDecision.tsx

@@ -7,9 +7,9 @@ import { useAccount } from "wagmi";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
+import { DEFAULT_CHAIN } from "consts/chains";
 import { REFETCH_INTERVAL } from "consts/index";
 import { Periods } from "consts/periods";
-import { DEFAULT_CHAIN } from "consts/chains";
 import { useReadKlerosCoreCurrentRuling } from "hooks/contracts/generated";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
@@ -21,11 +21,12 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
-import AnswerDisplay from "./Answer";
 import { Divider } from "../Divider";
 import { StyledArrowLink } from "../StyledArrowLink";
 
+import AnswerDisplay from "./Answer";
+import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
+
 const Container = styled.div`
  width: 100%;
 `;
@@ -36,11 +37,14 @@ const JuryContainer = styled.div`
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
-
+ flex: 1;
  h3 {
  line-height: 21px;
  margin-bottom: 0px;
  }
+ > div {
+ flex: 1;
+ }
 `;
 
 const VerdictContainer = styled.div`
@@ -104,7 +108,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
  if (isVotingPeriod && isHiddenVotes && commited && !hasVoted) return "Reveal your vote";
  if (isVotingPeriod && !isHiddenVotes && !hasVoted) return "Cast your vote";
  return "Check how the jury voted";
- }, [wasDrawn, hasVoted, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes]);
+ }, [wasDrawn, hasVoted, isCommitPeriod, isVotingPeriod, commited, isHiddenVotes, isDisconnected]);
 
  return (
  <Container>