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>

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx

@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction, useMemo, useEffect } from "react";
 import styled from "styled-components";
 
 import { Field } from "@kleros/ui-components-library";
+
 import { isEmpty } from "src/utils";
 
 const StyledLabel = styled.label`
@@ -58,6 +59,7 @@ const FormContact: React.FC<IForm> = ({
     <>
       <StyledLabel>{contactLabel}</StyledLabel>
       <StyledField
+        dir="auto"
         variant={fieldVariant}
         value={contactInput}
         onChange={handleInputChange}

web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx

@@ -48,6 +48,7 @@ const EvidenceSearch: React.FC<IEvidenceSearch> = ({ search, setSearch, evidence
 
       <SearchContainer>
         <StyledSearchBar
+          dir="auto"
           placeholder="Search evidence by number, word, or submitter"
           onChange={(e) => setSearch(e.target.value)}
           value={search}

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -4,15 +4,16 @@ import styled from "styled-components";
 import Modal from "react-modal";
 import { useWalletClient, usePublicClient, useConfig } from "wagmi";
 
+import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { Textarea, Button, FileUploader } from "@kleros/ui-components-library";
 
-import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { simulateEvidenceModuleSubmitEvidence } from "hooks/contracts/generated";
 import { wrapWithToast, errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
+import { isEmpty } from "src/utils";
+
 import EnsureAuth from "components/EnsureAuth";
 import { EnsureChain } from "components/EnsureChain";
-import { isEmpty } from "src/utils";
 
 const StyledModal = styled(Modal)`
   position: absolute;
@@ -91,7 +92,12 @@ const SubmitEvidenceModal: React.FC<{
   return (
     <StyledModal {...{ isOpen }} shouldCloseOnEsc shouldCloseOnOverlayClick onRequestClose={close}>
       <h1>Submit New Evidence</h1>
-      <StyledTextArea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Your Arguments" />
+      <StyledTextArea
+        dir="auto"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Your Arguments"
+      />
       <StyledFileUploader callback={(file: File) => setFile(file)} />
       <ButtonArea>
         <Button variant="secondary" disabled={isSending} text="Return" onClick={close} />

web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx

@@ -23,6 +23,7 @@ interface IJustificationArea {
 
 const JustificationArea: React.FC<IJustificationArea> = ({ justification, setJustification }) => (
   <StyledTextarea
+    dir="auto"
     value={justification}
     onChange={(e) => setJustification(e.target.value)}
     placeholder="Justify your vote..."

web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx

@@ -65,7 +65,7 @@ const Options: React.FC<IOptions> = ({ arbitrable, handleSelection, justificatio
 
   return id ? (
     <>
-      <MainContainer>
+      <MainContainer dir="auto">
         <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
         {!isUndefined(justification) && !isUndefined(setJustification) ? (
           <JustificationArea {...{ justification, setJustification }} />

web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx

@@ -34,6 +34,7 @@ const StyledButton = styled(Button)`
   margin: 16px auto;
 `;
 
+const ReactMarkdownWrapper = styled.div``;
 interface IReveal {
   arbitrable: `0x${string}`;
   voteIDs: string[];
@@ -100,7 +101,9 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isR
         <StyledInfoCard msg="Failed to commit on time." />
       ) : isRevealPeriod ? (
         <>
-          <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          <ReactMarkdownWrapper dir="auto">
+            <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          </ReactMarkdownWrapper>
           <JustificationArea {...{ justification, setJustification }} />
           <StyledButton
             variant="secondary"

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

@@ -73,14 +73,16 @@ const AccordionContentContainer = styled.div`
   gap: 12px;
 `;
 
-const JustificationText = styled.div`
+const LabelWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const JustificationText = styled.label`
   color: ${({ theme }) => theme.secondaryText};
   font-size: 16px;
   line-height: 1.2;
-  &:before {
-    content: "Justification: ";
-    color: ${({ theme }) => theme.primaryText};
-  }
+  flex: 1;
 `;
 
 const StyledLabel = styled.label`
@@ -91,6 +93,7 @@ const StyledLabel = styled.label`
 const SecondaryTextLabel = styled.label`
   color: ${({ theme }) => theme.secondaryText};
   font-size: 16px;
+  flex: 1;
 `;
 
 const AccordionContent: React.FC<{
@@ -100,13 +103,16 @@ const AccordionContent: React.FC<{
 }> = ({ justification, choice, answers }) => (
   <AccordionContentContainer>
     {!isUndefined(choice) && (
-      <div>
+      <LabelWrapper>
         <StyledLabel>Voted:&nbsp;</StyledLabel>
-        <SecondaryTextLabel>{getVoteChoice(parseInt(choice), answers)}</SecondaryTextLabel>
-      </div>
+        <SecondaryTextLabel dir="auto">{getVoteChoice(parseInt(choice), answers)}</SecondaryTextLabel>
+      </LabelWrapper>
     )}
     {justification ? (
-      <JustificationText>{justification}</JustificationText>
+      <LabelWrapper>
+        <StyledLabel>Justification:&nbsp;</StyledLabel>
+        <JustificationText dir="auto">{justification}</JustificationText>
+      </LabelWrapper>
     ) : (
       <SecondaryTextLabel>No justification provided</SecondaryTextLabel>
     )}

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -47,7 +47,7 @@ const StyledTitle = styled.h1`
   margin-bottom: 0;
   font-size: ${responsiveSize(18, 24)};
 `;
-
+const ReactMarkdownWrapper = styled.div``;
 const StyledReactMarkDown = styled(ReactMarkdown)`
   max-width: inherit;
   word-wrap: break-word;
@@ -95,7 +95,9 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
           {isQuestion && (
             <>
               {disputeDetails.question ? (
-                <StyledReactMarkDown>{disputeDetails.question}</StyledReactMarkDown>
+                <ReactMarkdownWrapper dir="auto">
+                  <StyledReactMarkDown>{disputeDetails.question}</StyledReactMarkDown>
+                </ReactMarkdownWrapper>
               ) : (
                 <StyledReactMarkDown>{isError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR}</StyledReactMarkDown>
               )}