Merge pull request #1786 from kleros/feat/ui-improvements

chore: ui improvements (detailed inside)

Author: alcercu

web/src/assets/svgs/icons/ethereum-vote.svg

@@ -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/assets/svgs/icons/law-balance-hourglass.svg

@@ -1,23 +1,23 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { FallbackProps } from "react-error-boundary";
 
 import { Button } from "@kleros/ui-components-library";
 
 import ErrorIcon from "svgs/icons/warning-outline.svg";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
 import HeroImage from "./HeroImage";
 
 const Container = styled.div`
   width: 100%;
   height: 100vh;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/components/DisputePreview/DisputeContext.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/components/ErrorFallback.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import ClosedCircle from "svgs/icons/close-circle.svg";
 
-const StyledClosedCircle = styled(ClosedCircle)`
+export const StyledClosedCircle = styled(ClosedCircle)`
   path {
     fill: ${({ theme }) => theme.error};
   }
@@ -11,4 +11,5 @@ const StyledClosedCircle = styled(ClosedCircle)`
 const ClosedCircleIcon: React.FC = () => {
   return <StyledClosedCircle />;
 };
+
 export default ClosedCircleIcon;

web/src/components/ExtraStatsDisplay.tsx

@@ -1,13 +1,14 @@
 import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { useParams } from "react-router-dom";
 
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 
 import CalendarIcon from "svgs/icons/calendar.svg";
 import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg";
-import AppealedCaseIcon from "svgs/icons/close-circle.svg";
 
 import { Periods } from "consts/periods";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
@@ -19,7 +20,7 @@ import { useVotingHistory } from "queries/useVotingHistory";
 
 import { ClassicRound } from "src/graphql/graphql";
 
-import { responsiveSize } from "styles/responsiveSize";
+import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon";
 
 const Container = styled.div`
   display: flex;
@@ -101,7 +102,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
               party: "",
               subtitle: formatDate(roundTimeline?.[Periods.appeal]),
               rightSided: true,
-              Icon: AppealedCaseIcon,
+              Icon: StyledClosedCircle,
             });
           } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
             acc.push({

web/src/components/StyledIcons/ClosedCircleIcon.tsx

@@ -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/components/Verdict/DisputeTimeline.tsx

@@ -34,6 +34,7 @@ import Settings from "./navbar/Menu/Settings";
 const Container = styled.div`
   display: none;
   position: absolute;
+  height: 64px;
 
   ${landscapeStyle(
     () => css`

web/src/hooks/queries/usePopulatedDisputeData.ts

@@ -3,22 +3,19 @@ import styled, { Theme } from "styled-components";
 
 import { Link } from "react-router-dom";
 
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-
 import { ArbitratorTypes, getArbitratorType } from "consts/index";
+
 import { isUndefined } from "utils/index";
 
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
 `;
 
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
 const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>`
   transform: skewX(-15deg);
   background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]};
@@ -32,6 +29,9 @@ const BadgeText = styled.label`
 `;
 
 const StyledKlerosCourtLogo = styled(KlerosCourtLogo)`
+  max-height: 40px;
+  width: auto;
+
   &:hover {
     path {
       fill: ${({ theme }) => theme.white}BF;
@@ -61,9 +61,9 @@ const CourtBadge: React.FC = () => {
 const Logo: React.FC = () => (
   <Container>
     {" "}
-    <StyledLink to={"/"}>
+    <Link to={"/"}>
       <StyledKlerosCourtLogo />
-    </StyledLink>
+    </Link>
     <CourtBadge />
   </Container>
 );

web/src/layout/Header/DesktopHeader.tsx

@@ -17,6 +17,7 @@ const Container = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 64px;
 
   ${landscapeStyle(
     () => css`

web/src/layout/Header/Logo.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
 
 const HeaderContainer = styled.div`
   width: 100%;
-  padding: 8px 24px;
+  padding: 0 24px;
 `;
 
 const Header: React.FC = () => {

web/src/layout/Header/MobileHeader.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/layout/Header/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 
 import { Routes, Route } from "react-router-dom";
 
@@ -13,7 +14,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

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

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