feat: add links to courts in extrastats, style adjustments

Author: kemuru

web/src/components/DisputePreview/DisputeContext.tsx

@@ -14,24 +14,20 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 
 import AliasDisplay from "./Alias";
 import { Divider } from "../Divider";
+import { ExternalLink } from "../ExternalLink";
 
 const StyledH1 = styled.h1`
   margin: 0;
   word-wrap: break-word;
 `;
 
-const QuestionAndDescription = styled.div`
-  display: flex;
-  flex-direction: column;
-  word-wrap: break-word;
-  div:first-child p:first-of-type {
-    font-size: 16px;
-    font-weight: 400;
+const ReactMarkdownWrapper = styled.div`
+  & p:first-of-type {
     margin: 0;
   }
 `;
 
-const VotingOptions = styled(QuestionAndDescription)`
+const VotingOptions = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -51,19 +47,6 @@ const Answer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  > label {
-    max-width: 100%;
-  }
-`;
-
-const StyledSmall = styled.small`
-  color: ${({ theme }) => theme.secondaryText};
-  font-weight: 400;
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
-  font-weight: 600;
 `;
 
 const AliasesContainer = styled.div`
@@ -83,26 +66,29 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
     <>
       <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
       {!isUndefined(disputeDetails) && (
-        <QuestionAndDescription>
-          <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
-          <ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
-        </QuestionAndDescription>
+        <>
+          <ReactMarkdownWrapper>
+            <ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
+          </ReactMarkdownWrapper>
+          <ReactMarkdownWrapper>
+            <ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
+          </ReactMarkdownWrapper>
+        </>
       )}
       {isUndefined(disputeDetails?.frontendUrl) ? null : (
-        <a href={disputeDetails?.frontendUrl} target="_blank" rel="noreferrer">
+        <ExternalLink href={disputeDetails?.frontendUrl} target="_blank" rel="noreferrer">
           Go to arbitrable
-        </a>
+        </ExternalLink>
       )}
       <VotingOptions>
         {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
             <Answer key={answer.title}>
-              <StyledSmall>{i + 1 + `.`}</StyledSmall>
-              <StyledLabel>
-                {answer.title}
+              <small>
+                <label>{i + 1}.</label> {answer.title}
                 {answer.description.trim() ? ` - ${answer.description}` : null}
-              </StyledLabel>
+              </small>
             </Answer>
           ))}
         </AnswersContainer>

web/src/components/ExtraStatsDisplay.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
+import { InternalLink } from "./InternalLink";
 
 const Container = styled.div`
   display: flex;
@@ -30,10 +31,8 @@ const TextContainer = styled.div`
   justify-content: center;
 `;
 
-const StyledP = styled.p`
-  font-size: 14px;
+const StyledInternalLink = styled(InternalLink)`
   font-weight: 600;
-  margin: 0;
 `;
 
 const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
@@ -42,18 +41,25 @@ const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
 
 export interface IExtraStatsDisplay {
   title: string;
+  courtId?: string;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   content?: React.ReactNode;
   text?: string;
 }
 
-const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, content, icon: Icon, ...props }) => {
+const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, courtId, text, content, icon: Icon, ...props }) => {
   return (
     <Container {...props}>
       <SVGContainer>{<Icon />}</SVGContainer>
       <TextContainer>
         <label>{title}:</label>
-        {content ? content : <StyledP>{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}</StyledP>}
+        {content ? (
+          content
+        ) : (
+          <StyledInternalLink to={`/courts/${courtId?.toString()}`}>
+            {!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}
+          </StyledInternalLink>
+        )}
       </TextContainer>
     </Container>
   );

web/src/hooks/queries/usePopulatedDisputeData.ts

@@ -6,6 +6,7 @@ import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disput
 import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { DEFAULT_CHAIN } from "consts/chains";
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { isUndefined } from "utils/index";
 
@@ -47,6 +48,7 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
             document: disputeTemplateQuery,
             variables: { id: disputeData.dispute?.templateId.toString() },
             isDisputeTemplate: true,
+            chainId: DEFAULT_CHAIN,
           });
 
           const templateData = disputeTemplate?.templateData;

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

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

web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx

@@ -14,7 +14,7 @@ const Container = styled.div`
 
 const PNKLogoAndTitle = styled.div`
   display: flex;
-  gap: 0 16px;
+  gap: 0 12px;
   align-items: center;
 `;
 

web/src/pages/Courts/CourtDetails/StakePanel/index.tsx

@@ -15,32 +15,32 @@ const Container = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 28px;
+  gap: 16px;
 
   ${landscapeStyle(
     () => css`
+      gap: 24px;
       flex-direction: column;
     `
   )};
 `;
 
-const LeftArea = styled.div`
+const StakingArea = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 24px;
 `;
 
 const TagArea = styled.div`
   display: flex;
   gap: 10px;
 `;
 
-const StakeArea = styled(TagArea)`
-  margin-top: 28px;
+const InputArea = styled(TagArea)`
   flex-direction: column;
 `;
 
 const TextArea = styled.div`
-  margin-top: 32px;
   color: ${({ theme }) => theme.primaryText};
 `;
 
@@ -57,7 +57,7 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour
   const isStaking = action === ActionType.stake;
   return (
     <Container>
-      <LeftArea>
+      <StakingArea>
         <TagArea>
           <Tag text="Stake" active={isActive} onClick={() => handleClick(ActionType.stake)} />
           <Tag text="Withdraw" active={!isActive} onClick={() => handleClick(ActionType.withdraw)} />
@@ -67,10 +67,10 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour
           {courtName}
           {courtName.toLowerCase().endsWith("court") || courtName.toLowerCase().startsWith("corte") ? null : " Court"}
         </TextArea>
-        <StakeArea>
+        <InputArea>
           <InputDisplay {...{ action, amount, setAmount }} />
-        </StakeArea>
-      </LeftArea>
+        </InputArea>
+      </StakingArea>
       <Simulator amountToStake={amount ? Number(uncommify(amount)) : 0} {...{ isStaking }} />
     </Container>
   );

web/src/pages/Home/CourtOverview/ExtraStats.tsx

@@ -26,23 +26,27 @@ const StyledLabel = styled.label`
 interface IStat {
   title: string;
   getText: (data) => string;
+  getCourtId: (data) => string;
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
 
 const stats: IStat[] = [
   {
     title: "Most Cases",
     getText: ({ data }) => data?.mostDisputedCourt?.name,
+    getCourtId: ({ data }) => data?.mostDisputedCourt?.id,
     icon: LongArrowUp,
   },
   {
     title: "Highest drawing chance",
     getText: ({ data }) => data?.bestDrawingChancesCourt?.name,
+    getCourtId: ({ data }) => data?.bestDrawingChancesCourt?.id,
     icon: LongArrowUp,
   },
   {
     title: "Highest rewards chance",
     getText: ({ data }) => data?.bestExpectedRewardCourt?.name,
+    getCourtId: ({ data }) => data?.bestExpectedRewardCourt?.id,
     icon: LongArrowUp,
   },
 ];
@@ -83,8 +87,8 @@ const ExtraStats = () => {
       {data.data?.mostDisputedCourt?.numberDisputes === 0 ? (
         <StyledLabel>No activity in this period</StyledLabel>
       ) : (
-        stats.map(({ title, getText, icon }) => (
-          <ExtraStatsDisplay key={title} {...{ title, icon }} text={getText(data)} />
+        stats.map(({ title, getCourtId, getText, icon }) => (
+          <ExtraStatsDisplay key={title} courtId={getCourtId(data)} {...{ title, icon }} text={getText(data)} />
         ))
       )}
     </StyledCard>