Merge pull request #1760 from kleros/feat/make-cases-cards-links

feat: UX improvements

Author: alcercu

web/src/components/CasesDisplay/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
@@ -53,14 +53,15 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   className,
   totalPages,
 }) => {
-  const navigate = useNavigate();
   const location = useLocation();
   return (
     <div {...{ className }}>
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
         {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <StyledButton onClick={() => navigate(`/resolver`)} text="Create a case" Icon={ArrowIcon} />
+          <Link to={"/resolver"}>
+            <StyledButton text="Create a case" Icon={ArrowIcon} />
+          </Link>
         ) : null}
       </TitleContainer>
       <Search />

web/src/components/DisputeView/DisputeCardView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
@@ -54,15 +54,16 @@ interface IDisputeCardView {
 }
 
 const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => {
-  const navigate = useNavigate();
   return (
-    <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
-      <CardContainer>
-        {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
-        <DisputeInfo {...props} />
-      </CardContainer>
-    </StyledCard>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledCard hover>
+        <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
+        <CardContainer>
+          {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
+          <DisputeInfo {...props} />
+        </CardContainer>
+      </StyledCard>
+    </Link>
   );
 };
 

web/src/components/DisputeView/DisputeListView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useAccount } from "wagmi";
 
 import { Card } from "@kleros/ui-components-library";
@@ -56,17 +56,18 @@ interface IDisputeListView {
 }
 const DisputeListView: React.FC<IDisputeListView> = (props) => {
   const { isDisconnected } = useAccount();
-  const navigate = useNavigate();
   return (
-    <StyledListItem hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
-      <ListContainer>
-        <TitleContainer isLabel={!isDisconnected}>
-          <TruncatedTitle text={props?.title} maxLength={50} />
-        </TitleContainer>
-        <DisputeInfo {...props} />
-      </ListContainer>
-    </StyledListItem>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledListItem hover>
+        <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
+        <ListContainer>
+          <TitleContainer isLabel={!isDisconnected}>
+            <TruncatedTitle text={props?.title} maxLength={50} />
+          </TitleContainer>
+          <DisputeInfo {...props} />
+        </ListContainer>
+      </StyledListItem>
+    </Link>
   );
 };
 

web/src/components/Field.tsx

@@ -4,8 +4,6 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link } from "react-router-dom";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 const FieldContainer = styled.div<FieldContainerProps>`
   display: flex;
   align-items: center;
@@ -96,8 +94,6 @@ const Field: React.FC<IField> = ({
   isJurorBalance,
   className,
 }) => {
-  const scrollTop = useScrollTop();
-
   return (
     <FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
       <Icon />
@@ -108,7 +104,6 @@ const Field: React.FC<IField> = ({
             to={link}
             onClick={(event) => {
               event.stopPropagation();
-              scrollTop();
             }}
           >
             {value}

web/src/components/ScrollTop.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+
+import { useScrollTop } from "hooks/useScrollTop";
+
+const ScrollTop: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
+  return <></>;
+};
+export default ScrollTop;

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -6,6 +6,7 @@ import { useSearchParams } from "react-router-dom";
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
+import ScrollTop from "components/ScrollTop";
 
 import Header from "./Header";
 
@@ -39,8 +40,8 @@ const StyledNewTabIcon = styled(NewTabIcon)`
 
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
-
   const url = searchParams.get("url");
+
   return (
     <Container>
       <Header />
@@ -60,6 +61,7 @@ const AttachmentDisplay: React.FC = () => {
           </Suspense>
         </>
       ) : null}
+      <ScrollTop />
     </Container>
   );
 };

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

@@ -19,6 +19,7 @@ import Overview from "./Overview";
 import Tabs from "./Tabs";
 import Timeline from "./Timeline";
 import Voting from "./Voting";
+import ScrollTop from "components/ScrollTop";
 
 const Container = styled.div``;
 
@@ -70,6 +71,7 @@ const CaseDetails: React.FC = () => {
             <Route path="*" element={<Navigate to="overview" replace />} />
           </Routes>
         </StyledCard>
+        <ScrollTop />
       </Container>
     </VotingContextProvider>
   );

web/src/pages/Cases/CasesFetcher.tsx

@@ -13,6 +13,7 @@ import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql";
 
 import CasesDisplay from "components/CasesDisplay";
