Merge pull request #1986 from kleros/feat/add-pages-redirection-in-homepage

feat: all cases button, few style impros

Author: alcercu

web/src/components/AllCasesButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import styled from "styled-components";
+
+import DocIcon from "svgs/icons/doc.svg";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+const StyledDocIcon = styled(DocIcon)`
+  width: 16px;
+  height: 16px;
+`;
+
+const AllCasesButton: React.FC = () => {
+  return (
+    <InternalLink to={"/cases/display/1/desc/all"}>
+      <BlueIconTextButtonContainer>
+        <StyledDocIcon />
+        <label>All Cases</label>
+      </BlueIconTextButtonContainer>
+    </InternalLink>
+  );
+};
+
+export default AllCasesButton;

web/src/components/BlueIconTextButtonContainer.tsx

@@ -9,16 +9,23 @@ export const BlueIconTextButtonContainer = styled.div`
   font-weight: 400;
   gap: 8px;
   cursor: pointer;
-  color: ${({ theme }) => theme.primaryBlue};
 
   svg path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
 
+  label {
+    margin-top: 1px;
+    color: ${({ theme }) => theme.primaryBlue};
+  }
+
   &:hover {
-    color: ${({ theme }) => theme.secondaryBlue};
     svg path {
       fill: ${({ theme }) => theme.secondaryBlue};
     }
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
   }
 `;

web/src/components/CasesDisplay/index.tsx

@@ -55,8 +55,8 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   totalPages,
 }) => {
   const location = useLocation();
-  const { isConnected, address } = useAccount();
-  const profileLink = isConnected && address ? `/profile/1/desc/all?address=${address}` : null;
+  const { isConnected } = useAccount();
+  const profileLink = isConnected ? `/profile/1/desc/all` : null;
 
   return (
     <div {...{ className }}>

web/src/components/HowItWorks.tsx

@@ -15,7 +15,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, M
     <>
       <BlueIconTextButtonContainer onClick={toggleMiniGuide}>
         <BookOpenIcon />
-        How it works
+        <label>How it works</label>
       </BlueIconTextButtonContainer>
       {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>

web/src/components/JurorsLeaderboardButton.tsx

@@ -10,7 +10,7 @@ const JurorsLeaderboardButton: React.FC = () => {
     <InternalLink to={"/jurors/1/desc/all"}>
       <BlueIconTextButtonContainer>
         <RankingIcon />
-        Jurors Leaderboard
+        <label>Jurors Leaderboard</label>
       </BlueIconTextButtonContainer>
     </InternalLink>
   );

web/src/components/LatestCases.tsx

@@ -11,6 +11,7 @@ import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
 
 import { Dispute_Filter } from "../graphql/graphql";
+import AllCasesButton from "./AllCasesButton";
 
 const Container = styled.div`
   margin-top: ${responsiveSize(28, 48)};
@@ -29,6 +30,12 @@ const DisputeContainer = styled.div`
   gap: var(--gap);
 `;
 
+const ButtonContainer = styled.div`
+  display: flex;
+  margin-top: 16px;
+  justify-content: center;
+`;
+
 const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
   const { data } = useCasesQuery(0, 3, filters);
   const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]);
@@ -41,6 +48,9 @@ const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
           ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeView key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
+      <ButtonContainer>
+        <AllCasesButton />
+      </ButtonContainer>
     </Container>
   ) : null;
 };

web/src/pages/Profile/JurorInfo/Header.tsx

@@ -46,17 +46,23 @@ const StyledXIcon = styled(XIcon)`
   fill: ${({ theme }) => theme.primaryBlue};
 `;
 
-const StyledLink = styled(ExternalLink)`
-  display: flex;
-  gap: 8px;
-`;
-
-const StyledExternalLink = styled(ExternalLink)`
+const StyledJurorExternalLink = styled(ExternalLink)`
   font-size: ${responsiveSize(18, 22)};
   margin-left: ${responsiveSize(4, 8)};
   font-weight: 600;
 `;
 
+const StyledShareExternalLink = styled(ExternalLink)`
+  display: flex;
+  gap: 6px;
+`;
+
+const StyledShareLabel = styled.label`
+  margin-top: 1px;
+  color: ${({ theme }) => theme.primaryBlue};
+  cursor: pointer;
+`;
+
 interface IHeader {
   levelTitle: string;
   levelNumber: number;
@@ -90,9 +96,9 @@ const Header: React.FC<IHeader> = ({
       <StyledTitle>
         Juror Profile -
         <Copiable copiableContent={addressToQuery} info="Copy Address">
-          <StyledExternalLink to={addressExplorerLink} target="_blank" rel="noopener noreferrer">
+          <StyledJurorExternalLink to={addressExplorerLink} target="_blank" rel="noopener noreferrer">
             {shortenAddress(addressToQuery)}
-          </StyledExternalLink>
+          </StyledJurorExternalLink>
         </Copiable>
       </StyledTitle>
       <LinksContainer>
@@ -103,9 +109,10 @@ const Header: React.FC<IHeader> = ({
           MiniGuideComponent={JurorLevels}
         />
         {totalResolvedVotes > 0 && !searchParamAddress ? (
-          <StyledLink to={xShareUrl} target="_blank" rel="noreferrer">
-            <StyledXIcon /> <span>Share your juror score</span>
-          </StyledLink>
+          <StyledShareExternalLink to={xShareUrl} target="_blank" rel="noreferrer">
+            <StyledXIcon />
+            <StyledShareLabel>Share your juror score</StyledShareLabel>
+          </StyledShareExternalLink>
         ) : null}
       </LinksContainer>
     </Container>