feat: UX improvements

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/pages/Cases/AttachmentDisplay/index.tsx

@@ -1,8 +1,10 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import styled from "styled-components";
 
 import { useSearchParams } from "react-router-dom";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
@@ -39,8 +41,13 @@ const StyledNewTabIcon = styled(NewTabIcon)`
 
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
-
   const url = searchParams.get("url");
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       <Header />

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { Route, Routes, useParams, Navigate } from "react-router-dom";
@@ -7,6 +7,7 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 import { VotingContextProvider } from "hooks/useVotingContext";
+import { useScrollTop } from "hooks/useScrollTop";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
@@ -43,10 +44,15 @@ const Header = styled.h1`
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
+  const scrollTop = useScrollTop();
   const dispute = data?.dispute;
   const currentPeriodIndex = (dispute ? Periods[dispute.period] : 0) as number;
   const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <VotingContextProvider>
       <Container>

web/src/pages/Cases/CasesFetcher.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 
 import { useParams, useNavigate } from "react-router-dom";
 
 import useIsDesktop from "hooks/useIsDesktop";
+import { useScrollTop } from "hooks/useScrollTop";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
@@ -47,6 +48,7 @@ const CasesFetcher: React.FC = () => {
   const location = useRootPath();
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
+  const scrollTop = useScrollTop();
   const casesPerPage = isDesktop ? 9 : 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -69,6 +71,10 @@ const CasesFetcher: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <CasesDisplay
       disputes={data?.disputes as DisputeDetailsFragment[]}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled, { css } from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -9,6 +9,8 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 import { isProductionDeployment } from "consts/index";
 import { isUndefined } from "utils/index";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
@@ -83,6 +85,7 @@ const CourtDetails: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
+  const scrollTop = useScrollTop();
 
   const courtPath = getCourtsPath(data?.court, id);
 
@@ -94,6 +97,10 @@ const CourtDetails: React.FC = () => {
     })) ?? [])
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       <StyledCard>

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -7,6 +7,8 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
 
@@ -49,6 +51,7 @@ const Dashboard: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
   const navigate = useNavigate();
+  const scrollTop = useScrollTop();
   const casesPerPage = 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -68,6 +71,10 @@ const Dashboard: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       {isConnected ? (

web/src/pages/GetPnk/index.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { isProductionDeployment } from "consts/index";
 
 import { responsiveSize } from "styles/responsiveSize";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
 
@@ -28,6 +30,12 @@ const Container = styled.div`
 `;
 
 const GetPnk: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Wrapper>
       <HeroImage />

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>
   );
 };