+import ScrollTop from "components/ScrollTop";
 
 const calculateStats = (
   isCourtFilter: boolean,
@@ -70,15 +71,18 @@ const CasesFetcher: React.FC = () => {
   );
 
   return (
-    <CasesDisplay
-      disputes={data?.disputes as DisputeDetailsFragment[]}
-      numberDisputes={totalCases}
-      numberClosedDisputes={ruledCases}
-      currentPage={pageNumber}
-      setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
-      totalPages={totalPages}
-      {...{ casesPerPage }}
-    />
+    <>
+      <CasesDisplay
+        disputes={data?.disputes as DisputeDetailsFragment[]}
+        numberDisputes={totalCases}
+        numberClosedDisputes={ruledCases}
+        currentPage={pageNumber}
+        setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
+        totalPages={totalPages}
+        {...{ casesPerPage }}
+      />
+      <ScrollTop />
+    </>
   );
 };
 

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

@@ -21,6 +21,7 @@ import LatestCases from "components/LatestCases";
 import Staking from "components/Popup/MiniGuides/Staking";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { Divider } from "components/Divider";
+import ScrollTop from "components/ScrollTop";
 
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -119,6 +120,7 @@ const CourtDetails: React.FC = () => {
         <Description />
       </StyledCard>
       <LatestCases filters={{ court: id }} />
+      <ScrollTop />
     </Container>
   );
 };

web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx

@@ -2,10 +2,9 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { landscapeStyle } from "styles/landscapeStyle";
-import LightButton from "components/LightButton";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
-import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
+import { Link } from "react-router-dom";
 
 const Container = styled.div`
   display: flex;
@@ -29,17 +28,13 @@ const Container = styled.div`
   )}
 `;
 
-const StyledButton = styled(LightButton)`
+const StyledLink = styled(Link)`
   display: flex;
-  flex-direction: row-reverse;
   gap: 8px;
-  padding: 0px;
-  > .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-size: 14px;
-  }
-  > .button-svg {
-    margin-right: 0;
+  align-items: center;
+  > svg {
+    height: 15px;
+    width: 15px;
     path {
       fill: ${({ theme }) => theme.primaryBlue};
     }
@@ -52,17 +47,12 @@ interface ICourtName {
 }
 
 const CourtName: React.FC<ICourtName> = ({ name, id }) => {
-  const navigate = useNavigateAndScrollTop();
-
   return (
     <Container>
       <small>{name}</small>
-      <StyledButton
-        onClick={() => navigate(`/courts/${id?.toString()}`)}
-        text="Open Court"
-        Icon={ArrowIcon}
-        className="reverse-button"
-      />
+      <StyledLink to={`/courts/${id?.toString()}`}>
+        Open Court <ArrowIcon />
+      </StyledLink>
     </Container>
   );
 };

web/src/pages/Dashboard/index.tsx

@@ -16,6 +16,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
+import ScrollTop from "components/ScrollTop";
 
 import Courts from "./Courts";
 import JurorInfo from "./JurorInfo";
@@ -92,6 +93,7 @@ const Dashboard: React.FC = () => {
           <ConnectWallet />
         </ConnectWalletContainer>
       )}
+      <ScrollTop />
     </Container>
   );
 };

web/src/pages/GetPnk/index.tsx

@@ -7,6 +7,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
+import ScrollTop from "components/ScrollTop";
 
 import { Widget } from "./Widget";
 
@@ -27,16 +28,14 @@ const Container = styled.div`
   gap: 24px;
 `;
 
-const GetPnk: React.FC = () => {
-  return (
-    <Wrapper>
-      <HeroImage />
-      <Container>
-        {!isProductionDeployment() && <ClaimPnkButton />}
-        <Widget />
-      </Container>
-    </Wrapper>
-  );
-};
-
+const GetPnk: React.FC = () => (
+  <Wrapper>
+    <HeroImage />
+    <Container>
+      {!isProductionDeployment() && <ClaimPnkButton />}
+      <Widget />
+    </Container>
+    <ScrollTop />
+  </Wrapper>
+);
 export default GetPnk;

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -22,11 +22,12 @@ const StyledH1 = styled.h1`
 `;
 
 const Header: React.FC = () => {
-  const navigate = useNavigate();
   return (
     <StyledHeader>
       <StyledH1>Court Overview</StyledH1>
-      <Button small Icon={Bookmark} text="Create a Case" onClick={() => navigate("/resolver")} />
+      <Link to={"/resolver"}>
+        <Button small Icon={Bookmark} text="Create a Case" />
+      </Link>
     </StyledHeader>
   );
 };